Realign side margins and set footer layout

layout/_base.html

@@ -36,7 +36,7 @@
 								<div><a href="{{ '/work' | cur_lang }}" {% if work_selected %}class="selected"{% endif %}>{{ 'work' | lang }}</a></div> /
 								<div><a href="{{ '/news' | cur_lang }}" {% if news_selected %}class="selected"{% endif %}>{{ 'news' | lang }}</a></div> /
 								<div><a href="{{ '/about' | cur_lang }}" {% if about_selected %}class="selected"{% endif %}>{{ 'about' | lang }}</a></div> /
-								<div><a href="{{ '/contact' | cur_lang }}" {% if contact_selected %}class="selected"{% endif %}>{{ 'contact' | lang }}</a></div>
+								<div><a href="{{ '/contact' | cur_lang }}" class="last{% if contact_selected %} selected{% endif %}">{{ 'contact' | lang }}</a></div>
 							</h1>
 						</div>
 						<div class="hbox">
@@ -46,7 +46,7 @@
 								<div><a href="{{ '/work/illustration' | cur_lang }}" {% if illustration_selected %}class="selected"{% endif %}>{{ 'illustration' | lang }}</a></div> /
 								<div><a href="{{ '/work/editorial' | cur_lang }}" {% if editorial_selected %}class="selected"{% endif %}>{{ 'editorial' | lang }}</a></div> /
 								<div><a href="{{ '/work/branding' | cur_lang }}" {% if branding_selected %}class="selected"{% endif %}>{{ 'branding' | lang }}</a></div> /
-								<div><a href="{{ '/work/other' | cur_lang }}" {% if other_selected %}class="selected"{% endif %}>{{ 'other' | lang }}</a></div>
+								<div><a href="{{ '/work/other' | cur_lang }}" class="last{% if other_selected %} selected{% endif %}">{{ 'other' | lang }}</a></div>
 							</div>
 						</div>
 					</div>
@@ -58,9 +58,22 @@
 		{% endblock %}
 	</main>
 	<footer>
-		<h3>
-			copyright / <a href="/">www.alucho.com</a> / 2019 / <a href="/contact">{{ 'contact' | lang }}</a>
-		</h3>
+		<div class="copyright">
+			<a class=>copyright</a> / <a href="/">www.alucho.com</a> / <a>2019</a> / <a href="/contact">{{ 'contact' | lang }}</a>
+		</div>
+		<div class="hbox">
+			Fb
+			Tw
+			In
+		</div>
+		<div class="hbox">
+			<h2 class="header-title">
+				<div><a href="{{ '/work' | cur_lang }}">{{ 'work' | lang }}</a></div> /
+				<div><a href="{{ '/news' | cur_lang }}">{{ 'news' | lang }}</a></div> /
+				<div><a href="{{ '/about' | cur_lang }}">{{ 'about' | lang }}</a></div> /
+				<div><a href="{{ '/contact' | cur_lang }}" class="last">{{ 'contact' | lang }}</a></div>
+			</h2>
+		</div>
 	</footer>
 
 	<form name="setLangEnglish" action="/i18n/setlang/" method="POST">
@@ -75,6 +88,5 @@
 		<input type="hidden" name="language" value="es"/>
 	</form>
 
-	<script src="{{ 'js/eye.js' | static }}"></script>
 </body>
 </html>

static/css/main.css

@@ -240,6 +240,7 @@ figure {
 	display: flex;
 	width: calc(100% / var(--columns) - 2 * var(--tile-margin));
 	margin: var(--tile-margin);
+	overflow: hidden;
 }
 figure img {
 	display: flex;
@@ -266,4 +267,24 @@ figure.v:hover figcaption {
 figure.h:hover figcaption,
 figure.s:hover figcaption {
 	height: 30%;
+}
+footer {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	margin: 0 var(--tile-margin) calc(2*var(--tile-margin)) var(--tile-margin);
+/* } */
+/* footer { */
+	font-size: .7em;
+	font-weight: 900;
+}
+footer .copyright {
+	align-items: center;
+}
+footer a.first {
+	margin-left: 0;
+}
+footer a.last {
+	margin-right: 0;
 }