Mayor updates

* Change typography
* Use image plugin
* Adjust logo vertical axis
* Join `about` and `contact` sections
* Remove navigation menu from footer
* Sketch default layout for each `work` subsection (except `all`)
* Change theme color
* Re-style figure caption

layout/_base.html

@@ -33,7 +33,7 @@
 				</div>
 				<object id="logo" type="image/svg+xml" data="{{ 'svg/alucho-logo.svg' | static }}"></object>
 				<div class="vbox">
-					<div id="alucho-title" class="hbox"><h1 class="header-title"><a>Alucho Rodríguez</a></h1></div>
+					<div id="alucho-title" class="hbox"><h1 class="header-title"><a>Alejandro Rodríguez</a></h1></div>
 					<div id="designer-subtitle" class="hbox"><a>{{ 'graphic designer' | lang }}</a></div>
 				</div>
 			</div>
@@ -43,8 +43,7 @@
 							<h1 class="header-title">
 								<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 }}" class="last{% if contact_selected %} selected{% endif %}">{{ 'contact' | lang }}</a></div>
+								<div><a href="{{ '/about-and-contact' | cur_lang }}" class="last{% if contact_selected %} selected{% endif %}">{{ 'about & contact' | lang }}</a></div>
 							</h1>
 						</div>
 						<div class="hbox">
@@ -74,14 +73,6 @@
 			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">

layout/work.html

@@ -5,7 +5,7 @@
 
 {% block main %}
 {% for image in images('work/all') %}
-	<figure class="v">
+	<figure>
 		<img src="{{ image.filenames[0] | static }}" alt="Ejemplo">
 		<!-- <svg width="1px" height="1px" style="background-color: gray"></svg> -->
 		<figcaption class="hbox">

layout/work/branding.html

@@ -1,3 +1,22 @@
 {% extends "_work_no_all.html"%}
 
-{% set branding_selected = True %}
+{% set branding_selected = True %}
+
+{% block main %}
+<style>
+	:root {
+		--columns: 4;
+	}
+</style>
+{% for _ in range(12) %}
+	<figure>
+		<svg width="1px" height="1px" style="background-color: gray"></svg>
+		<figcaption class="hbox">
+			<div class="caption">
+				<h1>Work Name Here / Year</h1>
+				branding
+			</div>
+		</figcaption>
+	</figure>
+{% endfor %}
+{% endblock %}

layout/work/editorial.html

@@ -1,3 +1,17 @@
 {% extends "_work_no_all.html"%}
 
 {% set editorial_selected = True %}
+
+{% block main %}
+{% for _ in range(15) %}
+	<figure>
+		<svg width="1px" height="1.4px" style="background-color: gray"></svg>
+		<figcaption class="hbox">
+			<div class="caption">
+				<h1>Work Name Here / Year</h1>
+				editorial
+			</div>
+		</figcaption>
+	</figure>
+{% endfor %}
+{% endblock %}

layout/work/illustration.html

@@ -1,3 +1,21 @@
 {% extends "_work_no_all.html"%}
 
 {% set illustration_selected = True %}
+{% block main %}
+<style>
+	:root {
+		--columns: 3;
+	}
+</style>
+{% for _ in range(15) %}
+	<figure>
+		<svg width="1.75px" height="1px" style="background-color: gray"></svg>
+		<figcaption class="hbox">
+			<div class="caption">
+				<h1>Work Name Here / Year</h1>
+				illustration
+			</div>
+		</figcaption>
+	</figure>
+{% endfor %}
+{% endblock %}

layout/work/other.html

@@ -1,3 +1,17 @@
 {% extends "_work_no_all.html"%}
 
 {% set other_selected = True %}
+
+{% block main %}
+{% for _ in range(15) %}
+	<figure>
+		<svg width="1px" height="1px" style="background-color: gray"></svg>
+		<figcaption class="hbox">
+			<div class="caption">
+				<h1>Work Name Here / Year</h1>
+				other
+			</div>
+		</figcaption>
+	</figure>
+{% endfor %}
+{% endblock %}

layout/work/poster.html

@@ -3,14 +3,13 @@
 {% set poster_selected = True %}
 
 {% block main %}
-{% for image in images('work/poster') %}
-	<figure class="v">
-		<img src="{{ 'image/tile.jpg' | static }}" alt="Ejemplo">
-		<!-- <svg width="1px" height="1px" style="background-color: gray"></svg> -->
+{% for _ in range(15) %}
+	<figure>
+		<svg width="1px" height="1.4px" style="background-color: gray"></svg>
 		<figcaption class="hbox">
 			<div class="caption">
-				<h1>{{ image.name }} / {{ image.year }}</h1>
-				{{ image.category }}
+				<h1>Work Name Here / Year</h1>
+				poster
 			</div>
 		</figcaption>
 	</figure>

static/css/main.css

@@ -1,10 +1,10 @@
 /* Variables */
 :root {
-	--preferred-columns: 5;
-	--columns: var(--preferred-columns);
 	--tile-margin: .9vw;
+	--caption-hmargin: calc(2 * var(--tile-margin));
+	--caption-vmargin: calc(1 * var(--tile-margin));
 	--body-margin: 3.6vw;
-	--theme-color: #ff2d00;
+	--theme-color: #46c8a5;
 	/* --tile-margin: 12.75px; */
 	/* --body-margin: 66px; */
 	--header-inner-space: calc(8 * var(--tile-margin));
@@ -12,25 +12,22 @@
 }
 /* Columns */
 @media (min-width: 1501px) {
-	:root { --columns: min(var(--preferred-columns), 6); }
+	:root { --columns: 5; }
 }
 @media (max-width: 1500px) {
-	:root { --columns: min(var(--preferred-columns), 5); }
-}
-@media (max-width: 1500px) {
-	:root { --columns: min(var(--preferred-columns), 5); }
+	:root { --columns: 5; }
 }
 @media (max-width: 1000px) {
-	:root { --columns: min(var(--preferred-columns), 4); }
+	:root { --columns: 4; }
 }
 @media (max-width: 700px) {
-	:root { --columns: min(var(--preferred-columns), 3); }
+	:root { --columns: 3; }
 }
 @media (max-width: 500px) {
-	:root { --columns: min(var(--preferred-columns), 2); }
+	:root { --columns: 2; }
 }
 @media (max-width: 400px) {
-	:root { --columns: min(var(--preferred-columns), 1); }
+	:root { --columns: 2; }
 }
 /* Font Size */
 :root {
@@ -65,28 +62,28 @@ h1 {
 }
 #logo {
 	width: 10vw;
-	margin: 0 .7vw -.5vw .5vw;
+	margin: 0 .7vw -.9vw .5vw;
 }
 /* @media (max-width: 460px) {
 	#logo { width: 130px; }
 } */
 /* Typographies */
 @font-face {
-	font-family: 'nexa-light';
-	src: url('/static/font/nexa-light-regular.otf') format('opentype');
+	font-family: 'akrobat-regular';
+	src: url('/static/font/Akrobat-Regular.otf') format('opentype');
 }
 @font-face {
-	font-family: 'geoslab';
-	src: url('/static/font/geoslab703-md-bt-bold.ttf') format('truetype');
+	font-family: 'akrobat-bold';
+	src: url('/static/font/Akrobat-Bold.otf') format('opentype');
 }
 /* Rules */
 :root {
-	font-family: 'nexa-light';
+	font-family: 'akrobat-regular';
 	letter-spacing: 1.5px;
 }
 .sec-div {
 	font-weight: bold;
-	font-family: 'nexa-light';
+	font-family: 'akrobat-regular';
 }
 a {
 	color: black;
@@ -97,17 +94,18 @@ a.en {
 	margin-bottom: .5em;
 }
 h1 {
-	margin: .5em 0;
+	font-size: 1.1em;
 	text-align: center;
 	letter-spacing: 1px;
 	font-weight: 100;
-	font-family: 'geoslab';
+	font-family: 'akrobat-bold';
 	text-decoration: none;
 	text-transform: uppercase;
+	margin: .2em 0;
 }
 h2 {
 	font-size: .9em;
-	font-family: 'geoslab';
+	font-family: 'akrobat-bold';
 	text-decoration: none;
 	text-transform: uppercase;
 }
@@ -249,31 +247,36 @@ figure {
 	margin: var(--tile-margin);
 	overflow: hidden;
 }
-figure img {
+figure img, svg {
 	display: flex;
 	width: 100%;
+	height: 100%;
 }
 figure figcaption {
+	font-size: 0;
+	padding: 0 var(--caption-hmargin);
 	display: flex;
 	flex-direction: column;
 	position: absolute;
-	padding: calc(2 * var(--tile-margin));
-	background-color: var(--theme-color);
+	background-color: white;
 	bottom: 0;
-	width: calc(100% - var(--tile-margin) * 4);
-	opacity: 0;
+	width: calc(100% - 2 * var(--caption-hmargin));
+	opacity: 1;
 	height: 0;
 }
 figure:hover figcaption {
-	opacity: 1;
+	font-size: .9em;
+	padding: var(--caption-vmargin) var(--caption-hmargin);
 	transition: .3s ease;
+	height: auto;
 }
-figure.v:hover figcaption {
-	height: 21%;
+figcaption h1 {
+	margin: 0;
 }
-figure.h:hover figcaption,
-figure.s:hover figcaption {
-	height: 30%;
+.caption {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
 }
 footer {
 	display: flex;