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 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)
import { Content as WhatPhcContent, frontmatter as whatsPhcFrontmatter } from '../content/meta/whats-phc.md'
---
<PageLayout pageName="homepage">
@ -20,33 +21,10 @@ const posts = await getCollection('posts')
<div class="logo">
<img src="/images/logo-circuit-board.svg" alt="phc logo" />
</div>
<div class="whats-phc">
<div class="title">Cos'è il PHC?</div>
<div class="content">
<p>
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 class="whats-phc card large">
<div class="title">{whatsPhcFrontmatter.title}</div>
<div class="text">
<WhatPhcContent />
</div>
</div>
</section>
@ -70,85 +48,27 @@ const posts = await getCollection('posts')
<div class="title">Ultime Notizie</div>
<div class="news-list">
<div class="card-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">
<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>
news.map(newsItem => (
<div class="card">
<a href={`/notizie/${newsItem.slug}`} class="title">
{newsItem.data.title}
</a>
<div class="text small dimmed">
{new Date(newsItem.data.publishDate).toLocaleDateString('it-IT', {
year: 'numeric',
month: 'long',
day: 'numeric',
})}
</div>
<div class="news-item">
<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 class="text">{newsItem.data.description}</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 class="projects">
<div class="zig-zag">

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

@ -27,7 +27,7 @@ const headings = getHeadings()
</ul>
</nav>
</aside>
<main class="text-content center">
<main class="text">
<Content components={{ pre: CodeBlockPreview }} />
</main>
<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'
---
<BaseLayout {...Astro.props}>
<BaseLayout {...Astro.props} pageName={'storia'}>
<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>
<h1>Storia</h1>
<div class="timeline">
<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>
<Footer />
</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
//

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

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

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

@ -102,32 +102,30 @@
& > .whats-phc {
z-index: 2;
background: $homepage-whatsphc-bg;
background: #e4c5ff;
@include neo-brutalist-card($size: 4px, $offset: 8px);
padding: 2rem;
--zone-color: color-mix(in lab, #e4c5ff, #000 75%);
max-width: 37rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
.title {
font-size: 40px;
text-align: center;
}
.content {
@extend .text;
line-height: 1.5;
a {
text-decoration: underline 2px solid;
&:hover {
--zone-color: color-mix(in lab, #e4c5ff, #000 60%);
}
}
}
}
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;
gap: 3rem;
@ -151,14 +149,8 @@
padding: 0.5rem 2rem;
&.primary {
// background: #824ed4;
// color: #f0e6ff;
background: #f8e8b1;
background: #ffdd6e;
color: #000d;
// &:hover {
// // background: #8e5ddd;
// }
}
}
}
@ -246,73 +238,77 @@
}
}
.utenti {
main {
justify-self: center;
// .utenti {
// main {
// justify-self: center;
display: flex;
flex-direction: column;
align-items: center;
// display: flex;
// flex-direction: column;
// align-items: center;
max-width: 80ch;
padding: 5rem 0;
// max-width: 80ch;
// padding: 5rem 0;
gap: 5rem;
}
}
// gap: 5rem;
// }
// }
.appunti {
main {
background: #fdfdf0;
// .appunti {
// main {
// background: #fdfdf0;
justify-self: center;
// justify-self: center;
display: grid;
grid-auto-flow: row;
// display: grid;
// grid-auto-flow: row;
justify-items: center;
// justify-items: center;
padding: 3rem;
// padding: 3rem;
gap: 3rem;
// gap: 3rem;
width: 100%;
// width: 100%;
.search {
max-width: 80ch;
}
// .search {
// max-width: 80ch;
// }
.appunti-scrollable {
justify-self: stretch;
// .appunti-scrollable {
// justify-self: stretch;
&.center {
justify-self: center;
}
}
}
}
// &.center {
// justify-self: center;
// }
// }
// }
// }
.login {
background: #ddfaff;
// .login {
// background: #ddfaff;
main {
justify-self: center;
// main {
// justify-self: center;
display: flex;
flex-direction: column;
align-items: center;
// display: flex;
// flex-direction: column;
// align-items: center;
max-width: 80ch;
padding: 3rem 0;
// max-width: 80ch;
// padding: 3rem 0;
gap: 3rem;
// gap: 3rem;
h3 {
font-size: 28px;
font-weight: 600;
}
}
}
// h3 {
// font-size: 28px;
// font-weight: 600;
// }
// }
// }
//
// Notizie
//
.notizie,
.notizia {
@ -356,57 +352,9 @@
}
}
// .guida {
// background: #f0fdff;
// --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 {
@ -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 {
grid-template-columns: minmax(15rem, 2fr) 10fr;

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

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

Write Preview
Loading…
Cancel
Save