philipp/aef-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[TASK] add content and style homepage

Browse Source
This commit is contained in:
Marie Birner
2025-08-03 09:46:34 +02:00
parent 52e7137a6d
commit e55c29065c
3 changed files with 99 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
static/serve/style.css
View File

@@ -10,10 +10,17 @@
--pico-font-family: 'Arial', sans-serif;
--pico-form-element-spacing-vertical: .3rem;
--pico-form-element-spacing-horizontal: .8rem;
--pico-box-shadow: unset;
--pico-card-sectioning-background-color: unset;
}
h2 {
--pico-typography-spacing-top: 4rem;
}
h1 {
font-family: 'Rubik Doodle Shadow', sans-serif;
text-transform: uppercase;
font-size: clamp(3rem, 1.875rem + 2vw, 4.5rem);
letter-spacing: 0.33rem;
margin-top: clamp(3rem, 1.875rem + 2vw, 5rem);
@@ -56,6 +63,7 @@ input[type="submit"]:active {
.font-headline {
font-family: 'Rubik Doodle Shadow', sans-serif;
text-transform: uppercase;
}
.rank {
@@ -65,10 +73,16 @@ input[type="submit"]:active {
letter-spacing: 0.33rem;
}
.cam {
.font-lg {
font-size: 1.3rem;
}
@media (min-width: 768px) {
.gap-lg {
grid-gap: 5rem;
}
}
ul.iterated {
padding-left: unset;
}
@@ -78,14 +92,24 @@ ul.iterated > li {
display: flex;
justify-content: space-between;
align-items: flex-end;
border-bottom: 3px solid white;
}
border-bottom: 2px solid var(--pico-color);
border-radius: 2% 6% 5% 4% / 1% 1% 2% 4%;
position: relative;
:host(:not([data-theme=dark])), :root:not([data-theme=dark]), [data-theme=light] ul.iterated > li {
border-bottom: 3px solid black;
&::before {
content: '';
border-bottom: 1px solid var(--pico-color);
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(0.5deg);
border-radius: 1% 1% 2% 4% / 2% 6% 5% 4%;
}
}
/* Header */
#theme_switcher {
width: 20px;
@@ -102,3 +126,52 @@ header a {
.easteregg {
color: var(--pico-background-color);
}
blockquote {
text-align: center;
font-size: 1.3rem;
margin-top: 4rem;
margin-bottom: 4rem;
font-family: 'Courier New', monospace;
border: none;
}
/** Style article*/
article {
display: inline-block;
border: 2px solid var(--pico-color);
border-radius: 2% 6% 5% 4% / 1% 1% 2% 4%;
position: relative;
padding: clamp(1rem, 1.875rem + 2vw, 3rem);
&::before {
content: '';
border: 1px solid var(--pico-color);
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(0.5deg);
border-radius: 1% 1% 2% 4% / 2% 6% 5% 4%;
}
}
article>header {
font-family: 'Rubik Doodle Shadow', sans-serif;
text-transform: uppercase;
letter-spacing: 0.2rem;
color: var(--pico-primary);
font-size: 1.8rem;
text-align: center;
border: unset;
background-color: unset;
}
article>footer {
font-family: 'Courier New', monospace;
border: unset;
background-color: unset;
}