Commit Diff

Commit:
7dcb50be007bc5173e78af7cb8f3518aff22c26b
From:
Tobias Heider <tobias.heider@stusta.de>
Date:
Message:
Update main site with new light/dark color schemes and layout. Fix dark mode for text posts.
Actions:
Patch | Tree
commit - 260194bd4b0a7d83c4005a28e725bdc884ce52a8
commit + 7dcb50be007bc5173e78af7cb8f3518aff22c26b
blob - b6d3d607a45990c3b0a333f4cc1159fd1e814eac
blob + e07f1d4032e7275700a04818e0732f981fab4a21
--- index.html
+++ index.html
@@ -5,16 +5,27 @@
   <link rel="stylesheet" href="styles.css">
   <link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />
 </head>
+
 <body>
+
 <h1>Tobias Heider</h1>
+
 <span id="links">
+	<h2>Some of my Work</h2>
+	<a href="https://openiked.org">OpenIKED</a>
+	<a href="https://ubuntuasahi.org">Ubuntu Asahi</a>
+	<a href="stuff/index.html">Personal Notes</a>
+	<hr>
+
+	<h2>Where to Find me</h2>
 	<a href="https://github.com/tobhe">Github</a>
 	<a href="https://gitlab.com/tobhe">Gitlab</a>
 	<a rel="me" href="https://bsd.network/@tobhe">Mastodon</a>
-	<a href="https://www.openiked.org">OpenIKED</a>
 	<hr>
-	<a href="pgp.html">PGP</a>
+
+	<h2>Mail</h2>
 	<a href="mailto:me@tobhe.de">Mail</a>
+	<a href="pgp.html">PGP</a>
 </span>
 </body>
 </html>
blob - 9887dad3dbfa6881fe19d0a991b0a6b3550b402d
blob + 49586254d340a492772229276594fc00dad321fd
--- stuff/style.css
+++ stuff/style.css
@@ -33,3 +33,22 @@ pre {
 #footnote {
   font-size: 0.75em;
 }
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background: #1e1f21;
+        color: #EEEFF1;
+    }
+
+    p,ul,ol {
+        color: #EEEFF1;
+    }
+
+    pre {
+        background: black;
+    }
+    a:link { color: #F55; }
+    a:visited { color: #F55; }
+    a:active { color: #F55; }
+    a:hover { color: #FBB; }
+}
blob - b55fabfba420a26cd2abe8c9c951829fd6342e11
blob + 05125ded67e80c4bd364c94b10eb30fac7e99927
--- styles.css
+++ styles.css
@@ -2,12 +2,10 @@ body {
     position: absolute;
     font-family: monospace, monospace;
     font-size: 200%;
-    top: 30%;
+    top: 10%;
     text-align: center;
     width: 100%;
     margin: 0;
-    background: #1e1f21;
-    color: #EEEFF1;
 }
 
 body#keys {
@@ -27,9 +25,21 @@ body#keys {
 
 #links {
     display: inline-block;
+    text-align: left;
 }
 
-a:link { font-weight: bold; color: #F55; }
-a:visited { font-weight: bold; color: #F55; }
-a:active { font-weight: bold; color: #F55; }
-a:hover { color: #FBB; }
+a:link { font-weight: bold; }
+a:visited { font-weight: bold; }
+a:active { font-weight: bold; }
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background: #1e1f21;
+        color: #EEEFF1;
+    }
+
+    a:link { color: #F55; }
+    a:visited { color: #F55; }
+    a:active { color: #F55; }
+    a:hover { color: #FBB; }
+}