Prechádzať zdrojové kódy

Refactorize templates and use more HTML5

Danilo Gómez Gómez 5 rokov pred
rodič
commit
eff320066b

+ 13 - 9
layout/_base.html

@@ -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">
@@ -50,8 +50,8 @@
 		<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 +59,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 +79,14 @@
 							</div>
 						</div>
 					</div>
-			</div>
+			</nav>
 		</div>
 	</header>
 	<main class="main-layout">
+		<style>
+		{% block style %}
+		{% endblock %}
+		</style>
 		{% block main %}
 		{% endblock %}
 	</main>
@@ -113,12 +117,12 @@
   <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

@@ -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

@@ -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

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

+ 10 - 9
layout/work/branding.html

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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 %}

+ 0 - 4
static/css/image-modal.css

@@ -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;

+ 2 - 1
static/js/image-modal.js

@@ -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);

Rozdielové dáta súboru neboli zobrazené, pretože súbor je príliš veľký
+ 0 - 5
static/js/jquery.min.js