Home Explore Help
Register Sign In
marx
/
alucho
1
0
Fork 0
Files Issues 13 Pull Requests 0 Wiki
Browse Source

Refactorize templates and use more HTML5

Danilo Gómez Gómez 5 years ago
parent
78e976291a
commit
eff320066b
12 changed files with 58 additions and 81 deletions
Unified View Show Diff Stats
  1. 13 9
      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. 0 4
      static/css/image-modal.css
  11. 2 1
      static/js/image-modal.js
  12. 0 5
      static/js/jquery.min.js

+ 13 - 9
layout/_base.html
View File 

@@ -1,6 +1,7 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
 <head>
 
 <head>
 
+	<title>Alucho Portfolio</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>
 
@@ -12,7 +13,6 @@
 
 	<meta charset="UTF-8">
 
 	<meta charset="UTF-8">
 
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
 
 	<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/hamburger.css' | static }}">
 
 	<link rel="stylesheet" href="{{ 'css/main.css' | static }}">
 
 	<link rel="stylesheet" href="{{ 'css/main.css' | static }}">
 
 	<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
 
 	<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
 
@@ -50,8 +50,8 @@
 
 		<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 %}" 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>
 
 				<div id="logo">{{ 'alucho-logo' | svg }}</div>
 
 				<div id="logo">{{ 'alucho-logo' | svg }}</div>
 
 				<div class="vbox">
 
 				<div class="vbox">
 
@@ -59,7 +59,7 @@
 
 					<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>
 
-			<div id="menu" class="rbox">
 
+			<nav class="rbox">
 
 					<div class="vbox">
 
 					<div class="vbox">
 
 						<div class="hbox">
 
 						<div class="hbox">
 
 							<h1 class="header-title">
 
 							<h1 class="header-title">
 
@@ -79,10 +79,14 @@
 
 							</div>
 
 							</div>
 
 						</div>
 
 						</div>
 
 					</div>
 
 					</div>
 
-			</div>
 
+			</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>
 
@@ -113,12 +117,12 @@
 
   <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 id="modal-image-container" class="vbox">
 
 			<div class="hbox">
 
 			<div class="hbox">
 
-				<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>
 
-					<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>
 
-				<div id="img-next">{{ 'next' | svg}}</div>
 
+				<div id="img-next">{{ 'next' | svg }}</div>
 
 			</div>
 
 			</div>
 
 		</div>
 
 		</div>
 
 		<select id="image-select" class="hidden"></select>
 
 		<select id="image-select" class="hidden"></select>

+ 3 - 0
layout/about-and-contact.html
View File 

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

+ 14 - 6
layout/work.html
View File 

@@ -2,18 +2,26 @@
 
 
 
 {% set work_selected = True %}
 
 {% set work_selected = True %}
 
 {% set all_selected = False if no_all_selected else 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 %}
 
 {% 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">
 
 		<figcaption class="hbox">
 
 			<div class="caption">
 
 			<div class="caption">
 
-				<h1>{{ image.name }} / {{ image.year }}</h1>
 
-				{{ image.category }}
 
+				<h1>{{ image.name }} / <time>{{ image.year }}</time></h1>
 
+				{{ image.category | lang }}
 
 			</div>
 
 			</div>
 
 		</figcaption>
 
 		</figcaption>
 
+		<datalist>
 
+		{% for variant in image.filenames %}
 
+			<option value="{{ variant | static }}" label="{{ image.category }}: {{ image.name }} ({{ image.year }})"/>
 
+		{% endfor %}
 
+		</datalist>
 
 	</figure>
 
 	</figure>
 
 {% endfor %}
 
 {% endfor %}
 
 {% endblock %}
 
 {% endblock %}

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

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

+ 10 - 9
layout/work/branding.html
View File 

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

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

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

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

@@ -1,23 +1,10 @@
 
-{% extends "_work_no_all.html"%}
 
+{% extends "_work_no_all.html" %}
 
 
 
 {% set illustration_selected = True %}
 
 {% 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 %}
 
 {% endblock %}

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

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

+ 3 - 21
layout/work/poster.html
View File 

@@ -1,23 +1,5 @@
 
-{% extends "_work_no_all.html"%}
 
+{% extends "_work_no_all.html" %}
 
 
 
 {% set poster_selected = True %}
 
 {% 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
View File 

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

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

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

File diff suppressed because it is too large
+ 0 - 5
static/js/jquery.min.js