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

style: Fixed mobile, enhanced homepage

Browse Source
This commit is contained in:
aziis98
2024-10-18 00:09:34 +02:00
parent 68afc97c07
commit d8208742f2
11 changed files with 249 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/gallery/cluster-fra-luca.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 MiB

src/assets/gallery/computer-luca.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 MiB

src/assets/gallery/tastiera-1.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

src/assets/gallery/tastiera-2.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

src/assets/gallery/website-development.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

src/client/lib/util.ts
+5
View File
@@ -60,6 +60,11 @@ export const isMobile = () => {
useEffect(() => {
setWindowWidth(window.innerWidth)
const handleResize = () => setWindowWidth(window.innerWidth)
window.addEventListener('resize', handleResize)
return () => window.removeEventListener('resize', handleResize)
}, [])
return windowWidth < 1024
src/components/Header.astro
+4 -4
View File
@@ -12,14 +12,14 @@
<!-- <a class="primary" role="button" href="/login">Login</a> -->
</div>
<div class="mobile-only">
<label role="button" class="flat icon" for="header-menu-toggle">
<label id="header-menu-toggle-menu" role="button" class="flat icon" for="header-menu-toggle">
<span class="material-symbols-outlined">menu</span>
</label>
</div>
<div class="side-menu mobile-only">
<label role="button" class="flat icon" for="header-menu-toggle">
<label id="header-menu-toggle-close" role="button" class="flat icon" for="header-menu-toggle">
<span class="material-symbols-outlined">close</span>
</label>
</div>
<div class="side-menu">
<div class="links">
<a role="button" href="/utenti">Utenti</a>
<!-- <a role="button" href="/appunti">Appunti</a> -->
src/pages/index.astro
+57 -30
View File
@@ -5,6 +5,9 @@ import { Content as WhatPhcContent, frontmatter as whatsPhcFrontmatter } from '.
const news = await getCollection('news')
const galleryCollage = (await Astro.glob('@/assets/gallery/*')).map(({ default: { src } }) => src)
console.log(galleryCollage)
---
<PageLayout pageTags="homepage">
@@ -17,10 +20,19 @@ const news = await getCollection('news')
<img src="/images/logo-circuit-board.svg" alt="phc logo" />
</div>
<div class="whats-phc card large">
<input type="checkbox" class="hide" id="mobile-whats-phc-read-more" checked />
<div class="title">{whatsPhcFrontmatter.title}</div>
<div class="text">
<WhatPhcContent />
</div>
<div class="mobile-only">
<label for="mobile-whats-phc-read-more">
<div class="button">
<span>Mostra di più</span>
<span>Mostra meno</span>
</div>
</label>
</div>
</div>
</section>
<section class="news">
@@ -100,27 +112,27 @@ const news = await getCollection('news')
Gitea è un servizio di hosting per progetti software, come GitHub ma autogestito.
</p>
<p>
Qui troverai i progetti del PHC, ma non solo: può accedervi chiunque con un
account di Ateneo.
Qui puoi trovare i progetti del PHC, e accedendo con un account di Ateneo potrai
crearne di nuovi.
</p>
</div>
</div>
</a>
<!-- <a href="#" style="--masonry-height: 2;">
<div class="project">
<div class="image">
<div class="box"></div>
</div>
<div class="title">PHC-Bot</div>
<div class="description">
Un bot con cui chattare per chiedere informazioni o supporto tecnico.
</div>
<div class="project">
<div class="image">
<div class="box"></div>
</div>
</a> -->
<div class="title">PHC-Bot</div>
<div class="description">
Un bot con cui chattare per chiedere informazioni o supporto tecnico.
</div>
</div>
</a> -->
<a target="_blank" href="https://lab.phc.dm.unipi.it/orario/" style="--masonry-height: 1;">
<div class="project" style="--card-bg: #75ca75;">
<div class="image">
<div class="box"></div>
<div class="image auto">
<img src="https://lab.phc.dm.unipi.it/orario/icon.png" alt="Logo Orario" />
</div>
<div class="title">Orario</div>
<div class="description">
@@ -139,16 +151,18 @@ const news = await getCollection('news')
</div>
<div class="title">Problemi</div>
<div class="description">
<p>Bacheca con problemi di Matematica da risolvere inviando soluzioni in LaTeX.</p>
<p>
Bacheca di problemi di Matematica da risolvere, inviandone le soluzioni in LaTeX.
</p>
<p>La sera i problemi compaiono sullo schermo in atrio.</p>
<p>La sera i problemi compaiono sullo schermo nell'atrio del Dipartimento.</p>
</div>
</div>
</a>
<a href="http://steffe.cs.dm.unipi.it/" style="--masonry-height: 2;">
<div class="project">
<div class="image">
<div class="box"></div>
<div class="image cover">
<img src="https://steffe.lb.cs.dm.unipi.it/assets/img/logo.png" alt="Logo Cluster" />
</div>
<div class="title">Cluster "Steffè"</div>
<div class="description">
@@ -160,7 +174,7 @@ const news = await getCollection('news')
<a target="_blank" href="https://seminarietti.phc.dm.unipi.it/" style="--masonry-height: 2;">
<div class="project" style="--card-bg: #bd9fec;">
<div class="image">
<div class="box"></div>
<img src="https://seminarietti.phc.dm.unipi.it/favicon.png" alt="Logo Seminarietti" />
</div>
<div class="title">Seminarietti</div>
<div class="description">
@@ -171,7 +185,7 @@ const news = await getCollection('news')
<a target="_blank" href="https://tutorato.phc.dm.unipi.it/" style="--masonry-height: 2;">
<div class="project" style="--card-bg: #c55;">
<div class="image">
<div class="box"></div>
<img src="https://tutorato.phc.dm.unipi.it/favicon.svg" alt="Logo Tutorato" />
</div>
<div class="title">Tutorato</div>
<div class="description">
@@ -199,15 +213,28 @@ const news = await getCollection('news')
<rect fill="url(#zig-zag-3)" x="0" y="0" width="1000" height="1"></rect>
</svg>
</div>
<div class="title">Vuoi diventare macchinista?</div>
<div class="content">
<p>
Se sei uno studente del Dipartimento di Matematica e vuoi diventare un macchinista del PHC,
vieni a trovarci in Dipartimento o scrivici a <a href="mailto:macchinisti@lists.dm.unipi.it">
</a>
</p>
<span></span>
<span></span>
<div class="card large" style="--card-base: #ddd;">
<div class="title">Vuoi diventare macchinista?</div>
<div class="text">
<p>
Se sei uno studente del Dipartimento di Matematica e vuoi diventare un macchinista del
PHC, vieni a trovarci in Dipartimento o scrivici a <a
href="mailto:macchinisti@lists.dm.unipi.it"
>
</a>
</p>
</div>
</div>
</section></PageLayout
>
<div class="gallery-collage">
{
galleryCollage.map((src, i) => (
<div class="card">
<img src={src} alt={`gallery image ${i}`} />
</div>
))
}
</div>
</section>
</PageLayout>
src/styles/components.scss
+44 -1
View File
@@ -731,7 +731,50 @@
@media screen and (max-width: $screen-desktop-min) {
.dropdown {
top: calc(100% + 1rem);
left: 3px;
right: 3px;
top: calc(100% + 9px);
}
}
}
.gallery-collage {
display: flex;
place-content: center;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
width: 100%;
max-width: 64rem;
& > .card {
padding: 3px;
overflow: hidden;
@media screen and (max-width: $screen-desktop-min) {
max-width: 100%;
}
img {
display: grid;
max-width: 25rem;
max-height: 25rem;
border-radius: 3px;
@media screen and (max-width: $screen-desktop-min) {
max-height: none;
width: 25rem;
max-width: 100%;
}
}
}
}
src/styles/main.scss
+33 -13
View File
@@ -44,10 +44,10 @@ $screen-desktop-min: 1024px;
color: #222;
}
// html {
// scroll-snap-type: y proximity;
// scroll-padding-top: 4rem;
// }
html {
scroll-snap-type: y mandatory;
scroll-padding-top: 4rem;
}
img {
display: block;
@@ -125,25 +125,30 @@ body {
.side-menu {
position: fixed;
top: 0;
// top: 0;
// right: 0;
// bottom: 0;
// left: 3rem;
top: 5rem;
right: 0;
bottom: 0;
left: 3rem;
left: 0;
background: #f0f0f0;
border-left: $border-large;
display: grid;
grid-template-rows: auto 1fr;
// grid-template-rows: auto 1fr;
grid-template-rows: 1fr;
gap: 1.5rem;
padding: 1.5rem;
& > :first-child {
justify-self: end;
}
justify-content: center;
// & > :first-child {
// justify-self: end;
// }
.links {
display: grid;
@@ -151,6 +156,9 @@ body {
align-content: start;
width: 20rem;
max-width: 100%;
gap: 1.5rem;
padding: 0;
@@ -165,6 +173,14 @@ body {
}
}
&:has(#header-menu-toggle:checked) #header-menu-toggle-menu {
display: none;
}
&:has(#header-menu-toggle:not(:checked)) #header-menu-toggle-close {
display: none;
}
@media screen and (max-width: $screen-desktop-min) {
height: 5rem;
padding: 0 0.5rem;
@@ -255,6 +271,10 @@ body {
background: #0002;
}
body:has(#header-menu-toggle:checked) {
overflow: hidden;
}
//
// Utility Classes
//
src/styles/pages.scss
+106 -4
View File
@@ -14,22 +14,28 @@
@layer page {
.homepage {
header .logo {
header:has(#header-menu-toggle:not(:checked)) .logo {
visibility: hidden;
}
section {
position: relative;
width: 100%;
min-height: calc(100vh - 6rem);
&:last-of-type {
min-height: calc(100vh - 10rem);
}
display: flex;
flex-direction: column;
align-items: center;
// display: flex;
// flex-direction: column;
// align-items: center;
display: grid;
grid-auto-flow: row;
justify-items: center;
align-content: start;
gap: 2rem;
@@ -38,6 +44,10 @@
& > .title {
font-size: 48px;
padding-top: 4rem;
@media screen and (max-width: $screen-desktop-min) {
padding-top: 2rem;
}
}
}
@@ -59,6 +69,7 @@
min-height: calc(100vh - 7rem);
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
@@ -73,6 +84,8 @@
position: relative;
.circuit-layer {
pointer-events: none;
z-index: 1;
position: absolute;
left: 0;
@@ -161,6 +174,8 @@
padding-bottom: 6rem;
.project-list {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
grid-auto-flow: dense;
@@ -174,6 +189,7 @@
padding: 0 6rem;
.project {
width: 100%;
height: 100%;
// background: #fcddff;
@@ -211,6 +227,19 @@
width: 5rem;
height: 5rem;
}
&.cover {
img {
object-fit: cover;
}
}
&.auto {
img {
width: auto;
height: auto;
}
}
}
.description {
@@ -225,6 +254,12 @@
box-shadow: 9px 13px 0 0 #222;
}
}
@media screen and (max-width: $screen-desktop-min) {
padding: 0 1rem;
grid-template-columns: 1fr;
}
}
}
@@ -232,10 +267,77 @@
background: $homepage-macchinisti-bg;
color: #fdfdfd;
padding-bottom: 6rem;
.content {
@extend .text;
}
}
@media screen and (max-width: $screen-desktop-min) {
& > main {
padding: 0 !important;
}
section.principal {
padding: 3rem 0 6rem;
.whats-phc {
padding: 1.5rem;
margin: 0 1rem;
}
#mobile-whats-phc-read-more {
&:checked ~ .text {
max-height: 7lh;
overflow: hidden;
position: relative;
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3lh;
background: linear-gradient(to bottom, transparent, #e4c5ff);
}
}
&:not(:checked) ~ * .button span:nth-child(1) {
display: none;
}
&:checked ~ * .button span:nth-child(2) {
display: none;
}
}
}
section.news {
& > .news-list {
padding: 0 1rem;
}
}
section.projects {
.project-list {
padding: 0 1rem;
}
}
section.wanna-be-macchinista {
.content {
padding: 0 1rem;
}
}
section {
padding: 1rem 1rem 4rem;
}
}
}
.utenti {