From a4603a7901d76325f9ce220b4f6f8a4009084257 Mon Sep 17 00:00:00 2001
From: Tom Willemse
Date: Sat, 3 Jul 2021 01:29:43 -0700
Subject: 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.
---
 src/less/include/components.less | 57 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 src/less/include/components.less

(limited to 'src/less/include/components.less')

diff --git a/src/less/include/components.less b/src/less/include/components.less
new file mode 100644
index 0000000..1941566
--- /dev/null
+++ b/src/less/include/components.less
@@ -0,0 +1,57 @@
+@import "colors";
+
+.content-wrapper {
+  max-width: 60rem;
+  margin: 0 auto;
+}
+
+.footer {
+  font-size: 0.8rem;
+  padding: 10px 0;
+  text-align: center;
+
+  @media (prefers-color-scheme: dark) {
+    border-top: 3px @dark-foreground dotted;
+  }
+
+  @media (prefers-color-scheme: light) {
+    border-top: 3px @light-foreground dotted;
+  }
+}
+
+.footer-text {
+  line-height: normal;
+  margin: 0;
+}
+
+.subtitle {
+  font-size: 0.9rem;
+  margin: 0;
+  text-align: center;
+  padding: 10px;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: @dark-background-highlight;
+  }
+
+  @media (prefers-color-scheme: light) {
+    background-color: @light-background-highlight;
+  }
+}
+
+.title-header {
+  text-align: center;
+  padding: 20px;
+  margin: 0;
+  font-size: 2.5rem;
+
+  @media (prefers-color-scheme: dark) {
+    color: @dark-primary;
+    background-color: @dark-background-highlight;
+  }
+
+  @media (prefers-color-scheme: light) {
+    color: @light-primary;
+    background-color: @light-background-highlight;
+  }
+}
-- 
cgit v1.2.3-54-g00ecf