From fb43eddefc855f720ea8f43c5b4f0e7210100210 Mon Sep 17 00:00:00 2001 From: Antonio De Lucreziis Date: Fri, 2 Aug 2024 19:07:18 +0200 Subject: [PATCH] working on css design system --- src/components/ArticleCard.astro | 13 - src/components/NewsCard.astro | 25 - src/content/config.ts | 11 +- src/content/meta/design.mdx | 139 ++- .../{posts => news}/2024-07-28-nuovo-sito.md | 2 - src/layouts/ArticleLayout.astro | 6 +- src/pages/guide/[id].astro | 5 +- src/pages/guide/index.astro | 25 +- src/pages/guide/tags/[tag].astro | 22 +- src/pages/meta/design.astro | 2 +- src/pages/notizie/[id].astro | 15 +- src/pages/notizie/index.astro | 32 +- src/styles/components.scss | 596 +++++++------ src/styles/main.scss | 88 +- src/styles/pages.scss | 837 ++++++++++-------- src/styles/typography.scss | 172 ++-- 16 files changed, 1085 insertions(+), 905 deletions(-) delete mode 100644 src/components/ArticleCard.astro delete mode 100644 src/components/NewsCard.astro rename src/content/{posts => news}/2024-07-28-nuovo-sito.md (98%) diff --git a/src/components/ArticleCard.astro b/src/components/ArticleCard.astro deleted file mode 100644 index 7bcd2b1..0000000 --- a/src/components/ArticleCard.astro +++ /dev/null @@ -1,13 +0,0 @@ ---- -const { id, title, tags, description } = Astro.props ---- - -
-
- {title} -
-
{description}
-
- {tags.map(tag => #{tag})} -
-
diff --git a/src/components/NewsCard.astro b/src/components/NewsCard.astro deleted file mode 100644 index dbcd05a..0000000 --- a/src/components/NewsCard.astro +++ /dev/null @@ -1,25 +0,0 @@ ---- -const { id, title, tags, description, image, date, author } = Astro.props ---- - -
- - {title} - -
-
- { - new Date(date).toLocaleDateString('it-IT', { - year: 'numeric', - month: 'long', - day: 'numeric', - }) - } -
-
{description}
-
- {tags.map(tag => #{tag})} -
- {image && {title}} -
-
diff --git a/src/content/config.ts b/src/content/config.ts index 3a60f3f..4434a1f 100644 --- a/src/content/config.ts +++ b/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, } diff --git a/src/content/meta/design.mdx b/src/content/meta/design.mdx index e077753..72cbb99 100644 --- a/src/content/meta/design.mdx +++ b/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

Questo è un paragrafo

``` +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 +
+

Questo è un paragrafo

+
+``` + ## 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. ``` -### 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. ``` -### Lista di articoli +### Low Level: Mixin SCSS + +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`). + +```scss +@mixin neo-brutalist-card($size: 3px, $offset: $size + 1, $shadow: true, $hoverable: false) { + border: $size solid #222; + border-radius: $size * 2; + + @if $shadow { + box-shadow: $offset $offset 0 0 #222; + } + + @if $hoverable { + transition: all 64ms linear; + + &:hover { + transform: translate(-1px, -1px); + box-shadow: $offset + 1 $offset + 1 0 0 #222; + } + } +} +``` -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. +Ad esempio tutti i bottoni utilizzano direttamente questo mixin senza cambiare i parametri di default. - -
- - - - - - +### Sotto-componenti + +#### Titolo + +```astro +
+
Titolo
+
+``` + +#### Testo & Modificatori + +Se c'è poco testo, può essere inserito direttamente nella card. + +```astro +
+
+ Descrizione lorem ipsum dolor sit amet consectetur + adipisicing elit. Aspernatur, labore?
- +
+``` + +Altrimenti può essere inserito in un tag `

`. + +```astro +

+
+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. + Distinctio, vel! Veritatis est sit beatae eveniet. +

+

+ Error, minus, asperiores quaerat nulla cumque, nisi ipsam + assumenda consectetur accusamus tempore consequatur quae. Fugit? +

+

+ Quos sapiente amet numquam quis, libero odit eum, eius + perspiciatis repellat nesciunt cupiditate asperiores maiores? +

+
+
+``` + +C'è anche il modificatore `small` e `dimmed` per ridurre la grandezza del testo e renderlo grigio rispettivamente. + +```astro +
+
+ Some normal text, this is a very long + text that should wrap on the next line +
+
+ This is some small text +
+
+ This is some dimmed text +
+
+ This is some small dimmed text +
+
+``` + +#### Tags + +I tag sono una lista di link con `display: flex` e `flex-wrap: wrap`. + +```astro +
+
+ #tag1 + #tagg2 + #tag3 + #taggg4 + #tagg5 + #taggg6 + #tag7 + #taggg8 + #tag9 + #taggggg10 +
+
+``` ## Palette diff --git a/src/content/posts/2024-07-28-nuovo-sito.md b/src/content/news/2024-07-28-nuovo-sito.md similarity index 98% rename from src/content/posts/2024-07-28-nuovo-sito.md rename to src/content/news/2024-07-28-nuovo-sito.md index 6d4f0ae..f20ea9f 100644 --- a/src/content/posts/2024-07-28-nuovo-sito.md +++ b/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 diff --git a/src/layouts/ArticleLayout.astro b/src/layouts/ArticleLayout.astro index 183de90..0675a19 100644 --- a/src/layouts/ArticleLayout.astro +++ b/src/layouts/ArticleLayout.astro @@ -7,8 +7,10 @@ import Footer from '../components/Footer.astro'
-
- +
+
+ +