Extract website theme into its own repository

assets/scss/code.scss

@@ -0,0 +1,97 @@
+@import "variables.scss";
+
+$code-color-lineno: grey;
+$code-color-keyword: black;
+$code-color-type: black;
+$code-color-comment: grey;
+
+.highlight-label {
+    padding: 0.25rem 0.5rem 0.25rem 0.5rem;
+    border: $code-border;
+    border-bottom: none;
+
+    a {
+        font-family: $font-code;
+    }
+}
+
+.highlight-group pre {
+    margin: 0;
+}
+
+code {
+  font-family: $font-code;
+  background-color: $code-color;
+  border: $code-border;
+  padding: 0 0.25rem 0 0.25rem;
+}
+
+pre code {
+    display: block;
+    box-sizing: border-box;
+    padding: 0.5rem;
+    overflow: auto;
+}
+
+.chroma {
+    .lntable {
+        border-spacing: 0;
+        padding: 0.5rem 0 0.5rem 0;
+        background-color: $code-color;
+        border-radius: 0;
+        border: $code-border;
+        display: block;
+        overflow: auto;
+        margin-bottom: 1rem;
+
+        td {
+            padding: 0;
+        }
+
+        code {
+            border: none;
+            padding: 0;
+        }
+
+        pre {
+            margin: 0;
+        }
+
+        .lntd:last-child {
+            width: 100%;
+        }
+    }
+
+    .lntr {
+        display: table-row;
+    }
+
+    .lnt {
+        display: block;
+        padding: 0 1rem 0 1rem;
+        color: $code-color-lineno;
+    }
+
+    .hl {
+        display: block;
+        background-color: #fffd99; 
+
+        .lnt::before {
+            content: "*";
+        }
+    }
+}
+
+.kr, .k {
+    font-weight: bold;
+    color: $code-color-keyword;
+}
+
+.kt {
+    font-weight: bold;
+    color: $code-color-type;
+}
+
+.c, .c1 {
+    color: $code-color-comment;   
+}

assets/scss/margin.scss

@@ -0,0 +1,47 @@
+@import "variables.scss";
+@import "mixins.scss";
+
+$margin-width: 30rem;
+$margin-inner-offset: 0.5rem;
+$margin-outer-offset: 1rem;
+
+@mixin below-two-margins {
+    @media screen and
+        (max-width: $container-width-threshold +
+            2 * ($margin-width + $margin-inner-offset + $margin-outer-offset)) {
+        @content;
+    }
+}
+
+@mixin below-one-margin {
+    @media screen and
+        (max-width: $container-width-threshold +
+            ($margin-width + $margin-inner-offset + $margin-outer-offset)) {
+        @content;
+    }
+}
+
+@mixin margin-content {
+    display: block;
+    position: absolute;
+    width: $margin-width;
+    box-sizing: border-box;
+}
+
+@mixin margin-content-left {
+    left: 0;
+    margin-left: -($margin-width + $container-min-padding + $margin-inner-offset);
+
+    @include below-two-margins {
+        display: none;
+    }
+}
+
+@mixin margin-content-right {
+    right: 0;
+    margin-right: -($margin-width + $container-min-padding + $margin-inner-offset);
+
+    @include below-one-margin {
+        display: none;
+    }
+}

assets/scss/mixins.scss

@@ -0,0 +1,13 @@
+@import "variables.scss";
+
+@mixin bordered-block {
+    border: $standard-border;
+    border-radius: .2rem;
+}
+
+@mixin below-container-width {
+    @media screen and (max-width: $container-width-threshold){
+        @content;
+    }
+}
+

assets/scss/search.scss

@@ -0,0 +1,99 @@
+@import "variables.scss";
+@import "mixins.scss";
+
+$search-input-padding: 0.5rem;
+$search-element-padding: 0.5rem 1rem 0.5rem 1rem;
+
+@mixin green-shadow {
+    box-shadow: 0px 0px 5px rgba($primary-color, 0.7);
+}
+
+.stork-wrapper {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.stork-input-wrapper {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+input.stork-input {
+    @include bordered-block;
+    font-family: $font-body;
+    padding: $search-input-padding;
+
+    &:active, &:focus {
+        @include green-shadow;
+        border-color: $primary-color;
+    }
+
+    flex-grow: 1;
+}
+
+.stork-close-button {
+    @include bordered-block;
+    font-family: $font-body;
+    padding: $search-input-padding;
+
+    background-color: $code-color;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+
+    border-left: none;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.stork-output-visible {
+    @include bordered-block;
+
+    border-top: none;
+}
+
+.stork-result, .stork-message, .stork-attribution {
+    padding: $search-element-padding;
+}
+
+.stork-message:not(:last-child), .stork-result  {
+    border-bottom: $standard-border;
+}
+
+.stork-results {
+    margin: 0;
+    padding: 0;
+}
+
+.stork-result {
+    list-style: none;
+
+    &.selected {
+        background-color: $code-color;
+    }
+
+    a:hover {
+        color: black;
+    }
+}
+
+.stork-title, .stork-excerpt {
+    margin: 0;
+}
+
+.stork-excerpt {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.stork-title {
+    font-family: $font-heading;
+    font-size: 1.4rem;
+    text-align: left;
+    width: 100%;
+}
+
+.stork-highlight {
+    background-color: lighten($primary-color, 30%);
+}

assets/scss/sidenotes.scss

@@ -0,0 +1,75 @@
+@import "variables.scss";
+@import "mixins.scss";
+@import "margin.scss";
+
+$sidenote-padding: 1rem;
+$sidenote-highlight-border-width: .2rem;
+
+.sidenote {
+    &:hover {
+        .sidenote-label {
+            background-color: $primary-color;
+            color: white;
+        }
+
+        .sidenote-content {
+            border: $sidenote-highlight-border-width dashed;
+            padding: $sidenote-padding -
+                ($sidenote-highlight-border-width - $standard-border-width);
+            border-color: $primary-color;
+        }
+    }
+}
+
+.sidenote-label {
+    border-bottom: .2rem dashed $primary-color;
+}
+
+.sidenote-checkbox {
+    display: none;
+}
+
+.sidenote-content {
+    @include margin-content;
+    @include bordered-block;
+    margin-top: -1.5rem;
+    padding: $sidenote-padding;
+    text-align: left;
+
+    &.sidenote-right {
+        @include margin-content-right;
+    }
+
+    &.sidenote-left {
+        @include margin-content-left;
+    }
+}
+
+.sidenote-delimiter {
+    display: none;
+}
+
+@mixin hidden-sidenote {
+    position: static;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    width: 100%;
+
+    .sidenote-checkbox:checked ~ & {
+        display: block;
+    }
+}
+
+@include below-two-margins {
+    .sidenote-content.sidenote-left {
+        @include hidden-sidenote;
+        margin-left: 0rem;
+    }
+}
+
+@include below-one-margin {
+    .sidenote-content.sidenote-right {
+        @include hidden-sidenote;
+        margin-right: 0rem;
+    }
+}

assets/scss/style.scss

@@ -0,0 +1,264 @@
+@import "variables.scss";
+@import "mixins.scss";
+@import "toc.scss";
+
+body {
+  font-family: $font-body;
+  font-size: 1.0rem;
+  line-height: 1.5;
+  margin-bottom: 1rem;
+  text-align: justify;
+
+  @include below-container-width {
+    text-align: left;
+  }
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin-bottom: .1rem;
+  margin-top: .5rem;
+  font-family: $font-heading;
+  font-weight: normal;
+  text-align: center;
+
+  a {
+    border-bottom: none;
+
+    &:hover {
+      color: $primary-color;
+    }
+  }
+}
+
+.container {
+  position: relative;
+  margin: auto;
+  width: 100%;
+  max-width: $container-width;
+  box-sizing: border-box;
+
+  @include below-container-width {
+      padding: 0 $container-min-padding 0 $container-min-padding;
+      margin: 0;
+      max-width: $container-width + 2 * $container-min-padding;
+  }
+
+  @include below-two-margins {
+      left: -($margin-width + $margin-inner-offset + $margin-outer-offset)/2;
+  }
+
+  @include below-one-margin {
+      left: 0;
+  }
+}
+
+.button, input[type="submit"] {
+  padding: 0.5rem;
+  background-color: $primary-color;
+  border: none;
+  color: white;
+  transition: color 0.25s, background-color 0.25s;
+  text-align: left;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:hover, &:focus {
+    background-color: white;
+    color: $primary-color;
+  }
+}
+
+nav {
+  width: 100%;
+  margin: 0rem 0rem 1rem 0rem;
+
+  .container {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+
+  a {
+    padding: 0.25rem 0.75rem 0.25rem .75rem;
+    text-decoration: none;
+    color: black;
+    display: inline-block;
+    border-bottom: none;
+    white-space: nowrap;
+  }
+}
+
+.post-subscript {
+  color: #8f8f8f;
+  text-align: center;
+}
+
+.post-content {
+  margin-top: .5rem;
+}
+
+h1 {
+  font-size: 3.0rem;
+}
+
+h2 {
+  font-size: 2.6rem;
+}
+
+h3 {
+  font-size: 2.2rem;
+}
+
+h4 {
+  font-size: 1.8rem;
+}
+
+h5 {
+  font-size: 1.4rem;
+}
+
+h6 {
+  font-size: 1.0rem;
+}
+
+a {
+  color: black;
+  text-decoration: none;
+  border-bottom: .2rem solid $primary-color;
+  transition: color 0.25s;
+
+  &:hover {
+    color: $primary-color;
+  }
+}
+
+img {
+  max-width: 100%
+}
+
+table {
+    @include bordered-block;
+    margin: auto;
+    padding: 0.5rem;
+}
+
+tr {
+    @include below-container-width {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+td {
+    @include below-container-width {
+        overflow-x: auto;
+    }
+    padding: 0.5rem;
+}
+
+div.highlight tr {
+    display: table-row;
+}
+
+hr.header-divider {
+    background-color: $primary-color;
+    height: 0.3rem;
+    border: none;
+    border-radius: 0.15rem;
+}
+
+hr.footer-divider {
+    margin: auto;
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+    border: none;
+    border-bottom: $standard-border;
+    max-width: $container-width;
+
+    @include below-container-width {
+        max-width: 80%;
+    }
+}
+
+ul.post-list {
+    list-style: none;
+    padding: 0;
+
+    li {
+        @include bordered-block;
+        margin-bottom: 1rem;
+        padding: 1rem;
+    }
+
+    p {
+        margin: 0;
+    }
+
+    a.post-title {
+        border-bottom: none;
+        font-size: 1.4rem;
+        font-family: $font-heading;
+        text-align: center;
+        display: block;
+    }
+
+    p.post-wordcount {
+        text-align: center;
+        margin-bottom: 0.6rem;
+    }
+}
+
+.katex-html {
+    white-space: nowrap;
+}
+
+figure {
+    img {
+        max-width: 70%;
+        display: block;
+        margin: auto;
+
+        @include below-container-width {
+            max-width: 100%;
+        }
+    }
+
+    figcaption {
+        text-align: center;
+    }
+
+    &.tiny img {
+        max-height: 15rem;
+    }
+
+    &.small img {
+        max-height: 20rem;
+    }
+
+    &.medium img {
+        max-height: 30rem;
+    }
+}
+
+.twitter-tweet {
+    margin: auto;
+}
+
+.draft-warning {
+    @include bordered-block;
+    padding: 0.5rem;
+    background-color: #ffee99;
+    border-color: #f5c827;
+}
+
+.feather {
+  width: 1rem;
+  height: 1rem;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  fill: currentColor;
+}

assets/scss/toc.scss

@@ -0,0 +1,50 @@
+@import "variables.scss";
+@import "mixins.scss";
+@import "margin.scss";
+
+$toc-color: $code-color;
+$toc-border-color: $code-border-color;
+
+.table-of-contents {
+    @include margin-content;
+    @include margin-content-left;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    margin-bottom: 1rem;
+
+    em {
+        font-style: normal;
+        font-weight: bold;
+        font-size: 1.2em;
+        display: block;
+        margin-bottom: 0.5rem;
+    }
+
+    #TableOfContents > ul {
+        padding-left: 0;
+    }
+
+    nav {
+        margin: 0px;
+    }
+
+    ul {
+        list-style: none;
+        padding-left: 2rem;
+        margin: 0px;
+    }
+
+    a {
+        padding: 0;
+    }
+
+    div.wrapper {
+        @include bordered-block;
+        padding: 1rem;
+        background-color: $toc-color;
+        border-color: $toc-border-color;
+        box-sizing: border-box;
+        max-width: 100%;
+    }
+}

assets/scss/variables.scss

@@ -0,0 +1,16 @@
+$container-width: 45rem;
+$container-min-padding: 1rem;
+$container-width-threshold: $container-width + 2 * $container-min-padding;
+$standard-border-width: .075rem;
+
+$primary-color: #36e281;
+$border-color: #bfbfbf;
+$code-color: #f0f0f0;
+$code-border-color: darken($code-color, 10%);
+
+$font-heading: "Lora", serif;
+$font-body: "Raleway", serif;
+$font-code: "Inconsolata", monospace;
+
+$standard-border: $standard-border-width solid $border-color;
+$code-border: $standard-border-width solid $code-border-color;