[TASK] add footer styling
All checks were successful
CI/CD Pipeline / deploy-main (push) Successful in 7m17s

This commit is contained in:
Marie Birner 2024-02-19 17:51:02 +01:00
parent 819e23a99f
commit ba4b54490a
4 changed files with 18 additions and 6 deletions

View File

@ -119,6 +119,12 @@ button {
body > footer { body > footer {
padding-block: calc(var(--pico-block-spacing-vertical) * 2); padding-block: calc(var(--pico-block-spacing-vertical) * 2);
background: linear-gradient(180deg, black, transparent);
}
:root:not([data-theme=dark]) body > footer,
[data-theme=light] body > footer {
background: linear-gradient(180deg, rgba(0,0,0,.1), transparent);
} }
/* approx 800px */ /* approx 800px */
@ -203,7 +209,7 @@ ol li::before {
font-weight: bold; font-weight: bold;
padding-right: 12px; padding-right: 12px;
align-self: flex-start; align-self: flex-start;
background-image: linear-gradient(to bottom, aquamarine, orangered); background-image: linear-gradient(to bottom, #08AEEA, #2AF598);
background-attachment: fixed; background-attachment: fixed;
-webkit-background-clip: text; -webkit-background-clip: text;
background-clip: text; background-clip: text;

View File

@ -19,8 +19,8 @@
{{content}} {{content}}
</ol> </ol>
</main> </main>
<footer class="container"> <footer>
<nav> <nav class="container">
<ul> <ul>
<li> <li>
<!--TODO: Impressum / Datenschutz hinzufügen wenn aktiv aria-current="page" --> <!--TODO: Impressum / Datenschutz hinzufügen wenn aktiv aria-current="page" -->

View File

@ -22,8 +22,8 @@
<h1><mark>{{title}}</mark></h1> <h1><mark>{{title}}</mark></h1>
{{content}} {{content}}
</main> </main>
<footer class="container"> <footer>
<nav> <nav class="container">
<ul> <ul>
<li> <li>
<!--TODO: Impressum / Datenschutz hinzufügen wenn aktiv aria-current="page" --> <!--TODO: Impressum / Datenschutz hinzufügen wenn aktiv aria-current="page" -->

View File

@ -119,6 +119,12 @@ button {
body > footer { body > footer {
padding-block: calc(var(--pico-block-spacing-vertical) * 2); padding-block: calc(var(--pico-block-spacing-vertical) * 2);
background: linear-gradient(180deg, black, transparent);
}
:root:not([data-theme=dark]) body > footer,
[data-theme=light] body > footer {
background: linear-gradient(180deg, rgba(0,0,0,.1), transparent);
} }
/* approx 800px */ /* approx 800px */
@ -203,7 +209,7 @@ ol li::before {
font-weight: bold; font-weight: bold;
padding-right: 12px; padding-right: 12px;
align-self: flex-start; align-self: flex-start;
background-image: linear-gradient(to bottom, aquamarine, orangered); background-image: linear-gradient(to bottom, #08AEEA, #2AF598);
background-attachment: fixed; background-attachment: fixed;
-webkit-background-clip: text; -webkit-background-clip: text;
background-clip: text; background-clip: text;