reworked homepage, prototype storia timeline
This commit is contained in:
@@ -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