Moved actual theme

_scss/_framework.scss

@@ -1,42 +1,50 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+  text-size-adjust: 100%;
+}
+
 html {
-  font-family: $font-family-sans-serif;
+  font-family: $font-family-base;
   font-size: 62.5%;
+  overflow-y: scroll;
 }
 
 body {
   background-color: $color-bg;
   color: $color-text;
   font-size: $font-size-base;
-  line-height: 1.4em;
+  font-synthesis: weight style small-caps;
+  font-weight: 400;
+  line-height: 1.5;
   margin: auto;
-  max-width: 64em;
+  max-width: 52em;
-  padding: 4em;
+  padding: 6em 4em 4em 4em;
+  text-rendering: optimizeLegibility;
 }
 
 @media (max-width: 684px) {
   body {
-    font-size: $font-size-base * .85;
+    font-size: $font-size-base * 0.85;
-    padding: 2em;
+    padding: 4em 1em 2em 1em;
   }
 }
 
-@mixin word-wrap {
-  hyphens: auto;
-  overflow-wrap: break-word;
-  word-break: break-word;
-  word-wrap: break-word;
-}
-
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
-  @include word-wrap;
-
   font-weight: 700;
+  hyphens: auto;
   line-height: 1.1;
+  margin-bottom: 1.5rem;
+  margin-top: 3rem;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  word-wrap: break-word;
 }
 
 h1 {
@@ -63,6 +71,11 @@ h6 {
   font-size: 1em;
 }
 
+p {
+  margin-bottom: 2.5rem;
+  margin-top: 0;
+}
+
 small,
 sub,
 sup {
@@ -75,52 +88,77 @@ hr {
 
 a {
   color: $color-blossom;
+  text-decoration: inherit;
+  transition: color 0.25s;
+
+  &:visited {
+    color: $color-blossom;
+  }
 
   &:active,
   &:focus,
   &:hover {
-    color: $color-fade;
+    opacity: .5;
   }
 }
 
 ul {
+  margin-bottom: 2.5rem;
+  margin-top: 0;
   padding-left: 1.4em;
 }
 
 li {
-  margin-bottom: .4em;
+  margin-bottom: 0.4em;
 }
 
 blockquote {
-  border-left: 3px solid $color-blossom;
+  background-color: $color-bg-alt;
-  font-style: italic;
+  border-left: 5px solid $color-blossom;
-  margin-left: 1.5em;
+  margin-bottom: 2.5rem;
-  padding-left: 1em;
+  margin-left: 0;
+  margin-right: 0;
+  padding: 0.8em 0.8em 0.8em 1em;
 }
 
-img {
+blockquote p {
+  margin-bottom: 0;
+}
+
+img,
+video {
+  display: block;
+  height: auto;
+  margin-bottom: 2.5rem;
+  margin-top: 0;
   max-width: 100%;
 }
 
 pre {
   background-color: $color-bg-alt;
-  border: 1px solid $color-bg-alt;
   border-radius: 4px;
+  border: 1px solid $color-bg-alt;
   display: block;
+  font-size: 0.9em;
+  margin-bottom: 2.5rem;
+  margin-top: 0;
   overflow-x: auto;
   padding: 1em;
 }
 
-code {
+code,
-  background-color: $color-bg-alt;
+kbd,
+samp {
+  background-color: $color-bg-code;
   border-radius: 4px;
-  font-size: .9em;
+  font-size: 0.9em;
-  padding: 0 .5em;
+  padding: 0 0.2em;
   white-space: pre-wrap;
 }
 
-pre > code {
+pre>code {
   background-color: transparent;
+  font-size: 1em;
   padding: 0;
   white-space: pre;
 }
@@ -133,8 +171,8 @@ table {
 
 td,
 th {
-  border-bottom: 1px solid $color-bg-alt;
+  border-bottom: 1px dashed $color-blossom;
-  padding: .5em;
+  padding: 0.5em;
 }
 
 input,
@@ -152,9 +190,9 @@ textarea {
 
 .button,
 button,
-input[type='submit'],
+input[type="submit"],
-input[type='reset'],
+input[type="reset"],
-input[type='button'] {
+input[type="button"] {
   background-color: $color-blossom;
   border: 1px solid $color-blossom;
   border-radius: 1px;
@@ -162,18 +200,18 @@ input[type='button'] {
   color: $color-bg;
   cursor: pointer;
   display: inline-block;
-  padding: 1em;
+  padding: 5px 10;
   text-align: center;
   text-decoration: none;
   white-space: nowrap;
 
   &[disabled] {
     cursor: default;
-    opacity: .5;
+    opacity: 0.5;
   }
 
-  &:focus,
+  &:focus:enabled,
-  &:hover {
+  &:hover:enabled {
     background-color: $color-fade;
     border-color: $color-fade;
     color: $color-bg;
@@ -183,15 +221,15 @@ input[type='button'] {
 
 textarea,
 select,
-input[type] {
+input {
   background-color: $color-bg-alt;
   border: 1px solid $color-bg-alt;
   border-radius: 4px;
   box-shadow: none;
   box-sizing: border-box;
   color: $color-text;
-  margin: .5em;
+  margin-bottom: 10;
-  padding: 1em;
+  padding: 6px 10;
 
   &:focus {
     border: 1px solid $color-blossom;
@@ -199,7 +237,7 @@ input[type] {
   }
 }
 
-input[type='checkbox']:focus {
+input[type="checkbox"]:focus {
   outline: 1px dotted $color-blossom;
 }
 
@@ -208,5 +246,5 @@ legend,
 fieldset {
   display: block;
   font-weight: 600;
-  margin-bottom: .5rem;
+  margin-bottom: 0.5rem;
-}
+}

_scss/_navbar.scss

@@ -0,0 +1,41 @@
+header {
+  background-color: $color-bg;
+  border-bottom: 1px solid $color-header;
+  box-shadow: 0 5px 5px $color-bg;
+  left: 0;
+  line-height: 3.5em;
+  opacity: .975;
+  position: fixed;
+  right: 0;
+  top: 0;
+}
+
+nav {
+  margin: auto;
+  max-width: 60em;
+  padding: 0 4em;
+  text-align: right;
+
+  a {
+    color: $color-text;
+    padding: 0 1em;
+
+    &:visited {
+      color: $color-text;
+    }
+  }
+}
+
+@media (max-width: 684px) {
+  header {
+    box-shadow: none;
+  }
+
+  nav {
+    padding: 0 2em;
+
+    span {
+      display: none;
+    }
+  }
+}

_scss/_print.scss

@@ -0,0 +1,21 @@
+@media print {
+  body {
+    padding: 0;
+  }
+
+  audio,
+  embed,
+  footer,
+  form,
+  header,
+  iframe,
+  nav,
+  object,
+  video {
+    display: none;
+  }
+
+  img {
+    max-width: 500px;
+  }
+}

_scss/_reset.scss

@@ -1,5 +1,6 @@
 html {
   line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
 }
 
 body {
@@ -12,7 +13,7 @@ main {
 
 h1 {
   font-size: 2em;
-  margin: .67em 0;
+  margin: 0.67em 0;
 }
 
 hr {
@@ -31,7 +32,8 @@ a {
 }
 
 abbr[title] {
-  border-bottom: 0;
+  border-bottom: none;
+  text-decoration: underline;
   text-decoration: underline dotted;
 }
 
@@ -60,11 +62,11 @@ sup {
 }
 
 sub {
-  bottom: -.25em;
+  bottom: -0.25em;
 }
 
 sup {
-  top: -.5em;
+  top: -0.5em;
 }
 
 img {
@@ -93,29 +95,29 @@ select {
 }
 
 button,
-[type='button'],
+[type="button"],
-[type='reset'],
+[type="reset"],
-[type='submit'] {
+[type="submit"] {
   -webkit-appearance: button;
 }
 
 button::-moz-focus-inner,
-[type='button']::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
-[type='reset']::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
-[type='submit']::-moz-focus-inner {
+[type="submit"]::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
 button:-moz-focusring,
-[type='button']:-moz-focusring,
+[type="button"]:-moz-focusring,
-[type='reset']:-moz-focusring,
+[type="reset"]:-moz-focusring,
-[type='submit']:-moz-focusring {
+[type="submit"]:-moz-focusring {
   outline: 1px dotted ButtonText;
 }
 
 fieldset {
-  padding: .35em .75em .625em;
+  padding: 0.35em 0.75em 0.625em;
 }
 
 legend {
@@ -135,23 +137,23 @@ textarea {
   overflow: auto;
 }
 
-[type='checkbox'],
+[type="checkbox"],
-[type='radio'] {
+[type="radio"] {
   box-sizing: border-box;
   padding: 0;
 }
 
-[type='number']::-webkit-inner-spin-button,
+[type="number"]::-webkit-inner-spin-button,
-[type='number']::-webkit-outer-spin-button {
+[type="number"]::-webkit-outer-spin-button {
   height: auto;
 }
 
-[type='search'] {
+[type="search"] {
   -webkit-appearance: textfield;
   outline-offset: -2px;
 }
 
-[type='search']::-webkit-search-decoration {
+[type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
@@ -174,4 +176,4 @@ template {
 
 [hidden] {
   display: none;
-}
+}

_scss/_variables.scss

@@ -0,0 +1,9 @@
+$color-bg: #212529;
+$color-bg-alt: hwb(0deg 0% 100% / 20%);
+$color-bg-code: #2e3440;
+$color-blossom: #85BCF2;
+$color-fade: #4e6f8e;
+$color-header: #1b1f22;
+$color-text: #dee2e6;
+$font-family-base: "Jost", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+$font-size-base: 1.8rem;

_scss/base/_fonts.scss

@@ -1,9 +0,0 @@
-@font-face {
-  font-display: swap;
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: normal;
-  src: url('/assets/fonts/open-sans/open-sans-regular.ttf') format('truetype'),
-       url('/assets/fonts/open-sans/open-sans-regular.woff') format('woff'),
-       url('/assets/fonts/open-sans/open-sans-regular.woff2') format('woff2');
-}

_scss/base/_highlight.scss

@@ -1,4 +0,0 @@
-$color00: rgb(255, 0, 0);
-$color01: rgb(255, 255, 204);
-
-@import 'highlight/main';

_scss/base/_main.scss

@@ -1 +0,0 @@
-@import 'components/core';

_scss/base/_normalize.scss

@@ -1 +0,0 @@
-@import 'normalize/main';

_scss/base/_sakura.scss

@@ -1,11 +0,0 @@
-$color-bg-alt: rgba(0, 0, 0, .09);
-$color-bg: rgb(250, 250, 250);
-$color-blossom: rgb(0, 108, 160);
-$color-fade: rgb(13, 78, 120);
-$color-html: rgb(250, 250, 250);
-$color-text: rgb(85, 85, 85);
-
-$font-family-sans-serif: 'Open Sans', sans-serif;
-$font-size-base: 1.6em;
-
-@import 'sakura/main';

_scss/components/_core.scss

@@ -1,14 +0,0 @@
-@import 'utilities/textsizeadjust';
-
-*,
-*::after,
-*::before {
-  @include text-size-adjust(100%);
-
-  box-sizing: border-box;
-}
-
-html {
-  background-color: $color-html;
-  overflow-y: scroll;
-}

_scss/highlight/_main.scss

@@ -1,139 +0,0 @@
-.highlight {
-  .c {
-    font-style: italic;
-  }
-
-  .c1 {
-    font-style: italic;
-  }
-
-  .cm {
-    font-style: italic;
-  }
-
-  .cs {
-    font-style: italic;
-  }
-
-  .err {
-    border: 1px solid $color00;
-  }
-
-  .ge {
-    font-style: italic;
-  }
-
-  .gh {
-    font-weight: bold;
-  }
-
-  .gp {
-    font-weight: bold;
-  }
-
-  .gs {
-    font-weight: bold;
-  }
-
-  .gu {
-    font-weight: bold;
-  }
-
-  .hll {
-    background-color: $color01;
-  }
-
-  .k {
-    font-weight: bold;
-  }
-
-  .kc {
-    font-weight: bold;
-  }
-
-  .kd {
-    font-weight: bold;
-  }
-
-  .kn {
-    font-weight: bold;
-  }
-
-  .kr {
-    font-weight: bold;
-  }
-
-  .nc {
-    font-weight: bold;
-  }
-
-  .ne {
-    font-weight: bold;
-  }
-
-  .ni {
-    font-weight: bold;
-  }
-
-  .nn {
-    font-weight: bold;
-  }
-
-  .nt {
-    font-weight: bold;
-  }
-
-  .ow {
-    font-weight: bold;
-  }
-
-  .s {
-    font-style: italic;
-  }
-
-  .s1 {
-    font-style: italic;
-  }
-
-  .s2 {
-    font-style: italic;
-  }
-
-  .sb {
-    font-style: italic;
-  }
-
-  .sc {
-    font-style: italic;
-  }
-
-  .sd {
-    font-style: italic;
-  }
-
-  .se {
-    font-style: italic;
-    font-weight: bold;
-  }
-
-  .sh {
-    font-style: italic;
-  }
-
-  .si {
-    font-style: italic;
-    font-weight: bold;
-  }
-
-  .sr {
-    font-style: italic;
-  }
-
-  .ss {
-    font-style: italic;
-  }
-
-  .sx {
-    font-style: italic;
-  }
-}

_scss/utilities/_textsizeadjust.scss

@@ -1,14 +0,0 @@
-// Text Size Adjust
-//
-// The text-size-adjust CSS property controls the text inflation algorithm used
-// on some smartphones and tablets. Other browsers will ignore this property.
-//
-// Values: none | auto | <percentage>
-// Default: none
-//
-// https://drafts.csswg.org/css-size-adjust/#adjustment-control
-@mixin text-size-adjust($value: none) {
-  -moz-text-size-adjust: $value;
-  -ms-text-size-adjust: $value;
-  -webkit-text-size-adjust: $value;
-}

assets/css/styles.scss

@@ -1,9 +1,8 @@
 ---
-# Loading site styles
 ---
 
-@import 'base/normalize';
+@import "reset";
-@import 'base/highlight';
+@import "variables";
-@import 'base/sakura';
+@import "framework";
-@import 'base/main';
+@import "navbar";
-@import 'base/fonts';
+@import "print";