- Se sei uno studente del Dipartimento di Matematica e vuoi diventare un macchinista del PHC, - vieni a trovarci in Dipartimento o scrivici a - -
+ + +
+
+ Vuoi diventare macchinista?
+
+
+ + Se sei uno studente del Dipartimento di Matematica e vuoi diventare un macchinista del + PHC, vieni a trovarci in Dipartimento o scrivici a + +
+
+ {
+ galleryCollage.map((src, i) => (
+
-
+
+
diff --git a/src/styles/components.scss b/src/styles/components.scss
index cb40504..0ac64b6 100644
--- a/src/styles/components.scss
+++ b/src/styles/components.scss
@@ -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%;
+ }
}
}
}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index ae464e2..3450dd8 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -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
//
diff --git a/src/styles/pages.scss b/src/styles/pages.scss
index 21e1196..62a07bb 100644
--- a/src/styles/pages.scss
+++ b/src/styles/pages.scss
@@ -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 {
+ 
+
+ ))
+ }