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/cgit.less               |  54 ++++++++++++++
 src/less/include/colors.less     |   9 +++
 src/less/include/common.less     |  81 ++++++++++++++++++++
 src/less/include/components.less |  57 +++++++++++++++
 src/less/main.less               |  43 ++++++-----
 src/less/tekuti.less             | 154 +++++++++++++++++++++++++++++++++++++++
 6 files changed, 381 insertions(+), 17 deletions(-)
 create mode 100644 src/less/cgit.less
 create mode 100644 src/less/include/colors.less
 create mode 100644 src/less/include/common.less
 create mode 100644 src/less/include/components.less
 create mode 100644 src/less/tekuti.less

(limited to 'src/less')

diff --git a/src/less/cgit.less b/src/less/cgit.less
new file mode 100644
index 0000000..3424481
--- /dev/null
+++ b/src/less/cgit.less
@@ -0,0 +1,54 @@
+@import 'include/common';
+@import 'include/components';
+
+.content > table {
+  width: 100%;
+}
+
+.main {
+  &:extend(.title-header);
+
+  display: block;
+}
+
+.logo {
+  width: 0;
+  padding: 0;
+
+  > a {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+  }
+}
+
+.sub {
+  &:extend(.subtitle);
+
+  display: block;
+}
+
+.tabs {
+  width: 100%;
+
+  .form {
+    width: 0;
+    white-space: nowrap;
+  }
+}
+
+#cgit {
+  &:extend(.content-wrapper);
+
+  position: relative;
+}
+
+#header {
+  width: 100%;
+
+  &, tbody, tr, td {
+    display: block;
+    margin: 0;
+    border: 0;
+  }
+}
diff --git a/src/less/include/colors.less b/src/less/include/colors.less
new file mode 100644
index 0000000..c67745a
--- /dev/null
+++ b/src/less/include/colors.less
@@ -0,0 +1,9 @@
+@dark-background: #222424;
+@dark-background-highlight: #3f4242;
+@dark-foreground: #bfbfbf;
+@dark-primary: #ff9800;
+
+@light-background: #f2f2f2;
+@light-background-highlight: #d9d9d9;
+@light-foreground: #111414;
+@light-primary: #1d44b8;
diff --git a/src/less/include/common.less b/src/less/include/common.less
new file mode 100644
index 0000000..4aa433f
--- /dev/null
+++ b/src/less/include/common.less
@@ -0,0 +1,81 @@
+@import 'colors';
+
+a {
+  text-decoration: none;
+
+  @media (prefers-color-scheme: dark) {
+    color: @dark-primary;
+
+    &:visited {
+      color: darken(@dark-primary, 10%);
+    }
+  }
+
+  @media (prefers-color-scheme: light) {
+    color: @light-primary;
+
+    &:visited {
+      color: darken(@light-primary, 10%);
+    }
+  }
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  img {
+    border: none;
+  }
+}
+
+body {
+  border: 0;
+  font-family: "PT Sans", "Liberation Sans", "DejaVu Sans", "Tahoma", "Verdana", "Arial", sans-serif;
+  font-size: 15pt;
+  margin: 0;
+  padding: 0;
+  line-height: 160%;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: @dark-background;
+    color: @dark-foreground;
+  }
+
+  @media (prefers-color-scheme: light) {
+    background-color: @light-background;
+    color: @light-foreground;
+  }
+}
+
+h1 {
+  font-size: 1.6rem;
+}
+
+h2 {
+  font-size: 1.5rem;
+}
+
+h3 {
+  font-size: 1.4rem;
+}
+
+h4 {
+  font-size: 1.3rem;
+  font-weight: bold;
+}
+
+h5 {
+  font-size: 1.2rem;
+  font-weight: bold;
+}
+
+h6 {
+  font-size: 1.1rem;
+  font-weight: bold;
+}
+
+pre {
+  font-family: "Fantasque Sans Mono", "PT Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier new", monospace;
+  font-size: 14pt;
+  line-height: 100%;
+}
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;
+  }
+}
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;
-}
diff --git a/src/less/tekuti.less b/src/less/tekuti.less
new file mode 100644
index 0000000..651706b
--- /dev/null
+++ b/src/less/tekuti.less
@@ -0,0 +1,154 @@
+@import 'include/colors';
+@import 'include/components';
+@import 'include/common';
+
+@media (prefers-color-scheme: dark) {
+  h2.storytitle {
+	border-bottom: 3px dotted @dark-foreground;
+  }
+
+  #menu {
+    background-color: @dark-background;
+    color: @dark-foreground;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  h2.storytitle {
+	border-bottom: 3px dotted @light-foreground;
+  }
+
+  #menu {
+    background-color: @light-background;
+    color: @light-foreground;
+  }
+}
+
+blockquote {
+  margin-left: 1.5em;
+  padding-left: 5px;
+}
+
+div#tag-cloud {
+  line-spacing: 150%;
+  text-align: center;
+  padding-bottom: 2em;
+}
+
+h2.storytitle {
+  margin: 15px 0 2px 0;
+  padding-bottom: 2px;
+}
+
+h3.meta {
+  &, & a, & a:visited {
+    font-size: 12px;
+	margin: 2px 0 6px 0;
+	padding-bottom: 2px;
+  }
+}
+
+p.footpara {
+  margin: 0;
+}
+
+.feedback {
+  text-align: right;
+}
+
+.footdef {
+  display: grid;
+  grid-template-columns: auto 1fr;
+
+  > p {
+    margin: 0;
+    margin-right: 5px;
+  }
+}
+
+.org-src-container, .example {
+  overflow-x: auto;
+}
+
+.post {
+  margin-bottom: 2rem;
+}
+
+#footer {
+  &:extend(.footer);
+  &:extend(.footer-text);
+  width: 100%;
+}
+
+#header {
+  &:extend(.title-header);
+}
+
+#menu {
+  margin-left: 20px;
+  margin-top: 0;
+  margin-bottom: 20px;
+  border-right: 0;
+  padding: 10px 0 10px 10px;
+
+  @media (min-width: 45rem) {
+    float: right;
+    width: 15rem;
+  }
+
+  @media (min-width: 66rem) {
+    margin-right: -3rem;
+  }
+
+  form {
+	margin: 0 0 0 13px;
+  }
+
+  h2 {
+	font: italic smaller sans-serif;
+	font-weight: bold;
+	margin-top: 10px;
+    margin-bottom: 0px;
+	padding-bottom: 2px;
+  }
+
+  input#s {
+	width: 80%;
+  }
+
+  ul {
+	list-style-type: none;
+	margin: 0;
+	padding-left: 3px;
+	text-transform: lowercase;
+	font: normal smaller sans-serif;
+
+    ul {
+	  font-variant: normal;
+	  font-weight: normal;
+	  line-height: 100%;
+	  list-style-type: none;
+	  margin: 0;
+	  padding: 0;
+	  text-align: left;
+
+      li {
+	    border: 0;
+	    font-weight: normal;
+        font-style: normal;
+	    letter-spacing: 0;
+	    margin-top: 0;
+	    padding: 0;
+	    padding-left: 12px;
+      }
+    }
+  }
+}
+
+#navbar {
+  &:extend(.subtitle);
+}
+
+#rap {
+  &:extend(.content-wrapper);
+}
-- 
cgit v1.2.3-54-g00ecf