Update docs

docs/blog/theme/stylesheet/dark-theme.less

@@ -0,0 +1,156 @@
+//
+// Dark Theme CSS styles.
+//
+
+@import "variables.less";
+
+body {
+  background-color: @body-bg-dark-theme;
+  color: @text-color-dark-theme;
+}
+
+hr {
+  background-color: @solid-dark-grey;
+  color: @solid-dark-grey;
+}
+
+aside {
+  background-color: @sidebar-bg-dark-theme;
+  color: @sidebar-text-color;
+
+  form.navbar-search input#tipue_search_input {
+    background-color: @very-dark-grey;
+    color: @light-grey;
+  }
+}
+
+main {
+  nav {
+    border-bottom-color: @nav-border-color-dark-theme;
+  }
+
+  nav, .translations {
+    a {
+      border-color: @nav-border-color-dark-theme;
+    }
+  }
+
+  article {
+    kbd {
+      background-color: #080808;
+      color: @light-grey;
+    }
+
+    blockquote, pre {
+      border-left: 8px solid #ffffff33;
+    }
+
+    *:not(pre) > code {
+      background-color: #080808;
+      border-color: #000;
+    }
+
+    div#tipue_search_content .tipue_search_result {
+      span.tipue_search_content_bold {
+        color: white;
+      }
+    }
+
+    section#isso-thread {
+      div.textarea,
+      .auth-section p.input-wrapper input,
+      .notification-section input {
+        background: @very-dark-grey;
+        color: @light-grey;
+      }
+
+      >h4 {
+        color: @light-grey;
+      }
+
+      .isso-postbox > .form-wrapper .preview {
+        background: repeating-linear-gradient(
+          -45deg,
+          @solid-dark-grey, @solid-dark-grey 10px,
+          @very-dark-grey 10px, @very-dark-grey 20px
+        );
+      }
+
+      .isso-comment > div.text-wrapper {
+        > .isso-comment-header {
+          .author {
+            color: @light-grey;
+          }
+
+          .spacer, a.permalink, .note, a.parent {
+            color: @med-grey;
+
+            &:hover {
+              color: @light-grey;
+            }
+          }
+        }
+
+        > .isso-comment-footer a:hover {
+          // Unfortunately, Isso uses a lot of !important in its styles, so I
+          // have to override that.
+          text-shadow: @dark-grey 0 0 1px !important;
+        }
+      }
+    }
+  }
+
+  footer {
+    border-top-color: @footer-border-color-dark-theme;
+  }
+}
+
+div.related-posts {
+  border-color: @rel-post-border-color-dark-theme;
+}
+
+// Admonition
+div.admonition.attention {
+  color: @admonition-attention-color-dark-theme;
+  background-color: @admonition-attention-bg-color-dark-theme;
+}
+
+div.admonition.caution {
+  color: @admonition-caution-color-dark-theme;
+  background-color: @admonition-caution-bg-color-dark-theme;
+}
+
+div.admonition.danger {
+  color: @admonition-danger-color-dark-theme;
+  background-color: @admonition-danger-bg-color-dark-theme;
+}
+
+div.admonition.error {
+  color: @admonition-error-color-dark-theme;
+  background-color: @admonition-error-bg-color-dark-theme;
+}
+
+div.admonition.hint {
+  color: @admonition-hint-color-dark-theme;
+  background-color: @admonition-hint-bg-color-dark-theme;
+}
+
+div.admonition.important {
+  color: @admonition-important-color-dark-theme;
+  background-color: @admonition-important-bg-color-dark-theme;
+}
+
+div.admonition.note {
+  color: @admonition-note-color-dark-theme;
+  background-color: @admonition-note-bg-color-dark-theme;
+}
+
+div.admonition.tip {
+  color: @admonition-tip-color-dark-theme;
+  background-color: @admonition-tip-bg-color-dark-theme;
+}
+
+div.admonition.warning {
+  color: @admonition-warning-color-dark-theme;
+  background-color: @admonition-warning-bg-color-dark-theme;
+}

docs/blog/theme/stylesheet/dark-theme.min.css

@@ -0,0 +1 @@
+body{background-color:#333;color:#eee}hr{color:#222}aside,hr{background-color:#222}aside{color:#fff}aside form.navbar-search input#tipue_search_input{background-color:#1a1a1a;color:#eee}main nav{border-bottom-color:#222}main .translations a,main nav a{border-color:#222}main article kbd{background-color:#080808;color:#eee}main article blockquote,main article pre{border-left:8px solid #ffffff33}main article :not(pre)>code{background-color:#080808;border-color:#000}main article div#tipue_search_content .tipue_search_result span.tipue_search_content_bold{color:#fff}main article section#isso-thread .auth-section p.input-wrapper input,main article section#isso-thread .notification-section input,main article section#isso-thread div.textarea{background:#1a1a1a;color:#eee}main article section#isso-thread>h4{color:#eee}main article section#isso-thread .isso-postbox>.form-wrapper .preview{background:repeating-linear-gradient(-45deg,#222,#222 10px,#1a1a1a 0,#1a1a1a 20px)}main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header .author{color:#eee}main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header .note,main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header .spacer,main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header a.parent,main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header a.permalink{color:#999}main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header .note:hover,main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header .spacer:hover,main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header a.parent:hover,main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-header a.permalink:hover{color:#eee}main article section#isso-thread .isso-comment>div.text-wrapper>.isso-comment-footer a:hover{text-shadow:#242121 0 0 1px!important}main footer{border-top-color:#222}div.related-posts{border-color:#222}div.admonition.attention,div.admonition.caution{color:#fbda7a;background-color:#4a3900}div.admonition.danger,div.admonition.error{color:#ebadb3;background-color:#28070a}div.admonition.hint{color:#7abaff;background-color:#001933}div.admonition.important,div.admonition.note{color:#a8eab7;background-color:#122b18}div.admonition.tip{color:#7abaff;background-color:#001933}div.admonition.warning{color:#fbda7a;background-color:#4a3900}

docs/blog/theme/stylesheet/style.less

@@ -119,22 +119,21 @@ main {
   nav {
     text-align: center;
     text-transform: uppercase;
-    font-size: .72em;
     padding: 14px 0 14px 0;
     border-bottom: @nav-border-color 1px solid;
+
+    // Need to use font-size of 0 so that whitespace between the <a> tags
+    // doesn't have an affect on alignment.
+    font-size: 0;
   }
 
   nav, .translations {
     a {
-      padding: 0 4px 0 4px;
-      border-left: @nav-border-color 1px solid;
+      font-size: 12px;
+      padding: 0 4px;
       border-right: @nav-border-color 1px solid;
     }
 
-    :first-child {
-      border-left: none;
-    }
-
     :last-child {
       border-right: none;
     }
@@ -270,6 +269,12 @@ main {
         }
       }
     }
+
+    // Add a bit of padding between each of the entry boxes in the Isso auth
+    // section. By default, they are squished together, which looks terrible.
+    section#isso-thread .auth-section .input-wrapper {
+      margin-right: 5px;
+    }
   }
 
   footer {
@@ -283,6 +288,11 @@ main {
       color: @footer-text-color;
       font-size: 11px;
     }
+
+    // Flex credits and theme selection separator
+    span.footer-separator {
+      margin: 0 6px;
+    }
   }
 }
 
@@ -304,7 +314,8 @@ main {
   }
 }
 
-a.btn {
+a.btn,
+section#isso-thread section.auth-section p.post-action input {
   background-color: @btn-bg;
   padding: .6em .6em;
   font-size: .8em;
@@ -313,6 +324,7 @@ a.btn {
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
+  border: none;
   border-radius: .25em;
 }
 
@@ -482,9 +494,18 @@ ul.social {
     background-color: @mastodon-bg-color;
   }
 
+  a.sc-diaspora {
+    color: @diaspora-color;
+    background-color: @diaspora-bg-color;
+  }
+
   a.sc-flickr {
     background-color: @flickr-bg-color;
   }
+
+  a.sc-lastfm {
+    background-color: @lastfm-bg-color;
+  }
 }
 
 .ads-aside {
@@ -562,3 +583,110 @@ ul.social {
     height: 90px;
   }
 }
+
+// Admonition
+div.admonition {
+  margin-bottom: 2.5rem;
+  border-radius: 4px;
+  padding: 0.5em 1.25em 1.25em 1.25em;
+
+  p.admonition-title::before {
+    display: inline-block;
+    font-style: normal;
+    font-variant: normal;
+    text-rendering: auto;
+    font-family: "Font Awesome 5 Free";
+  }
+
+  p.admonition-title {
+    font-weight: 600;
+    line-height: 1.25em;
+    margin-bottom: 1.25em;
+    margin-top: inherit;
+  }
+
+  p, div, pre {
+    margin-bottom: 0;
+  }
+}
+
+div.admonition.attention {
+  p.admonition-title::before {
+    content: @admonition-attention-icon;
+  }
+
+  color: @admonition-attention-color;
+  background-color: @admonition-attention-bg-color;
+}
+
+div.admonition.caution {
+  p.admonition-title::before {
+    content: @admonition-caution-icon;
+  }
+
+  color: @admonition-caution-color;
+  background-color: @admonition-caution-bg-color;
+}
+
+div.admonition.danger {
+  p.admonition-title::before {
+    content: @admonition-danger-icon;
+  }
+
+  color: @admonition-danger-color;
+  background-color: @admonition-danger-bg-color;
+}
+
+div.admonition.error {
+  p.admonition-title::before {
+    content: @admonition-error-icon;
+  }
+
+  color: @admonition-error-color;
+  background-color: @admonition-error-bg-color;
+}
+
+div.admonition.hint {
+  p.admonition-title::before {
+    content: @admonition-hint-icon;
+  }
+
+  color: @admonition-hint-color;
+  background-color: @admonition-hint-bg-color;
+}
+
+div.admonition.important {
+  p.admonition-title::before {
+    content: @admonition-important-icon;
+  }
+
+  color: @admonition-important-color;
+  background-color: @admonition-important-bg-color;
+}
+
+div.admonition.note {
+  p.admonition-title::before {
+    content: @admonition-note-icon;
+  }
+
+  color: @admonition-note-color;
+  background-color: @admonition-note-bg-color;
+}
+
+div.admonition.tip {
+  p.admonition-title::before {
+    content: @admonition-tip-icon;
+  }
+
+  color: @admonition-tip-color;
+  background-color: @admonition-tip-bg-color;
+}
+
+div.admonition.warning {
+  p.admonition-title::before {
+    content: @admonition-warning-icon;
+  }
+
+  color: @admonition-warning-color;
+  background-color: @admonition-warning-bg-color;
+}

docs/blog/theme/stylesheet/variables.less

@@ -6,6 +6,8 @@
 @light-grey:  #eeeeee;
 @med-grey:  #999999;
 @dark-grey: #242121;
+@solid-dark-grey: #222222;
+@very-dark-grey: #1a1a1a;
 
 // Font family
 @sans: 'Source Sans Pro', 'Roboto', 'Open Sans', 'Liberation Sans', 'DejaVu Sans', 'Verdana', 'Helvetica', 'Arial', sans-serif;
@@ -13,7 +15,9 @@
 
 // Body
 @body-bg: @white;
+@body-bg-dark-theme: @grey;
 @text-color: @dark-grey;
+@text-color-dark-theme: @light-grey;
 
 // Links
 @link-color: @orange;
@@ -21,6 +25,7 @@
 
 // Sidebar (aside)
 @sidebar-bg: @grey;
+@sidebar-bg-dark-theme: @solid-dark-grey;
 @sidebar-text-color: @white;
 @sidebar-link-color: @white;
 @sidebar-link-hover-color: @light-grey;
@@ -41,12 +46,15 @@
 // Footer
 @footer-text-color: @med-grey;
 @footer-border-color: @light-grey;
+@footer-border-color-dark-theme: @solid-dark-grey;
 
-// Relativer posts
+// Relative posts
 @rel-post-border-color: @light-grey;
+@rel-post-border-color-dark-theme: @solid-dark-grey;
 
 // Nav
 @nav-border-color: @light-grey;
+@nav-border-color-dark-theme: @solid-dark-grey;
 
 // Social buttons
 
@@ -70,4 +78,62 @@
 @xing-bg-color: #007575;
 @bitbucket-bg-color: #0747A6;
 @mastodon-bg-color: #3088d4;
+@diaspora-color: #000000;
+@diaspora-bg-color: #D5D5D5;
 @flickr-bg-color: #ff0084;
+@lastfm-bg-color: #d92323;
+
+// Admonition colors
+@admonition-attention-color: #856404;
+@admonition-attention-color-dark-theme: #fbda7a;
+@admonition-attention-bg-color: #fff3cd;
+@admonition-attention-bg-color-dark-theme: #4a3900;
+@admonition-attention-icon: "\f071\00a0 ";
+
+@admonition-caution-color: @admonition-attention-color;
+@admonition-caution-color-dark-theme: @admonition-attention-color-dark-theme;
+@admonition-caution-bg-color: @admonition-attention-bg-color;
+@admonition-caution-bg-color-dark-theme: @admonition-attention-bg-color-dark-theme;
+@admonition-caution-icon: @admonition-attention-icon;
+
+@admonition-warning-color: @admonition-attention-color;
+@admonition-warning-color-dark-theme: @admonition-attention-color-dark-theme;
+@admonition-warning-bg-color: @admonition-attention-bg-color;
+@admonition-warning-bg-color-dark-theme: @admonition-attention-bg-color-dark-theme;
+@admonition-warning-icon: @admonition-attention-icon;
+
+@admonition-danger-color: #721c24;
+@admonition-danger-color-dark-theme: #ebadb3;
+@admonition-danger-bg-color: #f8d7da;
+@admonition-danger-bg-color-dark-theme: #28070a;
+@admonition-danger-icon: "\f06a\00a0 ";
+
+@admonition-error-color: @admonition-danger-color;
+@admonition-error-color-dark-theme: @admonition-danger-color-dark-theme;
+@admonition-error-bg-color: @admonition-danger-bg-color;
+@admonition-error-bg-color-dark-theme: @admonition-danger-bg-color-dark-theme;
+@admonition-error-icon: @admonition-danger-icon;
+
+@admonition-hint-color: #004085 ;
+@admonition-hint-color-dark-theme: #7abaff;
+@admonition-hint-bg-color: #cce5ff;
+@admonition-hint-bg-color-dark-theme: #001933;
+@admonition-hint-icon: "\f0eb\00a0 ";
+
+@admonition-tip-color: @admonition-hint-color;
+@admonition-tip-color-dark-theme: @admonition-hint-color-dark-theme;
+@admonition-tip-bg-color: @admonition-hint-bg-color;
+@admonition-tip-bg-color-dark-theme: @admonition-hint-bg-color-dark-theme;
+@admonition-tip-icon: @admonition-hint-icon;
+
+@admonition-important-color: #155724;
+@admonition-important-color-dark-theme: #a8eab7;
+@admonition-important-bg-color: #d4edda;
+@admonition-important-bg-color-dark-theme: #122b18;
+@admonition-important-icon: "\f05a\00a0 ";
+
+@admonition-note-color: @admonition-important-color;
+@admonition-note-color-dark-theme: @admonition-important-color-dark-theme;
+@admonition-note-bg-color: @admonition-important-bg-color;
+@admonition-note-bg-color-dark-theme: @admonition-important-bg-color-dark-theme;
+@admonition-note-icon: @admonition-important-icon;