Accueil Explorer Aide
S'inscrire Connexion
marx
/
alucho
1
0
Fork 0

3 Commits 78e976291a ... 9518d6c920

Auteur SHA1 Message Date
  Danilo Gómez Gómez 9518d6c920 Fix hamburger layouts il y a 5 ans
  Danilo Gómez Gómez 36bb499cf9 Remove i18n form il y a 5 ans
  Danilo Gómez Gómez eff320066b Refactorize templates and use more HTML5 il y a 5 ans
14 fichiers modifiés avec 198 ajouts et 232 suppressions
Vue séparée Afficher les stats Diff
  1. 28 35
      layout/_base.html
  2. 3 0
      layout/about-and-contact.html
  3. 14 6
      layout/work.html
  4. 1 1
      layout/work/all.html
  5. 10 9
      layout/work/branding.html
  6. 3 3
      layout/work/editorial.html
  7. 6 19
      layout/work/illustration.html
  8. 3 3
      layout/work/other.html
  9. 3 21
      layout/work/poster.html
  10. 104 99
      static/css/hamburger.css
  11. 0 4
      static/css/image-modal.css
  12. 21 26
      static/css/main.css
  13. 2 1
      static/js/image-modal.js
  14. 0 5
      static/js/jquery.min.js

+ 28 - 35
layout/_base.html
Voir le fichier 

@@ -1,6 +1,7 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <head>
 
+	<title>Alucho Portfolio</title>
 
 	<!-- Global site tag (gtag.js) - Google Analytics -->
 
 	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-148161067-1"></script>
 
 	<script>
 
@@ -12,7 +13,6 @@
 
 	<meta charset="UTF-8">
 
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
 
-	<title>Alucho Portfolio</title>
 
 	<link rel="stylesheet" href="{{ 'css/hamburger.css' | static }}">
 
 	<link rel="stylesheet" href="{{ 'css/main.css' | static }}">
 
 	<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
 
@@ -27,31 +27,32 @@
 
 </head>
 
 <body id="body">
 
 	<header id="mobile-header">
 
-		<!-- This checkbox will give us the toggle behavior, it will be hidden, but functional -->
 
 		<input id="toggle" type="checkbox">
 
-
 
-		<!-- IMPORTANT: Any element that we want to modify when the checkbox state changes go here, being "sibling" of the checkbox element -->
 
-
 
-		<!-- This label is tied to the checkbox, and it will contain the toggle "buttons" -->
 
 		<label class="toggle-container" for="toggle">
 
-				<!-- If menu is open, it will be the "X" icon, otherwise just a clickable area behind the hamburger menu icon -->
 
-				<span class="button button-toggle"></span>
 
+			<span class="button button-toggle"></span>
 
 		</label>
 
-
 
-		<!-- The nav menu -->
 
 		<nav class="nav">
 
-				<a class="nav-item" href="https://lmgonzalves.github.io/morphing-hamburger-menu/">Dashboard</a>
 
-				<a class="nav-item" href="https://lmgonzalves.github.io/morphing-hamburger-menu/">History</a>
 
-				<a class="nav-item" href="https://lmgonzalves.github.io/morphing-hamburger-menu/">Statistics</a>
 
-				<a class="nav-item" href="https://lmgonzalves.github.io/morphing-hamburger-menu/">Settings</a>
 
+			<div class="itemize">
 
+				<a class="nav-item" href="{{ '/work' | cur_lang }}" {% if work_selected %}class="selected"{% endif %}><h1>{{ 'work' | lang }}</h1></a>
 
+				<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>
 
+				</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>
 
+			</div>
 
 		</nav>
 
 	</header>
 
 	<header id="wide-header">
 
 		<div class="header-box">
 
 			<div class="lbox">
 
 				<div id="lang-chooser" class="vbox">
 
-					<a class="first en {% if lang == 'en' %}selected{% endif %}" href="{{ 'en' | lang_url }}">en</a>
 
-					<a class="first {% if lang == 'es' %}selected{% endif %}" 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 id="logo">{{ 'alucho-logo' | svg }}</div>
 
 				<div class="vbox">
 
@@ -59,7 +60,7 @@
 
 					<div id="designer-subtitle" class="hbox"><a>{{ 'graphic designer' | lang }}</a></div>
 
 				</div>
 
 			</div>
 
-			<div id="menu" class="rbox">
 
+			<nav class="rbox">
 
 					<div class="vbox">
 
 						<div class="hbox">
 
 							<h1 class="header-title">
 
@@ -79,10 +80,14 @@
 
 							</div>
 
 						</div>
 
 					</div>
 
-			</div>
 
+			</nav>
 
 		</div>
 
 	</header>
 
 	<main class="main-layout">
 
+		<style>
 
+		{% block style %}
 
+		{% endblock %}
 
+		</style>
 
 		{% block main %}
 
 		{% endblock %}
 
 	</main>
 
@@ -98,27 +103,15 @@
 
 			</div>
 
 		</div>
 
 	</footer>
 
-
 
-	<form name="setLangEnglish" action="/i18n/setlang/" method="POST">
 
-		{# {% csrf_token %} #}
 
-		<input name="next" type="hidden" value="{{ path }}"/>
 
-		<input type="hidden" name="language" value="en"/>
 
-	</form>
 
-
 
-	<form name="setLangSpanish" action="/i18n/setlang/" method="POST">
 
-		{# {% csrf_token %} #}
 
-		<input name="next" type="hidden" value="{{ path }}"/>
 
-		<input type="hidden" name="language" value="es"/>
 
-	</form>
 
-  <dialog class="hidden" id="dialog-image-modal" data-work="" data-variant="">
 
+	<dialog class="hidden" id="dialog-image-modal" data-work="" data-variant="">
 
 		<div id="modal-image-container" class="vbox">
 
 			<div class="hbox">
 
-				<div id="img-prev">{{ 'prev' | svg}}</div>
 
+				<div id="img-prev">{{ 'prev' | svg }}</div>
 
 				<div class="vbox">
 
-					<div id="close-modal">{{ 'close' | svg}}</div>
 
-					<img id="modal-image" src="{{ list(images('work/poster'))[1].filenames[0] | static }}" alt="Ejemplo">
 
+					<div id="close-modal">{{ 'close' | svg }}</div>
 
+					<img id="modal-image" alt="no image">
 
 				</div>
 
-				<div id="img-next">{{ 'next' | svg}}</div>
 
+				<div id="img-next">{{ 'next' | svg }}</div>
 
 			</div>
 
 		</div>
 
 		<select id="image-select" class="hidden"></select>

+ 3 - 0
layout/about-and-contact.html
Voir le fichier 

@@ -11,4 +11,7 @@
 
 <figure>
 
 <svg width="3px" height="1px" style="background-color: gray"></svg>
 
 </figure>
 
+<address>
 
+<!-- contact information HERE -->
 
+</address>
 
 {% endblock %}

+ 14 - 6
layout/work.html
Voir le fichier 

@@ -2,18 +2,26 @@
 
 
 {% set work_selected = True %}
 
 {% set all_selected = False if no_all_selected else True %}
 
-{% set work_path = "work/all" %}
 
+{% set path = "work/" + (work_path or "all") %}
 
+
 
+{% block style %}
 
+{% endblock %}
 
 
 {% block main %}
 
-{% for image in images(work_path) %}
 
-	<figure>
 
-		<img class="tile" src="{{ image.main or image.filenames[0] | static }}">
 
+{% for image in 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 }} / {{ image.year }}</h1>
 
-				{{ image.category }}
 
+				<h1>{{ image.name }} / <time>{{ image.year }}</time></h1>
 
+				{{ image.category | lang }}
 
 			</div>
 
 		</figcaption>
 
+		<datalist>
 
+		{% for variant in image.filenames %}
 
+			<option value="{{ variant | static }}" label="{{ image.category }}: {{ image.name }} ({{ image.year }})"/>
 
+		{% endfor %}
 
+		</datalist>
 
 	</figure>
 
 {% endfor %}
 
 {% endblock %}

+ 1 - 1
layout/work/all.html
Voir le fichier 

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

+ 10 - 9
layout/work/branding.html
Voir le fichier 

@@ -1,22 +1,23 @@
 
-{% extends "_work_no_all.html"%}
 
+{% extends "_work_no_all.html" %}
 
 
 {% set branding_selected = True %}
 
 
+{% block style %}
 
+:root {
 
+	--columns: 4;
 
+}
 
+{% endblock %}
 
+
 
 {% 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
 
+				<h1>Work Name Here / <time>Year</time></h1>
 
+				{{ 'branding' | lang }}
 
 			</div>
 
 		</figcaption>
 
 	</figure>
 
 {% endfor %}
 
-{% endblock %}
 
+{% endblock %}

+ 3 - 3
layout/work/editorial.html
Voir le fichier 

@@ -1,4 +1,4 @@
 
-{% extends "_work_no_all.html"%}
 
+{% extends "_work_no_all.html" %}
 
 
 {% set editorial_selected = True %}
 
 
@@ -8,8 +8,8 @@
 
 		<svg width="1px" height="1.4px" style="background-color: gray"></svg>
 
 		<figcaption class="hbox">
 
 			<div class="caption">
 
-				<h1>Work Name Here / Year</h1>
 
-				editorial
 
+				<h1>Work Name Here / <time>Year</time></h1>
 
+				{{ 'editorial' | lang }}
 
 			</div>
 
 		</figcaption>
 
 	</figure>

+ 6 - 19
layout/work/illustration.html
Voir le fichier 

@@ -1,23 +1,10 @@
 
-{% extends "_work_no_all.html"%}
 
+{% extends "_work_no_all.html" %}
 
 
 {% set illustration_selected = True %}
 
-{% set work_path = "work/illustration" %}
 
+{% set work_path = "illustration" %}
 
 
-{% block main %}
 
-<style>
 
-	:root {
 
-		--columns: 3;
 
-	}
 
-</style>
 
-{% for image in sorted(images("work/illustration"), reverse=True) %}
 
-	<figure>
 
-		<img class="tile" src="{{ (image.main or image.filenames[0]) | static }}">
 
-		<figcaption class="hbox">
 
-			<div class="caption">
 
-				<h1>{{ image.name }} / {{ image.year }}</h1>
 
-				{{ image.category }}
 
-			</div>
 
-		</figcaption>
 
-	</figure>
 
-{% endfor %}
 
+{% block style %}
 
+:root {
 
+	--columns: 3;
 
+}
 
 {% endblock %}

+ 3 - 3
layout/work/other.html
Voir le fichier 

@@ -1,4 +1,4 @@
 
-{% extends "_work_no_all.html"%}
 
+{% extends "_work_no_all.html" %}
 
 
 {% set other_selected = True %}
 
 
@@ -8,8 +8,8 @@
 
 		<svg width="1px" height="1px" style="background-color: gray"></svg>
 
 		<figcaption class="hbox">
 
 			<div class="caption">
 
-				<h1>Work Name Here / Year</h1>
 
-				other
 
+				<h1>Work Name Here / <time>Year</time></h1>
 
+				{{ 'other' | lang }}
 
 			</div>
 
 		</figcaption>
 
 	</figure>

+ 3 - 21
layout/work/poster.html
Voir le fichier 

@@ -1,23 +1,5 @@
 
-{% extends "_work_no_all.html"%}
 
+{% extends "_work_no_all.html" %}
 
 
 {% set poster_selected = True %}
 
-{% set work_path = "work/poster" %}
 
-
 
-{% block main %}
 
-{% for image in sorted(images("work/poster"), reverse=True) %}
 
-	<figure class="work-item">
 
-		<img class="tile" src="{{ (image.main or image.filenames[0]) | static }}">
 
-		<figcaption class="hbox">
 
-			<div class="caption">
 
-				<h1>{{ image.name }} / {{ image.year }}</h1>
 
-				{{ image.category }}
 
-			</div>
 
-		</figcaption>
 
-		<datalist>
 
-		{% for variant in image.filenames %}
 
-			<option value="{{ variant | static }}"></option>
 
-		{% endfor %}
 
-		</datalist>
 
-	</figure>
 
-{% endfor %}
 
-{% endblock %}
 
+{% set work_path = "poster" %}
 
+{% set expand_dialog = True %}

+ 104 - 99
static/css/hamburger.css
Voir le fichier 

@@ -1,11 +1,24 @@
 
+:root{
 
+	--hamburger-size: 20px;
 
+	--hamburger-padding: 10px;
 
+	--hamburger-margin: 10px;
 
+	--hamburger-bgcolor: rgba(0, 0, 0, .1);
 
+}
 
 /* Basic styles */
 
 #mobile-header {
 
-	font-family: sans-serif;
 
+	display: -webkit-box;
 
+	display: -ms-flexbox;
 
+	display: flex;
 
+	-webkit-box-align: start;
 
+	    -ms-flex-align: start;
 
+	        align-items: flex-start;
 
+	-webkit-box-orient: horizontal;
 
+	-webkit-box-direction: reverse;
 
+	    -ms-flex-direction: row-reverse;
 
+	        flex-direction: row-reverse;
 
 	right: 0;
 
-}
 
-#mobile-header {
 
-	position: absolute;
 
-	font-family: sans-serif;
 
+	position: relative;
 
+	margin: var(--tile-margin) var(--tile-margin) 0 var(--tile-margin);
 
 }
 
 
 /* Toggle functionality */
 
@@ -16,40 +29,42 @@
 
 }
 
 #toggle:focus ~ .toggle-container .button-toggle,
 
 #toggle:checked ~ .toggle-container .button-toggle {
 
-	-webkit-box-shadow: 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1);
 
-					box-shadow: 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1);
 
+	-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);
 
 }
 
 
 #toggle:checked ~ .toggle-container .button-toggle:hover,
 
 #toggle:checked:focus ~ .toggle-container .button-toggle {
 
-	-webkit-box-shadow: 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1), 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1);
 
-					box-shadow: 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1), 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1);
 
+	-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);
 
 }
 
 
-#toggle:checked ~ .toggle-container .button-toggle:before {
 
-	-webkit-transform: translateY(-50%) rotate(45deg) scale(1);
 
-					transform: translateY(-50%) rotate(45deg) scale(1);
 
+#toggle:checked ~ .toggle-container .button-toggle::before {
 
+	-webkit-transform: rotate(45deg) scale(1);
 
+					transform: rotate(45deg) scale(1);
 
 }
 
 
-#toggle:checked ~ .toggle-container .button-toggle:after {
 
-	-webkit-transform: translateY(-50%) rotate(-45deg) scale(1);
 
-					transform: translateY(-50%) rotate(-45deg) scale(1);
 
+#toggle:checked ~ .toggle-container .button-toggle::after {
 
+	-webkit-transform: rotate(-45deg) scale(1);
 
+					transform: rotate(-45deg) scale(1);
 
 }
 
 
 #toggle:checked ~ .nav {
 
-	margin-bottom: 100px;
 
+	margin-top: 0;
 
+	margin-bottom: calc(var(--hamburger-size) + 2*var(--hamburger-padding) + 3*var(--hamburger-margin));
 
+	width: 25%;
 
 	pointer-events: auto;
 
-	-webkit-transform: translate(0px, 50px);
 
-					transform: translate(0px, 50px);
 
+	-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))));
 
 }
 
 
-#toggle:checked ~ .nav .nav-item {
 
+#toggle:checked ~ .nav .nav-item,
 
+#toggle:checked ~ .nav .nav-subitem {
 
 	font-family: 'akrobat-regular';
 
 	color: black;
 
-	letter-spacing: 0;
 
-	height: 40px;
 
-	line-height: 40px;
 
-	float: none;
 
+	width: auto;
 
+	height: 2.5em;
 
+	line-height: 3em;
 
 	text-align: right;
 
 	margin: 0;
 
 	opacity: 1;
 
@@ -60,44 +75,46 @@
 
 }
 
 
 #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)::before {
 
 	-webkit-transition-delay: .15s;
 
 					transition-delay: .15s;
 
 }
 
 
-#toggle:checked ~ .nav .nav-item:nth-child(2),
 
-#toggle:checked ~ .nav .nav-item:nth-child(2):before {
 
+#toggle:checked ~ .nav .nav-subitem,
 
+#toggle:checked ~ .nav .nav-subitem::before {
 
 	-webkit-transition-delay: .01s;
 
 					transition-delay: .01s;
 
+	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)::before {
 
 	-webkit-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)::before {
 
 	-webkit-transition-delay: 0s;
 
 					transition-delay: 0s;
 
 }
 
 
-#toggle:checked ~ .nav .nav-item:before {
 
+#toggle:checked ~ .nav .nav-item::before,
 
+#toggle:checked ~ .nav .nav-subitem::before {
 
 	opacity: 0;
 
 }
 
 
 /* Toggle button */
 
 .button-toggle {
 
-	position: absolute;
 
+	position: relative;
 
 	display: inline-block;
 
 	right: 0;
 
-	width: 20px;
 
-	height: 20px;
 
-	margin: 25px 0;
 
-	-webkit-box-shadow: 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1);	
-					box-shadow: 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1);	
+	width: var(--hamburger-size);
 
+	height: var(--hamburger-size);
 
+	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);	
 	border: none;
 
 	cursor: pointer;
 
 	border-radius: 100%;
 
@@ -105,7 +122,7 @@
 
 					transition: .6s;
 
 }
 
 /* button X container (toggled) */
 
-.button-toggle:before, .button-toggle:after {
 
+.button-toggle::before, .button-toggle::after {
 
 	position: absolute;
 
 	content: '';
 
 	top: 50%;
 
@@ -119,35 +136,61 @@
 
 					transition: .5s;
 
 }
 
 /* button \ container  */
 
-.button-toggle:before {
 
-	-webkit-transform: translateY(-50%) rotate(45deg) scale(0);
 
-					transform: translateY(-50%) rotate(45deg) scale(0);
 
+.button-toggle::before {
 
+	-webkit-transform: rotate(45deg) scale(0);
 
+					transform: rotate(45deg) scale(0);
 
 }
 
 /* button / container  */
 
-.button-toggle:after {
 
-	-webkit-transform: translateY(-50%) rotate(-45deg) scale(0);
 
-					transform: translateY(-50%) rotate(-45deg) scale(0);
 
+.button-toggle::after {
 
+	-webkit-transform: rotate(-45deg) scale(0);
 
+					transform: rotate(-45deg) scale(0);
 
 }
 
 
 /* Menu */
 
 .nav {
 
 	display: block;
 
-	margin: 25px 0;
 
+	-webkit-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;
 
+	width: var(--hamburger-size);
 
 	pointer-events: none;
 
 	-webkit-transition: .5s;
 
 					transition: .5s;
 
 }
 
-
 
-.nav-item {
 
+.nav .itemize {
 
+	display: -webkit-box;
 
+	display: -ms-flexbox;
 
+	display: flex;
 
+	-webkit-box-align: end;
 
+	    -ms-flex-align: end;
 
+	        align-items: flex-end;
 
+	-webkit-box-orient: vertical;
 
+	-webkit-box-direction: normal;
 
+	    -ms-flex-direction: column;
 
+	        flex-direction: column;
 
+	padding: 0;
 
+	margin: 0;
 
+}
 
+/* menu entries initial state */
 
+.nav-item,
 
+.nav-subitem {
 
+	display: -webkit-box;
 
+	display: -ms-flexbox;
 
+	display: flex;
 
+	-webkit-box-orient: horizontal;
 
+	-webkit-box-direction: reverse;
 
+	    -ms-flex-direction: row-reverse;
 
+	        flex-direction: row-reverse;
 
+	-webkit-box-align: end;
 
+	    -ms-flex-align: end;
 
+	        align-items: flex-end;
 
+	margin: 0;
 
+	width: 100%;
 
 	position: relative;
 
-	display: block;
 
 	clear: both;
 
 	color: transparent;
 
-	font-size: 14px;
 
-	letter-spacing: -6.2px;
 
 	height: 7px;
 
 	line-height: 7px;
 
-	text-transform: uppercase;
 
 	white-space: nowrap;
 
 	-webkit-transform: scaleY(.2);
 
 					transform: scaleY(.2);
 
@@ -156,80 +199,42 @@
 
 }
 
 
 .nav-item:nth-child(1),
 
-.nav-item:nth-child(1):before {
 
+.nav-item:nth-child(1)::before {
 
 	-webkit-transition-delay: 0s;
 
 					transition-delay: 0s;
 
 }
 
 
-.nav-item:nth-child(2),
 
-.nav-item:nth-child(2):before {
 
+.nav-subitem,
 
+.nav-subitem::before {
 
+	opacity: 0;
 
+	height: 0;
 
 	-webkit-transition-delay: .05s;
 
 					transition-delay: .05s;
 
 }
 
 
 .nav-item:nth-child(3),
 
-.nav-item:nth-child(3):before {
 
+.nav-item:nth-child(3)::before {
 
 	-webkit-transition-delay: .1s;
 
 					transition-delay: .1s;
 
 }
 
 
 .nav-item:nth-child(4),
 
-.nav-item:nth-child(4):before {
 
+.nav-item:nth-child(4)::before {
 
 	-webkit-transition-delay: .15s;
 
 					transition-delay: .15s;
 
 }
 
 
-.nav-item:nth-child(1) {
 
-	letter-spacing: -8px;
 
-}
 
-
 
-.nav-item:nth-child(2) {
 
-	letter-spacing: -7px;
 
-}
 
-
 
-.nav-item:nth-child(n + 4) {
 
-	letter-spacing: -8px;
 
-	margin-top: -7px;
 
-	opacity: 0;
 
-}
 
-
 
-.nav-item:before {
 
+.nav-item::before,
 
+.nav-subitem::before {
 
 	position: absolute;
 
 	content: '';
 
 	top: 50%;
 
 	width: 100%;
 
+	border-radius: 5px;
 
 	height: 2px;
 
 	background-color: black;
 
-	-webkit-transform: translateY(-50%) scaleY(5);
 
-					transform: translateY(-50%) scaleY(5);
 
+	-webkit-transform: scaleY(5);
 
+					transform: scaleY(5);
 
 	-webkit-transition: .5s;
 
 					transition: .5s;
 
 }
 
-/* .main-layout {
 
-	-webkit-transition: .5s;
 
-		 -moz-transition: .5s;
 
-			 -o-transition: .5s;
 
-					transition: .5s;
 
-}
 
-
 
-.main-layout:before {
 
-	position: absolute;
 
-	content: '';
 
-	top: 0;
 
-	left: 0;
 
-	width: 100%;
 
-	height: 100%;
 
-	background-color: transparent;
 
-	z-index: 2;
 
-	-webkit-transition: .5s;
 
-		 -moz-transition: .5s;
 
-			 -o-transition: .5s;
 
-					transition: .5s;
 
-}
 
-#toggle:checked ~ .main-layout {
 
-	padding-top: 30px;
 
-}
 
-
 
-#toggle:checked ~ .main-layout:before {
 
-	background-color: rgba(0, 0, 0, .3);
 
-} */

+ 0 - 4
static/css/image-modal.css
Voir le fichier 

@@ -7,10 +7,6 @@
 
 	border: 0;
 
 	padding: 0;
 
 }
 
-#dialog-image-modal::-webkit-backdrop,
 
-#dialog-image-modal::-webkit-backdrop {
 
-	background: #ffffff00;
 
-}
 
 #dialog-image-modal::backdrop,
 
 #dialog-image-modal::-webkit-backdrop {
 
 	background: #ffffff00;

+ 21 - 26
static/css/main.css
Voir le fichier 

@@ -1,13 +1,13 @@
 
 /* Variables */
 
 :root {
 
 	--tile-margin: .9vw;
 
-	--caption-hmargin: calc(2 * var(--tile-margin));
 
-	--caption-vmargin: calc(1.5 * var(--tile-margin));
 
+	--caption-hmargin: calc(2*var(--tile-margin));
 
+	--caption-vmargin: calc(1.5*var(--tile-margin));
 
 	--body-margin: 3.6vw;
 
 	--theme-color: #46c8a5;
 
 	--bgcolor: white;
 
-	--header-inner-space: calc(8 * var(--tile-margin));
 
-	--header-space: calc(10 * var(--tile-margin) - 10px + var(--tile-margin));
 
+	--header-inner-space: calc(8*var(--tile-margin));
 
+	--header-space: calc(10*var(--tile-margin) - 10px + var(--tile-margin));
 
 }
 
 /* Columns */
 
 @media (min-width: 1501px) {
 
@@ -33,19 +33,6 @@
 
 	font-size: 1.2vw;
 
 	font-weight: 100;
 
 }
 
-h1 {
 
-	font-size: 1.18vw;
 
-}
 
-/* @media (max-width: 1500px) {
 
-	:root { font-size: 22px; }
 
-	h1 { font-size: 22px; }
 
-}
 
-@media (max-width: 1240px) {
 
-	:root { font-size: 18px; }
 
-}
 
-@media (max-width: 1080px) {
 
-	:root { font-size: 16px; }
 
-} */
 
 /* Margins */
 
 /* @media (max-width: 1080px) {
 
 	:root {
 
@@ -55,13 +42,22 @@ h1 {
 
 } */
 
 /* Header */
 
 @media (max-width: 600px) {
 
-	#mobile-header { visibility: visible; }
 
-	#wide-header { visibility: hidden; }
 
-	:root { --header-space: 100px; }
 
+	/* Mobile view */
 
+	#wide-header {
 
+		display: none;
 
+		visibility: hidden;
 
+	}
 
+	:root {
 
+		--header-space: 0;
 
+		font-size: 2.5vw;
 
+	}
 
 }
 
 @media (min-width: 601px) {
 
-	#mobile-header { visibility: hidden; }
 
-	#wide-header { visibility: visible; }
 
+	/* Non mobile view */
 
+	#mobile-header {
 
+		display: none;
 
+		visibility: hidden;
 
+	}
 
 }
 
 #logo {
 
 	width: 10vw;
 
@@ -95,7 +91,6 @@ a.en {
 
 }
 
 h1 {
 
 	font-size: 1.1em;
 
-	text-align: center;
 
 	letter-spacing: .05rem;
 
 	font-weight: 100;
 
 	font-family: 'akrobat-bold';
 
@@ -146,7 +141,7 @@ body {
 
 	z-index: 1;
 
 }
 
 .header-box {
 
-	padding-bottom: calc(2 * var(--tile-margin));
 
+	padding-bottom: calc(2*var(--tile-margin));
 
 	overflow: hidden;
 
 	display: -webkit-box;
 
 	display: -ms-flexbox;
 
@@ -298,7 +293,7 @@ figure {
 
 	display: -webkit-box;
 
 	display: -ms-flexbox;
 
 	display: flex;
 
-	width: calc(100% / var(--columns) - 2 * var(--tile-margin));
 
+	width: calc(100% / var(--columns) - 2*var(--tile-margin));
 
 	margin: var(--tile-margin);
 
 	overflow: hidden;
 
 }
 
@@ -323,7 +318,7 @@ figure figcaption {
 
 	position: absolute;
 
 	background-color: var(--bgcolor);
 
 	bottom: 0;
 
-	width: calc(100% - 2 * var(--caption-hmargin));
 
+	width: calc(100% - 2*var(--caption-hmargin));
 
 	-webkit-transform: translateY(100%);
 
 					transform: translateY(100%);
 
 	-webkit-transition: .3s ease;

+ 2 - 1
static/js/image-modal.js
Voir le fichier 

@@ -1,7 +1,7 @@
 
 (function () {
 
 
     const tiles = document.getElementsByClassName('tile');
 
-    const figures = document.getElementsByClassName('work-item');
 
+    const figures = document.getElementsByClassName('clickable-fig');
 
     var dialog = document.getElementById('dialog-image-modal');
 
     var image = document.getElementById('modal-image');
 
     var closeButton = document.getElementById('close-modal');
 
@@ -17,6 +17,7 @@
 
         const figure = figures[work];
 
         const option = figure.lastElementChild.children[variant];
 
         image.src = option.value;
 
+        image.alt = option.label;
 
     };
 
     function imgPrev() {
 
         var work = Number.parseInt(dialog.dataset.work);

Fichier diff supprimé car celui-ci est trop grand
+ 0 - 5
static/js/jquery.min.js