i.serdyuk/website
1
0
Fork 0
forked from phc/website
Code Pull Requests Activity

miglioramenti stilistici

Browse Source
This commit is contained in:
aziis98
2024-07-30 15:41:20 +02:00
parent 8f1d6cfff1
commit ce42b2bf15
14 changed files with 12087 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+11843
View File
File diff suppressed because it is too large Load Diff
package.json
+1
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",
src/components/NewsCard.astro
+18 -15
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>
<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>
src/content/guides/2024-02-29-git-101.md
+1 -2
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.
src/content/posts/.keep
View File
src/content/posts/2024-07-28-nuovo-sito.md
+4 -4
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
@@ -28,11 +28,11 @@ Il nuovo sito web realizzato in Astro offre diverse caratteristiche interessanti
Il nostro obiettivo è continuare a migliorare il sito web e offrire un'esperienza sempre più completa agli utenti. Alcune delle prossime caratteristiche che stiamo sviluppando includono:
- **Integrazione con Social Media**: Vogliamo consentire agli utenti di condividere facilmente il contenuto del sito web sui social media, ampliando così la visibilità e l'accessibilità del nostro materiale.
- **Integrazione con Social Media**: Vogliamo consentire agli utenti di condividere facilmente il contenuto del sito web sui social media, ampliando così la visibilità e l'accessibilità del nostro materiale.
- **Miglioramenti dell'Interfaccia Utente**: Stiamo lavorando per migliorare l'aspetto e la sensazione del sito web, rendendolo più intuitivo e piacevole da navigare.
- **Miglioramenti dell'Interfaccia Utente**: Stiamo lavorando per migliorare l'aspetto e la sensazione del sito web, rendendolo più intuitivo e piacevole da navigare.
- **Espansione dei Contenuti**: Continueremo ad aggiungere nuovi articoli, tutorial e risorse per fornire agli utenti un'ampia gamma di contenuti di qualità.
- **Espansione dei Contenuti**: Continueremo ad aggiungere nuovi articoli, tutorial e risorse per fornire agli utenti un'ampia gamma di contenuti di qualità.
## Conclusioni
src/layouts/BaseLayout.astro
+1
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'
src/pages/index.astro
+38 -19
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
>
src/pages/notizie/[id].astro
+10
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>
src/pages/notizie/index.astro
+1
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}
src/pages/storia.astro
+16
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>
src/styles/components.scss
+73 -32
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,66 +213,105 @@ $news-accent-bg: #f8e8b1;
.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 {
// border-bottom: 2px solid #222;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
padding: 1rem;
background: $news-accent-bg;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 1;
font-size: 26px;
}
a.title {
color: #83530c;
}
& > .abstract {
flex-grow: 1;
padding: 1rem;
overflow-y: auto;
@extend .text;
}
& > .continue {
& > .content {
display: flex;
padding: 1rem;
display: grid;
align-items: end;
justify-content: end;
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;
}
}
}
}
}
src/styles/main.scss
+40 -14
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;
}
@@ -387,8 +384,8 @@ body {
color: #fdfdfd;
.content {
@extend .text;
}
@extend .text;
}
}
}
@@ -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;
}
src/styles/typography.scss
+41 -10
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) {