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

feat: appunti and guide prototype page styling

Browse Source
dev
Antonio De Lucreziis 7 months ago
parent 16bffed2be
commit 182238f89d
11 changed files with 314 additions and 42 deletions
Show Stats Download Patch File Download Diff File

15
src/client/Appunti.jsx
Unescape Escape View File

@ -0,0 +1,15 @@
export const AppuntiCard = ({ image, course, title, author, courseYear }) => {
return (
<div class="appunti-item">
<div class="thumbnail"></div>
{title && <div class="title">{title}</div>}
{course && <div class="course">{course}</div>}
<div class="author">@{author}</div>
<div class="course-year">{courseYear}</div>
</div>
)
}
export const AppuntiList = ({ children }) => {
return <div class="appunti-list">{children}</div>
}

1
src/components/Header.astro
Unescape Escape View File

@ -6,7 +6,6 @@
<a role="button" href="/utenti">Utenti</a>
<a role="button" href="/appunti">Appunti</a>
<a role="button" href="/notizie">Notizie</a>
<a role="button" href="/seminarietti">Seminarietti</a>
<a role="button" href="/guide">Guide</a>
<a role="button" href="/about">About</a>
<a class="primary" role="button" href="/login">Login</a>

18
src/content/guides/2024-02-29-git-101.md
Unescape Escape View File

@ -3,7 +3,7 @@ id: git-101-example
title: Git 101 (Esempio)
description: Una guida introduttiva alle basi di Git (Esempio)
author: Copilot
series: git
# series: 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.
@ -20,6 +20,12 @@ Per iniziare ad usare Git, devi prima installarlo sul tuo computer. Puoi scarica
Una volta installato Git, puoi inizializzare un nuovo repository in una cartella esistente. Apri il terminale e spostati nella cartella del tuo progetto. Quindi esegui il seguente comando:
Una volta installato Git, puoi inizializzare un nuovo repository in una cartella esistente. Apri il terminale e spostati nella cartella del tuo progetto. Quindi esegui il seguente comando:
Una volta installato Git, puoi inizializzare un nuovo repository in una cartella esistente. Apri il terminale e spostati nella cartella del tuo progetto. Quindi esegui il seguente comando:
Una volta installato Git, puoi inizializzare un nuovo repository in una cartella esistente. Apri il terminale e spostati nella cartella del tuo progetto. Quindi esegui il seguente comando:
$$
\int_0^1 x^2 \ dx
$$
@ -30,7 +36,9 @@ git init
Questo creerà un nuovo repository $1+a+\zeta_7-\xi^2$ Git nella cartella del tuo progetto.
## Aggiunta di file
## Comandi vari
### Aggiunta di file
Ora che hai inizializzato il repository, puoi iniziare ad aggiungere file ad esso. Per aggiungere un file, esegui il seguente comando:
@ -40,7 +48,7 @@ git add <nome del file>
Sostituisci `<nome del file>` con il nome del file che vuoi aggiungere.
## Commit delle modifiche
### Commit delle modifiche
Una volta aggiunti i file, puoi fare un commit delle modifiche. Questo salverà le modifiche nel repository. Per fare un commit, esegui il seguente comando:
@ -50,7 +58,7 @@ git commit -m "Messaggio del commit"
Sostituisci `"Messaggio del commit"` con un messaggio che descrive le modifiche che hai fatto.
## Sincronizzazione con un repository remoto
### Sincronizzazione con un repository remoto
Ora che hai fatto un commit delle modifiche, puoi sincronizzare il repository con un repository remoto. Questo ti permetterà di condividere le tue modifiche con altri membri del tuo team. Per sincronizzare il repository con un repository remoto, esegui il seguente comando:
@ -63,7 +71,7 @@ L'opzione `-u` imposta il repository remoto come repository predefinito per il r
Sostituisci `<url del repository remoto>` con l'URL del repository remoto. Questo ti chiederà di inserire le tue credenziali per il repository remoto. Una volta fatto, le tue modifiche saranno sincronizzate con il repository remoto.
## Aggiornamento del repository
### Aggiornamento del repository
Una volta che il repository è sincronizzato con un repository remoto, puoi aggiornare il repository con le modifiche degli altri membri del tuo team. Per aggiornare il repository, esegui il seguente comando:

65
src/pages/appunti/index.astro
Unescape Escape View File

@ -0,0 +1,65 @@
---
import PageLayout from '@layouts/PageLayout.astro'
import { AppuntiList, AppuntiCard } from '@client/Appunti'
---
<PageLayout pageName="appunti">
<h1>Appunti & Dispense</h1>
<div class="search">
<input type="text" />
<span class="material-symbols-outlined">search</span>
</div>
<h2>In primo piano</h2>
<div class="appunti-scrollable center">
<AppuntiList>
<AppuntiCard client:load title="Appunti 1" author="someuser" courseYear="2023/2024" />
<AppuntiCard client:load course="Geometria 1" author="exampleuser" courseYear="2023/2024" />
<AppuntiCard client:load course="Algebra 1" author="anotheruser" courseYear="2023/2024" />
</AppuntiList>
</div>
<h2>Categorie</h2>
<h3>Analisi</h3>
<div class="appunti-scrollable">
<AppuntiList>
<AppuntiCard client:load title="Appunti 1" author="example" courseYear="2023/2024" />
<AppuntiCard client:load title="Appunti 1" author="example" courseYear="2023/2024" />
<AppuntiCard client:load title="Appunti 1" author="example" courseYear="2023/2024" />
<AppuntiCard client:load title="Appunti 1" author="example" courseYear="2023/2024" />
<AppuntiCard client:load title="Appunti 1" author="example" courseYear="2023/2024" />
<AppuntiCard client:load title="Appunti 1" author="example" courseYear="2023/2024" />
<AppuntiCard client:load title="Appunti 1" author="example" courseYear="2023/2024" />
<AppuntiCard client:load title="Appunti 1" author="example" courseYear="2023/2024" />
</AppuntiList>
</div>
<h3>Algebra Lineare</h3>
<div class="appunti-scrollable">
<AppuntiList>
<AppuntiCard client:load title="Appunti 1" author="example" courseYear="2023/2024" />
<AppuntiCard client:load title="Appunti 1" author="example" courseYear="2023/2024" />
<AppuntiCard client:load title="Appunti 1" author="example" courseYear="2023/2024" />
<AppuntiCard client:load title="Appunti 1" author="example" courseYear="2023/2024" />
</AppuntiList>
</div>
<h3>Geometria</h3>
<div class="appunti-scrollable">
<AppuntiList>
<AppuntiCard client:load title="Appunti 1" author="example" courseYear="2023/2024" />
<AppuntiCard client:load title="Appunti 1" author="example" courseYear="2023/2024" />
<AppuntiCard client:load title="Appunti 1" author="example" courseYear="2023/2024" />
<AppuntiCard client:load title="Appunti 1" author="example" courseYear="2023/2024" />
<AppuntiCard client:load title="Appunti 1" author="example" courseYear="2023/2024" />
</AppuntiList>
</div>
</PageLayout>

11
src/pages/guide/[id].astro
Unescape Escape View File

@ -15,11 +15,8 @@ const { entry } = Astro.props
const { Content } = await entry.render()
---
<ArticleLayout {...entry.data} pageName={['guide', entry.data.id]}>
<div class="text-content">
<h1>{entry.data.title}</h1>
{entry.data.series && <h2>{entry.data.series}</h2>}
<Content />
</div>
<ArticleLayout {...entry.data} pageName={['guide', entry.data.id, entry.data.series && 'series']}>
<h1>{entry.data.title}</h1>
{entry.data.series && <div class="series">Serie: {entry.data.series}</div>}
<Content />
</ArticleLayout>

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

@ -159,9 +159,9 @@ import PageLayout from '../layouts/PageLayout.astro'
<div class="image">
<div class="box"></div>
</div>
<div class="title">Zulip</div>
<div class="title">PHC-Bot</div>
<div class="description">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus, veritatis.
Un bot con cui chattare per chiedere informazioni o supporto tecnico.
</div>
</div>
</a>
@ -201,6 +201,17 @@ import PageLayout from '../layouts/PageLayout.astro'
</div>
</div>
</a>
<a target="_blank" href="https://lab.phc.dm.unipi.it/orario/" style="--masonry-height: 2;">
<div class="project" style="--card-bg: #bd9fec;">
<div class="image">
<div class="box"></div>
</div>
<div class="title">Seminarietti</div>
<div class="description">
Varie conferenze del PHC su argomenti di informatica, matematica e tecnologia.
</div>
</div>
</a>
</div>
</section>
<section class="wanna-be-macchinista">

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

@ -8,7 +8,7 @@ $news-accent-bg: #f8e8b1;
//
.material-symbols-outlined {
display: grid;
display: inline-grid;
place-content: center;
font-size: 24px;
@ -26,6 +26,8 @@ $news-accent-bg: #f8e8b1;
align-items: center;
cursor: pointer;
background: #fff;
&:hover,
&:hover input[type='text'] {
@ -94,16 +96,23 @@ $news-accent-bg: #f8e8b1;
@include neo-brutalist-card;
a {
display: contents;
}
& > .icon {
grid-area: icon;
display: grid;
}
& > .text {
grid-area: text;
display: grid;
}
& > .right {
grid-area: right;
display: grid;
}
}
}
@ -171,4 +180,54 @@ $news-accent-bg: #f8e8b1;
align-items: end;
justify-content: end;
}
}
}
.appunti-scrollable {
display: flex;
overflow-x: auto;
.appunti-list {
padding: 2px;
padding-bottom: 1rem;
}
}
.appunti-list {
display: grid;
grid-auto-flow: column;
gap: 3rem;
overflow-x: auto;
max-width: 100%;
}
.appunti-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
color: #444;
& > .thumbnail {
width: 10rem;
aspect-ratio: 10 / 14;
background: #e0e0e0;
@include neo-brutalist-card($hoverable: true);
}
& > .thumbnail + * {
font-weight: 700;
padding-top: 0.25rem;
}
& > .title,
& > .course,
& > .author,
& > .course-year {
padding-left: 0.5rem;
font-size: 16px;
}
}

70
src/styles/main.scss
Unescape Escape View File

@ -14,6 +14,8 @@ $homepage-macchinisti-bg: #888;
$project-card-bg: #a2d4f3;
$screen-desktop-min: 1024px;
@import './mixins.scss';
@import './typography.scss';
@ -117,9 +119,6 @@ body {
main {
width: 100%;
h1 {
font-size: 42px;
}
}
footer {
@ -377,11 +376,41 @@ body {
}
}
.appunti {
main {
background: #fdfdf0;
justify-self: center;
display: grid;
grid-auto-flow: row;
justify-items: center;
padding: 3rem;
gap: 3rem;
width: 100%;
.search {
max-width: 80ch;
}
.appunti-scrollable {
justify-self: stretch;
&.center {
justify-self: center;
}
}
}
}
.login {
background: #ddfaff;
main {
justify-self: center;
display: flex;
@ -400,6 +429,39 @@ body {
}
}
.guide {
background: #f0f0f0;
&.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);
}
}
}
//
// Misc
//

11
src/styles/mixins.scss
Unescape Escape View File

@ -1,8 +1,17 @@
@mixin neo-brutalist-card($size: 3px, $offset: $size + 1, $shadow: true) {
@mixin neo-brutalist-card($size: 3px, $offset: $size + 1, $shadow: true, $hoverable: false) {
border: $size solid #222;
border-radius: $size * 2;
@if $shadow {
box-shadow: $offset $offset 0 0 #222;
}
@if $hoverable {
transition: all 64ms linear;
&:hover {
transform: translate(-1px, -1px);
box-shadow: $offset + 1 $offset + 1 0 0 #222;
}
}
}

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

@ -1,29 +1,41 @@
.text-content {
$base-font-size: 22px;
$heading-scale: 1.33;
@function pow($number, $exponent) {
$value: 1;
@function pow($number, $exponent) {
$value: 1;
@if $exponent > 0 {
@for $i from 1 through $exponent {
$value: $value * $number;
}
@if $exponent > 0 {
@for $i from 1 through $exponent {
$value: $value * $number;
}
@return $value;
}
@return $value;
}
@mixin geometric-headings {
$base-font-size: 16px;
$heading-scale: 1.33;
@for $i from 1 through 5 {
$factor: pow($heading-scale, 5 - $i);
h#{$i} {
$factor: pow($heading-scale, 5 - $i);
font-size: $base-font-size * $factor;
font-family: 'Source Sans Pro', monospace;
font-weight: 400;
margin-bottom: 0.25rem;
}
p + h#{$i} {
margin-top: 0.5rem * $factor;
}
}
}
@include geometric-headings;
.text-content {
& > * {
max-width: 100ch;
margin: 0 auto;
max-width: 46rem;
}
pre,
@ -32,6 +44,12 @@
font-family: 'Source Code Pro', monospace;
font-weight: 400;
font-size: 16px;
}
code {
border-radius: 0.25rem;
padding: 0.125rem;
}
pre {
@ -39,15 +57,38 @@
padding: 0.5rem;
max-width: 90ch;
width: 100%;
max-width: 80ch;
line-height: 1.5;
border-radius: 0.5rem;
box-shadow: 0.25rem 0.25rem 0 0 #777;
code {
padding: 0;
}
}
code {
border-radius: 0.25rem;
padding: 0 0.125rem;
p {
line-height: 1.65;
margin: 0.5rem auto;
}
}
@include geometric-headings;
h1 {
margin-bottom: 2rem;
text-align: center;
}
padding: 2rem 0 3rem;
@media screen and (max-width: 1024px) {
& > * {
margin: 0 0.75rem;
}
}
}

8
tsconfig.json
Unescape Escape View File

@ -4,6 +4,12 @@
"jsx": "react-jsx",
"jsxImportSource": "preact",
"strictNullChecks": true,
"allowJs": true
"allowJs": true,
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"@layouts/*": ["src/layouts/*"],
"@client/*": ["src/client/*"],
}
}
}

Write Preview
Loading…
Cancel
Save