Initial commit

www/res/style.css

@@ -0,0 +1,161 @@
+
+/**** Shared ****/
+
+* {
+    box-sizing: border-box;
+}
+
+:root {
+    font-family: 'Arial', sans-serif;
+    scroll-behavior: smooth;
+    --main-color: #A040C0;
+    --light-color: #D098E0;
+    --accent-color: #C0F080;
+    --bg-color: #EBEFE7;
+    --blur-color: #60804020;
+    --blur: 16px;
+}
+
+body {
+    margin: 0;
+    position: relative;
+}
+
+body.header-footer {
+    min-height: calc(100vh + 8em);
+    padding: 3em 0 8em 0;
+}
+
+header {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    height: 3em;
+    box-shadow: 0 0 0.5em #00000060;
+    background-color: #FFFFFF;
+    z-index: 10;
+}
+
+header img {
+    height: 2.5em;
+    margin: 0.25em;
+}
+
+nav {
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+
+nav > *:first-child,
+nav > *:last-child {
+    flex: 100px 1 1;
+}
+
+nav > *:last-child {
+    text-align: right;
+}
+
+nav ul {
+    display: flex;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+}
+
+nav li {
+    flex: 100px 1 1;
+}
+
+nav li a {
+    text-decoration: none;
+    padding: 1em 2em;
+    color: #808080;
+}
+
+nav li a:hover,
+nav li.active a{
+    color: var(--main-color);
+}
+
+nav a.flag {
+    text-decoration: none;
+}
+
+nav a.flag div {
+    display: inline-block;
+    font-size: 1.25em;
+    width: 1em;
+    margin: 0.75rem 1rem;
+}
+
+nav a.flag[href='/de/'] div::before,
+nav a.flag[href='/en/']:hover div::before,
+nav a.flag[href='/en/']:focus div::before {
+    content: '\1F1EC\1F1E7';  /* GB */
+}
+
+nav a.flag[href='/en/'] div::before,
+nav a.flag[href='/de/']:hover div::before,
+nav a.flag[href='/de/']:focus div::before {
+    content: '\1F1E6\1F1F9';  /* AT */
+}
+
+footer {
+    height: 8em;
+    padding: 1em;
+    width: 100%;
+    box-shadow: 0 0 0.5rem #00000060;
+    background-color: #404040;
+    color: #FFFFFF;
+    display: flex;
+    justify-content: center;
+    gap: 2em;
+    position: absolute;
+    bottom: 0;
+}
+
+footer img {
+    height: 4em;
+    width: 4em;
+}
+
+footer a {
+    align-self: center;
+}
+
+@media screen and (max-width: 800px) {
+    footer {
+        flex-direction: column;
+        height: unset;
+        align-items: center;
+        gap: 1em;
+        padding-top: 3em;
+    }
+    footer > *:not(:first-child) {
+        width: 300px;
+    }
+}
+
+p a,
+table a {
+    color: var(--main-color);
+}
+
+main section h3 {
+    text-align: center;
+    font-size: 2em;
+}
+
+.center {
+    text-align: center;
+}
+
+main section p,
+main section table {
+    max-width: 1000px;
+    margin: 1em auto;
+}