forked from phc/website
reworked homepage, prototype storia timeline
This commit is contained in:
@@ -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.
|
||||
+23
-103
@@ -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}
|
||||
/>
|
||||
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="text">{newsItem.data.description}</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
<!--
|
||||
<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 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>
|
||||
</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">
|
||||
|
||||
@@ -27,7 +27,7 @@ const headings = getHeadings()
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
<main class="text-content center">
|
||||
<main class="text">
|
||||
<Content components={{ pre: CodeBlockPreview }} />
|
||||
</main>
|
||||
<Footer />
|
||||
|
||||
+65
-5
@@ -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>
|
||||
|
||||
@@ -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
|
||||
//
|
||||
|
||||
+94
-92
@@ -4,113 +4,115 @@
|
||||
// Controls - for things like buttons, input, select
|
||||
//
|
||||
|
||||
button,
|
||||
.button,
|
||||
[role='button'] {
|
||||
appearance: none;
|
||||
|
||||
background: #fff;
|
||||
|
||||
@include neo-brutalist-card;
|
||||
|
||||
transition: all 64ms linear;
|
||||
|
||||
display: grid;
|
||||
place-content: center;
|
||||
|
||||
&:hover {
|
||||
transform: translate(-1px, -1px);
|
||||
box-shadow: 5px 5px 0 0 #222;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translate(2px, 2px);
|
||||
box-shadow: 2px 2px 0 0 #222;
|
||||
}
|
||||
|
||||
padding: 0.25rem 1.5rem;
|
||||
|
||||
text-decoration: none;
|
||||
color: #222;
|
||||
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
font-weight: 600;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&.primary {
|
||||
background: #1e6733;
|
||||
color: #f4fef7;
|
||||
|
||||
&:hover {
|
||||
background: #2b8b47;
|
||||
}
|
||||
}
|
||||
|
||||
&.icon {
|
||||
padding: 0.25rem;
|
||||
margin-right: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
input[type='password'] {
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
|
||||
@include neo-brutalist-card;
|
||||
|
||||
padding: 0 0.25rem;
|
||||
|
||||
&:hover {
|
||||
background: #fdfdfd;
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
padding: 2rem;
|
||||
|
||||
background: #38adc1;
|
||||
|
||||
min-width: 40ch;
|
||||
|
||||
@include neo-brutalist-card($size: 3px, $offset: 9px);
|
||||
|
||||
@layer common {
|
||||
button,
|
||||
.button,
|
||||
[role='button'] {
|
||||
padding-left: 3rem;
|
||||
padding-right: 3rem;
|
||||
appearance: none;
|
||||
|
||||
background: #fff;
|
||||
|
||||
@include neo-brutalist-card;
|
||||
|
||||
transition: all 64ms linear;
|
||||
|
||||
display: grid;
|
||||
place-content: center;
|
||||
|
||||
&:hover {
|
||||
transform: translate(-1px, -1px);
|
||||
box-shadow: 5px 5px 0 0 #222;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translate(2px, 2px);
|
||||
box-shadow: 2px 2px 0 0 #222;
|
||||
}
|
||||
|
||||
padding: 0.25rem 1.5rem;
|
||||
|
||||
text-decoration: none;
|
||||
color: #222;
|
||||
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
font-weight: 600;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&.primary {
|
||||
background: #1c7f90;
|
||||
background: #1e6733;
|
||||
color: #f4fef7;
|
||||
|
||||
&:hover {
|
||||
background: #4ea2b1;
|
||||
background: #2b8b47;
|
||||
}
|
||||
}
|
||||
|
||||
&.icon {
|
||||
padding: 0.25rem;
|
||||
margin-right: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
input[type='text'],
|
||||
input[type='password'] {
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: #0003;
|
||||
height: 2.5rem;
|
||||
|
||||
margin-top: 1rem;
|
||||
@include neo-brutalist-card;
|
||||
|
||||
padding: 0 0.25rem;
|
||||
|
||||
&:hover {
|
||||
background: #fdfdfd;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-self: end;
|
||||
}
|
||||
.left {
|
||||
justify-self: start;
|
||||
}
|
||||
.center {
|
||||
justify-self: center;
|
||||
form {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
padding: 2rem;
|
||||
|
||||
background: #38adc1;
|
||||
|
||||
min-width: 40ch;
|
||||
|
||||
@include neo-brutalist-card($size: 3px, $offset: 9px);
|
||||
|
||||
button,
|
||||
.button,
|
||||
[role='button'] {
|
||||
padding-left: 3rem;
|
||||
padding-right: 3rem;
|
||||
|
||||
&.primary {
|
||||
background: #1c7f90;
|
||||
color: #f4fef7;
|
||||
|
||||
&:hover {
|
||||
background: #4ea2b1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: #0003;
|
||||
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-self: end;
|
||||
}
|
||||
.left {
|
||||
justify-self: start;
|
||||
}
|
||||
.center {
|
||||
justify-self: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+97
-120
@@ -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;
|
||||
|
||||
|
||||
@@ -33,8 +33,11 @@
|
||||
@layer typography {
|
||||
@include geometric-headings;
|
||||
|
||||
.text-content,
|
||||
.text {
|
||||
&.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
line-height: 1.5;
|
||||
|
||||
& > * {
|
||||
|
||||
Reference in New Issue
Block a user