inicio de maquetación para textos

Author: oscarotero

_includes/layouts/about.vto

@@ -2,23 +2,19 @@
 layout: layouts/base.vto
 ---
 
-{{# Artigo #}}
-<article>
-  <header>
-    <h1>{{ title }}</h1>
-  </header>
+<header class="header">
+  <h1 class="header-title">{{ title }}</h1>
+</header>
 
-  <div>
-    {{ for block of body }}
-      {{ await comp[block.type](block) }}
-    {{ /for }}
-  </div>
-</article>
+<div class="blocks">
+  {{ for block of body }}
+    {{ await comp[block.type](block) }}
+  {{ /for }}
+</div>
 
-{{# Menú #}}
 <nav>
   <ul>
-    {{ for p of search.pages(`menu=true lang=${lang}`, "order=asc") }}
+    {{ for p of search.pages(`type=about lang=${lang}`, "order=asc") }}
       <li {{ if p.url == url }} class="is-active"{{ /if }}>
         <a href="{{ p.url }}">{{ p.title }}</a>
       </li>

_includes/styles/components/blocks.css

@@ -0,0 +1,34 @@
+.blocks {
+  display: grid;
+  grid-column: full;
+  grid-template-columns: subgrid;
+}
+.section {
+  grid-column: center;
+}
+
+.section-text {
+  font-size: var(--size-2);
+  line-height: var(--line-text);
+}
+.section-image {
+  grid-column: content;
+  display: grid;
+  grid-template-columns: subgrid;
+
+  figcaption {
+    grid-row: 1;
+    grid-column: content-start / center-start;
+    text-align: right;
+    font-size: var(--size-0);
+  }
+  picture {
+    grid-row: 1;
+    grid-column: center-start / content-end;
+  }
+  img {
+    display: block;
+    max-width: 100%;
+    border-radius: var(--border-radius);
+  }
+}

_includes/styles/components/header.css

@@ -2,9 +2,13 @@
   display: grid;
   row-gap: var(--space-s);
   margin-bottom: 100px;
-  grid-column: center;
+  grid-column: content;
   align-content: start;
   max-width: 800px;
+
+  @media (width > 1200px) {
+    grid-column-start: center-start;
+  }
 }
 
 .header-title {

_includes/styles/variables.css

@@ -32,6 +32,7 @@
   --line-xshort: 1.1;
   --line-short: 1.3;
   --line-base: 1.4;
+  --line-text: 1.6;
 
   /* FX */
   --border-radius: 6px;

pages/3_a-xunta-directiva_gl.yml

@@ -21,7 +21,7 @@ body:
       Javier Pérez (tesoureiro), Antonio Doñate (vogal) e M.ª del Rosario
       Domínguez (vogal).
     type: text
-  - image: /about/images/55c3b7c86bc95-asemblea-2006.jpg
+  - image: /img/about/55c3b7c86bc95-asemblea-2006.jpg
     text: "Primeira asemblea da DAG, 30 de xuño de 2006"
     mode: normal
     type: image

pages/_data.yml

@@ -1,2 +1,3 @@
 layout: layouts/about.vto
 main_menu: about
+type: about

style.css

@@ -12,3 +12,4 @@
 @import "styles/components/members.css" layer(components);
 @import "styles/components/filter.css" layer(components);
 @import "styles/components/link.css" layer(components);
+@import "styles/components/blocks.css" layer(components);