Inicio Explorar Ayuda
Registro Iniciar sesión
marx
/
alucho
1
0
Fork 0
Archivos Incidencias 13 Pull Requests 0 Wiki
Explorar el Código

Add social network logos to the footer

Danilo Gómez Gómez hace 5 años
padre
13ece2cea2
commit
630f5a018a
Se han modificado 6 ficheros con 156 adiciones y 26 borrados
Dividir vista Mostrar estadísticas de diff
  1. 42 12
      layout/_base.html
  2. 16 1
      sitegen.py
  3. 45 13
      static/css/main.css
  4. 15 0
      static/svg/facebook.svg
  5. 23 0
      static/svg/instagram.svg
  6. 15 0
      static/svg/linkedin.svg

+ 42 - 12
layout/_base.html
Ver fichero 

@@ -13,8 +13,10 @@
 
 	<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">
 
+	<link rel="icon" type="image/x-icon" href="/favicon.ico">
 
 	<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
 
 	<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
 
 	<link rel="manifest" href="/site.webmanifest">
 
@@ -24,12 +26,32 @@
 
 	<script src="{{ 'js/eye.js' | static }}"></script>
 
 </head>
 
 <body id="body">
 
-	<header>
 
+	<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>
 
+		</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>
 
+		</nav>
 
+	</header>
 
+	<header id="wide-header">
 
 		<div class="header-box">
 
 			<div class="lbox">
 
 				<div id="lang-chooser" class="vbox">
 
-					<a class="first en {% if en %}selected{% endif %}" href="{{ 'en' | lang_url }}">en</a>
 
-					<a class="first {% if es %}selected{% endif %}" href="{{ 'es' | lang_url }}">es</a>
 
+					<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>
 
 				</div>
 
 				<object id="logo" type="image/svg+xml" data="{{ 'svg/alucho-logo.svg' | static }}"></object>
 
 				<div class="vbox">
 
@@ -43,7 +65,7 @@
 
 							<h1 class="header-title">
 
 								<div><a href="{{ '/work' | cur_lang }}" {% if work_selected %}class="selected"{% endif %}>{{ 'work' | lang }}</a></div> /
 
 								<div><a href="{{ '/news' | cur_lang }}" {% if news_selected %}class="selected"{% endif %}>{{ 'news' | lang }}</a></div> /
 
-								<div><a href="{{ '/about-and-contact' | cur_lang }}" class="last{% if contact_selected %} selected{% endif %}">{{ 'about & contact' | 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">
 
@@ -65,13 +87,15 @@
 
 		{% endblock %}
 
 	</main>
 
 	<footer>
 
-		<div class="copyright">
 
-			<a class=>copyright</a> / <a href="/">www.alucho.com</a> / <a>2019</a> / <a href="/contact">{{ 'contact' | lang }}</a>
 
-		</div>
 
-		<div class="hbox">
 
-			Fb
 
-			Tw
 
-			In
 
+		<div class="footer-content">
 
+			<div class="copyright">
 
+				<a class="first">© Alejandro Rodríguez Fornés</a> / <a>2019</a>
 
+			</div>
 
+			<div class="hbox social">	
+				<a href="https://www.facebook.com/alucho">{{ 'facebook' | svg }}</a>
 
+				<a href="https://www.linkedin.com/alucho">{{ 'linkedin' | svg }}</a>
 
+				<a href="https://www.instagram.com/alucho">{{ 'instagram' | svg }}</a>
 
+			</div>
 
 		</div>
 
 	</footer>
 
 
@@ -86,6 +110,12 @@
 
 		<input name="next" type="hidden" value="{{ path }}"/>
 
 		<input type="hidden" name="language" value="es"/>
 
 	</form>
 
-
 
+  <dialog class="hidden" id="dialog-image-modal">
 
+		<div id="modal-image-container">
 
+			<img id="modal-image" src="{{ list(images('work/poster'))[1].filenames[0] | static }}" alt="Ejemplo">
 
+		</div>
 
+	</dialog>
 
+	<script src="{{ 'js/image-modal.js' | static }}"></script>
 
+	<link rel="stylesheet" href="{{ 'css/image-modal.css' | static }}">
 
 </body>
 
 </html>

+ 16 - 1
sitegen.py
Ver fichero 

@@ -8,6 +8,7 @@ from os.path import join, exists, splitext, split, islink, isdir
 
 from shutil import rmtree, copy2, copystat, ignore_patterns, Error
 
 from time import sleep
 
 from traceback import print_exc
 
+from urllib.parse import quote
 
 import os
 
 
 #TODO: load from config file (and watch it too)
 
@@ -194,7 +195,18 @@ def cur_lang(ctx, path):
 
     return add_lang_prefix(lang, path)
 
 
 def static(value):
 
-    return f"/static/{value}"
 
+    parts = value.parts if isinstance(value, Path) else value.split('/')
 
+    sub_path = '/'.join(map(lambda s: quote(s), parts))
 
+    return f"/static/{sub_path}"
 
+
 
+def svg(resource):
 
+    with Path(STATIC, 'svg', f'{resource}.svg').open() as f:
 
+        f.readline()
 
+        f.readline()
 
+        return f.read()
 
+
 
+def inline(file_name):
 
+    return Path(file_name).read_text()
 
 
 # Compiler
 
 
@@ -238,12 +250,15 @@ def init_gen(args):
 
 
     # Init gobals
 
     env.globals['lang'] = DEFAULT_LANG
 
+    env.globals['list'] = list
 
 
     # Add filters
 
     env.filters['lang'] = lang
 
     env.filters['lang_url'] = lang_url
 
     env.filters['cur_lang'] = cur_lang
 
     env.filters['static'] = static
 
+    env.filters['svg'] = svg
 
+    env.filters['inline'] = inline
 
 
     # Load plugins
 
     for mod_path in Path(PLUGINS).glob('*.py'):

+ 45 - 13
static/css/main.css
Ver fichero 

@@ -57,8 +57,14 @@ h1 {
 
 	}
 
 } */
 
 /* Header */
 
-@media (max-width: 935px) {
 
-	#menu { visibility: hidden; }
 
+@media (max-width: 600px) {
 
+	#mobile-header { visibility: visible; }
 
+	#wide-header { visibility: hidden; }
 
+	:root { --header-space: 100px; }
 
+}
 
+@media (min-width: 601px) {
 
+	#mobile-header { visibility: hidden; }
 
+	#wide-header { visibility: visible; }
 
 }
 
 #logo {
 
 	width: 10vw;
 
@@ -79,7 +85,8 @@ h1 {
 
 /* Rules */
 
 :root {
 
 	font-family: 'akrobat-regular';
 
-	letter-spacing: 1.5px;
 
+	/* letter-spacing: 1.5px; */
 
+	letter-spacing: .07rem;
 
 }
 
 .sec-div {
 
 	font-weight: bold;
 
@@ -91,12 +98,13 @@ a {
 
 	text-decoration: none;
 
 }
 
 a.en {
 
-	margin-bottom: .5em;
 
+	margin-bottom: .3em;
 
 }
 
 h1 {
 
 	font-size: 1.1em;
 
 	text-align: center;
 
-	letter-spacing: 1px;
 
+	/* letter-spacing: 1px; */
 
+	letter-spacing: .05rem;
 
 	font-weight: 100;
 
 	font-family: 'akrobat-bold';
 
 	text-decoration: none;
 
@@ -129,7 +137,7 @@ body {
 
 	/* margin: 0 var(--body-margin); */
 
 	position: absolute;
 
 }
 
-header {
 
+#wide-header {
 
 	width: calc(100% - 2*(var(--body-margin)));
 
 	margin: 0;
 
 	/* width: calc(100% - 2*(var(--body-margin) + var(--tile-margin))); */
 
@@ -218,7 +226,7 @@ header {
 
 	align-items: center;
 
 	/* margin-bottom: 8px; */
 
 }
 
-/* header > a, header > h1 {
 
+/* #wide-header > a, #wide-header > h1 {
 
 	margin: 0 3px;
 
 } */
 
 /* .header-subtitle > a {
 
@@ -239,6 +247,7 @@ main {
 
 	/* margin: 0; */
 
 	/* margin-top: calc(var(--header-space) + var(--body-margin)); */
 
 	position: static;
 
+	/* position: absolute; */
 
 }
 
 figure {
 
 	position: relative;
 
@@ -247,10 +256,11 @@ figure {
 
 	margin: var(--tile-margin);
 
 	overflow: hidden;
 
 }
 
-figure img, svg {
 
+figure img.tile, svg {
 
 	display: flex;
 
 	width: 100%;
 
 	height: 100%;
 
+	cursor: pointer;
 
 }
 
 figure figcaption {
 
 	font-size: .9em;
 
@@ -280,15 +290,26 @@ figcaption h1 {
 
 	align-items: flex-start;
 
 }
 
 footer {
 
+	display: flex;
 
+	flex-direction: column;
 
+	margin: 0 var(--tile-margin);
 
+	height: var(--body-margin);
 
+	font-size: .7em;
 
+	font-weight: 900;
 
+}
 
+footer::after {
 
+	content: " ";
 
+	height: var(--tile-margin);
 
+	bottom: 0;
 
+}
 
+.footer-content {
 
+	height: calc(var(--body-margin) - var(--tile-margin));
 
 	display: flex;
 
 	flex-direction: row;
 
 	flex-wrap: wrap;
 
 	justify-content: space-between;
 
-	margin: 0 var(--tile-margin) calc(2*var(--tile-margin)) var(--tile-margin);
 
-	font-size: .7em;
 
-	font-weight: 900;
 
 }
 
-footer .copyright {
 
+footer .copyright, footer .social {
 
 	align-items: center;
 
 }
 
 footer a.first {
 
@@ -296,4 +317,15 @@ footer a.first {
 
 }
 
 footer a.last {
 
 	margin-right: 0;
 
-}
 
+}
 
+footer svg {
 
+	width: auto;
 
+	height: 1.5em;
 
+	margin-left: .75em;
 
+}
 
+.social a {
 
+	margin: 0;
 
+}
 
+.hidden {
 
+	visibility: hidden;
 
+}

+ 15 - 0
static/svg/facebook.svg
Ver fichero 

@@ -0,0 +1,15 @@
 
+<?xml version="1.0" encoding="utf-8"?>
 
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 
+	 viewBox="0 0 481.9 481.9" style="enable-background:new 0 0 481.9 481.9;" xml:space="preserve">
 
+<g>
 
+	<path d="M481.8,235.7c2.5,134.1-102.8,242.3-233.7,246C113.7,485.6,3.3,380.3,0.1,247c-3.3-135.2,103-244,235-246.9
 
+		C369.3-2.9,479.7,103.2,481.8,235.7z M258,322.1c0-24.9,0-49.7,0-74.6c0-6.6,0-6.6,6.4-6.6c16.3,0,32.7-0.1,49,0.1
 
+		c3.8,0,5.5-1,6.1-4.9c2.2-14.2,4.8-28.4,7.2-42.6c1.1-6.3,1-6.2-5.4-6.2c-19.6,0-39.1,0-58.7,0c-2.6,0-4.7-0.1-4.6-3.6
 
+		c0.3-10.6,0-21.2,0.6-31.7c0.6-11.9,5.3-15.9,17-16c15.7,0,31.5-0.1,47.2,0.1c3.4,0,4.6-1,4.6-4.5c-0.1-16.3-0.1-32.7,0-49
 
+		c0-3.3-1.1-4.4-4.3-4.3c-7.1,0.2-14.1,0-21.2,0.1c-18.7,0.3-37.4,0.2-56,1.2c-12.5,0.7-24.2,5-34.3,12.7
 
+		c-15.4,11.8-21.3,28.6-22.7,47c-1.1,14.3-0.8,28.8-0.8,43.2c0,3.6-1.1,5-4.8,4.9c-8.2-0.2-16.5,0-24.7-0.1c-3,0-4.2,1-4.2,4.1
 
+		c0.1,15.2,0.1,30.3,0,45.5c0,3,1,4.2,4.1,4.2c7.5-0.1,15,0,22.5,0c7,0,7,0,7,7c0,49.7,0,99.5,0,149.2c0,6.2,0.1,6.3,6,6.3
 
+		c19.3,0,38.6,0,57.8,0c6,0,6.1-0.1,6.1-6.2C258,372.1,258,347.1,258,322.1z"/>
 
+</g>
 
+</svg>

+ 23 - 0
static/svg/instagram.svg
Ver fichero 

@@ -0,0 +1,23 @@
 
+<?xml version="1.0" encoding="utf-8"?>
 
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 
+	 viewBox="0 0 481.9 481.9" style="enable-background:new 0 0 481.9 481.9;" xml:space="preserve">
 
+<g>
 
+	<path d="M240.9,0C374,0,482,108,481.9,241.1c-0.2,133.1-108.1,240.9-241,240.8C107.8,481.8,0,373.9,0,240.9
 
+		C0,107.9,107.9,0,240.9,0z M240.6,386.2c14.2,0,28.3,0.2,42.5,0c12.9-0.2,25.8-0.3,38.5-3.1c32.8-7.3,53.3-27.1,61.1-59.9
 
+		c3.2-13.4,3.3-27.2,3.4-40.9c0.2-27.7,0.2-55.5,0-83.2c-0.1-13.3-0.2-26.6-3.1-39.6c-6.9-30.9-25.2-51.2-56-59.9
 
+		c-12.5-3.6-25.4-4.2-38.3-4.3c-32.2-0.2-64.3-0.2-96.5,0c-11.1,0.1-22.3,0.5-33.1,3.1c-32.2,7.4-52.5,27.1-60.4,59.3
 
+		c-2.9,12-3.2,24.2-3.4,36.4c-0.3,19.1-0.4,38.3-0.4,57.4c0,19.8-0.2,39.6,1.7,59.3c1.2,12.7,4.5,24.8,11,35.8
 
+		c11.8,20,29.6,31.7,52.1,36.4c12.9,2.7,26.1,2.9,39.2,3.1C212.8,386.3,226.7,386.2,240.6,386.2z"/>
 
+	<path d="M120.6,240.6c0.4-20.3,0.8-40.6,1.3-60.9c0.2-7.9,1.5-15.6,4.1-23.1c6.3-17.7,19-28.1,37-32.4c8.5-2,17.2-2.6,25.8-2.7
 
+		c25.9-0.3,51.7-0.5,77.6-0.4c13.5,0,27,0.5,40.4,1.4c10.9,0.7,21.3,3.6,30.4,10.1c12.3,8.7,18.5,21.1,20.7,35.7
 
+		c2.2,14.6,2.1,29.3,2.2,43.9c0.1,25.7-0.1,51.5-0.4,77.2c-0.1,10.4-0.5,20.8-3.2,30.9c-5.8,21.2-19.9,33.5-41.2,37.4
 
+		c-8,1.5-16.2,2.1-24.3,2.2c-33.7,0.2-67.3,0.2-101,0c-9.8,0-19.6-0.6-29.1-3.2c-21-5.8-33.2-19.7-37.4-40.8
 
+		c-2.6-12.7-2.3-25.7-2.6-38.6c-0.3-12.2-0.1-24.5-0.1-36.7C120.9,240.6,120.8,240.6,120.6,240.6z M240.7,165.9
 
+		c-40.8-0.2-74.5,33.1-74.8,73.9c-0.3,41.7,32.8,75.5,74.1,75.7c41.5,0.3,75.2-32.9,75.5-74.1C315.8,199.7,282.6,166.1,240.7,165.9z
 
+		 M318.7,180.4c9.8-0.3,17.4-8.2,17.2-17.9c-0.3-9.7-8.3-17.3-18-17c-9.5,0.2-17.2,8.4-16.9,17.9C301.2,173,309.2,180.7,318.7,180.4
 
+		z"/>
 
+	<path d="M240.7,191.9c26.9,0.1,48.6,21.9,48.6,48.7c0,27-21.8,48.8-48.8,48.7c-27,0-48.9-22.1-48.7-48.9
 
+		C192.1,213.6,214,191.8,240.7,191.9z"/>
 
+</g>
 
+</svg>

+ 15 - 0
static/svg/linkedin.svg
Ver fichero 

@@ -0,0 +1,15 @@
 
+<?xml version="1.0" encoding="utf-8"?>
 
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 
+	 viewBox="0 0 481.9 481.9" style="enable-background:new 0 0 481.9 481.9;" xml:space="preserve">
 
+<g>
 
+	<path d="M241.3,0c133.2,0.5,241.2,108.8,240.6,241.3C481.3,374.5,373,482.5,240.6,481.9C107.3,481.3-0.6,373.1,0,240.6
 
+		C0.6,107.4,108.8-0.5,241.3,0z M210.9,183.9c0,52.7,0,104.5,0,156.6c16.8,0,32.7,0,49,0c0-2.3,0-4.2,0-6.2c0-26.4,0-52.9,0-79.3
 
+		c0-3.4,0.1-6.9,0.3-10.3c0.5-8.4,4.7-14.9,11.1-19.9c13.4-10.4,32.2-4.9,37.2,11.2c1.8,5.8,2.6,12.2,2.6,18.3
 
+		c0.3,26.9,0.1,53.9,0.1,80.8c0,1.7,0,3.5,0,5.3c16.5,0,32.4,0,48.5,0c0.1-1.6,0.3-2.9,0.3-4.2c0-29.4,0.2-58.8-0.1-88.2
 
+		c-0.1-8.1-0.8-16.4-2.6-24.3c-5-21.7-17.1-37.5-39.9-42.1c-24.4-5-45.2,1.7-60.8,22c-0.5,0.6-0.7,1-1.2,1.8
 
+		c-1.4-7.2-2.1-12.1-2.9-17.9c-0.4-3-1.3-3.6-2.5-3.6C236.9,184.1,223.7,183.9,210.9,183.9z M181.7,340.6c0-52.4,0-104.4,0-156.4
 
+		c-16.2,0-32.2,0-48.2,0c0,52.3,0,104.2,0,156.4C149.6,340.6,165.4,340.6,181.7,340.6z M157.4,164.5c15.2,0,26-9.9,26.1-24
 
+		c0.1-14.5-10.6-24.9-25.7-24.8c-15.1,0.1-25.7,10.1-25.8,24.3C132,154.4,142.5,164.5,157.4,164.5z"/>
 
+</g>
 
+</svg>