revert site theme

2 files changed, 42 insertions, 308 deletions

diff --git a/theme/static/styles.css b/theme/static/styles.css
index 6987a80..71acb7e 100644
--- a/theme/static/styles.css
+++ b/theme/static/styles.css
@@ -1,334 +1,81 @@
 body {
-    border: 3px solid black;
-    display: flex;
-    flex-direction: column;
-    font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
+    font-family: Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida Console, monospace;
+    font-size: 0.85rem;
     line-height: 1.5;
     margin: 0 auto;
-    height: 100%;
     max-width: 50em;
-    min-height: 100vh;
-}
-
-main {
-    flex: 1 0 auto;
-    margin-left: 1rem;
-    margin-right: 1rem;
 }
 
-footer {
+body {
     padding: 1rem;
 }
 
-img {
-    max-width: 100%;
-}
-
-.skip-link {
-    height: 1px;
-    left: -10000px;
-    overflow: hidden;
-    position: absolute;
-    top: auto;
-    width: 1px;
-}
-
-.skip-link:focus {
-    height: auto;
-    position: static;
-    width: auto;
-}
-
 footer {
-    background-color: black;
-    border-top: 3px solid black;
-    color: white;
-}
-
-footer a {
-    color: white;
+    margin: 1rem 0;
 }
 
 nav {
-    width: 100vw;
-    border-bottom: 3px solid black;
+    align-items: center;
     display: flex;
-    justify-content: center;
-    background-color: #0066ff;
+    justify-content: space-around;
+    margin: 1rem 0;
 }
 
 nav ul {
-    list-style: none;
+    display: flex;
+    list-style-type: none;
     margin: 0;
     padding: 0;
-    display: flex;
     width: 100%;
 }
 
 nav ul li {
-    flex: 1;
-}
-
-nav a {
-    display: block;
-    width: 100%;
-    padding: 0.75rem 0;
-    text-align: center;
-    font-size: 1rem;
-    font-weight: 600;
-    color: #fff;
-    background-color: inherit;
-    text-decoration: none;
-    cursor: pointer;
-    border: none;
-    border-radius: 0;
-    transition: background 0.2s ease,
-                color 0.2s ease,
-                transform 0.1s ease;
-}
-
-nav a:hover,
-nav a:focus {
-    background-color: #004fcc;
-    outline: none;
-}
-
-nav a:focus-visible {
-    box-shadow: 0 0 0 3px rgba(0,102,255,.4);
-}
-
-nav a:active {
-    transform: translateY(1px);
-}
-
-nav ul li:hover a {
-    background-color: #fff;
-    color: #0066ff;
-}
-
-@media (max-width: 480px) {
-    nav a {
-        padding: 0.75rem 0;
-    }
-
-    nav ul {
-        flex-direction: row !important;
-        flex-wrap: nowrap;
-        overflow-x: auto;
-        -webkit-overflow-scrolling: touch;
-    }
-}
-
-table,
-th,
-td {
-    border: 1px solid black;
-}
-
-thead {
-    background-color: blue;
-    color: white;
-    font-weight: bold;
-}
-
-blockquote {
-    border: 3px solid black;
-    margin: 0;
-    margin-bottom: 1rem;
-    padding: 1rem;
-    background-color: blue;
-    color: white;
-}
-
-blockquote p {
-    margin: 0;
-    padding: 0;
-}
-
-time {
-    font-family: Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida Console, monospace;
-    font-size: 0.85rem;
-}
-
-section {
-    border-bottom: 3px solid black;
-}
-
-.post time {
-    margin-right: 0.5rem;
-}
-
-pre {
-    border: 3px solid black;
-    background-color: lightgrey;
-    padding: 1rem;
-    max-width: 100%;
-    box-sizing: border-box;
-    overflow-x: auto;
-    white-space: pre;
-}
-
-main {
     height: 100%;
+    margin-bottom: 0.5rem;
+    margin-right: 1rem;
+    text-align: center;
 }
 
-section {
-    margin: 0 -1rem;
-    padding: 2rem;
-}
-
-.post:last-of-type {
-    margin-bottom: 2rem;
-}
-
-.reply-link {
-    padding: 2rem 0;
-}
-
-.reply-link a {
-    display: inline-block;
-    padding: 0.75rem 1.25rem;
-    font-size: 1rem;
-    font-weight: 600;
-    color: #fff;
-    background-color: #0066ff;
-    border: none;
-    text-decoration: none;
-    cursor: pointer;
-    transition: background 0.2s ease,
-                transform 0.1s ease;
-}
-
-reply-link a:hover,
-reply-link a:focus {
-    background-color: #004fcc;
-    outline: none;
-}
-
-reply-link a:focus-visible {
-    box-shadow: 0 0 0 3px rgba(0,102,255,.4);
-}
-
-reply-link a:active {
-    transform: translateY(1px);
-}
-
-.post-metadata {
-    margin: 0 auto;
-    padding: 1rem;
-    margin: 0 -1rem;
-}
-
-.meta-row {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: baseline;
-    padding: 0.4rem 0;
-    border-bottom: 1px solid black;
-}
-
-.meta-row:last-of-type {
-    border-bottom: none;
-}
-
-.meta-label {
-    flex: 0 0 120px;
-    font-weight: bold;
-    color: #333;
-}
-
-.meta-value {
-    flex: 1 1 auto;
-    color: #555;
-}
-
-@media (max-width: 500px) {
-    .meta-label {
-        flex-basis: 100%;
-        margin-bottom: 0.2rem;
-    }
-
-    .meta-value {
-        flex-basis: 100%;
-    }
-}
-
-table {
-    width: 100%;
+img {
     max-width: 100%;
-    border-collapse: collapse;
-    table-layout: auto;
 }
 
-th,
-td {
-    word-break: break-word;
-    overflow-wrap: anywhere;
+pre {
+    border: 1px solid black;
+    overflow: scroll;
     padding: 0.5rem;
 }
 
-thead {
-    background-color: blue;
-    color: white;
-    font-weight: bold;
-}
-
-th,
-td {
-    min-width: 60px;
-}
-
-.table-fixed {
-    table-layout: fixed;
+:not(pre) > code {
+    color: red;
 }
 
-html,
-body {
-    box-sizing: border-box;
-}
-
-*,
-*::before,
-*::after {
-    box-sizing: inherit;
-}
-
-nav {
-    width: 100%;
-    max-width: 100%;
-}
-
-section > .inner {
-    margin: 0 -1rem;
-    padding: 2rem;
+.skip-link {
+    height: 1px;
+    left: -10000px;
+    overflow: hidden;
+    position: absolute;
+    top: auto;
+    width: 1px;
 }
 
-body {
-    overflow-x: hidden;
+.skip-link:focus {
+    height: auto;
+    position: static;
+    width: auto;
 }
 
-@media (max-width: 480px) {
-    nav ul {
-        flex-direction: row !important;
-        flex-wrap: nowrap;
-        overflow-x: auto;
-        -webkit-overflow-scrolling: touch;
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #000000;
+        color: #dfdfdf;
     }
 
-    nav a {
-        padding-left: 0.5rem;
-        padding-right: 0.5rem;
+    a {
+        color: #67c0ff;
     }
-}
 
-.post {
-    align-items: center;
-    display: flex;
-    margin: 0.5rem 0;
-}
-
-.post time {
-    flex-shrink: 0;
-    margin-right: 1rem;
+    pre {
+        border-color: white;
+    }
 }
diff --git a/theme/templates/post.html b/theme/templates/post.html
index 407b3b0..66c335c 100644
--- a/theme/templates/post.html
+++ b/theme/templates/post.html
@@ -8,23 +8,10 @@
 <meta property="og:description" content="{{ project_description }}" />
 {% endif %} {% endblock %} {% block main %}
 <article>
-	<section class="post-metadata">
-		<div class="meta-row">
-			<span class="meta-label">Title:</span>
-			<span class="meta-value">{{ post.title }}</span>
-		</div>
-
-		<div class="meta-row">
-			<span class="meta-label">Date:</span>
-			<time class="meta-value" datetime='{{ post.date | strftime("%Y-%m-%d") }}''>
-			{{ post.date | strftime("%Y-%m-%d %H:%M:%S") }}
-			</time>
-		</div>
-
-		<div class="meta-row">
-			<span class="meta-label">Description:</span>
-			<span class="meta-value">{{ post.description }}</span>
-		</div>
+	<section>
+		<b>Title</b>: {{ post.title }}
+		<br><b>Date</b>: <time datetime='{{ post.date|strftime("%Y-%m-%d") }}'>{{ post.date|strftime("%Y-%m-%d %H:%M:%S") }}</time>
+		<br><b>Description</b>: {{ post.description }}
 	</section>
 	<section>{{ post.html | safe }}</section>
 	<div class="reply-link"><a href="mailto:[email protected]">Reply via email &rarr;</a></div>