working on css design system

src/components/ArticleCard.astro

@@ -1,13 +0,0 @@
----
-const { id, title, tags, description } = Astro.props
----
-
-<div class="article">
-    <div class="title">
-        <a href={`/guide/${id}`}>{title}</a>
-    </div>
-    <div class="description">{description}</div>
-    <div class="tags">
-        {tags.map(tag => <a href={`/guide/tags/${tag}`}>#{tag}</a>)}
-    </div>
-</div>

src/components/NewsCard.astro

@@ -1,25 +0,0 @@
----
-const { id, title, tags, description, image, date, author } = Astro.props
----
-
-<div class="news-item">
-    <a href={`/notizie/${id}`} class="title">
-        {title}
-    </a>
-    <div class="content">
-        <div class="date">
-            {
-                new Date(date).toLocaleDateString('it-IT', {
-                    year: 'numeric',
-                    month: 'long',
-                    day: 'numeric',
-                })
-            }
-        </div>
-        <div class="description">{description}</div>
-        <div class="tags">
-            {tags.map(tag => <a href={`/notizie/tags/${tag}`}>#{tag}</a>)}
-        </div>
-        {image && <img src={image} alt={title} />}
-    </div>
-</div>

src/content/config.ts

@@ -1,11 +1,12 @@
 import { z, defineCollection } from 'astro:content'
 
-const postsCollection = defineCollection({
+// Una notizia ha una data di pubblicazione ma non ha un autore in quanto sono
+// notizie generiche sul PHC e non sono scritte da un autore specifico
+const newsCollection = defineCollection({
     type: 'content',
     schema: z.object({
         title: z.string(),
         description: z.string(),
-        author: z.string(),
         publishDate: z.date(),
         image: z
             .object({
@@ -13,10 +14,11 @@ const postsCollection = defineCollection({
                 alt: z.string(),
             })
             .optional(),
-        tags: z.array(z.string()),
     }),
 })
 
+// Una guida ha un autore ma non ha una data di pubblicazione in quanto è un
+// contenuto statico e non è importante sapere quando è stata pubblicata
 const guidesCollection = defineCollection({
     type: 'content',
     schema: z.object({
@@ -28,6 +30,7 @@ const guidesCollection = defineCollection({
     }),
 })
 
+// Per ora sono su un sito a parte ma prima o poi verranno migrati qui
 const seminariettiCollection = defineCollection({
     type: 'content',
     schema: z.object({
@@ -42,7 +45,7 @@ const seminariettiCollection = defineCollection({
 
 // Export a single `collections` object to register your collection(s)
 export const collections = {
-    posts: postsCollection,
+    news: newsCollection,
     guides: guidesCollection,
     seminarietti: seminariettiCollection,
 }

src/content/meta/design.mdx

@@ -1,8 +1,6 @@
 import Container from '../../components/meta/Container.astro'
 import Palette from '../../components/meta/Palette.astro'
 
-import ArticleCard from '../../components/ArticleCard.astro'
-
 # Meta > Design
 
 In questa pagina tento di spiegare come funziona il design di questo sito. I blocchi di codice con sfondo arancione chiaro sono esempi di codice Astro e sotto hanno un'anteprima del risultato _generata automaticamente_. Ad esempio
@@ -11,6 +9,21 @@ In questa pagina tento di spiegare come funziona il design di questo sito. I blo
 <p>Questo è un paragrafo</p>
 ```
 
+Molti di questi esempi hanno alcuni stili impostati in `style` per mostrare come funzionano. Nella pratica invece è consigliato create una classe per ogni tipo di componente ed impostare le proprietà via CSS, ad esempio
+
+```css
+.my-custom-form {
+    --card-base: var(--palette-red);
+    max-width: 25rem;
+}
+```
+
+```html
+<div class="my-custom-form card">
+    <p>Questo è un paragrafo</p>
+</div>
+```
+
 ## Card
 
 Le card sono uno dei componenti più importanti di questo sito. Sono utilizzate per mostrare i post, i progetti e le pagine. Ecco alcuni esempi per dare un'idea
@@ -29,7 +42,9 @@ Una card semplice ha un titolo ed una descrizione.
 </div>
 ```
 
-### Variante grande
+### Varianti
+
+#### Grande
 
 Le card possono essere di dimensioni diverse. Questa è una card grande.
 
@@ -43,20 +58,116 @@ Le card possono essere di dimensioni diverse. Questa è una card grande.
 </div>
 ```
 
-### Lista di articoli
+### Low Level: Mixin SCSS
 
-Una lista di articoli è composta da più card, ognuna delle quali rappresenta un articolo. Ogni card ha un titolo, una descrizione e una lista di tag.
+Non dovrebbe essere mai necessario usarlo direttamente ma l'effetto di ombra delle card è ottenuto con questo mixin SCSS (che si trova in `src/styles/mixins.scss`).
 
-<Container size="large" style={{ '--zone-color': 'var(--guide-base-color)' }}>
+```scss
-    <div class="article-list">
+@mixin neo-brutalist-card($size: 3px, $offset: $size + 1, $shadow: true, $hoverable: false) {
-        <ArticleCard id="article-1" title="Titolo 1" description="Descrizione 1" tags={['tag1', 'tag2']} />
+    border: $size solid #222;
-        <ArticleCard id="article-2" title="Titolo 2" description="Descrizione 2" tags={['tag2', 'tag3']} />
+    border-radius: $size * 2;
-        <ArticleCard id="article-3" title="Titolo 3" description="Descrizione 3" tags={['tag3', 'tag4']} />
+
-        <ArticleCard id="article-3" title="Titolo 3" description="Descrizione 3" tags={['tag3', 'tag4']} />
+    @if $shadow {
-        <ArticleCard id="article-3" title="Titolo 3" description="Descrizione 3" tags={['tag3', 'tag4']} />
+        box-shadow: $offset $offset 0 0 #222;
-        <ArticleCard id="article-3" title="Titolo 3" description="Descrizione 3" tags={['tag3', 'tag4']} />
+    }
+
+    @if $hoverable {
+        transition: all 64ms linear;
+
+        &:hover {
+            transform: translate(-1px, -1px);
+            box-shadow: $offset + 1 $offset + 1 0 0 #222;
+        }
+    }
+}
+```
+
+Ad esempio tutti i bottoni utilizzano direttamente questo mixin senza cambiare i parametri di default.
+
+### Sotto-componenti
+
+#### Titolo
+
+```astro
+<div class="card">
+    <div class="title">Titolo</div>
+</div>
+```
+
+#### Testo & Modificatori
+
+Se c'è poco testo, può essere inserito direttamente nella card.
+
+```astro
+<div class="card">
+    <div class="text">
+        Descrizione lorem ipsum dolor sit amet consectetur
+        adipisicing elit. Aspernatur, labore?
     </div>
-</Container>
+</div>
+```
+
+Altrimenti può essere inserito in un tag `<p>`.
+
+```astro
+<div class="card">
+    <div class="text">
+        <p>
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit.
+            Distinctio, vel! Veritatis est sit beatae eveniet.
+        </p>
+        <p>
+            Error, minus, asperiores quaerat nulla cumque, nisi ipsam
+            assumenda consectetur accusamus tempore consequatur quae. Fugit?
+        </p>
+        <p>
+            Quos sapiente amet numquam quis, libero odit eum, eius
+            perspiciatis repellat nesciunt cupiditate asperiores maiores?
+        </p>
+    </div>
+</div>
+```
+
+C'è anche il modificatore `small` e `dimmed` per ridurre la grandezza del testo e renderlo grigio rispettivamente.
+
+```astro
+<div class="card" style="max-width: 25rem;">
+    <div class="text">
+        Some normal text, this is a very long
+        text that should wrap on the next line
+    </div>
+    <div class="text small">
+        This is some small text
+    </div>
+    <div class="text dimmed">
+        This is some dimmed text
+    </div>
+    <div class="text small dimmed">
+        This is some small dimmed text
+    </div>
+</div>
+```
+
+#### Tags
+
+I tag sono una lista di link con `display: flex` e `flex-wrap: wrap`.
+
+```astro
+<div class="card" style="max-width: 25rem;">
+    <div class="tags">
+        <a href="#">#tag1</a>
+        <a href="#">#tagg2</a>
+        <a href="#">#tag3</a>
+        <a href="#">#taggg4</a>
+        <a href="#">#tagg5</a>
+        <a href="#">#taggg6</a>
+        <a href="#">#tag7</a>
+        <a href="#">#taggg8</a>
+        <a href="#">#tag9</a>
+        <a href="#">#taggggg10</a>
+    </div>
+</div>
+```
 
 ## Palette
 

src/content/news/2024-07-28-nuovo-sito.md

@@ -1,9 +1,7 @@
 ---
 title: Il Nuovo Sito del PHC
 description: Benvenuti nel nuovo sito web del PHC, realizzato con la tecnologia web Astro! In questo articolo, ne vedremo le feature principali e cosa serba il futuro.
-author: Francesco Minnocci
 publishDate: 2024-07-28
-tags: [astro, web, appunti]
 ---
 
 # Il Nuovo Sito del PHC

src/layouts/ArticleLayout.astro

@@ -7,8 +7,10 @@ import Footer from '../components/Footer.astro'
 
 <BaseLayout {...Astro.props}>
     <Header />
-    <main class="text-content">
+    <main class="article card large">
-        <slot />
+        <div class="text">
+            <slot />
+        </div>
     </main>
     <Footer />
 </BaseLayout>

src/pages/guide/[id].astro

@@ -5,8 +5,11 @@ import ArticleLayout from '../../layouts/ArticleLayout.astro'
 
 export async function getStaticPaths() {
     const guides = await getCollection('guides')
+
+    console.log(guides)
+
     return guides.map(entry => ({
-        params: { id: entry.data.id },
+        params: { id: entry.slug },
         props: { entry },
     }))
 }

src/pages/guide/index.astro

@@ -2,21 +2,26 @@
 import { getCollection } from 'astro:content'
 
 import PageLayout from '@layouts/PageLayout.astro'
-import ArticleCard from '@components/ArticleCard.astro'
 
-const posts = await getCollection('guides')
+const guides = await getCollection('guides')
 ---
 
 <PageLayout pageName="guide">
-    <div class="article-list">
+    <h1>Guide</h1>
+    <div class="card-list">
         {
-            posts.map(post => (
+            guides.map(guide => (
-                <ArticleCard
+                <div class="card">
-                    title={post.data.title}
+                    <div class="title">
-                    id={post.data.id}
+                        <a href={`/guide/${guide.slug}`}>{guide.data.title}</a>
-                    description={post.data.description}
+                    </div>
-                    tags={post.data.tags}
+                    <div class="text">{guide.data.description}</div>
-                />
+                    <div class="tags">
+                        {guide.data.tags.map(tag => (
+                            <a href={`/guide/tags/${tag}`}>#{tag}</a>
+                        ))}
+                    </div>
+                </div>
             ))
         }
     </div>

src/pages/guide/tags/[tag].astro

@@ -19,7 +19,7 @@ export async function getStaticPaths() {
             params: { tag },
             props: {
                 tag,
-                blogposts: guides.filter(post => post.data.tags.includes(tag)),
+                guides: guides.filter(post => post.data.tags.includes(tag)),
             },
         }
     })
@@ -27,24 +27,24 @@ export async function getStaticPaths() {
 
 interface Props {
     tag: string
-    blogposts: CollectionEntry<'guides'>[]
+    guides: CollectionEntry<'guides'>[]
 }
 
-const { tag, blogposts } = Astro.props
+const { tag, guides } = Astro.props
 ---
 
-<PageLayout pageName="tag">
+<PageLayout pageName="guide tag">
-    <h1>#{tag}</h1>
+    <h1>Guide > #{tag}</h1>
-    <div class="article-list">
+    <div class="card-list">
         {
-            blogposts.map(post => (
+            guides.map(guide => (
-                <div class="article">
+                <div class="card">
                     <div class="title">
-                        <a href={`/guide/${post.data.id}`}>{post.data.title}</a>
+                        <a href={`/guide/${guide.slug}`}>{guide.data.title}</a>
                     </div>
-                    <div class="description">{post.data.description}</div>
+                    <div class="text">{guide.data.description}</div>
                     <div class="tags">
-                        {post.data.tags.map(tag => (
+                        {guide.data.tags.map(tag => (
                             <a href={`/guide/tags/${tag}`}>#{tag}</a>
                         ))}
                     </div>

src/pages/meta/design.astro

@@ -15,7 +15,7 @@ const headings = getHeadings()
     <Header />
     <aside>
         <nav>
-            <h2>Indice</h2>
+            <h3>Indice</h3>
             <ul>
                 {
                     headings.map(heading => (

src/pages/notizie/[id].astro

@@ -4,7 +4,7 @@ import { getCollection } from 'astro:content'
 import ArticleLayout from '../../layouts/ArticleLayout.astro'
 
 export async function getStaticPaths() {
-    const guides = await getCollection('posts')
+    const guides = await getCollection('news')
     return guides.map(entry => ({
         params: { id: entry.slug },
         props: { entry },
@@ -15,15 +15,6 @@ const { entry } = Astro.props
 const { Content } = await entry.render()
 ---
 
-<ArticleLayout
+<ArticleLayout {...entry.data} pageName={['notizia']}>
-    title={entry.data.title}
-    description={entry.data.description}
-    tags={entry.data.tags}
-    image={entry.data.image}
-    date={entry.data.publishDate}
-    author={entry.data.author}
-
-    pageName={['notizia']}
->
     <Content />
 </ArticleLayout>

src/pages/notizie/index.astro

@@ -2,24 +2,28 @@
 import { getCollection } from 'astro:content'
 
 import PageLayout from '@layouts/PageLayout.astro'
-import NewsCard from '@components/NewsCard.astro'
 
-const posts = await getCollection('posts')
+const news = await getCollection('news')
 ---
 
 <PageLayout pageName="notizie">
-    <div class="news-list">
+    <h1>Notizie</h1>
+    <div class="card-list">
         {
-            posts.map(post => (
+            news.map(newsItem => (
-                <NewsCard
+                <div class="card">
-                    id={post.slug}
+                    <a href={`/notizie/${newsItem.slug}`} class="title">
-                    title={post.data.title}
+                        {newsItem.data.title}
-                    description={post.data.description}
+                    </a>
-                    tags={post.data.tags}
+                    <div class="text small dimmed">
-                    image={post.data.image}
+                        {new Date(newsItem.data.publishDate).toLocaleDateString('it-IT', {
-                    date={post.data.publishDate}
+                            year: 'numeric',
-                    author={post.data.author}
+                            month: 'long',
-                />
+                            day: 'numeric',
+                        })}
+                    </div>
+                    <div class="text">{newsItem.data.description}</div>
+                </div>
             ))
         }
     </div>

src/styles/components.scss

@@ -1,378 +1,428 @@
-$news-bg: #fffbeb;
+// $news-bg: #fffbeb;
-$news-accent-bg: #f8e8b1;
+// $news-accent-bg: #f8e8b1;
 
 @import './mixins.scss';
 
-//
+@layer component {
-// Components - for complex parts of the UI like search bars or compound buttons
+    //
-//
+    // Components - for complex parts of the UI like search bars or compound buttons
-
+    //
-.material-symbols-outlined {
-    display: inline-grid;
-    place-content: center;
-
-    font-size: 24px;
-    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
-}
-
-.title {
-    font-family: 'Iosevka', monospace;
-    font-weight: 700;
-    font-size: 28px;
-}
-
-.search {
-    width: 100%;
-    height: 2.5rem;
-
-    @include neo-brutalist-card;
-
-    display: grid;
-    grid-template-columns: 1fr auto;
-    align-items: center;
-
-    cursor: pointer;
-
-    background: #fff;
-
-    &:hover,
-    &:hover input[type='text'] {
-        background: #f8f8f8;
-    }
-
-    input[type='text'] {
-        border: none;
-        box-shadow: none;
-        outline: none;
-        height: 100%;
-
-        padding: 0;
-        padding-left: 0.35rem;
-    }
 
     .material-symbols-outlined {
-        padding: 0 0.5rem;
+        display: inline-grid;
+        place-content: center;
+
+        font-size: 24px;
+        font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
     }
-}
 
-.flex-column {
+    .title {
-    display: flex;
+        font-family: 'Iosevka', monospace;
-    flex-direction: column;
+        font-weight: 700;
-    gap: 1rem;
+        font-size: 28px;
-}
-
-.flex-row {
-    display: flex;
-    flex-direction: row;
-    gap: 1rem;
-}
-
-// just to know for reference
-.fake-masonry {
-    display: grid;
-    grid-template-columns: repeat(var(--columns), 1fr);
-    grid-auto-flow: dense;
-
-    & > * {
-        grid-row: span var(--masonry-height);
     }
-}
 
-.search-results {
+    .search {
-    width: 100%;
-
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-
-    .search-result {
         width: 100%;
-
+        height: 2.5rem;
-        display: grid;
-        grid-template-columns: auto auto 1fr auto;
-        grid-template-areas: 'icon text . right';
-
-        align-items: center;
-
-        gap: 0.5rem;
-
-        padding: 0.5rem;
-
-        background: #fff;
 
         @include neo-brutalist-card;
 
-        a {
+        display: grid;
-            display: contents;
+        grid-template-columns: 1fr auto;
+        align-items: center;
+
+        cursor: pointer;
+
+        background: #fff;
+
+        &:hover,
+        &:hover input[type='text'] {
+            background: #f8f8f8;
         }
 
-        & > .icon {
+        input[type='text'] {
-            grid-area: icon;
+            border: none;
-            display: grid;
+            box-shadow: none;
+            outline: none;
+            height: 100%;
+
+            padding: 0;
+            padding-left: 0.35rem;
         }
 
-        & > .text {
+        .material-symbols-outlined {
-            grid-area: text;
+            padding: 0 0.5rem;
-            display: grid;
-        }
-
-        & > .right {
-            grid-area: right;
-            display: grid;
         }
     }
-}
 
-.appunti-scrollable {
+    .flex-column {
-    display: flex;
+        display: flex;
-    overflow-x: auto;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .flex-row {
+        display: flex;
+        flex-direction: row;
+        gap: 1rem;
+    }
+
+    // just to know for reference
+    .fake-masonry {
+        display: grid;
+        grid-template-columns: repeat(var(--columns), 1fr);
+        grid-auto-flow: dense;
+
+        & > * {
+            grid-row: span var(--masonry-height);
+        }
+    }
+
+    .search-results {
+        width: 100%;
+
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+
+        .search-result {
+            width: 100%;
+
+            display: grid;
+            grid-template-columns: auto auto 1fr auto;
+            grid-template-areas: 'icon text . right';
+
+            align-items: center;
+
+            gap: 0.5rem;
+
+            padding: 0.5rem;
+
+            background: #fff;
+
+            @include neo-brutalist-card;
+
+            a {
+                display: contents;
+            }
+
+            & > .icon {
+                grid-area: icon;
+                display: grid;
+            }
+
+            & > .text {
+                grid-area: text;
+                display: grid;
+            }
+
+            & > .right {
+                grid-area: right;
+                display: grid;
+            }
+        }
+    }
+
+    .appunti-scrollable {
+        display: flex;
+        overflow-x: auto;
+
+        .appunti-list {
+            padding: 2px;
+            padding-bottom: 1rem;
+        }
+    }
 
     .appunti-list {
-        padding: 2px;
-        padding-bottom: 1rem;
-    }
-}
-
-.appunti-list {
-    display: grid;
-    grid-auto-flow: column;
-
-    gap: 3rem;
-
-    overflow-x: auto;
-
-    max-width: 100%;
-}
-
-.appunti-item {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-
-    color: #444;
-
-    & > .thumbnail {
-        width: 10rem;
-        aspect-ratio: 10 / 14;
-        background: #e0e0e0;
-
-        @include neo-brutalist-card($hoverable: true);
-    }
-
-    & > .thumbnail + * {
-        font-weight: 700;
-        padding-top: 0.25rem;
-    }
-
-    & > .title,
-    & > .course,
-    & > .author,
-    & > .course-year {
-        padding-left: 0.5rem;
-        font-size: 16px;
-    }
-}
-
-.article-list {
-    display: grid;
-    grid-auto-flow: row;
-
-    max-width: 100%;
-
-    gap: 2rem;
-    grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
-    grid-auto-rows: auto;
-
-    .article {
         display: grid;
-        grid-template-rows: auto auto auto;
+        grid-auto-flow: column;
 
-        background: var(--card-bg, $project-card-bg);
+        gap: 3rem;
-        color: #000e;
+
+        overflow-x: auto;
+
+        max-width: 100%;
+    }
+
+    .appunti-item {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+
+        color: #444;
+
+        & > .thumbnail {
+            width: 10rem;
+            aspect-ratio: 10 / 14;
+            background: #e0e0e0;
+
+            @include neo-brutalist-card($hoverable: true);
+        }
+
+        & > .thumbnail + * {
+            font-weight: 700;
+            padding-top: 0.25rem;
+        }
+
+        & > .title,
+        & > .course,
+        & > .author,
+        & > .course-year {
+            padding-left: 0.5rem;
+            font-size: 16px;
+        }
+    }
+
+    .article-list {
+        display: grid;
+        grid-auto-flow: row;
+
+        max-width: 100%;
+
+        gap: 2rem;
+        grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
+        grid-auto-rows: auto;
+
+        .article {
+            display: grid;
+            grid-template-rows: auto auto auto;
+
+            background: var(--card-bg, $project-card-bg);
+            color: #000e;
+
+            @include neo-brutalist-card($size: 3px, $offset: 9px);
+
+            row-gap: 0.5rem;
+            padding: 1rem;
+
+            .description {
+                font-size: 16px;
+            }
+
+            .tags {
+                display: flex;
+                gap: 0.5rem;
+                flex-wrap: wrap;
+                font-size: 14px;
+                font-weight: 600;
+                color: #555;
+            }
+        }
+    }
+
+    .news-list {
+        display: grid;
+        grid-auto-flow: column;
+
+        // .news-item {
+        //     background: $news-bg;
+        //     color: #111;
+
+        //     @include neo-brutalist-card($size: 3px, $offset: 9px);
+
+        //     display: flex;
+        //     flex-direction: column;
+
+        //     width: 22rem;
+        //     max-height: 27rem;
+
+        //     overflow: hidden;
+
+        //     ::-webkit-scrollbar {
+        //         width: 10px;
+        //     }
+
+        //     ::-webkit-scrollbar-thumb {
+        //         background-color: #c67e14;
+        //         border: 2px solid #222;
+
+        //         &:hover {
+        //             background-color: #e69419;
+        //         }
+        //     }
+
+        //     a {
+        //         font-weight: 600;
+        //         text-decoration: none;
+        //         color: #c67e14;
+
+        //         &:hover {
+        //             text-decoration: underline solid 2px;
+        //         }
+        //     }
+
+        //     & > .title {
+        //         padding: 1rem;
+        //         background: $news-accent-bg;
+        //         line-height: 1;
+        //         font-size: 26px;
+        //     }
+
+        //     a.title {
+        //         color: #83530c;
+        //     }
+
+        //     & > .abstract {
+        //         flex-grow: 1;
+
+        //         padding: 1rem;
+
+        //         overflow-y: auto;
+
+        //         @extend .text;
+        //     }
+
+        //     & > .content {
+        //         display: flex;
+        //         padding: 1rem;
+        //         flex-direction: column;
+        //         gap: 0.5rem;
+
+        //         background: #fff8da;
+
+        //         & > .continue {
+        //             padding: 1rem;
+
+        //             display: grid;
+        //             align-items: end;
+        //             justify-content: end;
+        //         }
+
+        //         & > .description {
+        //             font-size: 16px;
+        //             line-height: 1.5;
+
+        //             flex-grow: 1;
+        //         }
+
+        //         & > .tags {
+        //             display: flex;
+        //             gap: 0.5rem;
+        //             flex-wrap: wrap;
+        //             font-size: 14px;
+        //             color: #555;
+        //         }
+
+        //         & > .date {
+        //             font-size: 14px;
+        //             font-style: italic;
+        //             font-weight: 600;
+        //             color: #0008;
+        //         }
+
+        //         & > .author {
+        //             font-weight: 600;
+        //             font-size: 15px;
+        //             color: #555;
+        //         }
+        //     }
+        // }
+    }
+
+    //
+    // Cards
+    //
+
+    .card {
+        display: grid;
+
+        --card-base-internal: var(--card-base, #f8f8f8);
+
+        background: var(--card-base-internal);
+        color: color-mix(in srgb, var(--card-base-internal), #000 80%);
 
         @include neo-brutalist-card($size: 3px, $offset: 9px);
 
         row-gap: 0.5rem;
         padding: 1rem;
 
-        .description {
+        // Variants
-            font-size: 16px;
+
+        &.large {
+            padding: 2rem;
+
+            @include neo-brutalist-card($size: 4px, $offset: 8px);
+
+            row-gap: 1rem;
+
+            & > .title {
+                font-size: 36px;
+                font-weight: 700;
+            }
+
+            & > .text {
+                font-size: 18px;
+            }
         }
 
-        .tags {
+        // Child Items
+
+        & > .title {
+            color: color-mix(in srgb, var(--card-base-internal), #000 75%);
+            font-size: 26px;
+            font-weight: 700;
+        }
+
+        & > .text {
+            font-size: 16px;
+
+            &.small {
+                color: color-mix(in srgb, var(--card-base-internal), #000 75%);
+                font-size: 14px;
+                font-weight: 600;
+            }
+
+            &.dimmed {
+                color: color-mix(in srgb, var(--card-base-internal), #000 50%);
+            }
+        }
+
+        & > .tags {
             display: flex;
             gap: 0.5rem;
             flex-wrap: wrap;
             font-size: 14px;
             font-weight: 600;
             color: #555;
-        }
-    }
-}
 
-.news-list {
+            a {
-    display: grid;
+                color: color-mix(in srgb, var(--card-base-internal), #000 60%);
-    grid-auto-flow: column;
+                font-weight: 600;
 
-    .news-item {
+                &:hover {
-        background: $news-bg;
+                    text-decoration: underline solid 2px;
-        color: #111;
+                }
-
-        @include neo-brutalist-card($size: 3px, $offset: 9px);
-
-        display: flex;
-        flex-direction: column;
-
-        width: 22rem;
-        max-height: 27rem;
-
-        overflow: hidden;
-
-        ::-webkit-scrollbar {
-            width: 10px;
-        }
-
-        ::-webkit-scrollbar-thumb {
-            background-color: #c67e14;
-            border: 2px solid #222;
-
-            &:hover {
-                background-color: #e69419;
             }
         }
 
-        a {
+        a:hover {
-            font-weight: 600;
+            text-decoration: underline solid 2px;
-            text-decoration: none;
-            color: #c67e14;
-
-            &:hover {
-                text-decoration: underline solid 2px;
-            }
-        }
-
-        & > .title {
-            padding: 1rem;
-            background: $news-accent-bg;
-            line-height: 1;
-            font-size: 26px;
         }
 
         a.title {
-            color: #83530c;
+            &:hover {
+                text-decoration: underline solid 3px;
+            }
         }
+    }
 
-        & > .abstract {
+    //
-            flex-grow: 1;
+    // Card List
+    //
 
-            padding: 1rem;
+    .card-list {
+        display: grid;
+        grid-auto-flow: row;
 
-            overflow-y: auto;
+        max-width: 100%;
 
-            @extend .text;
+        gap: 2rem;
-        }
+        grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
+        grid-auto-rows: auto;
 
-        & > .content {
+        & > .card {
-            display: flex;
+            max-width: 25rem;
-            padding: 1rem;
-            flex-direction: column;
-            gap: 0.5rem;
-
-            background: #fff8da;
-
-            & > .continue {
-                padding: 1rem;
-
-                display: grid;
-                align-items: end;
-                justify-content: end;
-            }
-
-            & > .description {
-                font-size: 16px;
-                line-height: 1.5;
-
-                flex-grow: 1;
-            }
-
-            & > .tags {
-                display: flex;
-                gap: 0.5rem;
-                flex-wrap: wrap;
-                font-size: 14px;
-                color: #555;
-            }
-
-            & > .date {
-                font-size: 14px;
-                font-style: italic;
-                font-weight: 600;
-                color: #0008;
-            }
-
-            & > .author {
-                font-weight: 600;
-                font-size: 15px;
-                color: #555;
-            }
         }
     }
 }
-
-//
-// Cards
-//
-
-.card {
-    display: grid;
-
-    --card-base-internal: var(--card-base, #f8f8f8);
-
-    background: var(--card-base-internal);
-    color: color-mix(in srgb, var(--card-base-internal), #000 80%);
-
-    @include neo-brutalist-card($size: 3px, $offset: 9px);
-
-    row-gap: 0.5rem;
-    padding: 1rem;
-
-    // Variants
-
-    &.large {
-        padding: 2rem;
-
-        @include neo-brutalist-card($size: 4px, $offset: 8px);
-
-        row-gap: 1rem;
-
-        & > .title {
-            font-size: 36px;
-            font-weight: 700;
-        }
-
-        & > .text {
-            font-size: 18px;
-        }
-    }
-
-    // Child Items
-
-    & > .title {
-        color: color-mix(in srgb, var(--card-base-internal), #000 75%);
-        font-size: 26px;
-        font-weight: 700;
-    }
-
-    & > .text {
-        font-size: 16px;
-    }
-
-    & > .tags {
-        display: flex;
-        gap: 0.5rem;
-        flex-wrap: wrap;
-        font-size: 14px;
-        font-weight: 600;
-        color: #555;
-    }
-}

src/styles/main.scss

@@ -16,77 +16,53 @@ $project-card-bg: #a2d4f3;
 
 $screen-desktop-min: 1024px;
 
+@layer common, typography, component, page;
+
 @import './mixins.scss';
 @import './typography.scss';
 
-*,
+@layer common {
-*::before,
+    *,
-*::after {
+    *::before,
-    box-sizing: border-box;
+    *::after {
-    font: inherit;
+        box-sizing: border-box;
-    margin: 0;
+        font: inherit;
-}
+        margin: 0;
+    }
 
-html {
+    html {
-    height: 100%;
+        height: 100%;
-}
+    }
 
-html,
+    html,
-body {
+    body {
-    min-height: 100%;
+        min-height: 100%;
-    margin: 0;
+        margin: 0;
 
-    font-family: 'Open Sans', sans-serif;
+        font-family: 'Open Sans', sans-serif;
-    font-size: 18px;
+        font-size: 18px;
-    color: #222;
+        color: #222;
-}
+    }
 
-// html {
+    // html {
-//    scroll-snap-type: y proximity;
+    //    scroll-snap-type: y proximity;
-//    scroll-padding-top: 4rem;
+    //    scroll-padding-top: 4rem;
-// }
+    // }
 
-img {
+    img {
-    display: block;
+        display: block;
-}
+    }
 
-a {
+    a {
-    color: inherit;
+        color: inherit;
-    text-decoration: none;
+        text-decoration: none;
+    }
 }
 
 //
 // Typography
 //
 
-.text {
-    display: block;
-
-    line-height: 1.5;
-
-    p + p {
-        margin-top: 0.5rem;
-    }
-
-    em {
-        font-style: italic;
-    }
-
-    strong {
-        font-weight: 600;
-    }
-
-    a,
-    a:visited {
-        color: #1e6733;
-        font-weight: 600;
-
-        &:hover {
-            text-decoration: underline 2px solid;
-        }
-    }
-}
-
 @import './controls.scss';
 @import './components.scss';
 

src/styles/typography.scss

@@ -24,108 +24,132 @@
             margin-bottom: 0.25rem;
         }
 
-        p + h#{$i} {
+        // p + h#{$i} {
-            margin-top: 0.75rem * $factor;
+        //     margin-top: 0.75rem * $factor;
-        }
+        // }
     }
 }
 
-@include geometric-headings;
+@layer typography {
-
-.text-content {
-    & > * {
-        max-width: 46rem;
-    }
-
-    pre,
-    code {
-        background: var(--code-bg, #f0f0f0) !important;
-
-        font-family: 'Source Code Pro', monospace;
-        font-weight: 400;
-        font-size: 16px;
-    }
-
-    code {
-        border-radius: 0.25rem;
-        padding: 0.125rem;
-    }
-
-    pre {
-        margin: 2rem auto;
-
-        padding: 0.5rem 1rem;
-
-        // width: 100%;
-        max-width: 80ch;
-
-        width: fit-content;
-
-        line-height: 1.5;
-
-        border-radius: 0.25rem;
-
-        box-shadow: 0.25rem 0.25rem 0 0 #333;
-        border: 2px solid #333;
-
-        code {
-            padding: 0;
-        }
-    }
-
-    p {
-        line-height: 1.75;
-        margin: 1rem auto;
-    }
-
-    strong {
-        font-weight: 500;
-    }
-
-    em {
-        font-style: italic;
-    }
-
     @include geometric-headings;
 
-    h1 {
+    .text-content,
-        margin-bottom: 2rem;
+    .text {
-        text-align: center;
+        line-height: 1.5;
-    }
 
-    h1,
-    h2,
-    h3,
-    h4 {
-        font-weight: 700;
-        color: #333;
-    }
-
-    h1,
-    h2,
-    h3,
-    h4,
-    ol,
-    ul {
-        margin-left: auto;
-        margin-right: auto;
-    }
-
-    a,
-    a:visited {
-        color: var(--zone-color, #1e6733);
-        font-weight: 600;
-
-        &:hover {
-            text-decoration: underline 2px solid;
-        }
-    }
-
-    padding: 2rem 0 3rem;
-
-    @media screen and (max-width: 1024px) {
         & > * {
-            margin: 0 0.75rem;
+            max-width: 46rem;
+        }
+
+        pre,
+        code {
+            background: color-mix(in lab, var(--card-base-internal, #ededed), #fff 35%) !important;
+            // background: color-mix(in lab, var(--zone-color), #fff 75%) !important;
+            // background: var(--code-bg, #00000022) !important;
+
+            font-family: 'Source Code Pro', monospace;
+            font-weight: 400;
+            font-size: 16px;
+        }
+
+        code {
+            border-radius: 0.25rem;
+            padding: 0.125rem 0.3rem;
+        }
+
+        pre {
+            margin: 2rem auto;
+
+            padding: 0.5rem 1rem;
+
+            // width: 100%;
+            max-width: 80ch;
+
+            width: fit-content;
+
+            line-height: 1.5;
+
+            border-radius: 0.25rem;
+
+            box-shadow: 0.25rem 0.25rem 0 0 #333;
+            border: 2px solid #333;
+
+            code {
+                padding: 0;
+            }
+        }
+
+        p {
+            line-height: 1.75;
+            margin: 0 auto;
+        }
+
+        p + p {
+            margin-top: 1rem;
+        }
+
+        h1 + p,
+        h2 + p,
+        h3 + p,
+        h4 + p {
+            margin-top: 1rem;
+        }
+
+        p:has(+ h1, + h2, + h3, + h4) {
+            margin-bottom: 1rem;
+        }
+
+        strong {
+            font-weight: 600;
+        }
+
+        em {
+            font-style: italic;
+        }
+
+        @include geometric-headings;
+
+        h1 {
+            margin-bottom: 2rem;
+            text-align: center;
+        }
+
+        h1,
+        h2,
+        h3,
+        h4 {
+            font-weight: 700;
+            color: #333;
+
+            // trick to fix anchor links with sticky header
+            padding-top: 7rem;
+            margin-top: -6.5rem;
+        }
+
+        h1,
+        h2,
+        h3,
+        h4,
+        ol,
+        ul {
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        a,
+        a:visited {
+            color: var(--zone-color, #1e6733);
+            font-weight: 600;
+
+            &:hover {
+                text-decoration: underline 2px solid;
+            }
+        }
+
+        @media screen and (max-width: 1024px) {
+            & > * {
+                margin: 0 0.75rem;
+            }
         }
     }
 }