phc
/
website
6
4
Fork 0
Code Issues 8 Pull Requests Projects 1 Releases Wiki Activity

working on css design system

Browse Source
dev
Antonio De Lucreziis 4 months ago
parent 3885b5135b
commit fb43eddefc
16 changed files with 1085 additions and 905 deletions
Show Stats Download Patch File Download Diff File

13
src/components/ArticleCard.astro
Unescape Escape View File

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

25
src/components/NewsCard.astro
Unescape Escape View File

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

11
src/content/config.ts
Unescape Escape View File

@ -1,11 +1,12 @@
import { z, defineCollection } from 'astro:content' 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', type: 'content',
schema: z.object({ schema: z.object({
title: z.string(), title: z.string(),
description: z.string(), description: z.string(),
author: z.string(),
publishDate: z.date(), publishDate: z.date(),
image: z image: z
.object({ .object({
@ -13,10 +14,11 @@ const postsCollection = defineCollection({
alt: z.string(), alt: z.string(),
}) })
.optional(), .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({ const guidesCollection = defineCollection({
type: 'content', type: 'content',
schema: z.object({ 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({ const seminariettiCollection = defineCollection({
type: 'content', type: 'content',
schema: z.object({ schema: z.object({
@ -42,7 +45,7 @@ const seminariettiCollection = defineCollection({
// Export a single `collections` object to register your collection(s) // Export a single `collections` object to register your collection(s)
export const collections = { export const collections = {
posts: postsCollection, news: newsCollection,
guides: guidesCollection, guides: guidesCollection,
seminarietti: seminariettiCollection, seminarietti: seminariettiCollection,
} }

139
src/content/meta/design.mdx
Unescape Escape View File

@ -1,8 +1,6 @@
import Container from '../../components/meta/Container.astro' import Container from '../../components/meta/Container.astro'
import Palette from '../../components/meta/Palette.astro' import Palette from '../../components/meta/Palette.astro'
import ArticleCard from '../../components/ArticleCard.astro'
# Meta > Design # 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 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> <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 ## 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 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> </div>
``` ```
### Variante grande ### Varianti
#### Grande
Le card possono essere di dimensioni diverse. Questa è una card 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> </div>
``` ```
### 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.
<Container size="large" style={{ '--zone-color': 'var(--guide-base-color)' }}> ### Sotto-componenti
<div class="article-list">
<ArticleCard id="article-1" title="Titolo 1" description="Descrizione 1" tags={['tag1', 'tag2']} /> #### Titolo
<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']} /> ```astro
<ArticleCard id="article-3" title="Titolo 3" description="Descrizione 3" tags={['tag3', 'tag4']} /> <div class="card">
<ArticleCard id="article-3" title="Titolo 3" description="Descrizione 3" tags={['tag3', 'tag4']} /> <div class="title">Titolo</div>
<ArticleCard id="article-3" title="Titolo 3" description="Descrizione 3" tags={['tag3', 'tag4']} /> </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>
</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 ## Palette

2
src/content/posts/2024-07-28-nuovo-sito.md → src/content/news/2024-07-28-nuovo-sito.md
Unescape Escape View File

@ -1,9 +1,7 @@
--- ---
title: Il Nuovo Sito del PHC 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. 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 publishDate: 2024-07-28
tags: [astro, web, appunti]
--- ---
# Il Nuovo Sito del PHC # Il Nuovo Sito del PHC

4
src/layouts/ArticleLayout.astro
Unescape Escape View File

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

5
src/pages/guide/[id].astro
Unescape Escape View File

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

25
src/pages/guide/index.astro
Unescape Escape View File

@ -2,21 +2,26 @@
import { getCollection } from 'astro:content' import { getCollection } from 'astro:content'
import PageLayout from '@layouts/PageLayout.astro' 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"> <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> </div>

22
src/pages/guide/tags/[tag].astro
Unescape Escape View File

@ -19,7 +19,7 @@ export async function getStaticPaths() {
params: { tag }, params: { tag },
props: { props: {
tag, 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 { interface Props {
tag: string 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"> <div class="title">
<a href={`/guide/${post.data.id}`}>{post.data.title}</a> <a href={`/guide/${guide.slug}`}>{guide.data.title}</a>
</div> </div>
<div class="description">{post.data.description}</div> <div class="text">{guide.data.description}</div>
<div class="tags"> <div class="tags">
{post.data.tags.map(tag => ( {guide.data.tags.map(tag => (
<a href={`/guide/tags/${tag}`}>#{tag}</a> <a href={`/guide/tags/${tag}`}>#{tag}</a>
))} ))}
</div> </div>

2
src/pages/meta/design.astro
Unescape Escape View File

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

13
src/pages/notizie/[id].astro
Unescape Escape View File

@ -4,7 +4,7 @@ import { getCollection } from 'astro:content'
import ArticleLayout from '../../layouts/ArticleLayout.astro' import ArticleLayout from '../../layouts/ArticleLayout.astro'
export async function getStaticPaths() { export async function getStaticPaths() {
const guides = await getCollection('posts') const guides = await getCollection('news')
return guides.map(entry => ({ return guides.map(entry => ({
params: { id: entry.slug }, params: { id: entry.slug },
props: { entry }, props: { entry },
@ -15,15 +15,6 @@ const { entry } = Astro.props
const { Content } = await entry.render() 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 /> <Content />
</ArticleLayout> </ArticleLayout>

30
src/pages/notizie/index.astro
Unescape Escape View File

@ -2,24 +2,28 @@
import { getCollection } from 'astro:content' import { getCollection } from 'astro:content'
import PageLayout from '@layouts/PageLayout.astro' 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"> <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> </div>

274
src/styles/components.scss
Unescape Escape View File

@ -1,27 +1,28 @@
$news-bg: #fffbeb; // $news-bg: #fffbeb;
$news-accent-bg: #f8e8b1; // $news-accent-bg: #f8e8b1;
@import './mixins.scss'; @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 { .material-symbols-outlined {
display: inline-grid; display: inline-grid;
place-content: center; place-content: center;
font-size: 24px; font-size: 24px;
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
} }
.title { .title {
font-family: 'Iosevka', monospace; font-family: 'Iosevka', monospace;
font-weight: 700; font-weight: 700;
font-size: 28px; font-size: 28px;
} }
.search { .search {
width: 100%; width: 100%;
height: 2.5rem; height: 2.5rem;
@ -53,22 +54,22 @@ $news-accent-bg: #f8e8b1;
.material-symbols-outlined { .material-symbols-outlined {
padding: 0 0.5rem; padding: 0 0.5rem;
} }
} }
.flex-column { .flex-column {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 1rem;
} }
.flex-row { .flex-row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 1rem; gap: 1rem;
} }
// just to know for reference // just to know for reference
.fake-masonry { .fake-masonry {
display: grid; display: grid;
grid-template-columns: repeat(var(--columns), 1fr); grid-template-columns: repeat(var(--columns), 1fr);
grid-auto-flow: dense; grid-auto-flow: dense;
@ -76,9 +77,9 @@ $news-accent-bg: #f8e8b1;
& > * { & > * {
grid-row: span var(--masonry-height); grid-row: span var(--masonry-height);
} }
} }
.search-results { .search-results {
width: 100%; width: 100%;
display: flex; display: flex;
@ -121,9 +122,9 @@ $news-accent-bg: #f8e8b1;
display: grid; display: grid;
} }
} }
} }
.appunti-scrollable { .appunti-scrollable {
display: flex; display: flex;
overflow-x: auto; overflow-x: auto;
@ -131,9 +132,9 @@ $news-accent-bg: #f8e8b1;
padding: 2px; padding: 2px;
padding-bottom: 1rem; padding-bottom: 1rem;
} }
} }
.appunti-list { .appunti-list {
display: grid; display: grid;
grid-auto-flow: column; grid-auto-flow: column;
@ -142,9 +143,9 @@ $news-accent-bg: #f8e8b1;
overflow-x: auto; overflow-x: auto;
max-width: 100%; max-width: 100%;
} }
.appunti-item { .appunti-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.25rem; gap: 0.25rem;
@ -171,9 +172,9 @@ $news-accent-bg: #f8e8b1;
padding-left: 0.5rem; padding-left: 0.5rem;
font-size: 16px; font-size: 16px;
} }
} }
.article-list { .article-list {
display: grid; display: grid;
grid-auto-flow: row; grid-auto-flow: row;
@ -208,122 +209,122 @@ $news-accent-bg: #f8e8b1;
color: #555; color: #555;
} }
} }
} }
.news-list { .news-list {
display: grid; display: grid;
grid-auto-flow: column; grid-auto-flow: column;
.news-item { // .news-item {
background: $news-bg; // background: $news-bg;
color: #111; // color: #111;
@include neo-brutalist-card($size: 3px, $offset: 9px); // @include neo-brutalist-card($size: 3px, $offset: 9px);
display: flex; // display: flex;
flex-direction: column; // flex-direction: column;
width: 22rem; // width: 22rem;
max-height: 27rem; // max-height: 27rem;
overflow: hidden; // overflow: hidden;
::-webkit-scrollbar { // ::-webkit-scrollbar {
width: 10px; // width: 10px;
} // }
::-webkit-scrollbar-thumb { // ::-webkit-scrollbar-thumb {
background-color: #c67e14; // background-color: #c67e14;
border: 2px solid #222; // border: 2px solid #222;
&:hover { // &:hover {
background-color: #e69419; // background-color: #e69419;
} // }
} // }
a { // a {
font-weight: 600; // font-weight: 600;
text-decoration: none; // text-decoration: none;
color: #c67e14; // color: #c67e14;
&:hover { // &:hover {
text-decoration: underline solid 2px; // text-decoration: underline solid 2px;
} // }
} // }
& > .title { // & > .title {
padding: 1rem; // padding: 1rem;
background: $news-accent-bg; // background: $news-accent-bg;
line-height: 1; // line-height: 1;
font-size: 26px; // font-size: 26px;
} // }
a.title { // a.title {
color: #83530c; // color: #83530c;
} // }
& > .abstract { // & > .abstract {
flex-grow: 1; // flex-grow: 1;
padding: 1rem; // padding: 1rem;
overflow-y: auto; // overflow-y: auto;
@extend .text; // @extend .text;
} // }
& > .content { // & > .content {
display: flex; // display: flex;
padding: 1rem; // padding: 1rem;
flex-direction: column; // flex-direction: column;
gap: 0.5rem; // gap: 0.5rem;
background: #fff8da; // background: #fff8da;
& > .continue { // & > .continue {
padding: 1rem; // padding: 1rem;
display: grid; // display: grid;
align-items: end; // align-items: end;
justify-content: end; // justify-content: end;
} // }
& > .description { // & > .description {
font-size: 16px; // font-size: 16px;
line-height: 1.5; // line-height: 1.5;
flex-grow: 1; // flex-grow: 1;
} // }
& > .tags { // & > .tags {
display: flex; // display: flex;
gap: 0.5rem; // gap: 0.5rem;
flex-wrap: wrap; // flex-wrap: wrap;
font-size: 14px; // font-size: 14px;
color: #555; // color: #555;
} // }
& > .date { // & > .date {
font-size: 14px; // font-size: 14px;
font-style: italic; // font-style: italic;
font-weight: 600; // font-weight: 600;
color: #0008; // color: #0008;
} // }
& > .author { // & > .author {
font-weight: 600; // font-weight: 600;
font-size: 15px; // font-size: 15px;
color: #555; // color: #555;
// }
// }
// }
} }
}
}
}
// //
// Cards // Cards
// //
.card { .card {
display: grid; display: grid;
--card-base-internal: var(--card-base, #f8f8f8); --card-base-internal: var(--card-base, #f8f8f8);
@ -365,6 +366,16 @@ $news-accent-bg: #f8e8b1;
& > .text { & > .text {
font-size: 16px; 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 { & > .tags {
@ -374,5 +385,44 @@ $news-accent-bg: #f8e8b1;
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: #555; color: #555;
a {
color: color-mix(in srgb, var(--card-base-internal), #000 60%);
font-weight: 600;
&:hover {
text-decoration: underline solid 2px;
}
}
}
a:hover {
text-decoration: underline solid 2px;
}
a.title {
&:hover {
text-decoration: underline solid 3px;
}
}
}
//
// Card List
//
.card-list {
display: grid;
grid-auto-flow: row;
max-width: 100%;
gap: 2rem;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
grid-auto-rows: auto;
& > .card {
max-width: 25rem;
}
} }
} }

64
src/styles/main.scss
Unescape Escape View File

@ -16,77 +16,53 @@ $project-card-bg: #a2d4f3;
$screen-desktop-min: 1024px; $screen-desktop-min: 1024px;
@layer common, typography, component, page;
@import './mixins.scss'; @import './mixins.scss';
@import './typography.scss'; @import './typography.scss';
*, @layer common {
*::before, *,
*::after { *::before,
*::after {
box-sizing: border-box; box-sizing: border-box;
font: inherit; font: inherit;
margin: 0; 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 // 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 './controls.scss';
@import './components.scss'; @import './components.scss';

211
src/styles/pages.scss
Unescape Escape View File

@ -8,9 +8,12 @@
--guide-light: color-mix(in srgb, var(--guide-base), #fff 25%); --guide-light: color-mix(in srgb, var(--guide-base), #fff 25%);
--guide-lighter: color-mix(in srgb, var(--guide-base), #fff 50%); --guide-lighter: color-mix(in srgb, var(--guide-base), #fff 50%);
--guide-lightest: color-mix(in srgb, var(--guide-base), #fff 75%); --guide-lightest: color-mix(in srgb, var(--guide-base), #fff 75%);
--news-base: #f8e8b1;
} }
.homepage { @layer page {
.homepage {
header .logo { header .logo {
visibility: hidden; visibility: hidden;
} }
@ -92,8 +95,8 @@
img { img {
width: 100%; width: 100%;
filter: drop-shadow(6px 6px 0 $black) drop-shadow(4px 0 0 $black) drop-shadow(0 4px 0 $black) filter: drop-shadow(6px 6px 0 $black) drop-shadow(4px 0 0 $black)
drop-shadow(-4px 0 0 $black) drop-shadow(0 -4px 0 $black); drop-shadow(0 4px 0 $black) drop-shadow(-4px 0 0 $black) drop-shadow(0 -4px 0 $black);
} }
} }
@ -241,9 +244,9 @@
@extend .text; @extend .text;
} }
} }
} }
.utenti { .utenti {
main { main {
justify-self: center; justify-self: center;
@ -256,9 +259,9 @@
gap: 5rem; gap: 5rem;
} }
} }
.appunti { .appunti {
main { main {
background: #fdfdf0; background: #fdfdf0;
@ -287,9 +290,9 @@
} }
} }
} }
} }
.login { .login {
background: #ddfaff; background: #ddfaff;
main { main {
@ -309,11 +312,16 @@
font-weight: 600; font-weight: 600;
} }
} }
} }
.notizie { .notizie,
background: #fffced; .notizia {
--card-base: color-mix(in lab, var(--news-base), #fff 25%);
--zone-color: color-mix(in lab, var(--news-base), #000 50%);
background: color-mix(in lab, var(--news-base), #fff 90%);
}
.notizie {
main { main {
justify-self: center; justify-self: center;
@ -321,72 +329,93 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
max-width: 80ch; padding: 5rem;
padding: 5rem 0;
gap: 5rem; gap: 5rem;
} }
} }
.notizia {
background: #fffced;
--zone-color: #ac8919;
.notizia {
main { main {
margin-top: 3rem; --card-base: color-mix(in lab, var(--news-base), #fff 25%);
margin-bottom: 6rem;
background: #fff2c9;
max-width: calc(46rem + 2rem * 2); max-width: calc(46rem + 2rem * 2);
justify-self: center; justify-self: center;
padding: 3rem 2rem 2rem; padding: 3rem 2rem 2rem;
}
@media screen and (min-width: $screen-desktop-min) { margin-top: 3rem;
main { margin-bottom: 6rem;
@include neo-brutalist-card($size: 3px, $offset: 9px);
}
}
}
.guida { @media screen and (max-width: $screen-desktop-min) {
background: #f0fdff; box-shadow: none;
--zone-color: #2c7c9b; border: none;
border-radius: 0;
max-width: none;
&.series { margin: 0 auto;
h1 {
margin-bottom: 0;
} }
.series {
font-size: 20px;
font-weight: 700;
text-align: center;
margin-bottom: 3rem;
} }
} }
main { // .guida {
margin-top: 3rem; // background: #f0fdff;
margin-bottom: 6rem; // --zone-color: #2c7c9b;
background: #fff; // &.series {
max-width: calc(46rem + 2rem * 2); // h1 {
justify-self: center; // margin-bottom: 0;
padding: 3rem 2rem 2rem; // }
}
@media screen and (min-width: $screen-desktop-min) { // .series {
main { // font-size: 20px;
@include neo-brutalist-card($size: 3px, $offset: 9px); // font-weight: 700;
} // text-align: center;
} // margin-bottom: 3rem;
} // }
// }
.guide { // main {
background: #f0fdff; // margin-top: 3rem;
--zone-color: #2c8c9b; // margin-bottom: 6rem;
// background: #fff;
// max-width: calc(46rem + 2rem * 2);
// justify-self: center;
// padding: 3rem 2rem 2rem;
// }
// @media screen and (min-width: $screen-desktop-min) {
// main {
// @include neo-brutalist-card($size: 3px, $offset: 9px);
// }
// }
// }
// .guide {
// background: #f0fdff;
// --zone-color: #2c8c9b;
// main {
// justify-self: center;
// display: flex;
// flex-direction: column;
// align-items: center;
// max-width: calc(25rem * 3 + 2rem * 2);
// padding: 5rem 0;
// gap: 5rem;
// }
// }
.guide,
.guida {
--card-base: color-mix(in lab, var(--guide-base), #fff 25%);
--zone-color: color-mix(in lab, var(--guide-base), #000 50%);
background: color-mix(in lab, var(--guide-base), #fff 90%);
}
.guide {
main { main {
justify-self: center; justify-self: center;
@ -394,14 +423,34 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
max-width: calc(25rem * 3 + 2rem * 2); padding: 5rem;
padding: 5rem 0;
gap: 5rem; gap: 5rem;
} }
} }
.guida {
main {
--card-base: color-mix(in lab, var(--guide-base), #fff 50%);
max-width: calc(46rem + 2rem * 2);
justify-self: center;
padding: 3rem 2rem 2rem;
margin-top: 3rem;
margin-bottom: 6rem;
@media screen and (max-width: $screen-desktop-min) {
box-shadow: none;
border: none;
border-radius: 0;
max-width: none;
.tag { margin: 0 auto;
}
}
}
.tag {
main { main {
justify-self: center; justify-self: center;
@ -409,15 +458,13 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
max-width: 80ch;
padding: 5rem 0; padding: 5rem 0;
gap: 5rem; gap: 5rem;
} }
} }
.design { .design {
grid-template-columns: 2fr 10fr; grid-template-columns: minmax(15rem, 2fr) 10fr;
@media screen and (max-width: 1400px) { @media screen and (max-width: 1400px) {
grid-template-columns: 1fr; grid-template-columns: 1fr;
@ -439,7 +486,7 @@
nav { nav {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: 0.25rem;
ul { ul {
list-style: none; list-style: none;
@ -448,20 +495,28 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: 0.25rem;
li { li {
padding-left: calc((var(--depth) - 1) * 1rem); padding-left: calc((var(--depth) - 1) * 1rem);
display: flex;
a { a {
display: block;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
transform: translate(-0.25rem, 0);
padding: 0.125rem 0.25rem;
border-radius: 0.125rem;
color: #444; color: #444;
&:hover { &:hover {
color: #666; background: #00000018;
text-decoration: underline;
} }
} }
} }
@ -480,13 +535,8 @@
main { main {
justify-self: center; justify-self: center;
// trick to fix anchor links with sticky header @media screen and (min-width: $screen-desktop-min) {
& > h1, padding: 3rem 0;
& > h2,
& > h3,
& > h4 {
padding-top: 7rem;
margin-top: -7rem;
} }
} }
@ -597,4 +647,5 @@
user-select: all; user-select: all;
} }
} }
}
} }

46
src/styles/typography.scss
Unescape Escape View File

@ -24,22 +24,28 @@
margin-bottom: 0.25rem; 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 {
@include geometric-headings;
.text-content,
.text {
line-height: 1.5;
.text-content {
& > * { & > * {
max-width: 46rem; max-width: 46rem;
} }
pre, pre,
code { code {
background: var(--code-bg, #f0f0f0) !important; 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-family: 'Source Code Pro', monospace;
font-weight: 400; font-weight: 400;
@ -48,7 +54,7 @@
code { code {
border-radius: 0.25rem; border-radius: 0.25rem;
padding: 0.125rem; padding: 0.125rem 0.3rem;
} }
pre { pre {
@ -75,11 +81,26 @@
p { p {
line-height: 1.75; line-height: 1.75;
margin: 1rem auto; 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 { strong {
font-weight: 500; font-weight: 600;
} }
em { em {
@ -99,6 +120,10 @@
h4 { h4 {
font-weight: 700; font-weight: 700;
color: #333; color: #333;
// trick to fix anchor links with sticky header
padding-top: 7rem;
margin-top: -6.5rem;
} }
h1, h1,
@ -121,11 +146,10 @@
} }
} }
padding: 2rem 0 3rem;
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
& > * { & > * {
margin: 0 0.75rem; margin: 0 0.75rem;
} }
} }
}
} }

Write Preview
Loading…
Cancel
Save