zumepro/libre-liberec-web
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

redesign base

Browse Source
This commit is contained in:
Ondřej Mekina
2025-04-17 00:12:48 +02:00
parent ddb39f9e57
commit 6e12ff636a
10 changed files with 45 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
styles/styles.css
View File

@@ -1,14 +1,6 @@
:root {
--light-fg-color: black;
--light-bg-color: white;
--light-alt-bg-color: #FFFFD0;
--light-field-hover-bg-color: #F0F0F0;
--light-field-active-bg-color: #E0E0E0;
--light-link-idle-color: darkred;
--light-sep-color: gainsboro;
--dark-fg-color: white;
--dark-bg-color: #202020;
--dark-bg-color: black;
--dark-alt-bg-color: #101010;
--dark-field-hover-bg-color: #000000;
--dark-field-active-bg-color: #404040;
@@ -25,76 +17,38 @@
--text-subtle-color: gray;
}
@media (prefers-color-scheme: light) {
:root {
--fg-color: var(--light-fg-color);
--bg-color: var(--light-bg-color);
--alt-bg-color: var(--light-alt-bg-color);
--field-hover-bg-color: var(--light-field-hover-bg-color);
--field-active-bg-color: var(--light-field-active-bg-color);
--link-idle-color: var(--light-link-idle-color);
:root {
--fg-color: var(--dark-fg-color);
--bg-color: var(--dark-bg-color);
--alt-bg-color: var(--dark-alt-bg-color);
--field-hover-bg-color: var(--dark-field-hover-bg-color);
--field-active-bg-color: var(--dark-field-active-bg-color);
--link-idle-color: var(--dark-link-idle-color);
--theme-switch-icon: var(--light-theme-switch-icon);
--narrow-layout-switch-icon: var(--light-narrow-layout-switch-icon);
--wide-layout-switch-icon: var(--light-wide-layout-switch-icon);
--fg-gnu-head: var(--dark-gnu-head);
--bg-gnu-head: var(--light-gnu-head);
--theme-switch-icon: var(--dark-theme-switch-icon);
--narrow-layout-switch-icon: var(--dark-narrow-layout-switch-icon);
--wide-layout-switch-icon: var(--dark-wide-layout-switch-icon);
--fg-gnu-head: var(--light-gnu-head);
--bg-gnu-head: var(--dark-gnu-head);
--sep-color: var(--light-sep-color);
}
[data-color-scheme="invert"] {
--fg-color: var(--dark-fg-color);
--bg-color: var(--dark-bg-color);
--alt-bg-color: var(--dark-alt-bg-color);
--field-hover-bg-color: var(--dark-field-hover-bg-color);
--field-active-bg-color: var(--dark-field-active-bg-color);
--link-idle-color: var(--dark-link-idle-color);
--theme-switch-icon: var(--dark-theme-switch-icon);
--narrow-layout-switch-icon: var(--dark-narrow-layout-switch-icon);
--wide-layout-switch-icon: var(--dark-wide-layout-switch-icon);
--fg-gnu-head: var(--light-gnu-head);
--bg-gnu-head: var(--dark-gnu-head);
--sep-color: var(--dark-sep-color);
}
--sep-color: var(--dark-sep-color);
}
@media (prefers-color-scheme: dark) {
:root {
--fg-color: var(--dark-fg-color);
--bg-color: var(--dark-bg-color);
--alt-bg-color: var(--dark-alt-bg-color);
--field-hover-bg-color: var(--dark-field-hover-bg-color);
--field-active-bg-color: var(--dark-field-active-bg-color);
--link-idle-color: var(--dark-link-idle-color);
[data-color-scheme="invert"] {
--fg-color: var(--light-fg-color);
--bg-color: var(--light-bg-color);
--alt-bg-color: var(--light-alt-bg-color);
--field-hover-bg-color: var(--light-field-hover-bg-color);
--field-active-bg-color: var(--light-field-active-bg-color);
--link-idle-color: var(--light-link-idle-color);
--theme-switch-icon: var(--dark-theme-switch-icon);
--narrow-layout-switch-icon: var(--dark-narrow-layout-switch-icon);
--wide-layout-switch-icon: var(--dark-wide-layout-switch-icon);
--fg-gnu-head: var(--light-gnu-head);
--bg-gnu-head: var(--dark-gnu-head);
--theme-switch-icon: var(--light-theme-switch-icon);
--narrow-layout-switch-icon: var(--light-narrow-layout-switch-icon);
--wide-layout-switch-icon: var(--light-wide-layout-switch-icon);
--fg-gnu-head: var(--dark-gnu-head);
--bg-gnu-head: var(--light-gnu-head);
--sep-color: var(--dark-sep-color);
}
[data-color-scheme="invert"] {
--fg-color: var(--light-fg-color);
--bg-color: var(--light-bg-color);
--alt-bg-color: var(--light-alt-bg-color);
--field-hover-bg-color: var(--light-field-hover-bg-color);
--field-active-bg-color: var(--light-field-active-bg-color);
--link-idle-color: var(--light-link-idle-color);
--theme-switch-icon: var(--light-theme-switch-icon);
--narrow-layout-switch-icon: var(--light-narrow-layout-switch-icon);
--wide-layout-switch-icon: var(--light-wide-layout-switch-icon);
--fg-gnu-head: var(--dark-gnu-head);
--bg-gnu-head: var(--light-gnu-head);
--sep-color: var(--light-sep-color);
}
--sep-color: var(--light-sep-color);
}
:root {
@@ -122,6 +76,10 @@ html {
}
body {
background-image: url("background.jpg");
background-attachment: fixed;
background-size: cover;
background-position: center;
font-family: "Noto Sans", sans-serif;
font-size: 16px;
display: flex;
@@ -129,13 +87,13 @@ body {
color: var(--fg-color);
background-color: var(--bg-color);
margin: 0;
min-height: 100vh;
}
header {
display: flex;
padding: 1.5em 0;
position: relative;
background-color: var(--bg-color);
align-items: center;
justify-content: space-between;
width: min(90%, 50em);
@@ -214,7 +172,7 @@ header * {
.countdown {
font-family: monospace;
font-weight: bold;
font-size: 2.5em;
font-size: 2em;
text-align: center;
margin: 1em auto;
padding: 0 .5em;
@@ -225,7 +183,7 @@ header * {
@media only screen and (min-width: 50rem) {
.countdown {
font-size: 4em;
font-size: 3em;
}
}
@@ -277,6 +235,7 @@ footer>* {
}
h1 {
margin: 2em 0;
font-size: 1.5em;
}
@@ -328,7 +287,7 @@ figcaption {
.poster {
margin: 0 auto !important;
max-width: 50rem;
max-width: 40rem;
}
nav ul {