-
- Il
- PHC
- è un laboratorio informatico, gestito dagli studenti del Dipartimento di Matematica di Pisa e nato nel 1994, che offre vari servizi agli studenti come questo sito.
-
-
- La sede del PHC è la stanza 106 del Dipartimento, dove si trovano i macchinisti per sperimentare con progetti
- software ed hardware, e occuparsi dei server autogestiti come Poisson, che ospita le pagine degli studenti.
-
-
- Le macchine del PHC girano principalmente sistemi operativi Linux/Unix e i macchinisti
- usano (e sviluppano) software Open Source.
- Per sapere di più sulla storia del PHC, leggi qui.
-
+
+
{whatsPhcFrontmatter.title}
+
+
@@ -70,85 +48,27 @@ const posts = await getCollection('posts')
Ultime Notizie
-
+
{
- posts.map(post => (
-
+ news.map(newsItem => (
+
+
+ {newsItem.data.title}
+
+
+ {new Date(newsItem.data.publishDate).toLocaleDateString('it-IT', {
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric',
+ })}
+
+
{newsItem.data.description}
+
))
}
-
-
Vai all'Archivio
+
Vai all'Archivio
diff --git a/src/pages/meta/design.astro b/src/pages/meta/design.astro
index 001c8b4..8a967ab 100644
--- a/src/pages/meta/design.astro
+++ b/src/pages/meta/design.astro
@@ -27,7 +27,7 @@ const headings = getHeadings()
-
+
diff --git a/src/pages/storia.astro b/src/pages/storia.astro
index ca98097..dd6d43b 100644
--- a/src/pages/storia.astro
+++ b/src/pages/storia.astro
@@ -5,12 +5,72 @@ import Header from '../components/Header.astro'
import Footer from '../components/Footer.astro'
---
-
+
-
-
- Bla bla bla la storia del PHC con tutti i macchinisti che ci sono mai stati su una timeline carina
-
+
+ Storia
+
+
+
+
+
1999
+
Evento 1
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
+ incididunt ut labore et dolore magna aliqua.
+
+
+
+
+
+
+
+
2005
+
Evento 2
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
+ incididunt ut labore et dolore magna aliqua.
+
+
+
+
+
+
+
+
2010
+
Evento 3
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
+ incididunt ut labore et dolore magna aliqua.
+
+
+
+
+
+
+
+
2015
+
Evento 4
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
+ incididunt ut labore et dolore magna aliqua.
+
+
+
+
+
+
+
+
2020
+
Evento 5
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
+ incididunt ut labore et dolore magna aliqua.
+
+
+
+
+
diff --git a/src/styles/components.scss b/src/styles/components.scss
index 4d5bf3f..d6f6399 100644
--- a/src/styles/components.scss
+++ b/src/styles/components.scss
@@ -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
//
diff --git a/src/styles/controls.scss b/src/styles/controls.scss
index eae9c48..8db151e 100644
--- a/src/styles/controls.scss
+++ b/src/styles/controls.scss
@@ -4,113 +4,115 @@
// Controls - for things like buttons, input, select
//
-button,
-.button,
-[role='button'] {
- appearance: none;
+@layer common {
+ button,
+ .button,
+ [role='button'] {
+ appearance: none;
- background: #fff;
+ background: #fff;
- @include neo-brutalist-card;
+ @include neo-brutalist-card;
- transition: all 64ms linear;
+ transition: all 64ms linear;
- display: grid;
- place-content: center;
+ display: grid;
+ place-content: center;
- &:hover {
- transform: translate(-1px, -1px);
- box-shadow: 5px 5px 0 0 #222;
- }
+ &:hover {
+ transform: translate(-1px, -1px);
+ box-shadow: 5px 5px 0 0 #222;
+ }
- &:active {
- transform: translate(2px, 2px);
- box-shadow: 2px 2px 0 0 #222;
- }
+ &:active {
+ transform: translate(2px, 2px);
+ box-shadow: 2px 2px 0 0 #222;
+ }
- padding: 0.25rem 1.5rem;
+ padding: 0.25rem 1.5rem;
- text-decoration: none;
- color: #222;
+ text-decoration: none;
+ color: #222;
- font-family: 'Source Sans Pro', sans-serif;
- font-weight: 600;
+ font-family: 'Source Sans Pro', sans-serif;
+ font-weight: 600;
- cursor: pointer;
+ cursor: pointer;
- &.primary {
- background: #1e6733;
- color: #f4fef7;
+ &.primary {
+ background: #1e6733;
+ color: #f4fef7;
- &:hover {
- background: #2b8b47;
+ &:hover {
+ background: #2b8b47;
+ }
}
- }
- &.icon {
- padding: 0.25rem;
- margin-right: 0.25rem;
- margin-bottom: 0.25rem;
+ &.icon {
+ padding: 0.25rem;
+ margin-right: 0.25rem;
+ margin-bottom: 0.25rem;
+ }
}
-}
-input[type='text'],
-input[type='password'] {
- width: 100%;
- height: 2.5rem;
+ input[type='text'],
+ input[type='password'] {
+ width: 100%;
+ height: 2.5rem;
- @include neo-brutalist-card;
+ @include neo-brutalist-card;
- padding: 0 0.25rem;
+ padding: 0 0.25rem;
- &:hover {
- background: #fdfdfd;
+ &:hover {
+ background: #fdfdfd;
+ }
}
-}
-form {
- display: grid;
- gap: 1rem;
- padding: 2rem;
+ form {
+ display: grid;
+ gap: 1rem;
+ padding: 2rem;
- background: #38adc1;
+ background: #38adc1;
- min-width: 40ch;
+ min-width: 40ch;
- @include neo-brutalist-card($size: 3px, $offset: 9px);
+ @include neo-brutalist-card($size: 3px, $offset: 9px);
- button,
- .button,
- [role='button'] {
- padding-left: 3rem;
- padding-right: 3rem;
+ button,
+ .button,
+ [role='button'] {
+ padding-left: 3rem;
+ padding-right: 3rem;
- &.primary {
- background: #1c7f90;
- color: #f4fef7;
+ &.primary {
+ background: #1c7f90;
+ color: #f4fef7;
- &:hover {
- background: #4ea2b1;
+ &:hover {
+ background: #4ea2b1;
+ }
}
}
- }
- hr {
- border: none;
- width: 100%;
- height: 2px;
- background: #0003;
+ hr {
+ border: none;
+ width: 100%;
+ height: 2px;
+ background: #0003;
- margin-top: 1rem;
- }
+ margin-top: 1rem;
+ }
- .right {
- justify-self: end;
- }
- .left {
- justify-self: start;
- }
- .center {
- justify-self: center;
+ .right {
+ justify-self: end;
+ }
+ .left {
+ justify-self: start;
+ }
+ .center {
+ justify-self: center;
+ }
}
}
diff --git a/src/styles/pages.scss b/src/styles/pages.scss
index 867ad67..ee03a85 100644
--- a/src/styles/pages.scss
+++ b/src/styles/pages.scss
@@ -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;
diff --git a/src/styles/typography.scss b/src/styles/typography.scss
index 564b92c..6e91da1 100644
--- a/src/styles/typography.scss
+++ b/src/styles/typography.scss
@@ -33,8 +33,11 @@
@layer typography {
@include geometric-headings;
- .text-content,
.text {
+ &.center {
+ text-align: center;
+ }
+
line-height: 1.5;
& > * {