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

6
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">
<slot /> <div class="text">
<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 => (

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

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

@ -2,25 +2,29 @@
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>
</PageLayout> </PageLayout>

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

@ -1,378 +1,428 @@
$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 {
display: inline-grid;
place-content: center;
font-size: 24px;
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.title {
font-family: 'Iosevka', monospace;
font-weight: 700;
font-size: 28px;
}
.search {
width: 100%;
height: 2.5rem;
@include neo-brutalist-card;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
cursor: pointer;
background: #fff;
&:hover,
&:hover input[type='text'] {
background: #f8f8f8;
}
input[type='text'] {
border: none;
box-shadow: none;
outline: none;
height: 100%;
padding: 0;
padding-left: 0.35rem;
}
.material-symbols-outlined { .material-symbols-outlined {
padding: 0 0.5rem; display: inline-grid;
} place-content: center;
}
.flex-column {
display: flex;
flex-direction: column;
gap: 1rem;
}
.flex-row {
display: flex;
flex-direction: row;
gap: 1rem;
}
// just to know for reference
.fake-masonry {
display: grid;
grid-template-columns: repeat(var(--columns), 1fr);
grid-auto-flow: dense;
& > * { font-size: 24px;
grid-row: span var(--masonry-height); font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
} }
}
.search-results {
width: 100%;
display: flex; .title {
flex-direction: column; font-family: 'Iosevka', monospace;
gap: 1rem; font-weight: 700;
font-size: 28px;
}
.search-result { .search {
width: 100%; width: 100%;
height: 2.5rem;
display: grid; @include neo-brutalist-card;
grid-template-columns: auto auto 1fr auto;
grid-template-areas: 'icon text . right';
display: grid;
grid-template-columns: 1fr auto;
align-items: center; align-items: center;
gap: 0.5rem; cursor: pointer;
padding: 0.5rem;
background: #fff; background: #fff;
@include neo-brutalist-card; &:hover,
&:hover input[type='text'] {
a { background: #f8f8f8;
display: contents;
} }
& > .icon { input[type='text'] {
grid-area: icon; border: none;
display: grid; box-shadow: none;
} outline: none;
height: 100%;
& > .text { padding: 0;
grid-area: text; padding-left: 0.35rem;
display: grid;
} }
& > .right { .material-symbols-outlined {
grid-area: right; padding: 0 0.5rem;
display: grid;
} }
} }
}
.appunti-scrollable { .flex-column {
display: flex; display: flex;
overflow-x: auto; flex-direction: column;
gap: 1rem;
.appunti-list {
padding: 2px;
padding-bottom: 1rem;
} }
}
.appunti-list { .flex-row {
display: grid; display: flex;
grid-auto-flow: column; flex-direction: row;
gap: 1rem;
gap: 3rem; }
overflow-x: auto;
max-width: 100%; // just to know for reference
} .fake-masonry {
display: grid;
grid-template-columns: repeat(var(--columns), 1fr);
grid-auto-flow: dense;
.appunti-item { & > * {
display: flex; grid-row: span var(--masonry-height);
flex-direction: column; }
gap: 0.25rem; }
color: #444; .search-results {
width: 100%;
& > .thumbnail { display: flex;
width: 10rem; flex-direction: column;
aspect-ratio: 10 / 14; gap: 1rem;
background: #e0e0e0;
@include neo-brutalist-card($hoverable: true); .search-result {
} width: 100%;
& > .thumbnail + * { display: grid;
font-weight: 700; grid-template-columns: auto auto 1fr auto;
padding-top: 0.25rem; grid-template-areas: 'icon text . right';
}
& > .title, align-items: center;
& > .course,
& > .author,
& > .course-year {
padding-left: 0.5rem;
font-size: 16px;
}
}
.article-list { gap: 0.5rem;
display: grid;
grid-auto-flow: row;
max-width: 100%; padding: 0.5rem;
gap: 2rem; background: #fff;
grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
grid-auto-rows: auto;
.article { @include neo-brutalist-card;
display: grid;
grid-template-rows: auto auto auto;
background: var(--card-bg, $project-card-bg); a {
color: #000e; display: contents;
}
@include neo-brutalist-card($size: 3px, $offset: 9px); & > .icon {
grid-area: icon;
display: grid;
}
row-gap: 0.5rem; & > .text {
padding: 1rem; grid-area: text;
display: grid;
}
.description { & > .right {
font-size: 16px; grid-area: right;
display: grid;
}
} }
}
.tags { .appunti-scrollable {
display: flex; display: flex;
gap: 0.5rem; overflow-x: auto;
flex-wrap: wrap;
font-size: 14px; .appunti-list {
font-weight: 600; padding: 2px;
color: #555; padding-bottom: 1rem;
} }
} }
}
.news-list { .appunti-list {
display: grid; display: grid;
grid-auto-flow: column; grid-auto-flow: column;
.news-item { gap: 3rem;
background: $news-bg;
color: #111;
@include neo-brutalist-card($size: 3px, $offset: 9px); overflow-x: auto;
max-width: 100%;
}
.appunti-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.25rem;
width: 22rem; color: #444;
max-height: 27rem;
overflow: hidden; & > .thumbnail {
width: 10rem;
aspect-ratio: 10 / 14;
background: #e0e0e0;
::-webkit-scrollbar { @include neo-brutalist-card($hoverable: true);
width: 10px;
} }
::-webkit-scrollbar-thumb { & > .thumbnail + * {
background-color: #c67e14; font-weight: 700;
border: 2px solid #222; padding-top: 0.25rem;
&:hover {
background-color: #e69419;
}
} }
a { & > .title,
font-weight: 600; & > .course,
text-decoration: none; & > .author,
color: #c67e14; & > .course-year {
padding-left: 0.5rem;
&:hover { font-size: 16px;
text-decoration: underline solid 2px;
}
} }
}
& > .title { .article-list {
padding: 1rem; display: grid;
background: $news-accent-bg; grid-auto-flow: row;
line-height: 1;
font-size: 26px;
}
a.title { max-width: 100%;
color: #83530c;
}
& > .abstract { gap: 2rem;
flex-grow: 1; grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
grid-auto-rows: auto;
padding: 1rem; .article {
display: grid;
grid-template-rows: auto auto auto;
overflow-y: auto; background: var(--card-bg, $project-card-bg);
color: #000e;
@extend .text; @include neo-brutalist-card($size: 3px, $offset: 9px);
}
& > .content { row-gap: 0.5rem;
display: flex;
padding: 1rem; padding: 1rem;
flex-direction: column;
gap: 0.5rem;
background: #fff8da;
& > .continue { .description {
padding: 1rem;
display: grid;
align-items: end;
justify-content: end;
}
& > .description {
font-size: 16px; font-size: 16px;
line-height: 1.5;
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;
}
& > .date {
font-size: 14px;
font-style: italic;
font-weight: 600; font-weight: 600;
color: #0008;
}
& > .author {
font-weight: 600;
font-size: 15px;
color: #555; color: #555;
} }
} }
} }
}
// .news-list {
// Cards display: grid;
// grid-auto-flow: column;
// .news-item {
// background: $news-bg;
// color: #111;
// @include neo-brutalist-card($size: 3px, $offset: 9px);
// display: flex;
// flex-direction: column;
// width: 22rem;
// max-height: 27rem;
// overflow: hidden;
// ::-webkit-scrollbar {
// width: 10px;
// }
// ::-webkit-scrollbar-thumb {
// background-color: #c67e14;
// border: 2px solid #222;
// &:hover {
// background-color: #e69419;
// }
// }
// a {
// font-weight: 600;
// text-decoration: none;
// color: #c67e14;
// &:hover {
// text-decoration: underline solid 2px;
// }
// }
// & > .title {
// padding: 1rem;
// background: $news-accent-bg;
// line-height: 1;
// font-size: 26px;
// }
// a.title {
// color: #83530c;
// }
// & > .abstract {
// flex-grow: 1;
// padding: 1rem;
// overflow-y: auto;
// @extend .text;
// }
// & > .content {
// display: flex;
// padding: 1rem;
// flex-direction: column;
// gap: 0.5rem;
// background: #fff8da;
// & > .continue {
// padding: 1rem;
// display: grid;
// align-items: end;
// justify-content: end;
// }
// & > .description {
// font-size: 16px;
// line-height: 1.5;
// flex-grow: 1;
// }
// & > .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;
// }
// & > .author {
// font-weight: 600;
// font-size: 15px;
// color: #555;
// }
// }
// }
}
//
// Cards
//
.card {
display: grid;
.card { --card-base-internal: var(--card-base, #f8f8f8);
display: grid;
--card-base-internal: var(--card-base, #f8f8f8); background: var(--card-base-internal);
color: color-mix(in srgb, var(--card-base-internal), #000 80%);
background: var(--card-base-internal); @include neo-brutalist-card($size: 3px, $offset: 9px);
color: color-mix(in srgb, var(--card-base-internal), #000 80%);
@include neo-brutalist-card($size: 3px, $offset: 9px); row-gap: 0.5rem;
padding: 1rem;
row-gap: 0.5rem; // Variants
padding: 1rem;
// Variants &.large {
padding: 2rem;
&.large { @include neo-brutalist-card($size: 4px, $offset: 8px);
padding: 2rem;
@include neo-brutalist-card($size: 4px, $offset: 8px); row-gap: 1rem;
row-gap: 1rem; & > .title {
font-size: 36px;
font-weight: 700;
}
& > .text {
font-size: 18px;
}
}
// Child Items
& > .title { & > .title {
font-size: 36px; color: color-mix(in srgb, var(--card-base-internal), #000 75%);
font-size: 26px;
font-weight: 700; font-weight: 700;
} }
& > .text { & > .text {
font-size: 18px; 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%);
}
} }
}
// Child Items & > .tags {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
font-size: 14px;
font-weight: 600;
color: #555;
& > .title { a {
color: color-mix(in srgb, var(--card-base-internal), #000 75%); color: color-mix(in srgb, var(--card-base-internal), #000 60%);
font-size: 26px; font-weight: 600;
font-weight: 700;
}
& > .text { &:hover {
font-size: 16px; text-decoration: underline solid 2px;
}
}
}
a:hover {
text-decoration: underline solid 2px;
}
a.title {
&:hover {
text-decoration: underline solid 3px;
}
}
} }
& > .tags { //
display: flex; // Card List
gap: 0.5rem; //
flex-wrap: wrap;
font-size: 14px; .card-list {
font-weight: 600; display: grid;
color: #555; 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;
}
} }
} }

88
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,
box-sizing: border-box; *::after {
font: inherit; box-sizing: border-box;
margin: 0; font: inherit;
} 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';

837
src/styles/pages.scss
View File

File diff suppressed because it is too large Load Diff

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

@ -24,108 +24,132 @@
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-content,
& > * { .text {
max-width: 46rem; line-height: 1.5;
}
pre, & > * {
code { max-width: 46rem;
background: var(--code-bg, #f0f0f0) !important; }
font-family: 'Source Code Pro', monospace; pre,
font-weight: 400; code {
font-size: 16px; 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;
code { font-family: 'Source Code Pro', monospace;
border-radius: 0.25rem; font-weight: 400;
padding: 0.125rem; font-size: 16px;
} }
pre { code {
margin: 2rem auto; border-radius: 0.25rem;
padding: 0.125rem 0.3rem;
}
padding: 0.5rem 1rem; pre {
margin: 2rem auto;
// width: 100%; padding: 0.5rem 1rem;
max-width: 80ch;
width: fit-content; // width: 100%;
max-width: 80ch;
line-height: 1.5; width: fit-content;
border-radius: 0.25rem; line-height: 1.5;
box-shadow: 0.25rem 0.25rem 0 0 #333; border-radius: 0.25rem;
border: 2px solid #333;
code { box-shadow: 0.25rem 0.25rem 0 0 #333;
padding: 0; border: 2px solid #333;
code {
padding: 0;
}
} }
}
p { p {
line-height: 1.75; line-height: 1.75;
margin: 1rem auto; margin: 0 auto;
} }
strong { p + p {
font-weight: 500; margin-top: 1rem;
} }
em { h1 + p,
font-style: italic; h2 + p,
} h3 + p,
h4 + p {
margin-top: 1rem;
}
@include geometric-headings; p:has(+ h1, + h2, + h3, + h4) {
margin-bottom: 1rem;
}
h1 { strong {
margin-bottom: 2rem; font-weight: 600;
text-align: center; }
}
h1, em {
h2, font-style: italic;
h3, }
h4 {
font-weight: 700;
color: #333;
}
h1, @include geometric-headings;
h2,
h3,
h4,
ol,
ul {
margin-left: auto;
margin-right: auto;
}
a, h1 {
a:visited { margin-bottom: 2rem;
color: var(--zone-color, #1e6733); text-align: center;
font-weight: 600; }
h1,
h2,
h3,
h4 {
font-weight: 700;
color: #333;
&:hover { // trick to fix anchor links with sticky header
text-decoration: underline 2px solid; padding-top: 7rem;
margin-top: -6.5rem;
} }
}
padding: 2rem 0 3rem; h1,
h2,
h3,
h4,
ol,
ul {
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 1024px) { a,
& > * { a:visited {
margin: 0 0.75rem; color: var(--zone-color, #1e6733);
font-weight: 600;
&:hover {
text-decoration: underline 2px solid;
}
}
@media screen and (max-width: 1024px) {
& > * {
margin: 0 0.75rem;
}
} }
} }
} }

Write Preview
Loading…
Cancel
Save