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

reworked homepage, prototype storia timeline

Browse Source
dev
Antonio De Lucreziis 4 months ago
parent fb43eddefc
commit 1509984afb
8 changed files with 416 additions and 306 deletions
Show Stats Download Patch File Download Diff File

11
src/content/meta/whats-phc.md
Unescape Escape View File

@ -0,0 +1,11 @@
---
title: Cos'è il PHC?
---
Il <span title="Pisa Happy Computing">**PHC**</span> è un laboratorio informatico, gestito dagli studenti del **Dipartimento di Matematica** di Pisa e nato nel [1994](http://web.archive.org/web/19971017065805/http://poisson.dm.unipi.it/), che offre vari servizi agli studenti come [Poisson](https://poisson.phc.dm.unipi.it), che ospita le pagine degli studenti.
La sede del PHC è la [stanza 106](https://www.dm.unipi.it/mappa/?sel=638cd24b50cf34e03924a00c) del Dipartimento, dove si trovano i **macchinisti** per discutere e realizzare progetti [hardware](http://steffe.cs.dm.unipi.it/) e [software](https://lab.phc.dm.unipi.it/orario), e occuparsi di server autogestiti.
Le macchine del PHC girano principalmente Linux/Unix come sistemi operativi e i macchinisti sono grandi sostenitori di software **FOSS** (che loro stessi sviluppano sull'[istanza Gitea del PHC](https://git.phc.dm.unipi.it/phc)).
La lista dei vari macchinisti nel corso del tempo e di vari eventi notevoli si trova nella [pagina della storia](/storia) del PHC.

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

@ -2,13 +2,14 @@
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')
// posts.push(...posts) // posts.push(...posts)
// posts.push(...posts) // posts.push(...posts)
// posts.push(...posts) // posts.push(...posts)
import { Content as WhatPhcContent, frontmatter as whatsPhcFrontmatter } from '../content/meta/whats-phc.md'
--- ---
<PageLayout pageName="homepage"> <PageLayout pageName="homepage">
@ -20,33 +21,10 @@ const posts = await getCollection('posts')
<div class="logo"> <div class="logo">
<img src="/images/logo-circuit-board.svg" alt="phc logo" /> <img src="/images/logo-circuit-board.svg" alt="phc logo" />
</div> </div>
<div class="whats-phc"> <div class="whats-phc card large">
<div class="title">Cos'è il PHC?</div> <div class="title">{whatsPhcFrontmatter.title}</div>
<div class="content"> <div class="text">
<p> <WhatPhcContent />
Il <span title="Pisa Happy Computing">
<strong>PHC</strong>
</span> è un laboratorio informatico, gestito dagli studenti del <strong
>Dipartimento di Matematica</strong
> di Pisa e nato nel <a
href="http://web.archive.org/web/19971017065805/http://poisson.dm.unipi.it/">1994</a
>, che offre vari servizi agli studenti come questo sito.
</p>
<p>
La sede del PHC è la <a href="https://www.dm.unipi.it/mappa/?sel=638cd24b50cf34e03924a00c"
>stanza 106</a
> del Dipartimento, dove si trovano i <strong>macchinisti</strong> per sperimentare con progetti
<a href="https://lab.phc.dm.unipi.it/orario">software</a> ed <a
href="http://steffe.cs.dm.unipi.it/">hardware</a
>, e occuparsi dei server autogestiti come <a href="https://poisson.phc.dm.unipi.it"
>Poisson</a
>, che ospita le pagine degli studenti.
</p>
<p>
Le macchine del PHC girano principalmente sistemi operativi Linux/Unix e i macchinisti
usano (e <a href="https://git.phc.dm.unipi.it/phc">sviluppano</a>) software Open Source.
Per sapere di più sulla storia del PHC, leggi <a href="/storia">qui</a>.
</p>
</div> </div>
</div> </div>
</section> </section>
@ -70,85 +48,27 @@ const posts = await getCollection('posts')
<div class="title">Ultime Notizie</div> <div class="title">Ultime Notizie</div>
<div class="news-list"> <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 class="news-item">
<a href="#" class="title">Nuovo Sito!</a>
<div class="abstract">
<p>Questo è il nuovo sito del PHC, realizzato con Astro e</p>
<p>
Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt
possimus rerum expedita dicta nesciunt enim mollitia iure ullam aut, pariatur, at
cumque. Nemo obcaecati eaque recusandae fugit sed!
</p>
</div>
</div>
<div class="news-item">
<div class="title">Tempore provident impedit libero?</div>
<div class="abstract">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis reprehenderit porro
omnis enim deleniti esse quos, architecto adipisci veritatis, iusto perferendis
aperiam recusandae exercitationem doloribus, illum commodi voluptatem pariatur eius!
</p>
<p>
Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt
possimus rerum expedita dicta nesciunt enim mollitia iure ullam aut, pariatur, at
cumque. Nemo obcaecati eaque recusandae fugit sed!
</p>
<p>
Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt
possimus rerum expedita dicta nesciunt enim mollitia iure ullam aut, pariatur, at
cumque. Nemo obcaecati eaque recusandae fugit sed!
</p>
<p>
Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt
possimus rerum expedita dicta nesciunt enim mollitia iure ullam aut, pariatur, at
cumque. Nemo obcaecati eaque recusandae fugit sed!
</p>
</div>
</div>
<div class="news-item">
<div class="title">Alias molestias consectetur quam</div>
<div class="abstract">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis reprehenderit porro
omnis enim deleniti esse quos, architecto adipisci veritatis, iusto perferendis
aperiam recusandae exercitationem doloribus, illum commodi voluptatem pariatur eius!
</p>
</div>
</div> </div>
<div class="news-item"> <div class="text">{newsItem.data.description}</div>
<div class="title">Inventore dignissimos sapiente nulla</div>
<div class="abstract">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis reprehenderit porro
omnis enim deleniti esse quos, architecto adipisci veritatis, iusto perferendis
aperiam recusandae exercitationem doloribus, illum commodi voluptatem pariatur eius!
</p>
<p>
Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt
possimus rerum expedita dicta nesciunt enim mollitia iure ullam aut, pariatur, at
cumque. Nemo obcaecati eaque recusandae fugit sed!
</p>
</div> </div>
</div> --> ))
}
</div> </div>
<a class="primary" href="#" role="button">Vai all'Archivio</a> <a class="primary" href="/notizie" role="button">Vai all'Archivio</a>
</section> </section>
<section class="projects"> <section class="projects">
<div class="zig-zag"> <div class="zig-zag">

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

@ -27,7 +27,7 @@ const headings = getHeadings()
</ul> </ul>
</nav> </nav>
</aside> </aside>
<main class="text-content center"> <main class="text">
<Content components={{ pre: CodeBlockPreview }} /> <Content components={{ pre: CodeBlockPreview }} />
</main> </main>
<Footer /> <Footer />

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

@ -5,12 +5,72 @@ import Header from '../components/Header.astro'
import Footer from '../components/Footer.astro' import Footer from '../components/Footer.astro'
--- ---
<BaseLayout {...Astro.props}> <BaseLayout {...Astro.props} pageName={'storia'}>
<Header /> <Header />
<main class="text-content center"> <main>
<p> <h1>Storia</h1>
Bla bla bla la storia del PHC con tutti i macchinisti che ci sono mai stati su una timeline carina <div class="timeline">
</p> <div class="timeline-item">
<div class="content">
<div class="card">
<div class="title">1999</div>
<div class="text">Evento 1</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
</div>
<div class="timeline-item">
<div class="content">
<div class="card">
<div class="title">2005</div>
<div class="text">Evento 2</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
</div>
<div class="timeline-item">
<div class="content">
<div class="card">
<div class="title">2010</div>
<div class="text">Evento 3</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
</div>
<div class="timeline-item">
<div class="content">
<div class="card">
<div class="title">2015</div>
<div class="text">Evento 4</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
</div>
<div class="timeline-item">
<div class="content">
<div class="card">
<div class="title">2020</div>
<div class="text">Evento 5</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
</div>
</div>
</main> </main>
<Footer /> <Footer />
</BaseLayout> </BaseLayout>

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

@ -320,6 +320,143 @@
// } // }
} }
.timeline {
display: grid;
--timeline-track-size: 6rem;
--timeline-thickness: 6px;
--timeline-color: #333;
grid-template-columns: 1fr var(--timeline-track-size) 1fr;
@media screen and (max-width: $screen-desktop-min) {
--timeline-track-size: 3rem;
grid-template-columns: var(--timeline-track-size) 1fr;
}
max-width: 120rch;
& > .timeline-item {
display: grid;
@media screen and (min-width: $screen-desktop-min) {
&:nth-child(odd) {
grid-column: 1 / span 2;
grid-template-columns: 1fr var(--timeline-track-size);
// text-align: right;
& > .content {
grid-column: 1;
}
}
&:nth-child(even) {
grid-column: 2 / span 2;
grid-template-columns: var(--timeline-track-size) 1fr;
& > .content {
grid-column: 2;
}
}
}
@media screen and (max-width: $screen-desktop-min) {
grid-column: 1 / span 2;
grid-template-columns: var(--timeline-track-size) 1fr;
& > .content {
grid-column: 2;
}
}
& > .content {
padding: 2rem 1rem;
@media screen and (max-width: $screen-desktop-min) {
padding: 1rem 2rem 1rem 0;
}
display: grid;
grid-template-columns: auto;
& > .title {
font-size: 20px;
font-weight: 700;
}
& > .date {
font-size: 32px;
font-weight: 400;
color: #555;
}
}
position: relative;
// timeline vertical line
&::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: var(--timeline-thickness);
background: var(--timeline-color);
}
&:first-child::before {
top: 50%;
}
&:last-child::before {
bottom: 50%;
}
// timeline circle
&::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 1rem;
height: 1rem;
border-radius: 50%;
background: var(--timeline-color);
}
&::before,
&::after {
grid-column: 1 / span 1;
}
@media screen and (min-width: $screen-desktop-min) {
&:nth-child(odd)::before {
grid-column: 2 / span 1;
}
&:nth-child(even)::before {
grid-column: 1 / span 1;
}
&:nth-child(odd)::after {
grid-column: 2 / span 1;
}
&:nth-child(even)::after {
grid-column: 1 / span 1;
}
}
}
}
// //
// Cards // Cards
// //

2
src/styles/controls.scss
Unescape Escape View File

@ -4,6 +4,7 @@
// Controls - for things like buttons, input, select // Controls - for things like buttons, input, select
// //
@layer common {
button, button,
.button, .button,
[role='button'] { [role='button'] {
@ -114,3 +115,4 @@ form {
justify-self: center; justify-self: center;
} }
} }
}

217
src/styles/pages.scss
Unescape Escape View File

@ -102,32 +102,30 @@
& > .whats-phc { & > .whats-phc {
z-index: 2; z-index: 2;
background: $homepage-whatsphc-bg; background: #e4c5ff;
@include neo-brutalist-card($size: 4px, $offset: 8px); --zone-color: color-mix(in lab, #e4c5ff, #000 75%);
padding: 2rem;
max-width: 37rem; max-width: 37rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
.title { .title {
font-size: 40px; text-align: center;
} }
.content { a {
@extend .text; text-decoration: underline 2px solid;
line-height: 1.5;
&:hover {
--zone-color: color-mix(in lab, #e4c5ff, #000 60%);
}
} }
} }
} }
section.news { section.news {
--card-base: color-mix(in lab, var(--news-base), #fff 25%);
--zone-color: color-mix(in lab, var(--news-base), #000 50%);
background: $homepage-news-bg; background: $homepage-news-bg;
gap: 3rem; gap: 3rem;
@ -151,14 +149,8 @@
padding: 0.5rem 2rem; padding: 0.5rem 2rem;
&.primary { &.primary {
// background: #824ed4; background: #ffdd6e;
// color: #f0e6ff;
background: #f8e8b1;
color: #000d; color: #000d;
// &:hover {
// // background: #8e5ddd;
// }
} }
} }
} }
@ -246,73 +238,77 @@
} }
} }
.utenti { // .utenti {
main { // main {
justify-self: center; // justify-self: center;
display: flex; // display: flex;
flex-direction: column; // flex-direction: column;
align-items: center; // align-items: center;
max-width: 80ch; // max-width: 80ch;
padding: 5rem 0; // padding: 5rem 0;
gap: 5rem; // gap: 5rem;
} // }
} // }
.appunti { // .appunti {
main { // main {
background: #fdfdf0; // background: #fdfdf0;
justify-self: center; // justify-self: center;
display: grid; // display: grid;
grid-auto-flow: row; // grid-auto-flow: row;
justify-items: center; // justify-items: center;
padding: 3rem; // padding: 3rem;
gap: 3rem; // gap: 3rem;
width: 100%; // width: 100%;
.search { // .search {
max-width: 80ch; // max-width: 80ch;
} // }
.appunti-scrollable { // .appunti-scrollable {
justify-self: stretch; // justify-self: stretch;
&.center { // &.center {
justify-self: center; // justify-self: center;
} // }
} // }
} // }
} // }
.login { // .login {
background: #ddfaff; // background: #ddfaff;
main { // main {
justify-self: center; // justify-self: center;
display: flex; // display: flex;
flex-direction: column; // flex-direction: column;
align-items: center; // align-items: center;
max-width: 80ch; // max-width: 80ch;
padding: 3rem 0; // padding: 3rem 0;
gap: 3rem; // gap: 3rem;
h3 { // h3 {
font-size: 28px; // font-size: 28px;
font-weight: 600; // font-weight: 600;
} // }
} // }
} // }
//
// Notizie
//
.notizie, .notizie,
.notizia { .notizia {
@ -356,57 +352,9 @@
} }
} }
// .guida { //
// background: #f0fdff; // Guide
// --zone-color: #2c7c9b; //
// &.series {
// h1 {
// margin-bottom: 0;
// }
// .series {
// font-size: 20px;
// font-weight: 700;
// text-align: center;
// margin-bottom: 3rem;
// }
// }
// 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, .guide,
.guida { .guida {
@ -463,6 +411,35 @@
} }
} }
.storia {
--card-base: #70f0a9;
main {
justify-self: center;
display: flex;
flex-direction: column;
align-items: center;
padding: 5rem 0;
gap: 3rem;
// background horizontal linear gradient that is black in the center
background: linear-gradient(
to right,
#70f0a933 0%,
#70f0a933 25%,
#70f0a999 50%,
#70f0a933 75%,
#70f0a933 100%
);
}
}
//
// Meta
//
.design { .design {
grid-template-columns: minmax(15rem, 2fr) 10fr; grid-template-columns: minmax(15rem, 2fr) 10fr;

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

@ -33,8 +33,11 @@
@layer typography { @layer typography {
@include geometric-headings; @include geometric-headings;
.text-content,
.text { .text {
&.center {
text-align: center;
}
line-height: 1.5; line-height: 1.5;
& > * { & > * {

Write Preview
Loading…
Cancel
Save