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

[TASK] add btn-container & improve clickability of footer links
All checks were successful
CI/CD Pipeline / deploy-main (push) Successful in 5m56s
Details

Browse Source
This commit is contained in:
Marie Birner 2024-02-19 15:05:57 +01:00
parent 893fb27d35
commit 4cbca021d4
3 changed files with 48 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
output/style.css
View File

@ -117,19 +117,34 @@ button {
--pico-form-element-spacing-vertical: 0.25rem;
}
body > footer {
padding-block: calc(var(--pico-block-spacing-vertical) * 2);
}
/* approx 800px */
.container {
max-width: 38rem;
}
.btn-container {
position: fixed;
bottom: 0rem;
right: 0rem;
padding: 1rem;
width: 100%;
display: flex;
justify-content: flex-end;
background: linear-gradient(180deg, transparent, var(--pico-background-color), var(--pico-background-color));
}
.btn-open,
.btn-close {
position: fixed;
bottom: 1rem;
font-size: .8rem;
display: inline-block;
}
.btn-open {
right: 9rem;
}
.btn-close {
right: 1rem;
margin-right: 1rem;
}
.par {
@ -162,5 +177,3 @@ button {
font-style: italic;
padding: calc(var(--pico-spacing) / 3) 0;
}

6
templates/law.html
View File

@ -15,8 +15,10 @@
</div>
</header>
<main class="container">
<button class="btn-open open-js">Alles öffnen</button>
<button class="btn-close close-js">Alles schließen</button>
<div class="btn-container">
<button class="btn-open open-js">Alles öffnen</button>
<button class="btn-close close-js">Alles schließen</button>
</div>
<h1><mark>{{title}}</mark></h1>
{{content}}
</main>

31
templates/style.css
View File

@ -117,19 +117,34 @@ button {
--pico-form-element-spacing-vertical: 0.25rem;
}
body > footer {
padding-block: calc(var(--pico-block-spacing-vertical) * 2);
}
/* approx 800px */
.container {
max-width: 38rem;
}
.btn-container {
position: fixed;
bottom: 0rem;
right: 0rem;
padding: 1rem;
width: 100%;
display: flex;
justify-content: flex-end;
background: linear-gradient(180deg, transparent, var(--pico-background-color), var(--pico-background-color));
}
.btn-open,
.btn-close {
position: fixed;
bottom: 1rem;
font-size: .8rem;
display: inline-block;
}
.btn-open {
right: 9rem;
}
.btn-close {
right: 1rem;
margin-right: 1rem;
}
.par {
@ -162,5 +177,3 @@ button {
font-style: italic;
padding: calc(var(--pico-spacing) / 3) 0;
}