probas na paxina de socios

oscarotero · oscarotero · commit 2aaf076a5c5b · 2025-09-12T20:23:36.000+02:00
diff --git a/_includes/layouts/base.vto b/_includes/layouts/base.vto
@@ -9,7 +9,7 @@
   </head>
 
   <body>
-    {{ include "templates/header.vto" }}
+    {{ include "templates/navbar.vto" }}
 
     <main>
       {{ content }}
diff --git a/_includes/layouts/member_list.vto b/_includes/layouts/member_list.vto
@@ -1,8 +1,21 @@
 ---
 layout: ./base.vto
 ---
-{{ set members = search.pages("type=member lang=" + lang, "name=asc") }}
 
-{{ for member of members }}
-  {{ include "templates/member-list.vto" { member } }}
-{{ /for }}
+<header class="header">
+  <h1 class="header-title">{{ title }}</h1>
+
+  <div class="header-filter ly-tags">
+    {{ for tag of search.values("tags", "type=member lang=" + lang).sort() }}
+      <span class="filter">{{ tag }}</span>
+    {{ /for }}
+  </div>
+</header>
+
+<div class="ly-grid members-grid">
+  {{
+    for member of search.pages("type=member lang=" + lang, "name=asc-locale")
+  }}
+    {{ include "templates/member-list.vto" { member } }}
+  {{ /for }}
+</div>
diff --git a/_includes/styles/components/filter.css b/_includes/styles/components/filter.css
@@ -0,0 +1,18 @@
+.filter {
+  --text: var(--color-black);
+  --border: var(--color-black);
+  --background: var(--color-white);
+
+  padding: 0.2em 0.5em;
+  border-radius: 2em;
+  color: var(--text);
+  background-color: var(--background);
+  border: solid 1px var(--border);
+  cursor: pointer;
+  font-size: var(--size-1);
+
+  &:hover {
+    --background: var(--color-black);
+    --text: var(--color-white);
+  }
+}
diff --git a/_includes/styles/components/header.css b/_includes/styles/components/header.css
@@ -1,17 +1,17 @@
 .header {
-  --gap: var(--space-m-xl);
-
-  display: flex;
-  column-gap: var(--gap);
+  display: grid;
+  row-gap: var(--space-m);
+  margin-bottom: 100px;
+  margin-left: 250px;
 }
 
-.header-logo {
-  svg {
-    width: 190px;
-    height: auto;
-    display: block;
-  }
+.header-title {
+  font-size: var(--size-7);
+  letter-spacing: var(--size-7-spacing);
+  font-weight: var(--font-black);
+  line-height: var(--line-xshort);
+  margin: 0;
 }
-.header-menu {
-  flex: 1;
+.header-filter {
+  max-width: 800px;
 }
diff --git a/_includes/styles/components/members.css b/_includes/styles/components/members.css
@@ -0,0 +1,67 @@
+.members-grid {
+  --column-gap: var(--space-l-xl);
+  --row-gap: var(--space-l-xl);
+
+  .member {
+    display: grid;
+    grid-template-rows: auto 1fr;
+    grid-template-areas: "avatar" "header";
+    align-content: start;
+    row-gap: var(--space-s);
+    text-decoration: none;
+  }
+
+  .member-avatar {
+    margin: 0;
+    grid-area: avatar;
+    display: block;
+    aspect-ratio: 5/8; /* Proporción áurea */
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+    border-radius: var(--border-radius);
+    transition-property: filter, transform;
+    transition-duration: var(--duration);
+  }
+
+  .member-header {
+    margin: 0;
+    grid-area: header;
+  }
+
+  .member-name {
+    font-size: var(--size-2);
+    margin: 0;
+  }
+
+  .member-job {
+    font-size: var(--size-0);
+    text-wrap: balance;
+    margin: 0;
+  }
+
+  .member-tags {
+    padding: 0.5em;
+    align-self: start;
+    grid-area: avatar / header;
+    opacity: 0;
+    z-index: 1;
+  }
+
+  .member-tag {
+    font-size: var(--size-0);
+    padding: 0.2em 0.5em;
+    border-radius: 2em;
+    background-color: var(--color-white);
+  }
+
+  .member:hover {
+    .member-tags {
+      opacity: 1;
+    }
+    .member-avatar {
+      filter: brightness(50%);
+      transform: scale(1.04);
+    }
+  }
+}
diff --git a/_includes/styles/components/menu.css b/_includes/styles/components/menu.css
@@ -9,7 +9,7 @@
     margin: 0;
     padding: 0;
     display: grid;
-    row-gap: var(--space-3xs);
+    row-gap: var(--space-2xs);
     max-width: 200px;
   }
 
@@ -45,10 +45,15 @@
 .menu-main {
   font-size: var(--size-1);
   font-weight: var(--font-bold);
+  line-height: var(--line-short);
+}
+.menu-projects {
+  font-size: var(--size-0);
+  line-height: var(--line-short);
 }
-
 .menu-languages {
   font-size: var(--size-0);
+  line-height: var(--line-short);
   margin-left: auto;
 
   .is-selected {
diff --git a/_includes/styles/components/navbar.css b/_includes/styles/components/navbar.css
@@ -0,0 +1,18 @@
+.navbar {
+  --gap: var(--space-m-xl);
+
+  display: flex;
+  column-gap: var(--gap);
+  margin-bottom: 100px;
+}
+
+.navbar-logo {
+  svg {
+    width: clamp(90px, 20vw, 190px);
+    height: auto;
+    display: block;
+  }
+}
+.navbar-menu {
+  flex: 1;
+}
diff --git a/_includes/styles/layouts/grid.css b/_includes/styles/layouts/grid.css
@@ -0,0 +1,10 @@
+.ly-grid {
+  --width: 200px;
+  --column-gap: var(--space-m-l);
+  --row-gap: var(--space-m-l);
+
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(var(--width), 100%), 1fr));
+  column-gap: var(--column-gap);
+  row-gap: var(--row-gap);
+}
diff --git a/_includes/styles/layouts/tags.css b/_includes/styles/layouts/tags.css
@@ -0,0 +1,8 @@
+.ly-tags {
+  --gap: 2px;
+
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gap);
+}
diff --git a/_includes/styles/variables.css b/_includes/styles/variables.css
@@ -4,15 +4,18 @@
   --color-white: #fff;
 
   /* Font sizes */
-  --size-0: clamp(0.8rem, 0.8449rem + -0.058vw, 0.8333rem);
-  --size-1: clamp(1rem, 1rem + 0vw, 1rem);
+  --size-0: 0.875rem;
+  --size-1: 1rem;
   --size-2: clamp(1.2rem, 1.1826rem + 0.087vw, 1.25rem);
   --size-3: clamp(1.44rem, 1.3974rem + 0.213vw, 1.5625rem);
   --size-4: clamp(1.728rem, 1.6497rem + 0.3915vw, 1.9531rem);
   --size-5: clamp(2.0736rem, 1.9457rem + 0.6397vw, 2.4414rem);
   --size-6: clamp(2.4883rem, 2.2923rem + 0.9799vw, 3.0518rem);
   --size-7: clamp(2.986rem, 2.6977rem + 1.4412vw, 3.8147rem);
 
+  /* Letter spacing */
+  --size-7-spacing: -0.05em;
+
   /* Font family */
   --font-family: Isaac, system-ui, sans-serif;
   --font-display: IsaacDisplay, var(--font-normal);
@@ -26,7 +29,13 @@
   --font-underline-offset: 0.15em;
 
   /* Line height */
+  --line-xshort: 1.1;
+  --line-short: 1.3;
   --line-base: 1.4;
+
+  /* FX */
+  --border-radius: 6px;
+  --duration: 200ms;
 }
 
 /* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1240,16,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
diff --git a/_includes/templates/member-list.vto b/_includes/templates/member-list.vto
@@ -1,19 +1,24 @@
 <article>
-  <figure>
+  <a class="member" href="{{ member.url }}">
     <img
-      width="64"
-      height="64"
+      width="200"
+      height="200"
+      class="member-avatar"
       src="{{ member.avatar }}"
-      alt="Retrato de {{ member.name }}"
+      alt="Avatar de {{ member.name }}"
     >
-  </figure>
 
-  <header>
-    <h1>
-      <a href="{{ member.url }}">
+    <header class="member-header">
+      <h1 class="member-name">
         {{ member.name }}
-      </a>
-    </h1>
-    <p>{{ member.job }}</p>
-  </header>
+      </h1>
+      <p class="member-job">{{ member.job }}</p>
+    </header>
+
+    <p class="ly-tags member-tags">
+      {{ for tag of member.tags }}
+        <span class="member-tag">{{ tag }}</span>
+      {{ /for }}
+    </p>
+  </a>
 </article>
diff --git a/_includes/templates/navbar.vto b/_includes/templates/navbar.vto
@@ -2,11 +2,12 @@
 menu:
   sections:
     - about
+    - members
+    - portfolio
+    - asociate
     - news
     - articles
     - projects
-    - members
-    - portfolio
   languages:
     gl: 
       name: Galego
@@ -16,13 +17,13 @@ menu:
       home: /es/
 ---
 
-<header class="header">
+<header class="navbar">
   <!-- Logo DAG -->
-  <a class="header-logo" href="{{ menu.languages[lang].home }}">
+  <a class="navbar-logo" href="{{ menu.languages[lang].home }}">
     <img src="/img/icons/dag.svg" alt="Asociación Galega de Deseño" inline>
   </a>
 
-  <nav class="menu header-menu">
+  <nav class="menu navbar-menu">
     <!-- Menú seccións principais -->
     <ul class="menu-main">
       {{ for id of menu.sections }}
diff --git a/articles.yml b/articles.yml
@@ -2,8 +2,10 @@ layout: layouts/article_list.vto
 id: articles
 main_menu: articles
 es:
-  title: Artículos
-  url: /articulos/
+  title: Divulgación
+  url: /divulgacion/
+  oldUrl: /es/articulos/
 gl:
-  title: Artigos
-  url: /artigos/
+  title: Divulgación
+  url: /divulgacion/
+  oldUrl: /gl/artigos/
diff --git a/members.yml b/members.yml
@@ -2,9 +2,10 @@ layout: layouts/member_list.vto
 main_menu: members
 lang: [gl, es]
 gl:
-  title: Socios e socias
+  title: Somos DAG
   url: /socios/
 es:
-  title: Socios y socias
+  title: Somos DAG
   url: /socios/
 id: members
+order: 2
diff --git a/pages/15_asociate_es.yml b/pages/15_asociate_es.yml
@@ -1,4 +1,4 @@
-id: 15
+id: asociate
 title: Asóciate
 basename: asociate
 body:
diff --git a/pages/15_asociate_gl.yml b/pages/15_asociate_gl.yml
@@ -1,4 +1,4 @@
-id: 15
+id: asociate
 title: Asóciate
 basename: asociate
 body:
diff --git a/pages/about_que-e-a-dag_gl.yml b/pages/about_que-e-a-dag_gl.yml
@@ -1,5 +1,5 @@
 id: about
-title: Que é a DAG?
+title: A DAG
 basename: que-e-a-dag
 body:
   - text: >-
diff --git a/style.css b/style.css
@@ -2,5 +2,11 @@
 @import "styles/fonts.css" layer(reset);
 @import "styles/reset.css" layer(reset);
 
-@import "styles/components/header.css" layer(components);
+@import "styles/layouts/grid.css" layer(layouts);
+@import "styles/layouts/tags.css" layer(layouts);
+
+@import "styles/components/navbar.css" layer(components);
 @import "styles/components/menu.css" layer(components);
+@import "styles/components/header.css" layer(components);
+@import "styles/components/members.css" layer(components);
+@import "styles/components/filter.css" layer(components);
