avances

_config.ts

@@ -1,10 +1,14 @@
 import lume from "lume/mod.ts";
 import postcss from "lume/plugins/postcss.ts";
 import vento from "lume/plugins/vento.ts";
+import inline from "lume/plugins/inline.ts";
 
 const site = lume();
 
 site.use(postcss());
 site.use(vento());
+site.use(inline());
+site.copy("img");
+site.copy("isaac");
 
 export default site;

_includes/common.css

@@ -0,0 +1,62 @@
+/**
+ * common.css
+ *
+ * INFORMACION
+ * Estilos xenericos para usar na web - http://asociaciondag.org.
+ *
+ * AUTORES
+ * Oscar Otero e Segundo Fdez no ano 2015.
+ * http://oscarotero.com | http://segundofdez.com
+ *
+ * FERRAMENTAS
+ * Stylecow ............... http://stylecow.github.io/
+ * Desenvolvido por Oscar Otero.
+ *
+ * XENERICO
+ * normalize.css .......... http://necolas.github.io/normalize.css
+ * Desenvolvido por Nicolas Gallagher coa axuda de Jonathan Neal.
+ *
+ * FONTES
+ * isaac-font.css ......... Importa a tipografia Isaac font.
+ * Deseñada por Marcos Dopico (http://maistypes.com).
+ *
+ */
+
+/*
+ * Contido xeral
+ * -----------------------------------------------------------------------------
+*/
+
+html {
+	font-family: var(--ff-normal);
+	background-color: var(--black-8);
+	color: var(--color-main);
+	padding-top: 58px;
+	scroll-padding-top: 5rem;
+}
+
+figure {
+	margin-left: 0;
+	margin-right: 0;
+}
+
+strong {
+	font-weight: var(--fw-bold);
+}
+
+.ia-16 {
+	width: 32px;
+	height: 32px;
+	display: block;
+	vertical-align: middle;
+
+	& line,
+	& circle {
+		stroke: var(--color-main);
+		fill: none;
+		vector-effect: non-scaling-stroke;
+		transition: all 0.5s;
+		stroke-width: 4px;
+		stroke-linecap: round;
+	}
+}

_includes/isaac-font.css

@@ -0,0 +1,112 @@
+/**
+ * isaac-font.css
+ *
+ * INFORMACION
+ * Importa a tipografia Isaac.
+ *
+ * AUTORES
+ * Oscar Otero e Segundo Fdez no ano 2015.
+ * http://oscarotero.com | http://segundofdez.com
+ *
+ * FERRAMENTAS
+ * Stylecow ............... http://stylecow.github.io/
+ * Desenvolvido por Oscar Otero.
+ *
+ * XENERICO
+ * normalize.css .......... http://necolas.github.io/normalize.css
+ * Desenvolvido por Nicolas Gallagher coa axuda de Jonathan Neal.
+ *
+ * FONTES
+ * isaac-font.css ......... Importa a tipografia Isaac font.
+ * Deseñada por Marcos Dopico (http://maistypes.com).
+ *
+ */
+
+
+/* Isaac Display Bold */
+@font-face {
+	font-family: 'IsaacDisplay';
+	src: url("./isaac/IsaacDisplayBold.woff") format('woff');
+	font-weight: 700;
+	font-style: normal;
+}
+
+/* Isaac Light */
+@font-face {
+	font-family: 'Isaac';
+	src: url("./isaac/IsaacLight.woff") format('woff');
+	font-weight: 300;
+	font-style: normal;
+}
+
+/* Isaac Light Italic */
+@font-face {
+	font-family: 'Isaac';
+	src: url("./isaac/IsaacLightItalic.woff") format('woff');
+	font-weight: 300;
+	font-style: italic;
+}
+
+/* Isaac Book */
+@font-face {
+	font-family: 'Isaac';
+	src: url("./isaac/IsaacBook.woff") format('woff');
+	font-weight: 400;
+	font-style: normal;
+}
+
+/* Isaac Book Italic */
+@font-face {
+	font-family: 'Isaac';
+	src: url("./isaac/IsaacBookItalic.woff") format('woff');
+	font-weight: 400;
+	font-style: italic;
+}
+
+/* Isaac Regular */
+@font-face {
+	font-family: 'Isaac';
+	src: url("./isaac/IsaacRegular.woff") format('woff');
+	font-weight: 500;
+	font-style: normal;
+}
+
+/* Isaac Regular Italic */
+@font-face {
+	font-family: 'Isaac';
+	src: url("./isaac/IsaacRegularItalic.woff") format('woff');
+	font-weight: 500;
+	font-style: italic;
+}
+
+/* Isaac Normal */
+@font-face {
+	font-family: 'Isaac';
+	src: url("./isaac/IsaacNormal.woff") format('woff');
+	font-weight: 600;
+	font-style: normal;
+}
+
+/* Isaac Normal Italic */
+@font-face {
+	font-family: 'Isaac';
+	src: url("./isaac/IsaacNormalItalic.woff") format('woff');
+	font-weight: 600;
+	font-style: italic;
+}
+
+/* Isaac Bold */
+@font-face {
+	font-family: 'Isaac';
+	src: url("./isaac/IsaacBold.woff") format('woff');
+	font-weight: 700;
+	font-style: normal;
+}
+
+/* Isaac Bold Italic */
+@font-face {
+	font-family: 'Isaac';
+	src: url("./isaac/IsaacBoldItalic.woff") format('woff');
+	font-weight: 700;
+	font-style: italic;
+}

_includes/layout.vto

@@ -1,14 +1,33 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="gl">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{{ title }}</title>
+  <link rel="stylesheet" href="/styles.css">
+  <meta name="author" content="DAG - Asociación Galega de Deseño">
 </head>
 <body>
-  <header>
-    <h1>{{ header.title }}</h1>
-    {{ header.subtitle |> md }}
+  <!-- HEADER -->
+  <nav class="page-header wrapper" id="main-header">
+      <a href="https://dag.gal" class="page-logo" title="Asociación Galega de Deseño">
+          <img src="/img/dag.svg" inline>
+      </a>
+  </nav>
+  <!-- /HEADER -->
+
+  <header class="header">
+    <div class="logo-feed is-square">
+      <img src="/img/feed/f.svg">
+      <img src="/img/feed/e.svg">
+      <img src="/img/feed/e2.svg">
+      <img src="/img/feed/d.svg">
+    </div>
+
+    <div class="header-content">
+      <h1>{{ header.title }}</h1>
+      {{ header.subtitle |> md }}
+    </div>
   </header>
 
   {{ about |> md }}
@@ -42,6 +61,7 @@
       <li>
         <article>
           <h3>{{ speaker.title |> md(true) }}</h3>
+          <img src="{{ speaker.img }}" alt="Retrato">
 
           {{ for event of speaker.items }}
           <section>
@@ -80,7 +100,9 @@
       <strong>{{ group.title }}</strong>
       <ul>
         {{ for logo of group.items }}
-        <li>{{ logo.alt }}</li>
+        <li>
+          <img src="{{ logo.img }}" alt="{{ logo.alt }}">
+        </li>
         {{ /for }}
       </ul>
     </div>

_includes/variables.css

@@ -0,0 +1,74 @@
+/**
+ * variables.css
+ *
+ * INFORMACION
+ * Variables xenericas para usar na web - http://asociaciondag.org.
+ *
+ * AUTORES
+ * Oscar Otero e Segundo Fdez no ano 2015.
+ * http://oscarotero.com | http://segundofdez.com
+ *
+ * FERRAMENTAS
+ * Stylecow ............... http://stylecow.github.io/
+ * Desenvolvido por Oscar Otero.
+ *
+ * XENERICO
+ * normalize.css .......... http://necolas.github.io/normalize.css
+ * Desenvolvido por Nicolas Gallagher coa axuda de Jonathan Neal.
+ *
+ * FONTES
+ * isaac-font.css ......... Importa a tipografia Isaac font.
+ * Deseñada por Marcos Dopico (http://maistypes.com).
+ *
+ */
+:root {
+    --color-error: #E60016;
+	/* cor dag principal */
+    --color-main: #363636;
+
+    --color-dark: #5E5E5E;
+
+    /* cor dag gris medio */
+    --color-medium: #757575;
+
+	/* cor dag light */
+    --color-light: #36363633;
+    --color-15: #E1E1E1;
+
+    --black-10a: #36363622;
+    --black-10: #EAEAEA;
+    --black-8: #EFEFEF;
+    --black-5: #F5F5F5;
+    --black-5a: #36363611;
+
+    /* cor dag */
+    --color-dag: var(--color-main);
+
+    /* font-size */
+    --fs-14: 0.875rem;
+    --fs-16: 1rem;
+    --fs-18: 1.2rem;
+    --fs-26: 1.625rem;
+    --fs-32: 2rem;
+    --fs-48: 3rem;
+    --fs-60: 3.8rem;
+
+    /* font-weight */
+    --fw-black: 700;
+    --fw-bold: 600;
+    --fw-normal: 500;
+    --fw-light: 400;
+
+    /* font-family */
+    --ff-normal: Isaac, Helvetica, Arial, sans-serif;
+    --ff-display: IsaacDisplay, Helvetica, Arial, sans-serif;
+
+    /* font-feature-settings */
+    --ffs-alt: "kern" 1, "ss01" 1, "ss02" 1, "ss03" 1, "ss04" 1;
+
+    /* font-icons */
+    --ico-right: "\25b6";
+    --ico-left: "\25c0";
+    --ico-up: "\25b2";
+    --ico-down: "\25bc";
+}

_includes/wrappers.css

@@ -0,0 +1,43 @@
+/**
+ * wrappers.css
+ *
+ * INFORMACION
+ * Disposicion xeral dos contenedores - http://asociaciondag.org.
+ *
+ * AUTORES
+ * Oscar Otero e Segundo Fdez no ano 2015.
+ * http://oscarotero.com | http://segundofdez.com
+ *
+ * FERRAMENTAS
+ * Stylecow ............... http://stylecow.github.io/
+ * Desenvolvido por Oscar Otero.
+ *
+ * XENERICO
+ * normalize.css .......... http://necolas.github.io/normalize.css
+ * Desenvolvido por Nicolas Gallagher coa axuda de Jonathan Neal.
+ *
+ * FONTES
+ * isaac-font.css ......... Importa a tipografia Isaac font.
+ * Deseñada por Marcos Dopico (http://maistypes.com).
+ *
+ */
+
+/* Contenedor básico */
+.wrapper,
+.wrapper-normal,
+.wrapper-narrow {
+ 	padding-left: 4vw;
+ 	padding-right: 4vw;
+ 	display: block;
+ 	margin: 0 auto;
+}
+
+/* Contenedor comun cun tamaño máximo */
+.wrapper-normal {
+	max-width: 1200px;
+}
+
+/* Contenedor comun mini */
+.wrapper-narrow{
+	max-width: 740px;
+}