HTML/CSS only tabs (#678)

* Fix pre tag margin top so it looks good inside containers

* Bind to 0.0.0.0 for docker container support

* Add HTML only tabs shortcode

assets/scss/_base.scss

@@ -136,7 +136,7 @@ strong {
 
 .highlight>div,
 .highlight>pre {
-  margin: 0 0 2rem;
+  margin: 2rem 0 2rem;
   padding: 1rem;
   border-radius: 1rem;
 }

assets/scss/_tabs.scss

@@ -0,0 +1,77 @@
+.tabs {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 2rem 0 2rem 0;
+  position: relative;
+
+  &.tabs-left {
+    justify-content: flex-start;
+
+    label.tab-label {
+      margin-right: 0.5rem;
+    }
+
+    .tab-content {
+      border-radius: 0px 4px 4px 4px;
+    }
+  }
+
+  &.tabs-right {
+    justify-content: flex-end;
+
+    label.tab-label {
+      margin-left: 0.5rem;
+    }
+
+    .tab-content {
+      border-radius: 4px 0px 4px 4px;
+    }
+  }
+
+  input.tab-input {
+    display: none;
+  }
+
+  label.tab-label {
+    background-color: $alt-bg-color;
+    border-color: $darker-alt-bg-color;
+    border-radius: 4px 4px 0px 0px;
+
+    border-style: solid;
+    border-bottom-style: hidden;
+
+    border-width: 1px;
+    cursor: pointer;
+    display: inline-block;
+    order: 1;
+    padding: 0.3rem 0.6rem;
+    position: relative;
+    top: 1px;
+    user-select: none;
+  }
+
+  input.tab-input:checked + label.tab-label {
+    background-color: $bg-color;
+  }
+
+  .tab-content {
+    background-color: $bg-color;
+    border-color: $darker-alt-bg-color;
+    border-style: solid;
+    border-width: 1px;
+    display: none;
+    order: 2;
+    padding: 1rem;
+    width: 100%;
+  }
+
+  &.tabs-code {
+    .tab-content {
+      padding: 0.5rem;
+
+      pre {
+        margin: 0;
+      }
+    }
+  }
+}

assets/scss/_tabs_dark.scss

@@ -0,0 +1,27 @@
+@mixin tabs_dark {
+  .tabs {
+    label.tab-label {
+      background-color: $alt-bg-color-dark;
+      border-color: $lighter-alt-bg-color-dark;
+    }
+
+    input.tab-input:checked + label.tab-label {
+      background-color: $bg-color-dark;
+    }
+
+    .tab-content {
+      background-color: $bg-color-dark;
+      border-color: $lighter-alt-bg-color-dark;
+    }
+  }
+}
+
+body.colorscheme-dark {
+  @include tabs_dark();
+}
+
+body.colorscheme-auto {
+  @media (prefers-color-scheme: dark) {
+    @include tabs_dark();
+  }
+}

assets/scss/_variables.scss

@@ -25,6 +25,7 @@ $bg-color: #fafafa !default;
 $fg-color: #212121 !default;
 $alt-bg-color: #e0e0e0 !default;
 $alt-fg-color: #000 !default;
+$darker-alt-bg-color: #ccc !default;
 $link-color: #1565c0 !default;
 
 // Dark colors
@@ -32,6 +33,7 @@ $bg-color-dark: #212121 !default;
 $fg-color-dark: #dadada !default;
 $alt-bg-color-dark: #424242 !default;
 $alt-fg-color-dark: #dadada !default;
+$lighter-alt-bg-color-dark: #4f4f4f !default;
 $link-color-dark: #42a5f5 !default;
 
 // Notice colors

assets/scss/coder-dark.scss

@@ -3,6 +3,7 @@
 @import "content_dark";
 @import "notices_dark";
 @import "navigation_dark";
+@import "tabs_dark";
 @import "taxonomies_dark";
 @import "footer_dark";
 @import "float_dark";

assets/scss/coder.scss

@@ -6,6 +6,7 @@
 @import "notices";
 @import "navigation";
 @import "pagination";
+@import "tabs";
 @import "taxonomies";
 @import "footer";
 @import "float";