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

miglioramenti stilistici

Browse Source
dev
Antonio De Lucreziis 4 months ago
parent 8f1d6cfff1
commit ce42b2bf15
14 changed files with 12087 additions and 96 deletions
Show Stats Download Patch File Download Diff File

11843
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
Unescape Escape View File

@ -19,6 +19,7 @@
"@fontsource/open-sans": "^5.0.24", "@fontsource/open-sans": "^5.0.24",
"@fontsource/source-code-pro": "^5.0.16", "@fontsource/source-code-pro": "^5.0.16",
"@fontsource/source-sans-pro": "^5.0.8", "@fontsource/source-sans-pro": "^5.0.8",
"@fontsource/space-mono": "^5.0.20",
"astro": "^4.4.6", "astro": "^4.4.6",
"better-sqlite3": "^9.4.3", "better-sqlite3": "^9.4.3",
"drizzle-orm": "^0.29.4", "drizzle-orm": "^0.29.4",

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

@ -1,22 +1,25 @@
--- ---
const { title, tags, description, image, date, author } = Astro.props const { id, title, tags, description, image, date, author } = Astro.props
--- ---
<div class="news-item"> <div class="news-item">
<div class="title"> <a href={`/notizie/${id}`} class="title">
{title} {title}
</a>
<div class="content">
<div class="date">
{
new Date(date).toLocaleDateString('it-IT', {
year: 'numeric',
month: 'long',
day: 'numeric',
})
}
</div> </div>
<div class="description">{description}</div> <div class="description">{description}</div>
<div class="tags"> <div class="tags">
{tags.map(tag => <a href={`/notizie/tags/${tag}`}>#{tag}</a>)} {tags.map(tag => <a href={`/notizie/tags/${tag}`}>#{tag}</a>)}
</div> </div>
{image && <img src={image} alt={title} />} {image && <img src={image} alt={title} />}
<div class="date">{ </div>
new Date(date).toLocaleDateString('it-IT', {
year: 'numeric',
month: 'long',
day: 'numeric'
})
}</div>
<div class="author">{author}</div>
</div> </div>

3
src/content/guides/2024-02-29-git-101.md
Unescape Escape View File

@ -3,8 +3,7 @@ id: git-101-example
title: Git 101 (Esempio) title: Git 101 (Esempio)
description: Una guida introduttiva alle basi di Git (Esempio) description: Una guida introduttiva alle basi di Git (Esempio)
author: Copilot author: Copilot
tags: tags: [git]
- git
--- ---
Benvenuto alla guida introduttiva alle basi di Git. In questa guida imparerai come iniziare a usare Git per il controllo di versione dei tuoi progetti. Benvenuto alla guida introduttiva alle basi di Git. In questa guida imparerai come iniziare a usare Git per il controllo di versione dei tuoi progetti.

0
src/content/posts/.keep
Unescape Escape View File

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

@ -8,7 +8,7 @@ tags: [astro, web, appunti]
# Il Nuovo Sito del PHC # Il Nuovo Sito del PHC
Benvenuti nel nuovo sito web, realizzato con la tecnologia web Astro! In questo articolo, ne vedremo le feature principali e cosa serba il futuro. Benvenuti nel nuovo sito web, realizzato con la tecnologia web [Astro](https://astro.build/)! In questo articolo, ne vedremo le feature principali e cosa serba il futuro.
## Astro: Un Potente Framework Statico ## Astro: Un Potente Framework Statico

1
src/layouts/BaseLayout.astro
Unescape Escape View File

@ -4,6 +4,7 @@ import 'katex/dist/katex.min.css'
import '@fontsource/open-sans/latin.css' import '@fontsource/open-sans/latin.css'
import '@fontsource/source-sans-pro/latin.css' import '@fontsource/source-sans-pro/latin.css'
import '@fontsource/source-code-pro/latin.css' import '@fontsource/source-code-pro/latin.css'
import '@fontsource/space-mono/latin.css'
import '../styles/main.scss' import '../styles/main.scss'

57
src/pages/index.astro
Unescape Escape View File

@ -1,5 +1,14 @@
--- ---
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')
// posts.push(...posts)
// posts.push(...posts)
// posts.push(...posts)
--- ---
<PageLayout pageName="homepage"> <PageLayout pageName="homepage">
@ -62,8 +71,22 @@ import PageLayout from '../layouts/PageLayout.astro'
<div class="title">Ultime Notizie</div> <div class="title">Ultime Notizie</div>
<div class="news-list"> <div class="news-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}
/>
))
}
<!--
<div class="news-item"> <div class="news-item">
<div class="title">Nuovo Sito!</div> <a href="#" class="title">Nuovo Sito!</a>
<div class="abstract"> <div class="abstract">
<p>Questo è il nuovo sito del PHC, realizzato con Astro e</p> <p>Questo è il nuovo sito del PHC, realizzato con Astro e</p>
<p> <p>
@ -122,7 +145,7 @@ import PageLayout from '../layouts/PageLayout.astro'
cumque. Nemo obcaecati eaque recusandae fugit sed! cumque. Nemo obcaecati eaque recusandae fugit sed!
</p> </p>
</div> </div>
</div> </div> -->
</div> </div>
<a class="primary" href="#" role="button">Vai all'Archivio</a> <a class="primary" href="#" role="button">Vai all'Archivio</a>
@ -179,19 +202,19 @@ import PageLayout from '../layouts/PageLayout.astro'
</div> </div>
</div> </div>
</a> --> </a> -->
<a target="_blank" href="https://lab.phc.dm.unipi.it/orario/" style="--masonry-height: 2;"> <a target="_blank" href="https://lab.phc.dm.unipi.it/orario/" style="--masonry-height: 1;">
<div class="project" style="--card-bg: #75ca75;"> <div class="project" style="--card-bg: #75ca75;">
<div class="image"> <div class="image">
<div class="box"></div> <div class="box"></div>
</div> </div>
<div class="title">Orario</div> <div class="title">Orario</div>
<div class="description"> <div class="description">
Questo sito permette di visualizzare il proprio orario delle lezioni, Questo sito permette di visualizzare il proprio orario delle lezioni, con informazioni
con informazioni sui docenti e le aule. sui docenti e le aule.
</div> </div>
</div> </div>
</a> </a>
<a target="_blank" href="https://lab.phc.dm.unipi.it/problemi/" style="--masonry-height: 1;"> <a target="_blank" href="https://lab.phc.dm.unipi.it/problemi/" style="--masonry-height: 2;">
<div class="project" style="--card-bg: #aa88c0;"> <div class="project" style="--card-bg: #aa88c0;">
<div class="image"> <div class="image">
<img <img
@ -201,26 +224,21 @@ import PageLayout from '../layouts/PageLayout.astro'
</div> </div>
<div class="title">Problemi</div> <div class="title">Problemi</div>
<div class="description"> <div class="description">
<p> <p>Bacheca con problemi di Matematica da risolvere inviando soluzioni in LaTeX.</p>
Bacheca con problemi di Matematica da risolvere
inviando soluzioni in LaTeX.
</p>
<p> <p>La sera i problemi compaiono sullo schermo in atrio.</p>
La sera i problemi compaiono sullo schermo in atrio.
</p>
</div> </div>
</div> </div>
</a> </a>
<a href="#" style="--masonry-height: 3;"> <a href="http://steffe.cs.dm.unipi.it/" style="--masonry-height: 2;">
<div class="project"> <div class="project">
<div class="image"> <div class="image">
<div class="box"></div> <div class="box"></div>
</div> </div>
<div class="title">Cluster "Steffè"</div> <div class="title">Cluster "Steffè"</div>
<div class="description"> <div class="description">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus quam iure Cluster progettato ed assemblato durante il progetto speciale per la didattica
dolor. Excepturi facere, ipsa accusantium labore explicabo quaerat incidunt. "Calcolo Parallelo dall'Infrastruttura alla Matematica".
</div> </div>
</div> </div>
</a> </a>
@ -261,7 +279,8 @@ import PageLayout from '../layouts/PageLayout.astro'
<p> <p>
Se sei uno studente del Dipartimento di Matematica e vuoi diventare un macchinista del PHC, Se sei uno studente del Dipartimento di Matematica e vuoi diventare un macchinista del PHC,
vieni a trovarci in Dipartimento o scrivici a <a href="mailto:macchinisti@lists.dm.unipi.it"> vieni a trovarci in Dipartimento o scrivici a <a href="mailto:macchinisti@lists.dm.unipi.it">
</a>
</p>
</div> </div>
</section> </section></PageLayout
</PageLayout> >

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

@ -3,6 +3,14 @@ import { getCollection } from 'astro:content'
import ArticleLayout from '../../layouts/ArticleLayout.astro' import ArticleLayout from '../../layouts/ArticleLayout.astro'
export async function getStaticPaths() {
const guides = await getCollection('posts')
return guides.map(entry => ({
params: { id: entry.slug },
props: { entry },
}))
}
const { entry } = Astro.props const { entry } = Astro.props
const { Content } = await entry.render() const { Content } = await entry.render()
--- ---
@ -14,6 +22,8 @@ const { Content } = await entry.render()
image={entry.data.image} image={entry.data.image}
date={entry.data.publishDate} date={entry.data.publishDate}
author={entry.data.author} author={entry.data.author}
pageName={['notizia']}
> >
<Content /> <Content />
</ArticleLayout> </ArticleLayout>

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

@ -12,6 +12,7 @@ const posts = await getCollection('posts')
{ {
posts.map(post => ( posts.map(post => (
<NewsCard <NewsCard
id={post.slug}
title={post.data.title} title={post.data.title}
description={post.data.description} description={post.data.description}
tags={post.data.tags} tags={post.data.tags}

16
src/pages/storia.astro
Unescape Escape View File

@ -0,0 +1,16 @@
---
import BaseLayout from '../layouts/BaseLayout.astro'
import Header from '../components/Header.astro'
import Footer from '../components/Footer.astro'
---
<BaseLayout {...Astro.props}>
<Header />
<main class="text-content center">
<p>
Bla bla bla la storia del PHC con tutti i macchinisti che ci sono mai stati su una timeline carina
</p>
</main>
<Footer />
</BaseLayout>

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

@ -15,6 +15,12 @@ $news-accent-bg: #f8e8b1;
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
} }
.title {
font-family: 'Space Mono', monospace;
font-weight: 700;
font-size: 28px;
}
.search { .search {
width: 100%; width: 100%;
height: 2.5rem; height: 2.5rem;
@ -185,11 +191,6 @@ $news-accent-bg: #f8e8b1;
row-gap: 0.5rem; row-gap: 0.5rem;
padding: 1rem; padding: 1rem;
.title {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 32px;
}
.description { .description {
font-size: 16px; font-size: 16px;
@ -200,6 +201,7 @@ $news-accent-bg: #f8e8b1;
gap: 0.5rem; gap: 0.5rem;
flex-wrap: wrap; flex-wrap: wrap;
font-size: 14px; font-size: 14px;
font-weight: 600;
color: #555; color: #555;
} }
} }
@ -211,6 +213,7 @@ $news-accent-bg: #f8e8b1;
.news-item { .news-item {
background: $news-bg; background: $news-bg;
color: #111;
@include neo-brutalist-card($size: 3px, $offset: 9px); @include neo-brutalist-card($size: 3px, $offset: 9px);
@ -220,6 +223,8 @@ $news-accent-bg: #f8e8b1;
width: 22rem; width: 22rem;
max-height: 27rem; max-height: 27rem;
overflow: hidden;
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 10px; width: 10px;
} }
@ -244,18 +249,16 @@ $news-accent-bg: #f8e8b1;
} }
& > .title { & > .title {
// border-bottom: 2px solid #222;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
padding: 1rem; padding: 1rem;
background: $news-accent-bg; background: $news-accent-bg;
line-height: 1;
font-size: 26px;
}
font-family: 'Source Sans Pro', sans-serif; a.title {
font-weight: 700; color: #83530c;
font-size: 32px;
} }
& > .abstract { & > .abstract {
flex-grow: 1; flex-grow: 1;
@ -265,6 +268,15 @@ $news-accent-bg: #f8e8b1;
@extend .text; @extend .text;
} }
& > .content {
display: flex;
padding: 1rem;
flex-direction: column;
gap: 0.5rem;
background: #fff8da;
& > .continue { & > .continue {
padding: 1rem; padding: 1rem;
@ -272,5 +284,34 @@ $news-accent-bg: #f8e8b1;
align-items: end; align-items: end;
justify-content: 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;
}
}
} }
} }

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

@ -79,7 +79,7 @@ a {
font-weight: 600; font-weight: 600;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline 2px solid;
} }
} }
} }
@ -129,8 +129,11 @@ body {
padding: 0 1.5rem; padding: 0 1.5rem;
a { a {
font-size: 22px; font-family: 'Space Mono', monospace;
font-weight: 600; font-size: 18px;
font-weight: 700;
letter-spacing: 1px;
color: #333;
} }
} }
} }
@ -176,11 +179,7 @@ body {
scroll-snap-align: start; scroll-snap-align: start;
& > .title { & > .title {
font-weight: 700; font-size: 48px;
font-size: 60px;
font-family: 'Source Sans Pro', sans-serif;
padding-top: 4rem; padding-top: 4rem;
} }
} }
@ -261,8 +260,6 @@ body {
gap: 1rem; gap: 1rem;
.title { .title {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 40px; font-size: 40px;
} }
@ -285,6 +282,8 @@ body {
flex-direction: row; flex-direction: row;
gap: 3rem; gap: 3rem;
align-items: flex-start;
padding: 0 3rem; padding: 0 3rem;
justify-content: center; justify-content: center;
@ -344,8 +343,6 @@ body {
gap: 0.25rem 1rem; gap: 0.25rem 1rem;
.title { .title {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 32px; font-size: 32px;
} }
@ -493,6 +490,31 @@ body {
} }
} }
.notizia {
background: #fffced;
--zone-color: #ac8919;
main {
margin-top: 3rem;
margin-bottom: 6rem;
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);
}
}
}
.notizie {
background: #fffced;
}
.guide { .guide {
main { main {
justify-self: center; justify-self: center;
@ -574,3 +596,7 @@ body {
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 15px; width: 15px;
} }
::selection {
background: #0002;
}

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

@ -12,20 +12,20 @@
@mixin geometric-headings { @mixin geometric-headings {
$base-font-size: 16px; $base-font-size: 16px;
$heading-scale: 1.33; $heading-scale: 1.25;
@for $i from 1 through 5 { @for $i from 1 through 5 {
$factor: pow($heading-scale, 5 - $i); $factor: pow($heading-scale, 5 - $i);
h#{$i} { h#{$i} {
font-size: $base-font-size * $factor; font-size: $base-font-size * $factor;
font-family: 'Source Sans Pro', monospace; font-family: 'Space Mono', monospace;
font-weight: 400; font-weight: 700;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
p + h#{$i} { p + h#{$i} {
margin-top: 0.5rem * $factor; margin-top: 0.75rem * $factor;
} }
} }
} }
@ -52,18 +52,21 @@
} }
pre { pre {
margin: 1rem auto; margin: 2rem auto;
padding: 0.5rem; padding: 0.5rem 1rem;
width: 100%; // width: 100%;
max-width: 80ch; max-width: 80ch;
width: fit-content;
line-height: 1.5; line-height: 1.5;
border-radius: 0.5rem; border-radius: 0.25rem;
box-shadow: 0.25rem 0.25rem 0 0 #777; box-shadow: 0.25rem 0.25rem 0 0 #333;
border: 2px solid #333;
code { code {
padding: 0; padding: 0;
@ -71,7 +74,7 @@
} }
p { p {
line-height: 1.65; line-height: 1.75;
margin: 0.5rem auto; margin: 0.5rem auto;
} }
@ -82,6 +85,34 @@
text-align: center; text-align: center;
} }
h1,
h2,
h3,
h4 {
font-weight: 700;
color: #333;
}
h1,
h2,
h3,
h4,
ol,
ul {
margin-left: auto;
margin-right: auto;
}
a,
a:visited {
color: var(--zone-color, #1e6733);
font-weight: 600;
&:hover {
text-decoration: underline 2px solid;
}
}
padding: 2rem 0 3rem; padding: 2rem 0 3rem;
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {

Write Preview
Loading…
Cancel
Save