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

wow such rich history

Browse Source
This commit is contained in:
BachoSeven
2024-10-06 02:43:42 +02:00
parent a87c87eb10
commit d06e731edd
11 changed files with 983 additions and 743 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/components.scss
+68 -36
View File
@@ -13,7 +13,11 @@
place-content: center;
font-size: 24px;
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
font-variation-settings:
'FILL' 0,
'wght' 300,
'GRAD' 0,
'opsz' 24;
}
.title {
@@ -334,43 +338,12 @@
grid-template-columns: var(--timeline-track-size) 1fr;
}
max-width: 120rch;
max-width: 120ch;
& > .timeline-item {
position: relative;
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;
@@ -393,8 +366,6 @@
}
}
position: relative;
// timeline vertical line
&::before {
content: '';
@@ -454,6 +425,67 @@
grid-column: 1 / span 1;
}
}
.dropdown {
@include neo-brutalist-card;
max-width: 15rem;
position: absolute;
bottom: calc(-10rem - 1px);
left: 50%;
transform: translateX(calc(-50% - var(--timeline-track-size) / 2));
border-top: none;
border-radius: 0 0 0.5rem 0.5rem;
@media screen and (max-width: $screen-desktop-min) {
@include neo-brutalist-card;
position: static;
transform: none;
margin-left: auto;
margin-right: auto;
}
}
@media screen and (min-width: $screen-desktop-min) {
&:nth-child(odd) {
grid-column: 1 / span 2;
grid-template-columns: 1fr var(--timeline-track-size);
& > .content {
grid-column: 1;
}
.dropdown {
left: auto;
right: 50%;
transform: translateX(calc(50% - var(--timeline-track-size) / 2));
}
}
&:nth-child(even) {
grid-column: 2 / span 2;
grid-template-columns: var(--timeline-track-size) 1fr;
& > .content {
grid-column: 2;
}
.dropdown {
left: 50%;
transform: translateX(calc(-50% + var(--timeline-track-size) / 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;
}
}
}
}