style: Fixed mobile, enhanced homepage
This commit is contained in:
@@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+33
-13
@@ -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
|
||||
//
|
||||
|
||||
+106
-4
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user