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/source-code-pro": "^5.0.16",
"@fontsource/source-sans-pro": "^5.0.8",
"@fontsource/space-mono": "^5.0.20",
"astro": "^4.4.6",
"better-sqlite3": "^9.4.3",
"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="title">
<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 class="date">{
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)
description: Una guida introduttiva alle basi di Git (Esempio)
author: Copilot
tags:
- git
tags: [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.

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

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/source-sans-pro/latin.css'
import '@fontsource/source-code-pro/latin.css'
import '@fontsource/space-mono/latin.css'
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 NewsCard from '@/components/NewsCard.astro'
const posts = await getCollection('posts')
// posts.push(...posts)
// posts.push(...posts)
// posts.push(...posts)
---
<PageLayout pageName="homepage">
@ -62,8 +71,22 @@ import PageLayout from '../layouts/PageLayout.astro'
<div class="title">Ultime Notizie</div>
<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="title">Nuovo Sito!</div>
<a href="#" class="title">Nuovo Sito!</a>
<div class="abstract">
<p>Questo è il nuovo sito del PHC, realizzato con Astro e</p>
<p>
@ -122,7 +145,7 @@ import PageLayout from '../layouts/PageLayout.astro'
cumque. Nemo obcaecati eaque recusandae fugit sed!
</p>
</div>
</div>
</div> -->
</div>
<a class="primary" href="#" role="button">Vai all'Archivio</a>
@ -179,19 +202,19 @@ import PageLayout from '../layouts/PageLayout.astro'
</div>
</div>
</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="image">
<div class="box"></div>
</div>
<div class="title">Orario</div>
<div class="description">
Questo sito permette di visualizzare il proprio orario delle lezioni,
con informazioni sui docenti e le aule.
Questo sito permette di visualizzare il proprio orario delle lezioni, con informazioni
sui docenti e le aule.
</div>
</div>
</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="image">
<img
@ -201,26 +224,21 @@ import PageLayout from '../layouts/PageLayout.astro'
</div>
<div class="title">Problemi</div>
<div class="description">
<p>
Bacheca con problemi di Matematica da risolvere
inviando soluzioni in LaTeX.
</p>
<p>Bacheca con problemi di Matematica da risolvere inviando soluzioni in LaTeX.</p>
<p>
La sera i problemi compaiono sullo schermo in atrio.
</p>
<p>La sera i problemi compaiono sullo schermo in atrio.</p>
</div>
</div>
</a>
<a href="#" style="--masonry-height: 3;">
<a href="http://steffe.cs.dm.unipi.it/" style="--masonry-height: 2;">
<div class="project">
<div class="image">
<div class="box"></div>
</div>
<div class="title">Cluster "Steffè"</div>
<div class="description">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus quam iure
dolor. Excepturi facere, ipsa accusantium labore explicabo quaerat incidunt.
Cluster progettato ed assemblato durante il progetto speciale per la didattica
"Calcolo Parallelo dall'Infrastruttura alla Matematica".
</div>
</div>
</a>
@ -261,7 +279,8 @@ import PageLayout from '../layouts/PageLayout.astro'
<p>
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">
</a>
</p>
</div>
</section>
</PageLayout>
</section></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'
export async function getStaticPaths() {
const guides = await getCollection('posts')
return guides.map(entry => ({
params: { id: entry.slug },
props: { entry },
}))
}
const { entry } = Astro.props
const { Content } = await entry.render()
---
@ -14,6 +22,8 @@ const { Content } = await entry.render()
image={entry.data.image}
date={entry.data.publishDate}
author={entry.data.author}
pageName={['notizia']}
>
<Content />
</ArticleLayout>

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

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

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

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

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

@ -12,20 +12,20 @@
@mixin geometric-headings {
$base-font-size: 16px;
$heading-scale: 1.33;
$heading-scale: 1.25;
@for $i from 1 through 5 {
$factor: pow($heading-scale, 5 - $i);
h#{$i} {
font-size: $base-font-size * $factor;
font-family: 'Source Sans Pro', monospace;
font-weight: 400;
font-family: 'Space Mono', monospace;
font-weight: 700;
margin-bottom: 0.25rem;
}
p + h#{$i} {
margin-top: 0.5rem * $factor;
margin-top: 0.75rem * $factor;
}
}
}
@ -52,18 +52,21 @@
}
pre {
margin: 1rem auto;
margin: 2rem auto;
padding: 0.5rem;
padding: 0.5rem 1rem;
width: 100%;
// width: 100%;
max-width: 80ch;
width: fit-content;
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 {
padding: 0;
@ -71,7 +74,7 @@
}
p {
line-height: 1.65;
line-height: 1.75;
margin: 0.5rem auto;
}
@ -82,6 +85,34 @@
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;
@media screen and (max-width: 1024px) {

Write Preview
Loading…
Cancel
Save