Add base layout, copy SCSS

src/styles/global.scss

@@ -0,0 +1,356 @@
+@import "glitch";
+@import "mixins";
+@import "helpers";
+@import "code";
+
+// Dark-mode selections
+::selection,
+::-moz-selection {
+  background: #444444;
+  color: #ffffff;
+}
+
+// All img tags will use the EXIF data to rotate images
+img {
+  image-orientation: from-image;
+}
+
+html,
+body {
+  max-width: 100%;
+  max-height: 100%;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+
+html {
+  padding: 0;
+  margin: 0;
+  overflow-y: scroll;
+  text-rendering: optimizeLegibility;
+
+  @include for-size(phone-only) {
+    font-size: 10pt;
+  }
+  @include for-size(tablet-portrait-up) {
+    font-size: 12pt;
+  }
+  @include for-size(tablet-landscape-up) {
+    font-size: 14pt;
+  }
+  @include for-size(desktop-up) {
+    font-size: 16pt;
+  }
+  @include for-size(big-desktop-up) {
+    font-size: 18pt;
+  }
+}
+
+body {
+  padding: 0;
+  font-family: "CMU Serif", serif;
+  line-height: 1.5;
+  background: #0e0e0e;
+  color: white;
+
+  display: grid;
+  justify-items: center;
+  align-items: center;
+}
+
+.body-container {
+  max-width: 46em;
+  margin: 0 1em;
+}
+
+p,
+table {
+  margin: 0.5em 0;
+}
+
+header {
+  font-size: 4em;
+  text-align: center;
+  text-transform: lowercase;
+  letter-spacing: 0.1em;
+}
+
+@include for-size(tablet-portrait-up) {
+  header {
+    font-size: 3em;
+  }
+}
+
+header span {
+  letter-spacing: 0;
+}
+
+aside,
+blockquote {
+  margin: 1em 1em 1em 4em;
+}
+
+aside.references:before,
+blockquote:before {
+  display: block;
+  float: left;
+  margin-left: -4rem;
+  color: #808080;
+}
+
+aside.references:before {
+  font-size: 3em;
+  margin-top: -0.5rem;
+  font-family: "Symbola", serif;
+
+  /* OPEN BOOK in text presentation */
+  content: "\1F4D6\FE0E";
+}
+
+blockquote:before {
+  font-size: 4em;
+  margin-top: -1rem;
+
+  content: "“";
+}
+
+h1,
+h2,
+h3,
+h4 {
+  margin-top: 0.5em;
+}
+
+h1 {
+  font-size: 2em;
+}
+
+h2 {
+  font-size: 1.5em;
+}
+
+h3 {
+  font-size: 1.25em;
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-left: 2em;
+}
+
+a,
+hr {
+  color: white;
+}
+
+hr {
+  font-size: 1.5em;
+  margin: 1rem 0;
+  border: none;
+
+  &:before {
+    display: block;
+    text-align: center;
+    content: "❦ ❦ ❦";
+  }
+}
+
+i,
+i *,
+em,
+em * {
+  font-style: italic;
+}
+
+b,
+b *,
+strong,
+strong * {
+  font-weight: bold;
+}
+
+strong,
+strong * {
+  font-style: italic;
+}
+
+ul,
+ol,
+dl {
+  margin: 0.5em 0 0.5em 2em;
+}
+
+ul ul,
+ul ol,
+ul dl,
+ol ul,
+ol ol,
+ol dl,
+dl ul,
+dl ol,
+dl dl {
+  margin: 0 0 0 2em;
+  list-style: circle outside none;
+}
+
+ul {
+  list-style: disc outside none;
+}
+
+ol {
+  list-style: decimal outside none;
+}
+
+sub {
+  vertical-align: sub;
+  font-size: 0.75em;
+}
+
+sup {
+  vertical-align: super;
+  font-size: 0.75em;
+}
+
+nav {
+  text-align: center;
+  font-family: "CMU Typewriter Text", monospace, monospace;
+  font-size: 1.25em;
+  color: #808080;
+
+  a {
+    color: white;
+  }
+}
+
+.post_summary {
+  clear: both;
+}
+
+.post_date {
+  float: right;
+  margin: 0 0 1em 2em;
+  line-height: 1;
+  text-align: center;
+  text-transform: uppercase;
+  border: thin solid white;
+  border-width: thin 0;
+  padding: 0.25em 0;
+
+  a {
+    text-decoration: none;
+  }
+
+  .date {
+    font-size: 2em;
+  }
+}
+
+.post_combo {
+  margin-top: 0.75em;
+
+  > h2 {
+    display: inline;
+  }
+}
+
+.post_image {
+  max-width: 30%;
+  margin: 0.5em;
+  vertical-align: middle;
+}
+
+.post_image_half {
+  width: 50%;
+  vertical-align: top;
+}
+
+.post_image_full {
+  width: 100%;
+}
+
+// Show site with proper CSS styling
+html,
+body {
+  visibility: visible !important;
+}
+
+small {
+  opacity: 50%;
+}
+
+figure {
+  margin: 1em;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.column {
+  flex: 50%;
+}
+
+figcaption {
+  font-size: 70%;
+  opacity: 40%;
+  padding-left: 0.4em;
+
+  a {
+    text-decoration: none;
+  }
+}
+
+article {
+  img,
+  video {
+    object-fit: contain;
+    max-width: 100%;
+    max-height: 100%;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.build-revision {
+  font-family: "CMU Typewriter Text", sans-serif;
+
+  a {
+    color: #d2d2d2;
+    text-decoration: none;
+  }
+}
+
+.container {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+
+  .inner-container {
+    max-width: 600px;
+
+    h1 {
+      margin: 0;
+      font-size: 6em;
+      line-height: 1;
+      letter-spacing: -1px;
+    }
+
+    span {
+      font-family: "CMU Typewriter Text", sans-serif;
+
+      a {
+        text-decoration: none;
+        font-style: italic;
+      }
+    }
+  }
+}