Files
libre-liberec-web/styles/styles.css
2025-04-17 22:24:08 +02:00

428 lines
6.7 KiB
CSS

:root {
--dark-fg-color: white;
--dark-bg-color: black;
--dark-alt-bg-color: #101010;
--dark-field-hover-bg-color: #000000;
--dark-field-active-bg-color: #404040;
--dark-link-idle-color: #ff8e8e;
--dark-sep-color: #2e2e2e;
}
:root {
color-scheme: light dark;
--nav-fg-color: white;
--nav-bg-color: darkred;
--nav-bg-color-selected: #C00000;
--text-subtle-color: gray;
}
: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(--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);
}
[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);
}
:root {
--layout-switch-icon: var(--narrow-layout-switch-icon);
--lang-switch-icon: var(--en-lang-switch-icon);
}
[lang="en"] {
--lang-switch-icon: var(--cz-lang-switch-icon);
}
[data-layout="wide"] {
--layout-switch-icon: var(--wide-layout-switch-icon)
}
@font-face {
font-family: JetBrains Mono;
src: url("jetbrains_mono.woff2") format("woff2");
}
html {
background-color: var(--bg-color);
min-height: calc(100% - 32px);
margin: 0;
}
body {
background-image: url("background.jpg");
background-attachment: fixed;
background-size: cover;
background-position: center;
font-family: JetBrains Mono, "Noto Sans", sans-serif;
font-weight: lighter;
font-size: 16px;
display: flex;
flex-direction: column;
color: var(--fg-color);
background-color: var(--bg-color);
margin: 0;
min-height: 100vh;
}
header {
display: flex;
padding: 1.5em 0;
position: relative;
align-items: center;
justify-content: space-between;
width: min(90%, 50em);
margin: auto;
}
[data-layout="wide"] header {
width: 90%;
}
header .buttons {
display: flex;
flex-direction: column;
align-items: center;
}
.light-dark-switch {
cursor: pointer;
content: var(--theme-switch-icon);
width: 20px;
}
.layout-switch {
cursor: pointer;
content: var(--layout-switch-icon);
width: 20px;
}
.lang-switch {
cursor: pointer;
content: var(--lang-switch-icon);
width: 20px;
}
a {
color: var(--link-idle-color);
text-decoration: none;
}
header * {
margin: 8px 0;
}
.header-title {
font-size: 2em;
font-weight: bold;
}
.header-subtitle {
color: var(--text-subtle-color);
font-size: 1.3em;
}
.full-width {
width: 100%;
}
.img-text-container {
position: relative;
}
.img-text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
opacity: 100%;
color: var(--fg-color);
z-index: 1;
pointer-events: none;
}
.countdown {
font-family: monospace;
font-weight: bold;
font-size: 2em;
text-align: center;
margin: 1em auto;
padding: 0 .5em;
font-family: JetBrains Mono, monospace;
width: fit-content;
font-weight: bold;
}
@media only screen and (min-width: 50rem) {
.countdown {
font-size: 3em;
}
}
nav {
color: var(--nav-fg-color);
background-color: var(--nav-bg-color);
user-select: none;
text-transform: uppercase;
width: min(90%, 50em);
margin: auto;
margin-bottom: 2em;
border-radius: .5em;
box-shadow: .5em .5em 1em rgba(0, 0, 0, 0.2);
overflow: hidden;
}
nav div {
width: 100%;
}
[data-layout="wide"] nav {
width: 90%;
}
[data-layout="wide"] nav div {
width: 90%;
}
@media only screen and (max-width: 50rem) {
nav {
border-radius: 0;
width: 100%;
}
nav div {
width: 100% !important;
}
}
main {
flex-grow: 1;
padding: 16px;
width: min(90%, 50em);
margin: auto;
}
[data-layout="wide"] main {
width: 90%;
}
.gnu-head {
content: var(--fg-gnu-head);
}
footer {
border-top: 1px solid var(--sep-color);
color: gray;
padding: 1em;
width: fit-content;
margin: 2em auto;
margin-top: 4em;
font-size: .8em;
}
footer>* {
margin: 8px 0;
}
h1 {
margin: 2em 0;
margin-top: 4em;
font-size: 1.5em;
font-weight: bold;
}
h2 {
font-size: 1.25em;
font-weight: bolder;
margin-top: 3em;
}
h3 {
font-size: 1em;
}
table {
margin: 2em auto;
margin-top: 4em;
border-spacing: 0;
border: 1px solid var(--sep-color);
}
th, td {
background-color: var(--alt-bg-color);
border: 1px solid var(--sep-color);
padding: 4px;
}
ul li {
margin: 8px 0;
}
ol li {
margin: 8px 0;
}
@media (width >= 500px) {
figure.aside {
width: 200px;
margin: 0 0 16px 16px;
float: right;
}
}
figure img,svg,inserted-svg {
display: block;
margin: 0 auto;
max-width: 100%;
max-height: 100vh;
}
figcaption {
font-style: italic;
}
.poster {
margin: 0 auto !important;
max-width: 40rem;
filter: drop-shadow(0 0 5em black);
}
nav ul {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
list-style-type: none;
}
[data-layout="wide"] nav ul {
justify-content: left;
}
@media (width < 50rem) {
nav ul {
flex-direction: column;
}
nav ul {
margin-left: 0 !important;
}
nav ul li {
width: 100%;
}
}
nav ul li {
margin: 0;
}
nav ul li a {
display: block;
padding: .5em 1em;
text-align: center;
text-decoration: none;
color: var(--nav-fg-color);
font-weight: bold;
transition: background-color .3s;
}
nav ul li a:hover {
background-color: var(--nav-bg-color-selected);
color: var(--nav-fg-color);
}
nav ul li a:active {
color: var(--nav-fg-color);
}
nav ul li a:visited {
color: var(--nav-fg-color);
}
@media (width >= 50rem) {
:not([data-layout="wide"]) body {
margin: 0 auto;
}
[data-layout="wide"] body {
margin: 0;
}
}
@media (width < 50rem) {
body {
margin: 0;
}
.img-text {
position: relative;
margin-bottom: 32px;
}
.layout-switch {
display: none;
}
}
@media print {
.light-dark-switch {
display: none;
}
.layout-switch {
display: none;
}
nav {
display: none;
}
}
.map {
display: block;
width: 90%;
margin: 0 auto;
margin-top: 4em;
}
.map-open {
display: block;
width: fit-content;
margin: 0 auto;
}