Update design and include CSS for my CGit and tekuti instances

This should include both a light and a dark theme, but I will admit that I'm
mostly testing with the dark one.

1 files changed, 26 insertions, 17 deletions

diff --git a/src/less/main.less b/src/less/main.less
index 3e6376f..4d16edd 100644
--- a/src/less/main.less
+++ b/src/less/main.less
@@ -1,16 +1,25 @@
-@background-color: #111114;
-@foreground-color: #bfbfbf;
-@link-color: #a88654;
-@font-family: sans-serif;
-
-body {
-  background-color: @background-color;
-  color: @foreground-color;
-  font-family: @font-family;
+@import 'include/components';
+@import 'include/common';
+
+.title {
+  &:extend(.title-header);
+}
+
+.subtitle {
+  &:extend(.subtitle);
 }
 
-a {
-  color: @link-color;
+#postamble {
+  &:extend(.footer);
+  &:extend(.content-wrapper);
+
+  p {
+    &:extend(.footer-text);
+  }
+}
+
+#content {
+  &:extend(.content-wrapper);
 }
 
 figure {
@@ -23,14 +32,14 @@ pre.src {
   position: static;
 
   &::before {
-    background-color: @background-color;
+    @media (prefers-color-scheme: dark) {
+      background-color: @dark-background;
+    }
+    @media (prefers-color-scheme: light) {
+      background-color: @light-background;
+    }
   }
 }
 
 .org-src-container { position: relative; }
 .org-svg { width: unset; }
-
-#content {
-  max-width: 900px;
-  margin: 0 auto;
-}