simplificadas as novas, máis importancia aos proxectos

Author: oscarotero

_includes/styles/components/menu.css

@@ -27,20 +27,10 @@
   font-size: var(--size-1);
   font-weight: var(--font-bold);
   line-height: var(--line-short);
-
-  @media (width > 900px) {
-    grid-template-columns: repeat(2, max-content);
-  }
-}
-.menu-projects {
-  font-size: var(--size-0);
-  line-height: var(--line-short);
-  border-left: solid 1px var(--color-line);
-  padding-left: var(--space-m-xl);
-
-  > li {
-    max-width: 200px;
-  }
+  flex: 1 1 auto;
+  min-width: 0;
+  max-width: 400px;
+  grid-template-columns: repeat(auto-fill, 100px);
 }
 .menu-languages {
   font-size: var(--size-0);

_includes/styles/components/news.css

@@ -98,73 +98,7 @@
     line-height: var(--line-xshort);
   }
 }
-/* .news-group {
-  &.is-first {
-    display: grid;
-    gap: var(--space-xl);
-    align-content: start;
-    border-left: solid 1px var(--color-line);
-    padding-left: var(--space-xl);
-  }
-
-  &.is-second {
-    column-count: 3;
-    column-gap: var(--space-3xl);
-    column-rule: solid 1px var(--color-line);
-  }
-} */
 
 .news-home {
-  grid-column: content;
-  display: grid;
-  align-content: start;
-  row-gap: var(--space-xl);
-  column-gap: var(--space-2xl);
-  grid-template-areas: "main" "gr-1" "gr-2";
-
-  > :nth-child(1) {
-    grid-area: main;
-  }
-  > :nth-child(2) {
-    grid-area: gr-1;
-  }
-  > :nth-child(3) {
-    grid-area: gr-2;
-  }
-}
-
-@media (width > 900px) {
-  .news-home {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    grid-template-areas:
-      "main main main"
-      "main main main"
-      "gr-1 gr-1 gr-1"
-      "gr-2 gr-2 gr-2";
-  }
-
-  .news-group {
-    column-count: 3;
-    column-gap: var(--space-3xl);
-    column-rule: solid 1px var(--color-line);
-    padding-top: var(--space-xl);
-    border-top: solid 1px var(--color-line);
-  }
-}
-@media (width > 1500px) {
-  .news-home {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-    grid-template-areas:
-      "main main main gr-1"
-      "main main main gr-1"
-      "gr-2 gr-2 gr-2 gr-1";
-  }
-  .news-group.is-first {
-    display: grid;
-    row-gap: var(--space-xl);
-    border-left: solid 1px var(--color-line);
-    border-top: none;
-    padding-left: var(--space-xl);
-    padding-top: 0;
-  }
+  --width: 450px;
 }

_includes/styles/components/projects.css

@@ -21,16 +21,32 @@
   padding: 0;
   display: grid;
   row-gap: var(--space-m);
+
+  .project {
+    display: grid;
+    grid-template-columns: 300px 1fr;
+    grid-template-areas:
+      "img header"
+      "img links";
+    column-gap: var(--space-l);
+    text-decoration: none;
+  }
+
+  .project-title {
+    font-size: var(--size-3);
+    letter-spacing: var(--size-3-spacing);
+    margin: 0;
+  }
+  .project-description {
+    font-size: var(--size-2);
+    letter-spacing: var(--size-2-spacing);
+
+    p {
+      margin: 0;
+    }
+  }
 }
-.project {
-  display: grid;
-  grid-template-columns: 300px 1fr;
-  grid-template-areas:
-    "img header"
-    "img links";
-  column-gap: var(--space-l);
-  text-decoration: none;
-}
+
 .project-header {
   grid-area: header;
 }
@@ -42,6 +58,13 @@
     margin: 0;
     padding: 0;
   }
+  a {
+    display: inline-block;
+    padding: 0.15em 0;
+    &:hover {
+      text-decoration: none;
+    }
+  }
 }
 .project-image {
   grid-area: img;
@@ -55,16 +78,35 @@
     border-radius: var(--border-radius);
   }
 }
-.project-title {
-  font-size: var(--size-3);
-  letter-spacing: var(--size-3-spacing);
-  margin: 0;
-}
-.project-description {
-  font-size: var(--size-2);
-  letter-spacing: var(--size-1-spacing);
 
-  p {
+.projects-home {
+  .project {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas:
+      "img"
+      "header"
+      "links";
+    row-gap: var(--space-s);
+    text-decoration: none;
+  }
+
+  .project-title {
+    font-size: var(--size-2);
+    letter-spacing: var(--size-2-spacing);
+    line-height: var(--line-short);
     margin: 0;
   }
+
+  .project-description {
+    font-size: var(--size-1);
+    letter-spacing: var(--size-1-spacing);
+
+    p {
+      margin-block: 0.5em 0;
+    }
+  }
+  .project-links {
+    font-size: var(--size-0);
+  }
 }

_includes/styles/layouts/carousel.css

@@ -0,0 +1,36 @@
+.ly-carousel {
+  --width: 400px;
+  --column-gap: var(--space-m-l);
+  --max-width: calc(1300px + var(--lateral) * 2 + var(--space-m-xl) * 2);
+  --margin-inline: max(50% - var(--max-width) / 2, var(--space-m-xl));
+
+  grid-column: full;
+  display: grid;
+  display: grid;
+  row-gap: var(--space-m-l);
+  grid-template-columns: subgrid;
+
+  > * {
+    grid-column: content;
+  }
+}
+.ly-carousel-items {
+  list-style-type: "";
+  margin: 0;
+  padding: 0 0 var(--space-m-l);
+  display: flex;
+  column-gap: var(--column-gap);
+  overflow-x: auto;
+  grid-column: full;
+
+  > * {
+    width: min(100%, var(--width));
+    flex: 0 0 auto;
+    &:first-child {
+      margin-left: var(--margin-inline);
+    }
+    &:last-child {
+      margin-right: var(--margin-inline);
+    }
+  }
+}

_includes/templates/navbar.vto

@@ -2,12 +2,12 @@
 menu:
   sections:
     - about
+    - asociate
     - members
     - portfolio-1
-    - asociate
     - news-1
-    - articles
     - projects
+    - articles
   languages:
     gl: 
       name: Galego
@@ -36,17 +36,6 @@ menu:
     </li>
   </ul>
 
-  <!-- Menú iniciativas -->
-  <ul class="menu-projects">
-    {{
-      for page of search.pages(`type=project in_menu=true lang=${lang}`, "year=desc")
-    }}
-      <li>
-        <a href="{{ page.external_url }}">{{ page.title }}</a>
-      </li>
-    {{ /for }}
-  </ul>
-
   <!-- Menú idiomas -->
   <ul class="menu-languages">
     {{ for code, {name, home} of menu.languages }}

_includes/templates/news-grid.vto

@@ -1,6 +1,6 @@
-{{ set img = main && news.body.find((block) => block.type === "image") }}
+{{ set img = news.body.find((block) => block.type === "image") }}
 
-<article class="news {{ main ? 'is-main' : 'is-secondary' }}">
+<article class="news">
   {{ if img }}
     <img class="news-image" src="{{ img.image }}">
   {{ /if }}

index.vto

@@ -1,22 +1,35 @@
 ---
 id: home
 lang: [gl, es]
+es:
+  projects:
+    title: Proyectos destacados
+gl:
+  projects:
+    title: Proxectos destacados
 ---
 
-<section class="news-home">
-  {{ for index, news of search.pages(`type=news lang=${lang}`, "date=desc", 7) }}
+<section class="projects-home ly-carousel">
+  <header class="subheader">
+    <h2 class="subheader-title">{{ projects.title }}</h2>
+  </header>
 
-    {{ if index === 0 }}
-      {{ include "templates/news-grid.vto" { news, main: true } }}
-      {{ continue }}
-    {{ /if }}
-
-    {{ if index === 1 }}<div class="news-group is-first">{{ /if }}
-    {{ if index === 4 }}</div><div class="news-group is-second">{{ /if }}
+  <ul class="ly-carousel-items">
+    {{
+      for project of search.pages(`type=project in_home=true lang=${lang}`, "year=desc title=asc")
+    }}
+      <li>
+        {{ include "templates/project-list.vto" { project } }}
+      </li>
+    {{ /for }}
+  </ul>
+</section>
 
+<section class="news-home ly-grid">
+  {{
+    for index, news of search.pages(`type=news lang=${lang}`, "date=desc", 6)
+  }}
     {{ include "templates/news-grid.vto" { news } }}
-
-    {{ if index === 6 }}</div>{{ /if }}
   {{ /for }}
 
   <nav>
@@ -25,11 +38,3 @@ lang: [gl, es]
     <a class="button-normal" href="{{ page.url }}">{{ t.home.more_news }}</a>
   </nav>
 </section>
-
-{{# <section>
-  {{
-    for portfolio of search.pages(`type=portfolio lang=${lang}`, "date=desc", 10)
-  }}
-    {{ include "templates/portfolio-list.vto" { portfolio } }}
-  {{ /for }}
-</section> #}}

projects/arquivododesenoarde.yml

@@ -6,3 +6,4 @@ cover: /img/projects/arde-para-web.jpeg
 external_url: "https://arde.gal/"
 draft: false
 in_menu: true
+in_home: true

projects/codigodeontoloxicodesenoread.yml

@@ -6,3 +6,4 @@ cover: /img/projects/baner-codigo-deontologico-2022.jpg
 external_url: "https://designread.es/wp-content/uploads/2022/12/codigo-deontologico_read_IDIOMAS.pdf"
 draft: false
 in_menu: true
+in_home: true

projects/encontro-deseno-cangas.yml

@@ -12,3 +12,4 @@ links:
     url: https://www.flickr.com/photos/asociaciondag/albums/72177720323320332
 
 draft: false
+in_home: true