working on css design system
This commit is contained in:
@@ -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,
|
||||
}
|
||||
|
||||
+125
-14
@@ -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)' }}>
|
||||
<div class="article-list">
|
||||
<ArticleCard id="article-1" title="Titolo 1" description="Descrizione 1" tags={['tag1', 'tag2']} />
|
||||
<ArticleCard id="article-2" title="Titolo 2" description="Descrizione 2" tags={['tag2', 'tag3']} />
|
||||
<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']} />
|
||||
<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']} />
|
||||
```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;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
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
|
||||
|
||||
|
||||
@@ -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
|
||||
Reference in New Issue
Block a user