Home Explore Help
Register Sign In
marx
/
alucho
1
0
Fork 0

6 Commits 0385d2de51 ... bb40909c5b

Author SHA1 Message Date
  Danilo Gómez Gómez bb40909c5b Fix minor errors in the writing of the bio 4 years ago
  Danilo Gómez Gómez 66c8698c4c Use postcss 4 years ago
  Danilo Gómez Gómez a8f85d1742 Major code reformat 4 years ago
  Danilo Gómez Gómez 260bd12d97 Use native lazy-loading in images 4 years ago
  Danilo Gómez Gómez 196cc2f659 Remove block `style` from templates 4 years ago
  Danilo Gómez Gómez 7f16a725a4 Populate About & Contact 4 years ago
20 changed files with 547 additions and 263 deletions
Unified View Show Diff Stats
  1. 16 4
      deploy.sh
  2. 66 36
      layout/_base.html
  3. 151 10
      layout/about-and-contact.html
  4. 1 1
      layout/index.html
  5. 10 10
      layout/news.html
  6. 13 15
      layout/work.html
  7. 1 1
      layout/work/all.html
  8. 6 4
      layout/work/branding.html
  9. 1 1
      layout/work/editorial.html
  10. 6 4
      layout/work/illustration.html
  11. 1 1
      layout/work/other.html
  12. 1 1
      layout/work/poster.html
  13. 6 3
      plugins/alucho_images.py
  14. 3 3
      root/browserconfig.xml
  15. 1 1
      root/site.webmanifest
  16. 22 5
      sitegen.py
  17. 73 73
      static/css/hamburger.css
  18. 16 9
      static/css/image-modal.css
  19. 153 81
      static/css/main.css
  20. BIN
      static/image/about-and-contact/banner.jpg

+ 16 - 4
deploy.sh
View File 

@@ -1,5 +1,17 @@
 
 #!/bin/bash
 
 #!/bin/bash
 
-python3 sitegen.py || { echo 'fail_generating_the_site'; exit 1; }
 
-sudo rm -r /var/www/alucho || { echo 'fail_deleting_target_folder'; exit 2; }
 
-sudo cp -r build /var/www/alucho || { echo 'fail_copying_site'; exit 3; }
 
-sudo service caddy restart || { echo 'fail_restarting_caddy'; exit 4; }
 
+python3 sitegen.py || {
 
+    echo 'fail_generating_the_site'
 
+    exit 1
 
+}
 
+sudo rm -r /var/www/alucho || {
 
+    echo 'fail_deleting_target_folder'
 
+    exit 2
 
+}
 
+sudo cp -r build /var/www/alucho || {
 
+    echo 'fail_copying_site'
 
+    exit 3
 
+}
 
+sudo service caddy restart || {
 
+    echo 'fail_restarting_caddy'
 
+    exit 4
 
+}

+ 66 - 36
layout/_base.html
View File 

@@ -1,12 +1,13 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
+
 
 <head>
 
 <head>
 
 	<title>{{ 'Alucho Portfolio' | lang }}</title>
 
 	<title>{{ 'Alucho Portfolio' | lang }}</title>
 
 	<!-- Global site tag (gtag.js) - Google Analytics -->
 
 	<!-- Global site tag (gtag.js) - Google Analytics -->
 
 	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-148161067-1"></script>
 
 	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-148161067-1"></script>
 
 	<script>
 
 	<script>
 
 		window.dataLayer = window.dataLayer || [];
 
 		window.dataLayer = window.dataLayer || [];
 
-		function gtag(){dataLayer.push(arguments);}
 
+		function gtag() { dataLayer.push(arguments); }
 
 		gtag('js', new Date());
 
 		gtag('js', new Date());
 
 		gtag('config', 'UA-148161067-1');
 
 		gtag('config', 'UA-148161067-1');
 
 	</script>
 
 	</script>
 
@@ -25,6 +26,7 @@
 
 	<meta name="theme-color" content="#ffffff">
 
 	<meta name="theme-color" content="#ffffff">
 
 	<script src="{{ 'js/eye.js' | static }}"></script>
 
 	<script src="{{ 'js/eye.js' | static }}"></script>
 
 </head>
 
 </head>
 
+
 
 <body id="body">
 
 <body id="body">
 
 	<header id="mobile-header">
 
 	<header id="mobile-header">
 
 		<input id="toggle" type="checkbox">
 
 		<input id="toggle" type="checkbox">
 
@@ -33,17 +35,30 @@
 
 		</label>
 
 		</label>
 
 		<nav class="nav">
 
 		<nav class="nav">
 
 			<div class="itemize">
 
 			<div class="itemize">
 
-				<a class="nav-item" href="{{ '/work' | cur_lang }}" {% if work_selected %}class="selected"{% endif %}><h1>{{ 'work' | lang }}</h1></a>
 
+				<a class="nav-item" href="{{ '/work' | cur_lang }}" {% if work_selected %}class="selected" {% endif %}>
 
+					<h1>{{ 'work' | lang }}</h1>
 
+				</a>
 
 				<div class="itemize">
 
 				<div class="itemize">
 
-					<a class="nav-subitem" href="{{ '/work/all' | cur_lang }}" {% if all_selected %}class="selected"{% endif %}>{{ 'all' | lang }}</a>
 
-					<a class="nav-subitem" href="{{ '/work/poster' | cur_lang }}" {% if poster_selected %}class="selected"{% endif %}>{{ 'poster' | lang }}</a>
 
-					<a class="nav-subitem" href="{{ '/work/illustration' | cur_lang }}" {% if illustration_selected %}class="selected"{% endif %}>{{ 'illustration' | lang }}</a>
 
-					<a class="nav-subitem" href="{{ '/work/editorial' | cur_lang }}" {% if editorial_selected %}class="selected"{% endif %}>{{ 'editorial' | lang }}</a>
 
-					<a class="nav-subitem" href="{{ '/work/branding' | cur_lang }}" {% if branding_selected %}class="selected"{% endif %}>{{ 'branding' | lang }}</a>
 
-					<a class="nav-subitem" href="{{ '/work/other' | cur_lang }}" class="last{% if other_selected %} selected{% endif %}">{{ 'other' | lang }}</a>
 
+					<a class="nav-subitem" href="{{ '/work/all' | cur_lang }}" {% if all_selected %}class="selected"
 
+						{% endif %}>{{ 'all' | lang }}</a>
 
+					<a class="nav-subitem" href="{{ '/work/poster' | cur_lang }}"
 
+						{% if poster_selected %}class="selected" {% endif %}>{{ 'poster' | lang }}</a>
 
+					<a class="nav-subitem" href="{{ '/work/illustration' | cur_lang }}"
 
+						{% if illustration_selected %}class="selected" {% endif %}>{{ 'illustration' | lang }}</a>
 
+					<a class="nav-subitem" href="{{ '/work/editorial' | cur_lang }}"
 
+						{% if editorial_selected %}class="selected" {% endif %}>{{ 'editorial' | lang }}</a>
 
+					<a class="nav-subitem" href="{{ '/work/branding' | cur_lang }}"
 
+						{% if branding_selected %}class="selected" {% endif %}>{{ 'branding' | lang }}</a>
 
+					<a class="nav-subitem" href="{{ '/work/other' | cur_lang }}"
 
+						class="last{% if other_selected %} selected{% endif %}">{{ 'other' | lang }}</a>
 
 				</div>
 
 				</div>
 
-				<a class="nav-item" href="{{ '/news' | cur_lang }}" {% if news_selected %}class="selected"{% endif %}><h1>{{ 'news' | lang }}</h1></a>
 
-				<a class="nav-item" href="{{ '/about-and-contact' | cur_lang }}" class="last{% if about_selected %} selected{% endif %}"><h1>{{ 'about & contact' | lang }}</h1></a>
 
+				<a class="nav-item" href="{{ '/news' | cur_lang }}" {% if news_selected %}class="selected" {% endif %}>
 
+					<h1>{{ 'news' | lang }}</h1>
 
+				</a>
 
+				<a class="nav-item" href="{{ '/about-and-contact' | cur_lang }}"
 
+					class="last{% if about_selected %} selected{% endif %}">
 
+					<h1>{{ 'about & contact' | lang }}</h1>
 
+				</a>
 
 			</div>
 
 			</div>
 
 		</nav>
 
 		</nav>
 
 	</header>
 
 	</header>
 
@@ -51,43 +66,56 @@
 
 		<div class="header-box">
 
 		<div class="header-box">
 
 			<div class="lbox">
 
 			<div class="lbox">
 
 				<div id="lang-chooser" class="vbox">
 
 				<div id="lang-chooser" class="vbox">
 
-					<a class="first en {% if lang == 'en' %}selected{% endif %}" hreflang="en" href="{{ 'en' | lang_url }}">en</a>
 
-					<a class="first {% if lang == 'es' %}selected{% endif %}" hreflang="es" href="{{ 'es' | lang_url }}">es</a>
 
+					<a class="first en {% if lang == 'en' %}selected{% endif %}" hreflang="en"
 
+						href="{{ 'en' | lang_url }}">en</a>
 
+					<a class="first {% if lang == 'es' %}selected{% endif %}" hreflang="es"
 
+						href="{{ 'es' | lang_url }}">es</a>
 
 				</div>
 
 				</div>
 
 				<div id="logo">{{ 'alucho-logo' | svg }}</div>
 
 				<div id="logo">{{ 'alucho-logo' | svg }}</div>
 
 				<div class="vbox">
 
 				<div class="vbox">
 
-					<div id="alucho-title" class="hbox"><h1 class="header-title"><a>Alejandro 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 id="designer-subtitle" class="hbox"><a>{{ 'graphic designer' | lang }}</a></div>
 
 				</div>
 
 				</div>
 
 			</div>
 
 			</div>
 
 			<nav class="rbox">
 
 			<nav class="rbox">
 
-					<div class="vbox">
 
-						<div class="hbox">
 
-							<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-and-contact' | cur_lang }}" class="last{% if about_selected %} selected{% endif %}">{{ 'about & contact' | lang }}</a></div>
 
-							</h1>
 
-						</div>
 
-						<div class="hbox">
 
-							<div class="header-subtitle">
 
-								<div><a href="{{ '/work/all' | cur_lang }}" {% if all_selected %}class="selected"{% endif %}>{{ 'all' | lang }}</a></div> /
 
-								<div><a href="{{ '/work/poster' | cur_lang }}" {% if poster_selected %}class="selected"{% endif %}>{{ 'poster' | lang }}</a></div> /
 
-								<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 }}" class="last{% if other_selected %} selected{% endif %}">{{ 'other' | lang }}</a></div>
 
+				<div class="vbox">
 
+					<div class="hbox">
 
+						<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-and-contact' | cur_lang }}"
 
+									class="last{% if about_selected %} selected{% endif %}">{{ 'about & contact' | lang }}</a>
 
+							</div>
 
+						</h1>
 
+					</div>
 
+					<div class="hbox">
 
+						<div class="header-subtitle">
 
+							<div><a href="{{ '/work/all' | cur_lang }}" {% if all_selected %}class="selected"
 
+									{% endif %}>{{ 'all' | lang }}</a></div> /
 
+							<div><a href="{{ '/work/poster' | cur_lang }}" {% if poster_selected %}class="selected"
 
+									{% endif %}>{{ 'poster' | lang }}</a></div> /
 
+							<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 }}"
 
+									class="last{% if other_selected %} selected{% endif %}">{{ 'other' | lang }}</a>
 
 							</div>
 
 							</div>
 
 						</div>
 
 						</div>
 
 					</div>
 
 					</div>
 
+				</div>
 
 			</nav>
 
 			</nav>
 
 		</div>
 
 		</div>
 
 	</header>
 
 	</header>
 
 	<main class="main-layout">
 
 	<main class="main-layout">
 
-		<style>
 
-		{% block style %}
 
-		{% endblock %}
 
-		</style>
 
 		{% block main %}
 
 		{% block main %}
 
 		{% endblock %}
 
 		{% endblock %}
 
 	</main>
 
 	</main>
 
@@ -98,7 +126,8 @@
 
 			</div>
 
 			</div>
 
 			<div class="hbox social">
 
 			<div class="hbox social">
 
 				<a href="https://www.facebook.com/aluchocartel/">{{ 'facebook' | svg }}</a>
 
 				<a href="https://www.facebook.com/aluchocartel/">{{ 'facebook' | svg }}</a>
 
-				<a href="https://www.linkedin.com/in/alejandro-rodr%C3%ADguez-forn%C3%A9s-alucho-541700122/">{{ 'linkedin' | svg }}</a>
 
+				<a
 
+					href="https://www.linkedin.com/in/alejandro-rodr%C3%ADguez-forn%C3%A9s-alucho-541700122/">{{ 'linkedin' | svg }}</a>
 
 			</div>
 
 			</div>
 
 		</div>
 
 		</div>
 
 	</footer>
 
 	</footer>
 
@@ -108,7 +137,7 @@
 
 				<div id="img-prev">{{ 'prev' | svg }}</div>
 
 				<div id="img-prev">{{ 'prev' | svg }}</div>
 
 				<div class="vbox">
 
 				<div class="vbox">
 
 					<div id="close-modal">{{ 'close' | svg }}</div>
 
 					<div id="close-modal">{{ 'close' | svg }}</div>
 
-					<img id="modal-image" alt="no image">
 
+					<img id="modal-image" loading="lazy" alt="no image">
 
 				</div>
 
 				</div>
 
 				<div id="img-next">{{ 'next' | svg }}</div>
 
 				<div id="img-next">{{ 'next' | svg }}</div>
 
 			</div>
 
 			</div>
 
@@ -118,4 +147,5 @@
 
 	<script src="{{ 'js/image-modal.js' | static }}"></script>
 
 	<script src="{{ 'js/image-modal.js' | static }}"></script>
 
 	<link rel="stylesheet" href="{{ 'css/image-modal.css' | static }}">
 
 	<link rel="stylesheet" href="{{ 'css/image-modal.css' | static }}">
 
 </body>
 
 </body>
 
-</html>
 
+
 
+</html>

+ 151 - 10
layout/about-and-contact.html
View File 

@@ -4,14 +4,155 @@
 
 
 
 {% block main %}
 
 {% block main %}
 
 <style>
 
 <style>
 
-	:root {
 
-		--columns: 1;
 
+	figure.banner {
 
+		margin: 0;
 
+		width: 100%;
 
+		height: 60vh;
 
 	}
 
 	}
 
-	</style>
 
-<figure>
 
-<svg width="3px" height="1px" style="background-color: gray"></svg>
 
-</figure>
 
-<address>
 
-<!-- contact information HERE -->
 
-</address>
 
-{% endblock %}
 
+
 
+	#img-banner {
 
+		width: auto;
 
+		height: 100%;
 
+		-o-object-fit: cover;
 
+		object-fit: cover;
 
+	}
 
+
 
+	section {
 
+		margin: var(--tile-margin);
 
+		line-height: 130%;
 
+		text-align: justify;
 
+	}
 
+
 
+	ul {
 
+		margin: 0;
 
+		list-style-type: "- ";
 
+		padding-left: 10px;
 
+	}
 
+
 
+	.half-width {
 
+		width: 50%;
 
+	}
 
+
 
+	.top {
 
+		display: -webkit-box;
 
+		display: flex;
 
+		-webkit-box-orient: horizontal;
 
+		-webkit-box-direction: normal;
 
+		flex-direction: row;
 
+		-webkit-box-align: start;
 
+		align-items: flex-start;
 
+	}
 
+
 
+	address {
 
+		font-style: inherit;
 
+	}
 
+</style>
 
+<div class="vbox">
 
+	<section>
 
+		<figure class="banner">
 
+			<img id="img-banner" src="/static/image/about-and-contact/banner.jpg" class="tile"
 
+				alt="Alucho Rodríguez Photo" loading="eager">
 
+		</figure>
 
+	</section>
 
+	<div class="hbox top">
 
+		<div class="vbox half-width">
 
+			<section>
 
+				<address>RODRÍGUEZ FORNÉS (Alucho), La Habana, Cuba, 1984.</address>
 
+				Graduado del Instituto Superior de Diseño de La Habana en 2008, ha trabajado como
 
+				diseñador gráfico en diversas instituciones culturales como la Casa de las Américas, las
 
+				revistas Unión y La Jiribilla, las editoriales Gente Nueva y Abril, el Instituto Cubano del Arte
 
+				e Industria Cinematográficos, la Escuela Internacional de Cine y Televisión de San Antonio
 
+				de los Baños y el Lincoln Center de Nueva York. Sus carteles han sido seleccionados en
 
+				bienales internacionales de Eslovaquia, Bolivia, China, Polonia, España, México, Ecuador,
 
+				Turquía y Rusia, y formado parte de más de 50 exposiciones colectivas dentro y fuera de
 
+				Cuba. Algunos de estos pertenecen a la Special Collections Research Center de William &amp;
 
+				Mary libraries, en Williamsburg, Virginia, donde recientemente tuvo su primera exposición
 
+				personal. Es miembro de la Unión de Escritores y Artistas de Cuba y de la Asociación
 
+				Cubana de Comunicadores Sociales.
 
+			</section>
 
+			<section>
 
+				EXPOSICIONES PERSONALES
 
+				<ul>
 
+					<li>
 
+						Luz verde, serigrafías para diversos eventos culturales exhibidas en La casa de la bombilla
 
+						verde entre los meses de octubre y diciembre de 2019.
 
+					</li>
 
+					<li>
 
+						Corte final, compendio de carteles cinematográficos presentados en la 18va. Muestra
 
+						Joven, abril de 2019.
 
+					</li>
 
+					<li>
 
+						Carteles de Alucho, muestra personal presentada en la Earl Gregg Swem Library del
 
+						College of William &amp; Mary, en Williamsburg, Virginia, Estados Unidos, febrero de 2018.
 
+					</li>
 
+				</ul>
 
+			</section>
 
+			<section>
 
+				EXPOSICIONES COLECTIVAS<br>
 
+				Participación en más de 50 exposiciones colectivas, destacando las Bienales
 
+				Internacionales del Cartel de México (2012 y 2014), Bolivia (2013, 2015 y 2017), Turquía
 
+				(2014), Ecuador (2016 y 2018) y Rusia (2016 y 2018); la Bienal Iberoamericana de Diseño
 
+				de Madrid (2016 y 2018), los festivales de cine de La Habana (2016, 2017, 2018 y 2019) y
 
+				Ámsterdam (2015), y la Bienal de Artes Plásticas de La Habana (2015 y 2019).
 
+			</section>
 
+		</div>
 
+		<div class="vbox half-width">
 
+			<section>
 
+				PREMIOS Y RECONOCIMIENTOS
 
+				<ul>
 
+					<li>
 
+						Mención de honor en la 4ta. Bienal Internacional del Cartel de Lublin, Polonia, mayo de
 
+						2019.
 
+					</li>
 
+					<li>
 
+						Primer lugar en el concurso de carteles convocado por la UNICEF en Cuba por los 25 años
 
+						de la entrada en vigor de la Convención sobre los Derechos del Niño, junio de 2016.
 
+					</li>
 
+					<li>
 
+						Medalla de bronce en la 13ra. Bienal Internacional del Cartel de México, octubre de 2014.
 
+					</li>
 
+					<li>
 
+						Tercer lugar en el concurso de carteles convocado por el Instituto de Literatura y
 
+						Lingüística con motivo del bicentenario del nacimiento de la escritora Gertrudis Gómez de
 
+						Avellaneda, enero de 2014.
 
+					</li>
 
+					<li>
 
+						Primer lugar en el concurso de carteles convocado por el Centro Nacional de Educación
 
+						Ambiental para desarrollar la campaña por el Día Mundial del Medio Ambiente, abril de
 
+						2011.
 
+					</li>
 
+					<li>
 
+						Primer lugar en el concurso de carteles convocado por la Revista de Cultura Cubana La
 
+						Jiribilla en su décimo aniversario, obra Resistencia, febrero de 2011.
 
+					</li>
 
+				</ul>
 
+			</section>
 
+			<section>
 
+				TALLERES Y CHARLAS
 
+				<ul>
 
+					<li>
 
+						Monstruos, taller recibido en la 4ta. Bienal Internacional del Cartel de Bolivia, impartido
 
+						por el diseñador y cartelista francés Alain Le Quernec, noviembre de 2015.
 
+					</li>
 
+					<li>
 
+						Cine documental, curso de posgrado recibido en la Facultad de Arte y Medios de
 
+						Comunicación Audiovisuales, febrero de 2011.
 
+					</li>
 
+					<li>
 
+						Charla sobre la historia y vigencia del cartel cubano impartida en la Universidad
 
+						Politécnica de Virginia, Estados Unidos, febrero de 2018.
 
+					</li>
 
+					<li>
 
+						Ponencia impartida en el Simposio Académico de Diseño durante la 4ta. Bienal
 
+						Internacional del Cartel de Bolivia, noviembre de 2017.
 
+					</li>
 
+					<li>
 
+						Con ojos de ilustrador, taller impartido en la Casa de las Tejas Verdes como parte de las
 
+						actividades del evento Rutas y Andares, agosto de 2012.
 
+					</li>
 
+				</ul>
 
+			</section>
 
+		</div>
 
+	</div>
 
+</div>
 
+{% endblock %}

+ 1 - 1
layout/index.html
View File 

@@ -1 +1 @@
 
-{% extends "work.html"%}
 
+{% extends "work.html"%}

+ 10 - 10
layout/news.html
View File 

@@ -9,14 +9,14 @@
 
 	}
 
 	}
 
 </style>
 
 </style>
 
 {% for _ in range(15) %}
 
 {% for _ in range(15) %}
 
-	<figure>
 
-		<svg width="16px" height="9px" style="background-color: gray"></svg>
 
-		<figcaption class="hbox">
 
-			<div class="caption">
 
-				<h1>News Title Here / Date</h1>
 
-				news
 
-			</div>
 
-		</figcaption>
 
-	</figure>
 
+<figure>
 
+	<svg width="16px" height="9px" style="background-color: gray"></svg>
 
+	<figcaption class="hbox">
 
+		<div class="caption">
 
+			<h1>News Title Here / Date</h1>
 
+			news
 
+		</div>
 
+	</figcaption>
 
+</figure>
 
 {% endfor %}
 
 {% endfor %}
 
-{% endblock %}
 
+{% endblock %}

+ 13 - 15
layout/work.html
View File 

@@ -7,24 +7,22 @@
 
 {% set sort_images = True %}
 
 {% set sort_images = True %}
 
 {% set expand_dialog = True %}
 
 {% set expand_dialog = True %}
 
 
 
-{% block style %}
 
-{% endblock %}
 
-
 
 {% block main %}
 
 {% block main %}
 
 {% for image in (sorted(images(path), reverse=True) if sort_images else images(path)) %}
 
 {% for image in (sorted(images(path), reverse=True) if sort_images else images(path)) %}
 
-	<figure class="{{ 'clickable-fig' if expand_dialog else ''}}">
 
-		<img class="tile" src="{{ (image.main or image.filenames[0]) | static }}" alt="{{ image.category }}: {{ image.name }} ({{ image.year }})">
 
-		<figcaption class="hbox">
 
-			<div class="caption">
 
-				<h1>{{ image.name }} / <time>{{ image.year }}</time></h1>
 
-				{{ image.category | lang }}
 
-			</div>
 
-		</figcaption>
 
-		<datalist>
 
+<figure class="{{ 'clickable-fig' if expand_dialog else ''}}">
 
+	<img class="tile" src="{{ (image.main or image.filenames[0]) | static }}" loading="lazy"
 
+		alt="{{ image.category }}: {{ image.name }} ({{ image.year }})">
 
+	<figcaption class="hbox">
 
+		<div class="caption">
 
+			<h1>{{ image.name }} / <time>{{ image.year }}</time></h1>
 
+			{{ image.category | lang }}
 
+		</div>
 
+	</figcaption>
 
+	<datalist>
 
 		{% for variant in image.filenames %}
 
 		{% for variant in image.filenames %}
 
-			<option value="{{ variant | static }}" label="{{ image.category }}: {{ image.name }} ({{ image.year }})"/>
 
+		<option value="{{ variant | static }}" label="{{ image.category }}: {{ image.name }} ({{ image.year }})" />
 
 		{% endfor %}
 
 		{% endfor %}
 
-		</datalist>
 
-	</figure>
 
+	</datalist>
 
+</figure>
 
 {% endfor %}
 
 {% endfor %}
 
 {% endblock %}
 
 {% endblock %}

+ 1 - 1
layout/work/all.html
View File 

@@ -1 +1 @@
 
-{% extends "work.html" %}
 
+{% extends "work.html" %}

+ 6 - 4
layout/work/branding.html
View File 

@@ -5,8 +5,10 @@
 
 {% set expand_dialog = True %}
 
 {% set expand_dialog = True %}
 
 {% set sort_images = True %}
 
 {% set sort_images = True %}
 
 
 
-{% block style %}
 
-:root {
 
-	--columns: 4;
 
-}
 
+{% block main %}
 
+<style>
 
+    :root {
 
+        --columns: 4;
 
+    }
 
+</style>
 
 {% endblock %}
 
 {% endblock %}

+ 1 - 1
layout/work/editorial.html
View File 

@@ -3,4 +3,4 @@
 
 {% set editorial_selected = True %}
 
 {% set editorial_selected = True %}
 
 {% set work_path = "editorial" %}
 
 {% set work_path = "editorial" %}
 
 {% set expand_dialog = True %}
 
 {% set expand_dialog = True %}
 
-{% set sort_images = True %}
 
+{% set sort_images = True %}

+ 6 - 4
layout/work/illustration.html
View File 

@@ -4,8 +4,10 @@
 
 {% set work_path = "illustration" %}
 
 {% set work_path = "illustration" %}
 
 {% set sort_images = True %}
 
 {% set sort_images = True %}
 
 
 
-{% block style %}
 
-:root {
 
-	--columns: 3;
 
-}
 
+{% block main %}
 
+<style>
 
+	:root {
 
+		--columns: 3;
 
+	}
 
+</style>
 
 {% endblock %}
 
 {% endblock %}

+ 1 - 1
layout/work/other.html
View File 

@@ -3,4 +3,4 @@
 
 {% set editorial_selected = True %}
 
 {% set editorial_selected = True %}
 
 {% set work_path = "other" %}
 
 {% set work_path = "other" %}
 
 {% set expand_dialog = True %}
 
 {% set expand_dialog = True %}
 
-{% set sort_images = True %}
 
+{% set sort_images = True %}

+ 1 - 1
layout/work/poster.html
View File 

@@ -3,4 +3,4 @@
 
 {% set poster_selected = True %}
 
 {% set poster_selected = True %}
 
 {% set work_path = "poster" %}
 
 {% set work_path = "poster" %}
 
 {% set expand_dialog = True %}
 
 {% set expand_dialog = True %}
 
-{% set sort_images = True %}
 
+{% set sort_images = True %}

+ 6 - 3
plugins/alucho_images.py
View File 

@@ -30,13 +30,15 @@ Along with the image files which should be called
 
 
 
 '''
 
 '''
 
 
 
-IMAGE_PATH = 'image' # relative to the static path
 
+IMAGE_PATH = 'image'  # relative to the static path
 
 STATIC = ''
 
 STATIC = ''
 
 
 
-Image = namedtuple('Image', ['key', 'name', 'year', 'category', 'description', 'main', 'filenames'])
 
+Image = namedtuple('Image', ['key', 'name', 'year',
 
+                             'category', 'description', 'main', 'filenames'])
 
 
 
 # Functions
 
 # Functions
 
 
 
+
 
 def images(section):
 
 def images(section):
 
     sec_path = Path(STATIC, IMAGE_PATH, section)
 
     sec_path = Path(STATIC, IMAGE_PATH, section)
 
     for path in sec_path.iterdir():
 
     for path in sec_path.iterdir():
 
@@ -55,7 +57,8 @@ def images(section):
 
                 metadata.get('year'),
 
                 metadata.get('year'),
 
                 metadata.get('category'),
 
                 metadata.get('category'),
 
                 metadata.get('description'),
 
                 metadata.get('description'),
 
-                img_base.joinpath(normalize('NFC', metadata.get('main'))) if 'main' in metadata else None,
 
+                img_base.joinpath(normalize('NFC', metadata.get(
 
+                    'main'))) if 'main' in metadata else None,
 
                 [img_base.joinpath(normalize('NFC', img_name)) for img_name in metadata.get('images', [])])
 
                 [img_base.joinpath(normalize('NFC', img_name)) for img_name in metadata.get('images', [])])
 
             yield img
 
             yield img

+ 3 - 3
root/browserconfig.xml
View File 

@@ -1,9 +1,9 @@
 
-<?xml version="1.0" encoding="utf-8"?>
 
+<?xml version="1.0" encoding="utf-8" ?>
 
 <browserconfig>
 
 <browserconfig>
 
     <msapplication>
 
     <msapplication>
 
         <tile>
 
         <tile>
 
-            <square150x150logo src="/mstile-150x150.png"/>
 
+            <square150x150logo src="/mstile-150x150.png" />
 
             <TileColor>#da532c</TileColor>
 
             <TileColor>#da532c</TileColor>
 
         </tile>
 
         </tile>
 
     </msapplication>
 
     </msapplication>
 
-</browserconfig>
 
+</browserconfig>

+ 1 - 1
root/site.webmanifest
View File 

@@ -16,4 +16,4 @@
 
     "theme_color": "#ffffff",
 
     "theme_color": "#ffffff",
 
     "background_color": "#ffffff",
 
     "background_color": "#ffffff",
 
     "display": "standalone"
 
     "display": "standalone"
 
-}
 
+}

+ 22 - 5
sitegen.py
View File 

@@ -11,7 +11,7 @@ from traceback import print_exc
 
 from urllib.parse import quote
 
 from urllib.parse import quote
 
 import os
 
 import os
 
 
 
-#TODO: load from config file (and watch it too)
 
+# TODO: load from config file (and watch it too)
 
 LANGUAGES = 'languages'
 
 LANGUAGES = 'languages'
 
 PLUGINS = 'plugins'
 
 PLUGINS = 'plugins'
 
 ROOT = 'root'
 
 ROOT = 'root'
 
@@ -19,7 +19,7 @@ STATIC = 'static'
 
 STATIC_URL = '/static'
 
 STATIC_URL = '/static'
 
 DEFAULT_LANG = 'en'
 
 DEFAULT_LANG = 'en'
 
 OTHER_LANGS = set(['es'])
 
 OTHER_LANGS = set(['es'])
 
-WATCH_INTERVAL = 1 # in secs
 
+WATCH_INTERVAL = 1  # in secs
 
 
 
 config = {
 
 config = {
 
     'LANGUAGES': LANGUAGES,
 
     'LANGUAGES': LANGUAGES,
 
@@ -35,6 +35,7 @@ config = {
 
 
 
 ignore_underscores = ignore_patterns('_*')
 
 ignore_underscores = ignore_patterns('_*')
 
 
 
+
 
 def copytree(src, dst, symlinks=False, ignore=None, copy_function=copy2,
 
 def copytree(src, dst, symlinks=False, ignore=None, copy_function=copy2,
 
              ignore_dangling_symlinks=False):
 
              ignore_dangling_symlinks=False):
 
     """Recursively copy a directory tree.
 
     """Recursively copy a directory tree.
 
@@ -125,15 +126,18 @@ def copytree(src, dst, symlinks=False, ignore=None, copy_function=copy2,
 
         raise Error(errors)
 
         raise Error(errors)
 
     return dst
 
     return dst
 
 
 
+
 
 def mtimes(target_dir):
 
 def mtimes(target_dir):
 
     ''''get modification time of files in `target_dir`'''
 
     ''''get modification time of files in `target_dir`'''
 
-    return { f: f.stat().st_mtime for f in Path(target_dir).rglob('*') }
 
+    return {f: f.stat().st_mtime for f in Path(target_dir).rglob('*')}
 
+
 
 
 
 def save_dic(lang, dic):
 
 def save_dic(lang, dic):
 
     with open(join(LANGUAGES, lang + '.txt'), 'w') as f:
 
     with open(join(LANGUAGES, lang + '.txt'), 'w') as f:
 
         for key, value in dic.items():
 
         for key, value in dic.items():
 
             f.write(f"{key}:{value}\n")
 
             f.write(f"{key}:{value}\n")
 
 
 
+
 
 @lru_cache(None)
 
 @lru_cache(None)
 
 def get_lang_dic(lang):
 
 def get_lang_dic(lang):
 
     makedirs(LANGUAGES, exist_ok=True)
 
     makedirs(LANGUAGES, exist_ok=True)
 
@@ -152,6 +156,7 @@ def get_lang_dic(lang):
 
 
 
 # Filters
 
 # Filters
 
 
 
+
 
 def add_lang_prefix(lang, path):
 
 def add_lang_prefix(lang, path):
 
     if lang == DEFAULT_LANG:
 
     if lang == DEFAULT_LANG:
 
         return path
 
         return path
 
@@ -161,6 +166,7 @@ def add_lang_prefix(lang, path):
 
 
 
     return f"/{lang}{path}"
 
     return f"/{lang}{path}"
 
 
 
+
 
 @contextfilter
 
 @contextfilter
 
 def lang(ctx, value):
 
 def lang(ctx, value):
 
     lang = ctx.environment.globals['lang']
 
     lang = ctx.environment.globals['lang']
 
@@ -179,6 +185,7 @@ def lang(ctx, value):
 
             print(f"Not translated phrase: `{value}`")
 
             print(f"Not translated phrase: `{value}`")
 
             return value
 
             return value
 
 
 
+
 
 @contextfilter
 
 @contextfilter
 
 def lang_url(ctx, lang):
 
 def lang_url(ctx, lang):
 
     name, _ = splitext(ctx.name)
 
     name, _ = splitext(ctx.name)
 
@@ -190,27 +197,32 @@ def lang_url(ctx, lang):
 
 
 
     return add_lang_prefix(lang, f"/{name}")
 
     return add_lang_prefix(lang, f"/{name}")
 
 
 
+
 
 @contextfilter
 
 @contextfilter
 
 def cur_lang(ctx, path):
 
 def cur_lang(ctx, path):
 
     lang = ctx.environment.globals['lang']
 
     lang = ctx.environment.globals['lang']
 
     return add_lang_prefix(lang, path)
 
     return add_lang_prefix(lang, path)
 
 
 
+
 
 def static(value):
 
 def static(value):
 
     parts = value.parts if isinstance(value, Path) else value.split('/')
 
     parts = value.parts if isinstance(value, Path) else value.split('/')
 
     sub_path = '/'.join(map(lambda s: quote(s), parts))
 
     sub_path = '/'.join(map(lambda s: quote(s), parts))
 
     return f"{STATIC_URL}/{sub_path}"
 
     return f"{STATIC_URL}/{sub_path}"
 
 
 
+
 
 def svg(resource):
 
 def svg(resource):
 
     with Path(STATIC, 'svg', f'{resource}.svg').open() as f:
 
     with Path(STATIC, 'svg', f'{resource}.svg').open() as f:
 
         f.readline()
 
         f.readline()
 
         f.readline()
 
         f.readline()
 
         return f.read()
 
         return f.read()
 
 
 
+
 
 def inline(file_name):
 
 def inline(file_name):
 
     return Path(file_name).read_text()
 
     return Path(file_name).read_text()
 
 
 
 # Compiler
 
 # Compiler
 
 
 
+
 
 def compile(env, path, target):
 
 def compile(env, path, target):
 
     lang = env.globals['lang']
 
     lang = env.globals['lang']
 
 
 
@@ -222,8 +234,6 @@ def compile(env, path, target):
 
                 # Ignore this files
 
                 # Ignore this files
 
                 continue
 
                 continue
 
 
 
-            src = join(base, doc)
 
-
 
             if args.with_index and doc != 'index.html':
 
             if args.with_index and doc != 'index.html':
 
                 name, _ = splitext(doc)
 
                 name, _ = splitext(doc)
 
                 dst = join(cur_base, name, 'index.html')
 
                 dst = join(cur_base, name, 'index.html')
 
@@ -244,6 +254,7 @@ def compile(env, path, target):
 
             with open(dst, 'w') as f:
 
             with open(dst, 'w') as f:
 
                 f.write(output)
 
                 f.write(output)
 
 
 
+
 
 def init_gen(args):
 
 def init_gen(args):
 
     # Load layout
 
     # Load layout
 
     file_loader = FileSystemLoader(args.source)
 
     file_loader = FileSystemLoader(args.source)
 
@@ -273,6 +284,7 @@ def init_gen(args):
 
         rmtree(args.target)
 
         rmtree(args.target)
 
     makedirs(args.target, exist_ok=True)
 
     makedirs(args.target, exist_ok=True)
 
 
 
+
 
 def gen_layout(args):
 
 def gen_layout(args):
 
     env = args.env
 
     env = args.env
 
     path = Path(args.source)
 
     path = Path(args.source)
 
@@ -286,12 +298,15 @@ def gen_layout(args):
 
         env.globals['lang'] = other_lang
 
         env.globals['lang'] = other_lang
 
         compile(env, path, args.target)
 
         compile(env, path, args.target)
 
 
 
+
 
 def gen_root(args):
 
 def gen_root(args):
 
     copytree(ROOT, args.target, ignore=ignore_underscores)
 
     copytree(ROOT, args.target, ignore=ignore_underscores)
 
 
 
+
 
 def gen_static(args):
 
 def gen_static(args):
 
     copytree(STATIC, join(args.target, 'static'), ignore=ignore_underscores)
 
     copytree(STATIC, join(args.target, 'static'), ignore=ignore_underscores)
 
 
 
+
 
 def save_generate(generator, args, msg):
 
 def save_generate(generator, args, msg):
 
     print(f'* {msg}')
 
     print(f'* {msg}')
 
     try:
 
     try:
 
@@ -304,6 +319,7 @@ def save_generate(generator, args, msg):
 
 
 
 # Runtime
 
 # Runtime
 
 
 
+
 
 def run(args):
 
 def run(args):
 
     print('initial compilation')
 
     print('initial compilation')
 
     init_gen(args)
 
     init_gen(args)
 
@@ -342,6 +358,7 @@ def run(args):
 
             save_generate(gen_static, args, 'copying static files')
 
             save_generate(gen_static, args, 'copying static files')
 
             save_generate(gen_layout, args, 'recompiling layout')
 
             save_generate(gen_layout, args, 'recompiling layout')
 
 
 
+
 
 if __name__ == '__main__':
 
 if __name__ == '__main__':
 
     parser = argparse.ArgumentParser("Site generator")
 
     parser = argparse.ArgumentParser("Site generator")

+ 73 - 73
static/css/hamburger.css
View File 

@@ -1,65 +1,66 @@
 
-:root{
 
+:root {
 
 	--hamburger-size: 20px;
 
 	--hamburger-size: 20px;
 
 	--hamburger-padding: 10px;
 
 	--hamburger-padding: 10px;
 
 	--hamburger-margin: 10px;
 
 	--hamburger-margin: 10px;
 
 	--hamburger-bgcolor: rgba(0, 0, 0, .1);
 
 	--hamburger-bgcolor: rgba(0, 0, 0, .1);
 
 }
 
 }
 
+
 
 /* Basic styles */
 
 /* Basic styles */
 
+
 
 #mobile-header {
 
 #mobile-header {
 
 	display: -webkit-box;
 
 	display: -webkit-box;
 
 	display: -ms-flexbox;
 
 	display: -ms-flexbox;
 
 	display: flex;
 
 	display: flex;
 
 	-webkit-box-align: start;
 
 	-webkit-box-align: start;
 
-	    -ms-flex-align: start;
 
-	        align-items: flex-start;
 
+	-ms-flex-align: start;
 
+	align-items: flex-start;
 
 	-webkit-box-orient: horizontal;
 
 	-webkit-box-orient: horizontal;
 
 	-webkit-box-direction: reverse;
 
 	-webkit-box-direction: reverse;
 
-	    -ms-flex-direction: row-reverse;
 
-	        flex-direction: row-reverse;
 
+	-ms-flex-direction: row-reverse;
 
+	flex-direction: row-reverse;
 
 	right: 0;
 
 	right: 0;
 
 	position: relative;
 
 	position: relative;
 
 	margin: var(--tile-margin) var(--tile-margin) 0 var(--tile-margin);
 
 	margin: var(--tile-margin) var(--tile-margin) 0 var(--tile-margin);
 
 }
 
 }
 
 
 
 /* Toggle functionality */
 
 /* Toggle functionality */
 
+
 
 #toggle {
 
 #toggle {
 
 	position: absolute;
 
 	position: absolute;
 
 	left: -100%;
 
 	left: -100%;
 
 	top: -100%;
 
 	top: -100%;
 
 }
 
 }
 
-#toggle:focus ~ .toggle-container .button-toggle,
 
-#toggle:checked ~ .toggle-container .button-toggle {
 
+
 
+#toggle:focus~.toggle-container .button-toggle, #toggle:checked~.toggle-container .button-toggle {
 
 	-webkit-box-shadow: 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor), inset 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor);
 
 	-webkit-box-shadow: 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor), inset 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor);
 
-					box-shadow: 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor), inset 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor);
 
+	box-shadow: 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor), inset 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor);
 
 }
 
 }
 
 
 
-#toggle:checked ~ .toggle-container .button-toggle:hover,
 
-#toggle:checked:focus ~ .toggle-container .button-toggle {
 
+#toggle:checked~.toggle-container .button-toggle:hover, #toggle:checked:focus~.toggle-container .button-toggle {
 
 	-webkit-box-shadow: 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor), inset 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor), 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor), inset 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor);
 
 	-webkit-box-shadow: 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor), inset 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor), 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor), inset 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor);
 
-					box-shadow: 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor), inset 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor), 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor), inset 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor);
 
+	box-shadow: 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor), inset 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor), 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor), inset 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor);
 
 }
 
 }
 
 
 
-#toggle:checked ~ .toggle-container .button-toggle::before {
 
+#toggle:checked~.toggle-container .button-toggle::before {
 
 	-webkit-transform: rotate(45deg) scale(1);
 
 	-webkit-transform: rotate(45deg) scale(1);
 
-					transform: rotate(45deg) scale(1);
 
+	transform: rotate(45deg) scale(1);
 
 }
 
 }
 
 
 
-#toggle:checked ~ .toggle-container .button-toggle::after {
 
+#toggle:checked~.toggle-container .button-toggle::after {
 
 	-webkit-transform: rotate(-45deg) scale(1);
 
 	-webkit-transform: rotate(-45deg) scale(1);
 
-					transform: rotate(-45deg) scale(1);
 
+	transform: rotate(-45deg) scale(1);
 
 }
 
 }
 
 
 
-#toggle:checked ~ .nav {
 
+#toggle:checked~.nav {
 
 	margin-top: 0;
 
 	margin-top: 0;
 
 	margin-bottom: calc(var(--hamburger-size) + 2*var(--hamburger-padding) + 3*var(--hamburger-margin));
 
 	margin-bottom: calc(var(--hamburger-size) + 2*var(--hamburger-padding) + 3*var(--hamburger-margin));
 
 	width: 25%;
 
 	width: 25%;
 
 	pointer-events: auto;
 
 	pointer-events: auto;
 
 	-webkit-transform: translate(calc(var(--hamburger-padding) + var(--hamburger-size)), calc(var(--hamburger-size) + 2*(var(--hamburger-padding) + var(--hamburger-margin))));
 
 	-webkit-transform: translate(calc(var(--hamburger-padding) + var(--hamburger-size)), calc(var(--hamburger-size) + 2*(var(--hamburger-padding) + var(--hamburger-margin))));
 
-					transform: translate(calc(var(--hamburger-padding) + var(--hamburger-size)), calc(var(--hamburger-size) + 2*(var(--hamburger-padding) + var(--hamburger-margin))));
 
+	transform: translate(calc(var(--hamburger-padding) + var(--hamburger-size)), calc(var(--hamburger-size) + 2*(var(--hamburger-padding) + var(--hamburger-margin))));
 
 }
 
 }
 
 
 
-#toggle:checked ~ .nav .nav-item,
 
-#toggle:checked ~ .nav .nav-subitem {
 
+#toggle:checked~.nav .nav-item, #toggle:checked~.nav .nav-subitem {
 
 	font-family: 'akrobat-regular';
 
 	font-family: 'akrobat-regular';
 
 	color: black;
 
 	color: black;
 
 	width: auto;
 
 	width: auto;
 
@@ -69,43 +70,38 @@
 
 	margin: 0;
 
 	margin: 0;
 
 	opacity: 1;
 
 	opacity: 1;
 
 	-webkit-transform: scaleY(1);
 
 	-webkit-transform: scaleY(1);
 
-					transform: scaleY(1);
 
+	transform: scaleY(1);
 
 	-webkit-transition: .5s, opacity .1s;
 
 	-webkit-transition: .5s, opacity .1s;
 
-					transition: .5s, opacity .1s;
 
+	transition: .5s, opacity .1s;
 
 }
 
 }
 
 
 
-#toggle:checked ~ .nav .nav-item:nth-child(1),
 
-#toggle:checked ~ .nav .nav-item:nth-child(1)::before {
 
+#toggle:checked~.nav .nav-item:nth-child(1), #toggle:checked~.nav .nav-item:nth-child(1)::before {
 
 	-webkit-transition-delay: .15s;
 
 	-webkit-transition-delay: .15s;
 
-					transition-delay: .15s;
 
+	transition-delay: .15s;
 
 }
 
 }
 
 
 
-#toggle:checked ~ .nav .nav-subitem,
 
-#toggle:checked ~ .nav .nav-subitem::before {
 
+#toggle:checked~.nav .nav-subitem, #toggle:checked~.nav .nav-subitem::before {
 
 	-webkit-transition-delay: .01s;
 
 	-webkit-transition-delay: .01s;
 
-					transition-delay: .01s;
 
+	transition-delay: .01s;
 
 	right: 1em;
 
 	right: 1em;
 
 }
 
 }
 
 
 
-
 
-#toggle:checked ~ .nav .nav-item:nth-child(3),
 
-#toggle:checked ~ .nav .nav-item:nth-child(3)::before {
 
+#toggle:checked~.nav .nav-item:nth-child(3), #toggle:checked~.nav .nav-item:nth-child(3)::before {
 
 	-webkit-transition-delay: .05s;
 
 	-webkit-transition-delay: .05s;
 
-					transition-delay: .05s;
 
+	transition-delay: .05s;
 
 }
 
 }
 
 
 
-#toggle:checked ~ .nav .nav-item:nth-child(4),
 
-#toggle:checked ~ .nav .nav-item:nth-child(4)::before {
 
+#toggle:checked~.nav .nav-item:nth-child(4), #toggle:checked~.nav .nav-item:nth-child(4)::before {
 
 	-webkit-transition-delay: 0s;
 
 	-webkit-transition-delay: 0s;
 
-					transition-delay: 0s;
 
+	transition-delay: 0s;
 
 }
 
 }
 
 
 
-#toggle:checked ~ .nav .nav-item::before,
 
-#toggle:checked ~ .nav .nav-subitem::before {
 
+#toggle:checked~.nav .nav-item::before, #toggle:checked~.nav .nav-subitem::before {
 
 	opacity: 0;
 
 	opacity: 0;
 
 }
 
 }
 
 
 
 /* Toggle button */
 
 /* Toggle button */
 
+
 
 .button-toggle {
 
 .button-toggle {
 
 	position: relative;
 
 	position: relative;
 
 	display: inline-block;
 
 	display: inline-block;
 
@@ -113,15 +109,17 @@
 
 	width: var(--hamburger-size);
 
 	width: var(--hamburger-size);
 
 	height: var(--hamburger-size);
 
 	height: var(--hamburger-size);
 
 	margin: calc(var(--hamburger-margin) + var(--hamburger-padding)) var(--hamburger-padding);
 
 	margin: calc(var(--hamburger-margin) + var(--hamburger-padding)) var(--hamburger-padding);
 
-	-webkit-box-shadow: 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor), inset 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor);	
-					box-shadow: 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor), inset 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor);	
+	-webkit-box-shadow: 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor), inset 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor);
 
+	box-shadow: 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor), inset 0 0 0 var(--hamburger-padding) var(--hamburger-bgcolor);
 
 	border: none;
 
 	border: none;
 
 	cursor: pointer;
 
 	cursor: pointer;
 
 	border-radius: 100%;
 
 	border-radius: 100%;
 
 	-webkit-transition: .6s;
 
 	-webkit-transition: .6s;
 
-					transition: .6s;
 
+	transition: .6s;
 
 }
 
 }
 
+
 
 /* button X container (toggled) */
 
 /* button X container (toggled) */
 
+
 
 .button-toggle::before, .button-toggle::after {
 
 .button-toggle::before, .button-toggle::after {
 
 	position: absolute;
 
 	position: absolute;
 
 	content: '';
 
 	content: '';
 
@@ -133,57 +131,64 @@
 
 	background-color: black;
 
 	background-color: black;
 
 	border-radius: 5px;
 
 	border-radius: 5px;
 
 	-webkit-transition: .5s;
 
 	-webkit-transition: .5s;
 
-					transition: .5s;
 
+	transition: .5s;
 
 }
 
 }
 
+
 
 /* button \ container  */
 
 /* button \ container  */
 
+
 
 .button-toggle::before {
 
 .button-toggle::before {
 
 	-webkit-transform: rotate(45deg) scale(0);
 
 	-webkit-transform: rotate(45deg) scale(0);
 
-					transform: rotate(45deg) scale(0);
 
+	transform: rotate(45deg) scale(0);
 
 }
 
 }
 
+
 
 /* button / container  */
 
 /* button / container  */
 
+
 
 .button-toggle::after {
 
 .button-toggle::after {
 
 	-webkit-transform: rotate(-45deg) scale(0);
 
 	-webkit-transform: rotate(-45deg) scale(0);
 
-					transform: rotate(-45deg) scale(0);
 
+	transform: rotate(-45deg) scale(0);
 
 }
 
 }
 
 
 
 /* Menu */
 
 /* Menu */
 
+
 
 .nav {
 
 .nav {
 
 	display: block;
 
 	display: block;
 
 	-webkit-transform: translateX(calc(var(--hamburger-size) + var(--hamburger-padding)));
 
 	-webkit-transform: translateX(calc(var(--hamburger-size) + var(--hamburger-padding)));
 
-	        transform: translateX(calc(var(--hamburger-size) + var(--hamburger-padding)));
 
+	transform: translateX(calc(var(--hamburger-size) + var(--hamburger-padding)));
 
 	margin: calc(var(--hamburger-margin) + var(--hamburger-padding)) 0;
 
 	margin: calc(var(--hamburger-margin) + var(--hamburger-padding)) 0;
 
 	width: var(--hamburger-size);
 
 	width: var(--hamburger-size);
 
 	pointer-events: none;
 
 	pointer-events: none;
 
 	-webkit-transition: .5s;
 
 	-webkit-transition: .5s;
 
-					transition: .5s;
 
+	transition: .5s;
 
 }
 
 }
 
+
 
 .nav .itemize {
 
 .nav .itemize {
 
 	display: -webkit-box;
 
 	display: -webkit-box;
 
 	display: -ms-flexbox;
 
 	display: -ms-flexbox;
 
 	display: flex;
 
 	display: flex;
 
 	-webkit-box-align: end;
 
 	-webkit-box-align: end;
 
-	    -ms-flex-align: end;
 
-	        align-items: flex-end;
 
+	-ms-flex-align: end;
 
+	align-items: flex-end;
 
 	-webkit-box-orient: vertical;
 
 	-webkit-box-orient: vertical;
 
 	-webkit-box-direction: normal;
 
 	-webkit-box-direction: normal;
 
-	    -ms-flex-direction: column;
 
-	        flex-direction: column;
 
+	-ms-flex-direction: column;
 
+	flex-direction: column;
 
 	padding: 0;
 
 	padding: 0;
 
 	margin: 0;
 
 	margin: 0;
 
 }
 
 }
 
+
 
 /* menu entries initial state */
 
 /* menu entries initial state */
 
-.nav-item,
 
-.nav-subitem {
 
+
 
+.nav-item, .nav-subitem {
 
 	display: -webkit-box;
 
 	display: -webkit-box;
 
 	display: -ms-flexbox;
 
 	display: -ms-flexbox;
 
 	display: flex;
 
 	display: flex;
 
 	-webkit-box-orient: horizontal;
 
 	-webkit-box-orient: horizontal;
 
 	-webkit-box-direction: reverse;
 
 	-webkit-box-direction: reverse;
 
-	    -ms-flex-direction: row-reverse;
 
-	        flex-direction: row-reverse;
 
+	-ms-flex-direction: row-reverse;
 
+	flex-direction: row-reverse;
 
 	-webkit-box-align: end;
 
 	-webkit-box-align: end;
 
-	    -ms-flex-align: end;
 
-	        align-items: flex-end;
 
+	-ms-flex-align: end;
 
+	align-items: flex-end;
 
 	margin: 0;
 
 	margin: 0;
 
 	width: 100%;
 
 	width: 100%;
 
 	position: relative;
 
 	position: relative;
 
@@ -193,39 +198,34 @@
 
 	line-height: 7px;
 
 	line-height: 7px;
 
 	white-space: nowrap;
 
 	white-space: nowrap;
 
 	-webkit-transform: scaleY(.2);
 
 	-webkit-transform: scaleY(.2);
 
-					transform: scaleY(.2);
 
+	transform: scaleY(.2);
 
 	-webkit-transition: .5s, opacity .1s;
 
 	-webkit-transition: .5s, opacity .1s;
 
-					transition: .5s, opacity .1s;
 
+	transition: .5s, opacity .1s;
 
 }
 
 }
 
 
 
-.nav-item:nth-child(1),
 
-.nav-item:nth-child(1)::before {
 
+.nav-item:nth-child(1), .nav-item:nth-child(1)::before {
 
 	-webkit-transition-delay: 0s;
 
 	-webkit-transition-delay: 0s;
 
-					transition-delay: 0s;
 
+	transition-delay: 0s;
 
 }
 
 }
 
 
 
-.nav-subitem,
 
-.nav-subitem::before {
 
+.nav-subitem, .nav-subitem::before {
 
 	opacity: 0;
 
 	opacity: 0;
 
 	height: 0;
 
 	height: 0;
 
 	-webkit-transition-delay: .05s;
 
 	-webkit-transition-delay: .05s;
 
-					transition-delay: .05s;
 
+	transition-delay: .05s;
 
 }
 
 }
 
 
 
-.nav-item:nth-child(3),
 
-.nav-item:nth-child(3)::before {
 
+.nav-item:nth-child(3), .nav-item:nth-child(3)::before {
 
 	-webkit-transition-delay: .1s;
 
 	-webkit-transition-delay: .1s;
 
-					transition-delay: .1s;
 
+	transition-delay: .1s;
 
 }
 
 }
 
 
 
-.nav-item:nth-child(4),
 
-.nav-item:nth-child(4)::before {
 
+.nav-item:nth-child(4), .nav-item:nth-child(4)::before {
 
 	-webkit-transition-delay: .15s;
 
 	-webkit-transition-delay: .15s;
 
-					transition-delay: .15s;
 
+	transition-delay: .15s;
 
 }
 
 }
 
 
 
-.nav-item::before,
 
-.nav-subitem::before {
 
+.nav-item::before, .nav-subitem::before {
 
 	position: absolute;
 
 	position: absolute;
 
 	content: '';
 
 	content: '';
 
 	top: 50%;
 
 	top: 50%;
 
@@ -234,7 +234,7 @@
 
 	height: 2px;
 
 	height: 2px;
 
 	background-color: black;
 
 	background-color: black;
 
 	-webkit-transform: scaleY(5);
 
 	-webkit-transform: scaleY(5);
 
-					transform: scaleY(5);
 
+	transform: scaleY(5);
 
 	-webkit-transition: .5s;
 
 	-webkit-transition: .5s;
 
-					transition: .5s;
 
-}
 
+	transition: .5s;
 
+}

+ 16 - 9
static/css/image-modal.css
View File 

@@ -7,40 +7,47 @@
 
 	border: 0;
 
 	border: 0;
 
 	padding: 0;
 
 	padding: 0;
 
 }
 
 }
 
-#dialog-image-modal::backdrop,
 
-#dialog-image-modal::-webkit-backdrop {
 
+
 
+#dialog-image-modal::backdrop, #dialog-image-modal::-webkit-backdrop {
 
 	background: #ffffff00;
 
 	background: #ffffff00;
 
 }
 
 }
 
+
 
 #modal-image-container {
 
 #modal-image-container {
 
 	margin-top: var(--header-space);
 
 	margin-top: var(--header-space);
 
 }
 
 }
 
+
 
 #modal-image {
 
 #modal-image {
 
 	-o-object-fit: cover;
 
 	-o-object-fit: cover;
 
-		 object-fit: cover;
 
+	object-fit: cover;
 
 	height: calc(100vh - var(--header-space) - var(--body-margin) - var(--tile-margin));
 
 	height: calc(100vh - var(--header-space) - var(--body-margin) - var(--tile-margin));
 
 }
 
 }
 
+
 
 #img-prev {
 
 #img-prev {
 
 	margin-right: calc(2 * var(--tile-margin))
 
 	margin-right: calc(2 * var(--tile-margin))
 
 }
 
 }
 
+
 
 #img-next {
 
 #img-next {
 
 	margin-left: calc(2 * var(--tile-margin))
 
 	margin-left: calc(2 * var(--tile-margin))
 
 }
 
 }
 
+
 
 #img-prev, #img-next {
 
 #img-prev, #img-next {
 
 	width: var(--tile-margin);
 
 	width: var(--tile-margin);
 
 }
 
 }
 
+
 
 #close-modal {
 
 #close-modal {
 
 	position: absolute;
 
 	position: absolute;
 
 	-ms-flex-item-align: end;
 
 	-ms-flex-item-align: end;
 
-	    align-self: flex-end;
 
+	align-self: flex-end;
 
 	width: calc(2.5 * var(--tile-margin));
 
 	width: calc(2.5 * var(--tile-margin));
 
 	-webkit-transform: translate(50%, -50%);
 
 	-webkit-transform: translate(50%, -50%);
 
-					transform: translate(50%, -50%);
 
+	transform: translate(50%, -50%);
 
 	-webkit-transition: .3s ease;
 
 	-webkit-transition: .3s ease;
 
-					transition: .3s ease;
 
+	transition: .3s ease;
 
 }
 
 }
 
+
 
 #close-modal:hover {
 
 #close-modal:hover {
 
 	-webkit-transform: translate(50%, -50%) rotate(45deg);
 
 	-webkit-transform: translate(50%, -50%) rotate(45deg);
 
-					transform: translate(50%, -50%) rotate(45deg);
 
+	transform: translate(50%, -50%) rotate(45deg);
 
 	-webkit-transition: .3s ease;
 
 	-webkit-transition: .3s ease;
 
-					transition: .3s ease;
 
-}
 
+	transition: .3s ease;
 
+}

+ 153 - 81
static/css/main.css
View File 

@@ -1,4 +1,5 @@
 
 /* Variables */
 
 /* Variables */
 
+
 
 :root {
 
 :root {
 
 	--tile-margin: .9vw;
 
 	--tile-margin: .9vw;
 
 	--caption-hmargin: calc(2*var(--tile-margin));
 
 	--caption-hmargin: calc(2*var(--tile-margin));
 
@@ -9,38 +10,63 @@
 
 	--header-inner-space: calc(8*var(--tile-margin));
 
 	--header-inner-space: calc(8*var(--tile-margin));
 
 	--header-space: calc(10*var(--tile-margin) - 10px + var(--tile-margin));
 
 	--header-space: calc(10*var(--tile-margin) - 10px + var(--tile-margin));
 
 }
 
 }
 
+
 
 /* Columns */
 
 /* Columns */
 
+
 
 @media (min-width: 1501px) {
 
 @media (min-width: 1501px) {
 
-	:root { --columns: 5; }
 
+	:root {
 
+		--columns: 5;
 
+	}
 
 }
 
 }
 
+
 
 @media (max-width: 1500px) {
 
 @media (max-width: 1500px) {
 
-	:root { --columns: 5; }
 
+	:root {
 
+		--columns: 5;
 
+	}
 
 }
 
 }
 
+
 
 @media (max-width: 1000px) {
 
 @media (max-width: 1000px) {
 
-	:root { --columns: 4; }
 
+	:root {
 
+		--columns: 4;
 
+	}
 
 }
 
 }
 
+
 
 @media (max-width: 700px) {
 
 @media (max-width: 700px) {
 
-	:root { --columns: 3; }
 
+	:root {
 
+		--columns: 3;
 
+	}
 
 }
 
 }
 
+
 
 @media (max-width: 500px) {
 
 @media (max-width: 500px) {
 
-	:root { --columns: 2; }
 
+	:root {
 
+		--columns: 2;
 
+	}
 
 }
 
 }
 
+
 
 @media (max-width: 400px) {
 
 @media (max-width: 400px) {
 
-	:root { --columns: 2; }
 
+	:root {
 
+		--columns: 2;
 
+	}
 
 }
 
 }
 
+
 
 /* Font Size */
 
 /* Font Size */
 
+
 
 :root {
 
 :root {
 
 	font-size: 1.2vw;
 
 	font-size: 1.2vw;
 
 	font-weight: 100;
 
 	font-weight: 100;
 
 }
 
 }
 
+
 
 /* Margins */
 
 /* Margins */
 
+
 
 /* @media (max-width: 1080px) {
 
 /* @media (max-width: 1080px) {
 
 	:root {
 
 	:root {
 
 		--tile-margin: 12.75px;
 
 		--tile-margin: 12.75px;
 
 		--body-margin: 33px;
 
 		--body-margin: 33px;
 
 	}
 
 	}
 
 } */
 
 } */
 
+
 
 /* Header */
 
 /* Header */
 
+
 
 @media (max-width: 600px) {
 
 @media (max-width: 600px) {
 
 	/* Mobile view */
 
 	/* Mobile view */
 
 	#wide-header {
 
 	#wide-header {
 
@@ -52,6 +78,7 @@
 
 		font-size: 2.5vw;
 
 		font-size: 2.5vw;
 
 	}
 
 	}
 
 }
 
 }
 
+
 
 @media (min-width: 601px) {
 
 @media (min-width: 601px) {
 
 	/* Non mobile view */
 
 	/* Non mobile view */
 
 	#mobile-header {
 
 	#mobile-header {
 
@@ -59,36 +86,46 @@
 
 		visibility: hidden;
 
 		visibility: hidden;
 
 	}
 
 	}
 
 }
 
 }
 
+
 
 #logo {
 
 #logo {
 
 	width: 10vw;
 
 	width: 10vw;
 
 	margin: 0 .7vw -.9vw .5vw;
 
 	margin: 0 .7vw -.9vw .5vw;
 
 }
 
 }
 
+
 
 /* Typographies */
 
 /* Typographies */
 
+
 
 @font-face {
 
 @font-face {
 
 	font-family: 'akrobat-regular';
 
 	font-family: 'akrobat-regular';
 
 	src: url('/static/font/Akrobat-Regular.otf') format('opentype');
 
 	src: url('/static/font/Akrobat-Regular.otf') format('opentype');
 
 }
 
 }
 
+
 
 @font-face {
 
 @font-face {
 
 	font-family: 'akrobat-bold';
 
 	font-family: 'akrobat-bold';
 
 	src: url('/static/font/Akrobat-Bold.otf') format('opentype');
 
 	src: url('/static/font/Akrobat-Bold.otf') format('opentype');
 
 }
 
 }
 
+
 
 /* Rules */
 
 /* Rules */
 
+
 
 :root {
 
 :root {
 
 	font-family: 'akrobat-regular';
 
 	font-family: 'akrobat-regular';
 
 	letter-spacing: .07rem;
 
 	letter-spacing: .07rem;
 
 }
 
 }
 
+
 
 .sec-div {
 
 .sec-div {
 
 	font-weight: bold;
 
 	font-weight: bold;
 
 	font-family: 'akrobat-regular';
 
 	font-family: 'akrobat-regular';
 
 }
 
 }
 
+
 
 a {
 
 a {
 
 	color: black;
 
 	color: black;
 
 	margin: .05rem .3rem;
 
 	margin: .05rem .3rem;
 
 	text-decoration: none;
 
 	text-decoration: none;
 
 }
 
 }
 
+
 
 a.en {
 
 a.en {
 
 	margin-bottom: .3em;
 
 	margin-bottom: .3em;
 
 }
 
 }
 
+
 
 h1 {
 
 h1 {
 
 	font-size: 1.1em;
 
 	font-size: 1.1em;
 
 	letter-spacing: .05rem;
 
 	letter-spacing: .05rem;
 
@@ -98,29 +135,35 @@ h1 {
 
 	text-transform: uppercase;
 
 	text-transform: uppercase;
 
 	margin: .2em 0;
 
 	margin: .2em 0;
 
 }
 
 }
 
+
 
 h2 {
 
 h2 {
 
 	font-size: .9em;
 
 	font-size: .9em;
 
 	font-family: 'akrobat-bold';
 
 	font-family: 'akrobat-bold';
 
 	text-decoration: none;
 
 	text-decoration: none;
 
 	text-transform: uppercase;
 
 	text-transform: uppercase;
 
 }
 
 }
 
+
 
 a.selected, a[href]:hover {
 
 a.selected, a[href]:hover {
 
 	color: var(--theme-color);
 
 	color: var(--theme-color);
 
 }
 
 }
 
+
 
 div {
 
 div {
 
 	display: -webkit-box;
 
 	display: -webkit-box;
 
 	display: -ms-flexbox;
 
 	display: -ms-flexbox;
 
 	display: flex;
 
 	display: flex;
 
 }
 
 }
 
+
 
 body {
 
 body {
 
 	width: calc(100% - 2*var(--body-margin));
 
 	width: calc(100% - 2*var(--body-margin));
 
 	margin: 0 var(--body-margin);
 
 	margin: 0 var(--body-margin);
 
 	position: absolute;
 
 	position: absolute;
 
 	background-color: var(--bgcolor);
 
 	background-color: var(--bgcolor);
 
 }
 
 }
 
+
 
 #logo #background {
 
 #logo #background {
 
 	fill: var(--bgcolor) !important;
 
 	fill: var(--bgcolor) !important;
 
 }
 
 }
 
+
 
 #wide-header {
 
 #wide-header {
 
 	width: calc(100% - 2*(var(--body-margin)));
 
 	width: calc(100% - 2*(var(--body-margin)));
 
 	margin: 0;
 
 	margin: 0;
 
@@ -129,17 +172,18 @@ body {
 
 	display: flex;
 
 	display: flex;
 
 	-webkit-box-orient: vertical;
 
 	-webkit-box-orient: vertical;
 
 	-webkit-box-direction: normal;
 
 	-webkit-box-direction: normal;
 
-	    -ms-flex-direction: column;
 
-	        flex-direction: column;
 
+	-ms-flex-direction: column;
 
+	flex-direction: column;
 
 	-webkit-box-pack: end;
 
 	-webkit-box-pack: end;
 
-	    -ms-flex-pack: end;
 
-	        justify-content: flex-end;
 
+	-ms-flex-pack: end;
 
+	justify-content: flex-end;
 
 	position: fixed;
 
 	position: fixed;
 
 	background-color: var(--bgcolor);
 
 	background-color: var(--bgcolor);
 
 	height: var(--header-space);
 
 	height: var(--header-space);
 
 	position: fixed;
 
 	position: fixed;
 
 	z-index: 1;
 
 	z-index: 1;
 
 }
 
 }
 
+
 
 .header-box {
 
 .header-box {
 
 	padding-bottom: calc(2*var(--tile-margin));
 
 	padding-bottom: calc(2*var(--tile-margin));
 
 	overflow: hidden;
 
 	overflow: hidden;
 
@@ -148,146 +192,160 @@ body {
 
 	display: flex;
 
 	display: flex;
 
 	-webkit-box-orient: horizontal;
 
 	-webkit-box-orient: horizontal;
 
 	-webkit-box-direction: normal;
 
 	-webkit-box-direction: normal;
 
-	    -ms-flex-direction: row;
 
-	        flex-direction: row;
 
+	-ms-flex-direction: row;
 
+	flex-direction: row;
 
 	-webkit-box-align: end;
 
 	-webkit-box-align: end;
 
-	    -ms-flex-align: end;
 
-	        align-items: flex-end;
 
+	-ms-flex-align: end;
 
+	align-items: flex-end;
 
 	-webkit-box-pack: justify;
 
 	-webkit-box-pack: justify;
 
-	    -ms-flex-pack: justify;
 
-	        justify-content: space-between;
 
+	-ms-flex-pack: justify;
 
+	justify-content: space-between;
 
 	-ms-flex-wrap: wrap;
 
 	-ms-flex-wrap: wrap;
 
-	    flex-wrap: wrap;
 
+	flex-wrap: wrap;
 
 	height: var(--header-inner-space);
 
 	height: var(--header-inner-space);
 
 }
 
 }
 
+
 
 .vbox {
 
 .vbox {
 
 	display: -webkit-box;
 
 	display: -webkit-box;
 
 	display: -ms-flexbox;
 
 	display: -ms-flexbox;
 
 	display: flex;
 
 	display: flex;
 
 	-webkit-box-orient: vertical;
 
 	-webkit-box-orient: vertical;
 
 	-webkit-box-direction: normal;
 
 	-webkit-box-direction: normal;
 
-	    -ms-flex-direction: column;
 
-	        flex-direction: column;
 
+	-ms-flex-direction: column;
 
+	flex-direction: column;
 
 	-webkit-box-align: center;
 
 	-webkit-box-align: center;
 
-	    -ms-flex-align: center;
 
-	        align-items: center;
 
+	-ms-flex-align: center;
 
+	align-items: center;
 
 }
 
 }
 
+
 
 .rbox .vbox {
 
 .rbox .vbox {
 
 	-webkit-box-align: end;
 
 	-webkit-box-align: end;
 
-	    -ms-flex-align: end;
 
-	        align-items: flex-end;
 
+	-ms-flex-align: end;
 
+	align-items: flex-end;
 
 }
 
 }
 
+
 
 .lbox .vbox {
 
 .lbox .vbox {
 
 	-webkit-box-align: start;
 
 	-webkit-box-align: start;
 
-	    -ms-flex-align: start;
 
-	        align-items: flex-start;
 
+	-ms-flex-align: start;
 
+	align-items: flex-start;
 
 }
 
 }
 
+
 
 .hbox {
 
 .hbox {
 
 	display: -webkit-box;
 
 	display: -webkit-box;
 
 	display: -ms-flexbox;
 
 	display: -ms-flexbox;
 
 	display: flex;
 
 	display: flex;
 
 	-webkit-box-orient: horizontal;
 
 	-webkit-box-orient: horizontal;
 
 	-webkit-box-direction: normal;
 
 	-webkit-box-direction: normal;
 
-	    -ms-flex-direction: row;
 
-	        flex-direction: row;
 
+	-ms-flex-direction: row;
 
+	flex-direction: row;
 
 	-webkit-box-align: center;
 
 	-webkit-box-align: center;
 
-	    -ms-flex-align: center;
 
-	        align-items: center;
 
+	-ms-flex-align: center;
 
+	align-items: center;
 
 }
 
 }
 
+
 
 .lbox {
 
 .lbox {
 
 	display: -webkit-box;
 
 	display: -webkit-box;
 
 	display: -ms-flexbox;
 
 	display: -ms-flexbox;
 
 	display: flex;
 
 	display: flex;
 
 	-webkit-box-orient: horizontal;
 
 	-webkit-box-orient: horizontal;
 
 	-webkit-box-direction: normal;
 
 	-webkit-box-direction: normal;
 
-	    -ms-flex-direction: row;
 
-	        flex-direction: row;
 
+	-ms-flex-direction: row;
 
+	flex-direction: row;
 
 	-webkit-box-align: end;
 
 	-webkit-box-align: end;
 
-	    -ms-flex-align: end;
 
-	        align-items: flex-end;
 
+	-ms-flex-align: end;
 
+	align-items: flex-end;
 
 	-webkit-box-pack: start;
 
 	-webkit-box-pack: start;
 
-	    -ms-flex-pack: start;
 
-	        justify-content: flex-start;
 
+	-ms-flex-pack: start;
 
+	justify-content: flex-start;
 
 }
 
 }
 
+
 
 .rbox {
 
 .rbox {
 
 	display: -webkit-box;
 
 	display: -webkit-box;
 
 	display: -ms-flexbox;
 
 	display: -ms-flexbox;
 
 	display: flex;
 
 	display: flex;
 
 	-webkit-box-orient: horizontal;
 
 	-webkit-box-orient: horizontal;
 
 	-webkit-box-direction: normal;
 
 	-webkit-box-direction: normal;
 
-	    -ms-flex-direction: row;
 
-	        flex-direction: row;
 
+	-ms-flex-direction: row;
 
+	flex-direction: row;
 
 	-webkit-box-align: center;
 
 	-webkit-box-align: center;
 
-	    -ms-flex-align: center;
 
-	        align-items: center;
 
+	-ms-flex-align: center;
 
+	align-items: center;
 
 	-webkit-box-pack: end;
 
 	-webkit-box-pack: end;
 
-	    -ms-flex-pack: end;
 
-	        justify-content: flex-end;
 
+	-ms-flex-pack: end;
 
+	justify-content: flex-end;
 
 }
 
 }
 
+
 
 .header-subtitle {
 
 .header-subtitle {
 
 	display: -webkit-box;
 
 	display: -webkit-box;
 
 	display: -ms-flexbox;
 
 	display: -ms-flexbox;
 
 	display: flex;
 
 	display: flex;
 
 	-webkit-box-orient: horizontal;
 
 	-webkit-box-orient: horizontal;
 
 	-webkit-box-direction: normal;
 
 	-webkit-box-direction: normal;
 
-	    -ms-flex-direction: row;
 
-	        flex-direction: row;
 
+	-ms-flex-direction: row;
 
+	flex-direction: row;
 
 	-ms-flex-wrap: wrap;
 
 	-ms-flex-wrap: wrap;
 
-	    flex-wrap: wrap;
 
+	flex-wrap: wrap;
 
 	-webkit-box-pack: end;
 
 	-webkit-box-pack: end;
 
-	    -ms-flex-pack: end;
 
-	        justify-content: flex-end;
 
+	-ms-flex-pack: end;
 
+	justify-content: flex-end;
 
 	-webkit-box-align: center;
 
 	-webkit-box-align: center;
 
-	    -ms-flex-align: center;
 
-	        align-items: center;
 
+	-ms-flex-align: center;
 
+	align-items: center;
 
 	margin-top: 0;
 
 	margin-top: 0;
 
 }
 
 }
 
+
 
 #alucho-title, #designer-subtitle {
 
 #alucho-title, #designer-subtitle {
 
 	-ms-flex-wrap: wrap;
 
 	-ms-flex-wrap: wrap;
 
-	    flex-wrap: wrap;
 
+	flex-wrap: wrap;
 
 }
 
 }
 
+
 
 .no-bottom {
 
 .no-bottom {
 
 	margin-bottom: 0;
 
 	margin-bottom: 0;
 
 }
 
 }
 
+
 
 .header-title {
 
 .header-title {
 
 	display: -webkit-box;
 
 	display: -webkit-box;
 
 	display: -ms-flexbox;
 
 	display: -ms-flexbox;
 
 	display: flex;
 
 	display: flex;
 
 	-webkit-box-orient: horizontal;
 
 	-webkit-box-orient: horizontal;
 
 	-webkit-box-direction: normal;
 
 	-webkit-box-direction: normal;
 
-	    -ms-flex-direction: row;
 
-	        flex-direction: row;
 
+	-ms-flex-direction: row;
 
+	flex-direction: row;
 
 	-ms-flex-wrap: wrap;
 
 	-ms-flex-wrap: wrap;
 
-	    flex-wrap: wrap;
 
+	flex-wrap: wrap;
 
 	-webkit-box-pack: end;
 
 	-webkit-box-pack: end;
 
-	    -ms-flex-pack: end;
 
-	        justify-content: flex-end;
 
+	-ms-flex-pack: end;
 
+	justify-content: flex-end;
 
 	-webkit-box-align: center;
 
 	-webkit-box-align: center;
 
-	    -ms-flex-align: center;
 
-	        align-items: center;
 
+	-ms-flex-align: center;
 
+	align-items: center;
 
 }
 
 }
 
+
 
 a.first {
 
 a.first {
 
 	margin-left: var(--tile-margin);
 
 	margin-left: var(--tile-margin);
 
 }
 
 }
 
+
 
 a.last {
 
 a.last {
 
 	margin-right: var(--tile-margin);
 
 	margin-right: var(--tile-margin);
 
 }
 
 }
 
+
 
 main {
 
 main {
 
 	display: -webkit-box;
 
 	display: -webkit-box;
 
 	display: -ms-flexbox;
 
 	display: -ms-flexbox;
 
 	display: flex;
 
 	display: flex;
 
 	-webkit-box-orient: horizontal;
 
 	-webkit-box-orient: horizontal;
 
 	-webkit-box-direction: normal;
 
 	-webkit-box-direction: normal;
 
-	    -ms-flex-direction: row;
 
-	        flex-direction: row;
 
+	-ms-flex-direction: row;
 
+	flex-direction: row;
 
 	-ms-flex-wrap: wrap;
 
 	-ms-flex-wrap: wrap;
 
-	    flex-wrap: wrap;
 
+	flex-wrap: wrap;
 
 	-webkit-box-pack: start;
 
 	-webkit-box-pack: start;
 
-	    -ms-flex-pack: start;
 
-	        justify-content: flex-start;
 
+	-ms-flex-pack: start;
 
+	justify-content: flex-start;
 
 	margin-top: calc(var(--header-space) - var(--tile-margin));
 
 	margin-top: calc(var(--header-space) - var(--tile-margin));
 
 	position: static;
 
 	position: static;
 
 }
 
 }
 
+
 
 figure {
 
 figure {
 
 	position: relative;
 
 	position: relative;
 
 	display: -webkit-box;
 
 	display: -webkit-box;
 
@@ -297,6 +355,7 @@ figure {
 
 	margin: var(--tile-margin);
 
 	margin: var(--tile-margin);
 
 	overflow: hidden;
 
 	overflow: hidden;
 
 }
 
 }
 
+
 
 figure img.tile, svg {
 
 figure img.tile, svg {
 
 	display: -webkit-box;
 
 	display: -webkit-box;
 
 	display: -ms-flexbox;
 
 	display: -ms-flexbox;
 
@@ -305,6 +364,7 @@ figure img.tile, svg {
 
 	height: 100%;
 
 	height: 100%;
 
 	cursor: pointer;
 
 	cursor: pointer;
 
 }
 
 }
 
+
 
 figure figcaption {
 
 figure figcaption {
 
 	font-size: .7em;
 
 	font-size: .7em;
 
 	padding: var(--caption-vmargin) var(--caption-hmargin);
 
 	padding: var(--caption-vmargin) var(--caption-hmargin);
 
@@ -313,56 +373,62 @@ figure figcaption {
 
 	display: flex;
 
 	display: flex;
 
 	-webkit-box-orient: vertical;
 
 	-webkit-box-orient: vertical;
 
 	-webkit-box-direction: normal;
 
 	-webkit-box-direction: normal;
 
-	    -ms-flex-direction: column;
 
-	        flex-direction: column;
 
+	-ms-flex-direction: column;
 
+	flex-direction: column;
 
 	position: absolute;
 
 	position: absolute;
 
 	background-color: var(--bgcolor);
 
 	background-color: var(--bgcolor);
 
 	bottom: 0;
 
 	bottom: 0;
 
 	width: calc(100% - 2*var(--caption-hmargin));
 
 	width: calc(100% - 2*var(--caption-hmargin));
 
 	-webkit-transform: translateY(100%);
 
 	-webkit-transform: translateY(100%);
 
-					transform: translateY(100%);
 
+	transform: translateY(100%);
 
 	-webkit-transition: .3s ease;
 
 	-webkit-transition: .3s ease;
 
-					transition: .3s ease;
 
+	transition: .3s ease;
 
 }
 
 }
 
+
 
 figure:hover figcaption {
 
 figure:hover figcaption {
 
 	-webkit-transform: translateY(0);
 
 	-webkit-transform: translateY(0);
 
-					transform: translateY(0);
 
+	transform: translateY(0);
 
 	-webkit-transition: .3s ease;
 
 	-webkit-transition: .3s ease;
 
-					transition: .3s ease;
 
+	transition: .3s ease;
 
 }
 
 }
 
+
 
 figcaption h1 {
 
 figcaption h1 {
 
 	margin: 0;
 
 	margin: 0;
 
 }
 
 }
 
+
 
 .caption {
 
 .caption {
 
 	display: -webkit-box;
 
 	display: -webkit-box;
 
 	display: -ms-flexbox;
 
 	display: -ms-flexbox;
 
 	display: flex;
 
 	display: flex;
 
 	-webkit-box-orient: vertical;
 
 	-webkit-box-orient: vertical;
 
 	-webkit-box-direction: normal;
 
 	-webkit-box-direction: normal;
 
-	    -ms-flex-direction: column;
 
-	        flex-direction: column;
 
+	-ms-flex-direction: column;
 
+	flex-direction: column;
 
 	-webkit-box-align: start;
 
 	-webkit-box-align: start;
 
-	    -ms-flex-align: start;
 
-	        align-items: flex-start;
 
+	-ms-flex-align: start;
 
+	align-items: flex-start;
 
 }
 
 }
 
+
 
 footer {
 
 footer {
 
 	display: -webkit-box;
 
 	display: -webkit-box;
 
 	display: -ms-flexbox;
 
 	display: -ms-flexbox;
 
 	display: flex;
 
 	display: flex;
 
 	-webkit-box-orient: vertical;
 
 	-webkit-box-orient: vertical;
 
 	-webkit-box-direction: normal;
 
 	-webkit-box-direction: normal;
 
-	    -ms-flex-direction: column;
 
-	        flex-direction: column;
 
+	-ms-flex-direction: column;
 
+	flex-direction: column;
 
 	margin: 0 var(--tile-margin);
 
 	margin: 0 var(--tile-margin);
 
 	height: var(--body-margin);
 
 	height: var(--body-margin);
 
 	font-size: .7em;
 
 	font-size: .7em;
 
 	font-weight: 900;
 
 	font-weight: 900;
 
 }
 
 }
 
+
 
 footer::after {
 
 footer::after {
 
 	content: "";
 
 	content: "";
 
 	height: var(--tile-margin);
 
 	height: var(--tile-margin);
 
 	bottom: 0;
 
 	bottom: 0;
 
 }
 
 }
 
+
 
 .footer-content {
 
 .footer-content {
 
 	height: calc(var(--body-margin) - var(--tile-margin));
 
 	height: calc(var(--body-margin) - var(--tile-margin));
 
 	display: -webkit-box;
 
 	display: -webkit-box;
 
@@ -370,33 +436,39 @@ footer::after {
 
 	display: flex;
 
 	display: flex;
 
 	-webkit-box-orient: horizontal;
 
 	-webkit-box-orient: horizontal;
 
 	-webkit-box-direction: normal;
 
 	-webkit-box-direction: normal;
 
-	    -ms-flex-direction: row;
 
-	        flex-direction: row;
 
+	-ms-flex-direction: row;
 
+	flex-direction: row;
 
 	-ms-flex-wrap: wrap;
 
 	-ms-flex-wrap: wrap;
 
-	    flex-wrap: wrap;
 
+	flex-wrap: wrap;
 
 	-webkit-box-pack: justify;
 
 	-webkit-box-pack: justify;
 
-	    -ms-flex-pack: justify;
 
-	        justify-content: space-between;
 
+	-ms-flex-pack: justify;
 
+	justify-content: space-between;
 
 }
 
 }
 
+
 
 footer .copyright, footer .social {
 
 footer .copyright, footer .social {
 
 	-webkit-box-align: center;
 
 	-webkit-box-align: center;
 
-	    -ms-flex-align: center;
 
-	        align-items: center;
 
+	-ms-flex-align: center;
 
+	align-items: center;
 
 }
 
 }
 
+
 
 footer a.first {
 
 footer a.first {
 
 	margin-left: 0;
 
 	margin-left: 0;
 
 }
 
 }
 
+
 
 footer a.last {
 
 footer a.last {
 
 	margin-right: 0;
 
 	margin-right: 0;
 
 }
 
 }
 
+
 
 footer svg {
 
 footer svg {
 
 	width: auto;
 
 	width: auto;
 
 	height: 1.5em;
 
 	height: 1.5em;
 
 	margin-left: .75em;
 
 	margin-left: .75em;
 
 }
 
 }
 
+
 
 .social a {
 
 .social a {
 
 	margin: 0;
 
 	margin: 0;
 
 }
 
 }
 
+
 
 .hidden {
 
 .hidden {
 
 	visibility: hidden;
 
 	visibility: hidden;
 
-}
 
+}

BIN
static/image/about-and-contact/banner.jpg
View File