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'
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,
}

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

@ -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
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)' }}>
<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']} />
### 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

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

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

@ -7,8 +7,10 @@ import Footer from '../components/Footer.astro'
<BaseLayout {...Astro.props}>
<Header />
<main class="text-content">
<main class="article card large">
<div class="text">
<slot />
</div>
</main>
<Footer />
</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() {
const guides = await getCollection('guides')
console.log(guides)
return guides.map(entry => ({
params: { id: entry.data.id },
params: { id: entry.slug },
props: { entry },
}))
}

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

@ -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 => (
<ArticleCard
title={post.data.title}
id={post.data.id}
description={post.data.description}
tags={post.data.tags}
/>
guides.map(guide => (
<div class="card">
<div class="title">
<a href={`/guide/${guide.slug}`}>{guide.data.title}</a>
</div>
<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>

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

@ -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">
<h1>#{tag}</h1>
<div class="article-list">
<PageLayout pageName="guide tag">
<h1>Guide > #{tag}</h1>
<div class="card-list">
{
blogposts.map(post => (
<div class="article">
guides.map(guide => (
<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>

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

@ -15,7 +15,7 @@ const headings = getHeadings()
<Header />
<aside>
<nav>
<h2>Indice</h2>
<h3>Indice</h3>
<ul>
{
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'
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
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']}
>
<ArticleLayout {...entry.data} pageName={['notizia']}>
<Content />
</ArticleLayout>

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

@ -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 => (
<NewsCard
id={post.slug}
title={post.data.title}
description={post.data.description}
tags={post.data.tags}
image={post.data.image}
date={post.data.publishDate}
author={post.data.author}
/>
news.map(newsItem => (
<div class="card">
<a href={`/notizie/${newsItem.slug}`} class="title">
{newsItem.data.title}
</a>
<div class="text small dimmed">
{new Date(newsItem.data.publishDate).toLocaleDateString('it-IT', {
year: 'numeric',
month: 'long',
day: 'numeric',
})}
</div>
<div class="text">{newsItem.data.description}</div>
</div>
))
}
</div>

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

@ -1,27 +1,28 @@
$news-bg: #fffbeb;
$news-accent-bg: #f8e8b1;
// $news-bg: #fffbeb;
// $news-accent-bg: #f8e8b1;
@import './mixins.scss';
//
// Components - for complex parts of the UI like search bars or compound buttons
//
@layer component {
//
// Components - for complex parts of the UI like search bars or compound buttons
//
.material-symbols-outlined {
.material-symbols-outlined {
display: inline-grid;
place-content: center;
font-size: 24px;
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
}
.title {
.title {
font-family: 'Iosevka', monospace;
font-weight: 700;
font-size: 28px;
}
}
.search {
.search {
width: 100%;
height: 2.5rem;
@ -53,22 +54,22 @@ $news-accent-bg: #f8e8b1;
.material-symbols-outlined {
padding: 0 0.5rem;
}
}
}
.flex-column {
.flex-column {
display: flex;
flex-direction: column;
gap: 1rem;
}
}
.flex-row {
.flex-row {
display: flex;
flex-direction: row;
gap: 1rem;
}
}
// just to know for reference
.fake-masonry {
// just to know for reference
.fake-masonry {
display: grid;
grid-template-columns: repeat(var(--columns), 1fr);
grid-auto-flow: dense;
@ -76,9 +77,9 @@ $news-accent-bg: #f8e8b1;
& > * {
grid-row: span var(--masonry-height);
}
}
}
.search-results {
.search-results {
width: 100%;
display: flex;
@ -121,9 +122,9 @@ $news-accent-bg: #f8e8b1;
display: grid;
}
}
}
}
.appunti-scrollable {
.appunti-scrollable {
display: flex;
overflow-x: auto;
@ -131,9 +132,9 @@ $news-accent-bg: #f8e8b1;
padding: 2px;
padding-bottom: 1rem;
}
}
}
.appunti-list {
.appunti-list {
display: grid;
grid-auto-flow: column;
@ -142,9 +143,9 @@ $news-accent-bg: #f8e8b1;
overflow-x: auto;
max-width: 100%;
}
}
.appunti-item {
.appunti-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
@ -171,9 +172,9 @@ $news-accent-bg: #f8e8b1;
padding-left: 0.5rem;
font-size: 16px;
}
}
}
.article-list {
.article-list {
display: grid;
grid-auto-flow: row;
@ -208,122 +209,122 @@ $news-accent-bg: #f8e8b1;
color: #555;
}
}
}
}
.news-list {
.news-list {
display: grid;
grid-auto-flow: column;
.news-item {
background: $news-bg;
color: #111;
// .news-item {
// background: $news-bg;
// color: #111;
@include neo-brutalist-card($size: 3px, $offset: 9px);
// @include neo-brutalist-card($size: 3px, $offset: 9px);
display: flex;
flex-direction: column;
// display: flex;
// flex-direction: column;
width: 22rem;
max-height: 27rem;
// width: 22rem;
// max-height: 27rem;
overflow: hidden;
// overflow: hidden;
::-webkit-scrollbar {
width: 10px;
}
// ::-webkit-scrollbar {
// width: 10px;
// }
::-webkit-scrollbar-thumb {
background-color: #c67e14;
border: 2px solid #222;
// ::-webkit-scrollbar-thumb {
// background-color: #c67e14;
// border: 2px solid #222;
&:hover {
background-color: #e69419;
}
}
// &:hover {
// background-color: #e69419;
// }
// }
a {
font-weight: 600;
text-decoration: none;
color: #c67e14;
// a {
// font-weight: 600;
// text-decoration: none;
// color: #c67e14;
&:hover {
text-decoration: underline solid 2px;
}
}
// &:hover {
// text-decoration: underline solid 2px;
// }
// }
& > .title {
padding: 1rem;
background: $news-accent-bg;
line-height: 1;
font-size: 26px;
}
// & > .title {
// padding: 1rem;
// background: $news-accent-bg;
// line-height: 1;
// font-size: 26px;
// }
a.title {
color: #83530c;
}
// a.title {
// color: #83530c;
// }
& > .abstract {
flex-grow: 1;
// & > .abstract {
// flex-grow: 1;
padding: 1rem;
// padding: 1rem;
overflow-y: auto;
// overflow-y: auto;
@extend .text;
}
// @extend .text;
// }
& > .content {
display: flex;
padding: 1rem;
flex-direction: column;
gap: 0.5rem;
// & > .content {
// display: flex;
// padding: 1rem;
// flex-direction: column;
// gap: 0.5rem;
background: #fff8da;
// background: #fff8da;
& > .continue {
padding: 1rem;
// & > .continue {
// padding: 1rem;
display: grid;
align-items: end;
justify-content: end;
}
// display: grid;
// align-items: end;
// justify-content: end;
// }
& > .description {
font-size: 16px;
line-height: 1.5;
// & > .description {
// font-size: 16px;
// line-height: 1.5;
flex-grow: 1;
}
// flex-grow: 1;
// }
& > .tags {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
font-size: 14px;
color: #555;
}
// & > .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;
}
// & > .date {
// font-size: 14px;
// font-style: italic;
// font-weight: 600;
// color: #0008;
// }
& > .author {
font-weight: 600;
font-size: 15px;
color: #555;
// & > .author {
// font-weight: 600;
// font-size: 15px;
// color: #555;
// }
// }
// }
}
}
}
}
//
// Cards
//
//
// Cards
//
.card {
.card {
display: grid;
--card-base-internal: var(--card-base, #f8f8f8);
@ -365,6 +366,16 @@ $news-accent-bg: #f8e8b1;
& > .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 {
@ -374,5 +385,44 @@ $news-accent-bg: #f8e8b1;
font-size: 14px;
font-weight: 600;
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;
@layer common, typography, component, page;
@import './mixins.scss';
@import './typography.scss';
*,
*::before,
*::after {
@layer common {
*,
*::before,
*::after {
box-sizing: border-box;
font: inherit;
margin: 0;
}
}
html {
html {
height: 100%;
}
}
html,
body {
html,
body {
min-height: 100%;
margin: 0;
font-family: 'Open Sans', sans-serif;
font-size: 18px;
color: #222;
}
}
// html {
// scroll-snap-type: y proximity;
// scroll-padding-top: 4rem;
// }
// html {
// scroll-snap-type: y proximity;
// scroll-padding-top: 4rem;
// }
img {
img {
display: block;
}
}
a {
a {
color: inherit;
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';

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

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

@ -24,22 +24,28 @@
margin-bottom: 0.25rem;
}
p + h#{$i} {
margin-top: 0.75rem * $factor;
}
// p + h#{$i} {
// 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;
}
pre,
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-weight: 400;
@ -48,7 +54,7 @@
code {
border-radius: 0.25rem;
padding: 0.125rem;
padding: 0.125rem 0.3rem;
}
pre {
@ -75,11 +81,26 @@
p {
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 {
font-weight: 500;
font-weight: 600;
}
em {
@ -99,6 +120,10 @@
h4 {
font-weight: 700;
color: #333;
// trick to fix anchor links with sticky header
padding-top: 7rem;
margin-top: -6.5rem;
}
h1,
@ -121,11 +146,10 @@
}
}
padding: 2rem 0 3rem;
@media screen and (max-width: 1024px) {
& > * {
margin: 0 0.75rem;
}
}
}
}

Write Preview
Loading…
Cancel
Save