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.

GNUmakefile

@@ -6,10 +6,15 @@ html:
 	@echo "Publishing..."
 	cask emacs --quick --batch --load publish.el --funcall org-publish-all
 
-css: public/assets/css/main.css
+css: public/assets/css/main.css public/assets/css/tekuti.css public/assets/css/cgit.css
+
+public/assets/css/main.css public/assets/css/tekuti.css public/assets/css/cgit.css: \
+    src/less/include/common.less \
+    src/less/include/components.less \
+    src/less/include/colors.less
 
 public/assets/css/%.css: src/less/%.less
-	lessc $^ $@
+	lessc $< $@
 
 clean:
 	@echo "Cleaning up..."

publish.el

@@ -53,7 +53,7 @@
 
 (setq org-confirm-babel-evaluate nil)
 
-(setq org-html-head-include-default-style t)
+(setq org-html-head-include-default-style nil)
 
 (setq org-html-htmlize-output-type 'css)
 
@@ -102,16 +102,5 @@
   "https://code.ryuslash.org/new-ryuslash.org/atom/%s?h=master"
   "Format string for the URL to the page’s atom feed.")
 
-(add-hook 'org-export-before-processing-hook
-          (lambda (backend)
-            (when (eq backend 'html)
-              (let ((file-name (if (string= (buffer-file-name)
-                                            (expand-file-name "index.org"))
-                                   ""
-                                 (file-relative-name (buffer-file-name) publish-root))))
-               (insert "#+HTML_HEAD: <link rel=\"alternate\" type=\"application/atom+xml\" href=\""
-                       (format publish-feed-url-format file-name)
-                       "\" title=\"Atom Feed\"/>\n")))))
-
 (provide 'publish)
 ;;; publish.el ends here

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

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;

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

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

src/less/main.less

@@ -1,16 +1,25 @@
-@background-color: #111114;
+@import 'include/components';
-@foreground-color: #bfbfbf;
+@import 'include/common';
-@link-color: #a88654;
-@font-family: sans-serif;
 
-body {
+.title {
-  background-color: @background-color;
+  &:extend(.title-header);
-  color: @foreground-color;
-  font-family: @font-family;
 }
 
-a {
+.subtitle {
-  color: @link-color;
+  &:extend(.subtitle);
+}
+
+#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;
-}

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