import Container from '../../components/meta/Container.astro'
import Palette from '../../components/meta/Palette.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

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

### Esempio di base

Una card semplice ha un titolo ed una descrizione.

```astro
<div class="card" style="--card-base: var(--guide-base); max-width: 25rem;">
    <div class="title">Titolo</div>
    <div class="text">
        Descrizione lorem ipsum dolor sit amet consectetur
        adipisicing elit. Aspernatur, labore?
    </div>
</div>
```

### Varianti

#### Grande

Le card possono essere di dimensioni diverse. Questa è una card grande.

```astro
<div class="card large" style="--card-base: lightgreen; max-width: 25rem;">
    <div class="title">Titolo</div>
    <div class="text">
        Descrizione lorem ipsum dolor sit amet consectetur
        adipisicing elit. Aspernatur, labore?
    </div>
</div>
```

### 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;
        }
    }
}
```

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>
</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

Varie sezioni del sito utilizzano diverse palette di colori. Questa è la palette di base.

### Guide

<Palette
    colors={[
        'var(--guide-base)',
        'var(--guide-darkest)',
        'var(--guide-darker)',
        'var(--guide-dark)',
        'var(--guide-light)',
        'var(--guide-lighter)',
        'var(--guide-lightest)',
    ]}
/>

## Combo Box

I combo box sono un componente per fare dropdown scritto in Preact. Questo è un esempio di come funzionano.

```js
import { ComboBox } from '$lib/components/ComboBox'

const [value, setValue] = useState('option-1')
```


```jsx
<ComboBox value={value} setValue={setValue}>
  {{
    'option-1': <>Option 1</>
    'option-2': <>Option 2</>
    'option-3': <>Option 3</>
  }}
</ComboBox>
```