Novas

Author: oscarotero

_components/button/comp.vto

@@ -1,5 +1,5 @@
 <div class="section section-button">
-  <a href="{{ url }}">
+  <a class="button" href="{{ url }}">
     {{ text }}
   </a>
 </div>

_includes/layouts/news_list.vto

@@ -5,14 +5,16 @@ layout: layouts/base.vto
 <header class="header">
   <h1 class="header-title">{{ title }}</h1>
 
+  <div class="header-subtitle">{{ description |> md }}</div>
+
   <div class="header-filter ly-tags">
     {{ for tag of search.values("tags", "type=news lang=" + lang).sort() }}
       <span class="filter">{{ tag }}</span>
     {{ /for }}
   </div>
 </header>
 
-<div class="ly-list news-list top-m-xl">
+<div class="ly-list news-list top-xl-2xl">
   {{ for news of results }}
     {{ include "templates/news-list.vto" { news } }}
   {{ /for }}

_includes/layouts/news_permalink.vto

@@ -1,28 +1,33 @@
 ---
 layout: layouts/base.vto
 ---
-<article>
-  <header>
-    <nav>
-      {{ for tag of tags }}
-        <a href="/tags/{{ tag }}">{{ tag }}</a>
-      {{ /for }}
-    </nav>
 
-    <time datetime='{{ date |> date("DATETIME") }}'>
-      {{ date |> date("HUMAN_DATE") }}
-    </time>
+{{ set backPage = search.page(`id=news-1 lang=${lang}`) }}
+<a class="back" href="{{ backPage.url }}">
+  <img src="{{ 'arrow/arrow_left_line' |> icon("mingcute") }}">
+  <span>{{ backPage.title }}</span>
+</a>
 
-    <h1>{{ title }}</h1>
-  </header>
+<header class="header">
+  <time class="header-time" datetime='{{ date |> date("DATETIME") }}'>
+    {{ date |> date("HUMAN_DATE") }}
+  </time>
 
-  <div>
+  <h1 class="header-title">{{ title }}</h1>
+
+  <div class="header-description is-big">
     {{ intro |> md }}
   </div>
 
-  <div>
-    {{ for block of body }}
-      {{ await comp[block.type](block) }}
+  <nav class="ly-tags header-filter">
+    {{ for tag of tags }}
+      <a class="filter" href="/tags/{{ tag }}">{{ tag }}</a>
     {{ /for }}
-  </div>
-</article>
+  </nav>
+</header>
+
+<div class="blocks top-2xl">
+  {{ for block of body }}
+    {{ await comp[block.type](block) }}
+  {{ /for }}
+</div>

_includes/styles/components/blocks.css

@@ -67,3 +67,7 @@
     border-radius: var(--border-radius);
   }
 }
+
+.section-button {
+  text-align: center;
+}

_includes/styles/components/button.css

@@ -0,0 +1,14 @@
+.button {
+  display: inline-flex;
+  text-decoration: none;
+  font-size: var(--size-2);
+  font-weight: var(--font-bold);
+  border: solid 1px;
+  padding: 0.5em 1em;
+  border-radius: var(--border-radius);
+  color: var(--color-black);
+
+  &:hover {
+    background-color: var(--color-hover);
+  }
+}

_includes/styles/components/header.css

@@ -11,6 +11,10 @@
   }
 }
 
+.header-time {
+  font-size: var(--size-0);
+}
+
 .header-title {
   /* font-family: var(--font-display); */
   font-weight: var(--font-black);
@@ -39,6 +43,11 @@
       text-indent: 1em;
     }
   }
+
+  &.is-big {
+    font-size: var(--size-3);
+    line-height: var(--line-base);
+  }
 }
 .header-filter {
   margin-top: var(--space-m);

_includes/styles/components/news.css

@@ -1,15 +1,24 @@
 .news-list {
+  --row-gap: var(--space-s);
+  border-top: solid 1px var(--color-line);
+  padding-top: var(--row-gap);
+
   .news {
     display: grid;
     grid-column: content;
     grid-template-columns: subgrid;
     align-items: baseline;
-    border-bottom: solid 1px;
+    border-bottom: solid 1px var(--color-line);
     padding-bottom: var(--row-gap);
+    grid-template-areas: "time time time" "header header header";
+
+    @media (min-width: 800px) {
+      grid-template-areas: "time header header";
+    }
   }
 
   .news-header {
-    grid-column: center-start / content-end;
+    grid-area: header;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -18,8 +27,8 @@
   }
 
   .news-title {
-    font-size: var(--size-4);
-    letter-spacing: var(--size-4-spacing);
+    font-size: var(--size-3);
+    letter-spacing: var(--size-3-spacing);
     margin: 0;
 
     a {
@@ -28,7 +37,10 @@
   }
 
   .news-time {
-    grid-column: content-start;
-    text-align: right;
+    grid-area: time;
+
+    @media (min-width: 800px) {
+      text-align: right;
+    }
   }
 }

_includes/styles/utils.css

@@ -1,6 +1,9 @@
 .top-m-xl {
   margin-top: var(--space-m-xl);
 }
+.top-xl-2xl {
+  margin-top: var(--space-xl-2xl);
+}
 .top-2xl {
   margin-top: var(--space-2xl);
 }

_includes/styles/variables.css

@@ -1,7 +1,9 @@
 :root {
   /* Colors */
   --color-black: #1a1a1a;
+  --color-line: #ddd;
   --color-white: #fff;
+  --color-hover: #eee;
 
   /* Font sizes */
   --size-0: 0.875rem;

news.page.ts

@@ -3,9 +3,17 @@ export const lang = ["gl", "es"];
 
 export const gl = {
   title: "Novas",
+  description: `
+  Podes suscribirte ao noso [feed RSS](#) para estar ao tanto das últimas novas.
+  Tamén podes seguirnos nas redes sociais de [X](https://x.com/asociaciondag) e [Instagram](https://www.instagram.com/asociaciondag).
+  `,
 };
 export const es = {
   title: "Noticias",
+  description: `
+  Puedes suscribirte a nuestro [feed RSS](#) para estar al tanto de las últimas noticias.
+  También puedes seguirnos en las redes sociales de [X](https://x.com/asociaciondag) e [Instagram](https://www.instagram.com/asociaciondag).
+  `,
 };
 
 export default function* ({ search, paginate, lang }: Lume.Data) {