webfussel/propapier
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add: subheader

Browse source 
Subheader for dynamic content
This commit is contained in:
Fiona Lena Urban 2025-05-10 18:36:42 +02:00
parent 4b07ebb2ec
commit 1bd69c9c97
6 changed files with 259 additions and 101 deletions
Download patch file Download diff file Expand all files Collapse all files

1
app/assets/styles/button.css
View file

@ -102,7 +102,6 @@
&:hover {
scale: 1.2;
--background: var(--color-light);
}
}

100
app/assets/styles/header.css
View file

@ -1,57 +1,61 @@
.Header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--padding-default);
background: var(--color-main-darkest);
position: sticky;
top: 0;
z-index: 100;
font-family: 'Roboto', sans-serif;
font-weight: bold;
background: var(--color-main-darkest);
& a {
text-decoration: none;
color: var(--color-lightest);
}
& .header-text {
font-size: 1.5em;
}
& input[type="checkbox"] {
display: none;
}
& input[type="checkbox"]:checked + nav {
translate: 0;
}
& nav,
& ul {
gap: 1em;
}
& nav {
position: fixed;
padding: var(--padding-default);
translate: 100% 0;
width: 100vw;
right: 0;
top: 0;
height: 100dvh;
transition: 150ms ease-in-out;
background: var(--color-lightest);
font-size: 2em;
align-items: end;
z-index: 100;
}
& ul {
width: 100%;
& header {
display: flex;
align-items: center;
& li {
list-style: none;
justify-content: space-between;
padding: var(--padding-default);
padding-bottom: 0;
font-family: 'Roboto', sans-serif;
font-weight: bold;
& a {
text-decoration: none;
color: var(--color-lightest);
}
& .header-text {
font-size: 1.5em;
}
& input[type="checkbox"] {
display: none;
}
& input[type="checkbox"]:checked + nav {
translate: 0;
}
& nav,
& ul {
gap: 1em;
}
& nav {
position: fixed;
padding: var(--padding-default);
translate: 100% 0;
width: 100vw;
right: 0;
top: 0;
height: 100dvh;
transition: 150ms ease-in-out;
background: var(--color-lightest);
font-size: 2em;
align-items: end;
z-index: 100;
}
& ul {
width: 100%;
align-items: center;
& li {
list-style: none;
}
}
}
}

7
app/assets/styles/page.css
View file

@ -22,7 +22,14 @@
}
.search-bar {
z-index: 100;
padding: 0 1rem 1rem 1rem;
& p {
font-family: 'Roboto Condensed', sans-serif;
font-weight: lighter;
color: var(--color-lightest);
}
}
.content {