- commit
- 507c09ae2a6183bae2d357c8f6b4b5f55ba0a78b
- parent
- 71b3bb6d95ef6f08fb74209f9efaa274e6f618b5
- Author
- Tobias Bengfort <tobias.bengfort@posteo.de>
- Date
- 2025-08-07 09:33
basic styling
Diffstat
| M | layouts/_default/baseof.html | 24 | +++++++++++++++--------- |
| A | static/style.css | 75 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
2 files changed, 90 insertions, 9 deletions
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -9,19 +9,25 @@ 9 9 </head> 10 10 <body> 11 11 <header>12 -1 <a class="brand" href="/" rel="home">Data Horror Escape Room</a>13 -1 <nav>14 -1 <a href="/">Home</a>15 -1 <a href="/about/">About this website</a>16 -1 </nav>-1 12 <div class="container"> -1 13 <a class="brand" href="/" rel="home">Data Horror Escape Room</a> -1 14 <nav> -1 15 <a href="/">Home</a> -1 16 <a href="/about/">About this website</a> -1 17 </nav> -1 18 </div> 17 19 </header> 18 20 <main>19 -1 {{ block "main" . }}{{ end }}-1 21 <div class="container"> -1 22 {{ block "main" . }}{{ end }} -1 23 </div> 20 24 </main> 21 25 <footer>22 -1 © 2025 Tobias Bengfort ·23 -1 <a href="http://creativecommons.org/licenses/by-sa/4.0/" rel="license">CC-BY-SA-4.0</a> <br>24 -1 based on <a href="https://sites.google.com/vu.nl/datahorror/">Data Horror Escape Room</a> by Vrije Universiteit Amsterdam, Leiden University and Eindhoven University of Technology-1 26 <div class="container"> -1 27 © 2025 Tobias Bengfort · -1 28 <a href="http://creativecommons.org/licenses/by-sa/4.0/" rel="license">CC-BY-SA-4.0</a> <br> -1 29 based on <a href="https://sites.google.com/vu.nl/datahorror/">Data Horror Escape Room</a> by Vrije Universiteit Amsterdam, Leiden University and Eindhoven University of Technology -1 30 </div> 25 31 </footer> 26 32 </body> 27 33 </html>
diff --git a/static/style.css b/static/style.css
@@ -0,0 +1,75 @@
-1 1 :root {
-1 2 font-family: sans-serif;
-1 3 line-height: 1.7;
-1 4 }
-1 5
-1 6 img {
-1 7 max-inline-size: 100%;
-1 8 block-size: auto;
-1 9 }
-1 10
-1 11 body {
-1 12 background-color: #555550;
-1 13 color: #fff;
-1 14 padding: 0;
-1 15 margin: 0;
-1 16 min-block-size: 100vb;
-1 17 display: grid;
-1 18 grid-template-rows: min-content 1fr min-content;
-1 19 }
-1 20
-1 21 a {
-1 22 color: inherit;
-1 23 }
-1 24
-1 25 .container {
-1 26 max-inline-size: 60rem;
-1 27 padding-inline: 1rem;
-1 28 margin-inline: auto;
-1 29 }
-1 30
-1 31 header,
-1 32 footer {
-1 33 background-color: #434340;
-1 34 padding-block: 1rem;
-1 35 }
-1 36
-1 37 main {
-1 38 padding-block: 1rem 3rem;
-1 39 }
-1 40
-1 41 footer {
-1 42 font-size: 90%;
-1 43 }
-1 44
-1 45 header .container {
-1 46 display: flex;
-1 47 flex-direction: column;
-1 48 gap: 0.5em;
-1 49 }
-1 50
-1 51 @media (min-width: 40rem) {
-1 52 header .container {
-1 53 flex-direction: row;
-1 54 gap: 2em;
-1 55 justify-content: space-between;
-1 56 align-items: center;
-1 57 }
-1 58 }
-1 59
-1 60 .brand {
-1 61 font-size: 150%;
-1 62 line-height: 1;
-1 63 text-decoration: none;
-1 64 }
-1 65
-1 66 nav {
-1 67 display: flex;
-1 68 flex-direction: row;
-1 69 gap: 1.2em;
-1 70 }
-1 71
-1 72 nav a {
-1 73 font-weight: bold;
-1 74 text-decoration: none;
-1 75 }