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, 57 insertions, 0 deletions

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;
+  }
+}