Merge branch 'ba'

8 files changed, 388 insertions, 95 deletions

diff --git a/scss/_browser.scss b/scss/_browser.scss
index f282bf4..48af7d4 100644
--- a/scss/_browser.scss
+++ b/scss/_browser.scss
@@ -3,112 +3,144 @@
   flex: 1;
 
   border-top: 0.2rem solid $gray-bright;
+}
 
-  .view {
-    display: flex;
-    flex-direction: column;
-
-    flex: 1 1 0;
-    min-width: 0;
+.view {
+  display: flex;
+  flex-direction: column;
 
-    &.inspector {
-      top: 0;
-      position: sticky;
-      max-height: 100vh;
-      color: #c5c8c6;
+  flex: 1 1 0;
+  min-width: 0;
 
-      @include left-border;
-      border-color: $gray-dark;
-      background: $gray-dark;
+  &.inspector {
+    top: 0;
+    position: sticky;
+    max-height: calc(100vh - 3rem);
+    color: #c5c8c6;
 
-      nav {
-        background: inherit;
-      }
+    @include left-border;
+    border-color: $gray-dark;
+    background: $gray-dark;
 
-      .content {
-        margin: 0;
-        padding: 0;
-        display: flex;
-        background: $gray-darker;
-
-        > * {
-          display: block;
-          margin: 0;
-          padding: 1em;
-          border-radius: 0;
-          border: 0;
-          flex: 1;
-        }
-      }
+    nav {
+      background: inherit;
     }
 
-    nav {
-      position: sticky;
-      top: 0;
+    .subnav {
+      display: flex;
+      flex: 0;
+      background: $gray-darker;
+      border-bottom: 2px solid $gray-dark;
+      padding: 0.5em;
+    }
 
+    .content {
+      margin: 0;
+      padding: 0;
       display: flex;
-      flex: 0 0 auto;
-      flex-wrap: wrap;
-      justify-content: space-between;
-      background: $gray-bright;
-      z-index: 1000;
-
-      > span:first-of-type {
-        flex: 1 0 auto;
-      }
+      align-self: stretch;
+      background: $gray-darker;
 
       > * {
-        margin: 1em;
-        white-space: nowrap;
+        display: block;
+        margin: 0;
+        padding: 1em;
+        border-radius: 0;
+        border: 0;
+        flex: 1;
       }
+    }
 
-      > .inspect-btn {
-        @include media-small() { display: none; }
-      }
+    .children {
+      margin: 0;
+      padding: 1em;
+
+      align-self: stretch;
+      background: $gray-darker;
     }
+  }
 
-    .error-wrap {
-      flex: 0 0 auto;
-      padding: 1em 2em;
-      overflow: hidden;
+  nav {
+    position: sticky;
+    top: 0;
 
-      background: $gray-fail;
+    @media print {
+      position: relative;
+      display: none;
+    }
 
-      &.empty {
-        display: none;
-      }
+    display: flex;
+    flex: 0 0 auto;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    background: $gray-bright;
+    z-index: 1000;
+
+    > span:first-of-type {
+      flex: 1 0 auto;
+    }
 
-      > span {
-        display: inline-block;
-        margin-bottom: 0.5em;
+    > * {
+      margin: 1em;
+      white-space: nowrap;
+    }
 
-        font-weight: bold;
-        color: #f00;
-      }
+    &.thin > * {
+      margin: 0.5em 1em;
+    }
 
-      > pre {
-        margin: 0;
-      }
+    > .inspect-btn {
+      @include media-small() { display: none; }
     }
 
-    .content {
-      flex: 1 1 auto;
-      overflow: auto;
-      padding: 1em 2em;
-      margin: 0 1em;
-      align-self: flex-start;
-      background: var(--white);
+    .tight {
+      margin-left: 0;
+    }
+  }
 
-      position: relative;
+  .error-wrap {
+    flex: 0 0 auto;
+    padding: 1em 2em;
+    overflow: hidden;
+
+    color: $gray-darker;
+    background: $gray-fail;
+
+    &.empty {
+      display: none;
+    }
+
+    > span {
+      display: inline-block;
+      margin-bottom: 0.5em;
+
+      font-weight: bold;
+      color: #f00;
+    }
+
+    > pre {
+      margin: 0;
     }
   }
 
   .content {
-    opacity: 1;
-    transition: opacity 150ms;
+    flex: 1 1 auto;
+    overflow: auto;
+    padding: 1em 2em;
+    margin: 0 1em;
+    align-self: flex-start;
+    min-width: 30vw;
+    background: $white;
+
+    position: relative;
+  }
+}
 
-    body.loading & {
-      opacity: 0;
-    }
+.content {
+  opacity: 1;
+  transition: opacity 150ms;
+
+  body.loading & {
+    opacity: 0;
   }
 }
diff --git a/scss/_content.scss b/scss/_content.scss
index 56a009c..87f515d 100644
--- a/scss/_content.scss
+++ b/scss/_content.scss
@@ -4,18 +4,45 @@
     height: inherit;
   }
 
+  ul, ol {
+    break-before: avoid-page;
+    break-inside: avoid-page;
+  }
+
+  .wide.markdown,
+  .wide .markdown {
+    max-width: max-content;
+  }
+
   .markdown {
-    max-width: 640px;
     position: relative;
+    max-width: 640px;
+    text-align: justify;
 
-    &.fullwidth {
-      max-width: max-content;
+    > blockquote {
+      @include left-border;
+
+      line-height: normal;
+      margin: 1rem var(--margin-wide);
+      padding: 1rem;
+      background: $gray-bright;
+      border-color: $gray-neutral;
     }
   }
 
+  p {
+    orphans: 6;
+    widows: 6;
+  }
+
   .markdown,
   .markdown > p,
-  .markdown > a {
+  .markdown > p > a {
+
+    p, a {
+      max-width: 100%;
+    }
+
     > img, > video {
       display: block;
       max-width: 100%;
@@ -48,6 +75,10 @@
     display: block;
     width: inherit;
     height: inherit;
+    max-width: inherit;
+    break-inside: avoid-page;
+
+    line-height: normal;
 
     .description {
       text-align: center;
@@ -74,12 +105,13 @@
     border-color: $gray-dark;
 
     display: block;
-    border-radius: 6px;
     margin: 0 var(--margin-wide);
     padding: 1em;
     white-space: pre-wrap;
+    break-inside: avoid-page;
     overflow-x: auto;
 
+    line-height: normal;
     background: #1d1f21;
     color: #c5c8c6;
   }
@@ -106,7 +138,24 @@
 
     margin: 1rem var(--margin-wide);
     padding: 1rem;
+    line-height: normal;
     background: $gray-bright;
     border-color: $gray-neutral;
+    break-inside: avoid-page;
+  }
+
+  .well-warning {
+    border-color: $gray-fail;
+  }
+
+  .spacious {
+    h1, h2, h3 {
+      margin-top: 1.7em;
+    }
+
+    h1 + h2,
+    h2 + h3 {
+      margin-top: 0;
+    }
   }
 }
diff --git a/scss/_footer.scss b/scss/_footer.scss
index 3cc3f5a..6cd73c8 100644
--- a/scss/_footer.scss
+++ b/scss/_footer.scss
@@ -1,9 +1,15 @@
 footer {
   display: flex;
   padding: 1rem 2rem;
+  height: 1rem;
 
   position: sticky;
   bottom: 0;
+  
+  @media print {
+    position: absolute;
+    display: none;
+  }
 
   color: $gray-bright;
   background: $gray-dark;
diff --git a/scss/_print.scss b/scss/_print.scss
new file mode 100644
index 0000000..c221fa4
--- /dev/null
+++ b/scss/_print.scss
@@ -0,0 +1,45 @@
+.print-only {
+  display: none;
+
+  @media print {
+    display: block;
+  }
+}
+
+.screen-only {
+  @media print {
+    display: none;
+  }
+}
+
+@media print {
+  h1, h2, h3, h4, h5 {
+    break-after: avoid-page;
+
+    + * {
+      break-before: avoid-page;
+    }
+  }
+
+  .view {
+    flex: 1 0 auto;
+
+    .content {
+      flex: 1 0 auto;
+    }
+  }
+
+  body {
+    background: $white;
+  }
+}
+
+.print-ownpage {
+  break-before: page;
+  break-after: page;
+}
+
+@page {
+  size: a4;
+  margin: 2.5cm 0 2.5cm;
+}
diff --git a/scss/_reset.scss b/scss/_reset.scss
index bb5382d..77990fd 100644
--- a/scss/_reset.scss
+++ b/scss/_reset.scss
@@ -13,21 +13,37 @@ body, html, h1, h2, h3, h4, h5, h6 {
 }
 
 h1, h2, h3, h4, h5, h6 { font-weight: bold; }
-input, select, button { color: initial; }
+h1 { font-size: 1.6em; }
+h2 { font-size: 1.4em; }
+h3 { font-size: 1.17em; }
+h4, h5, h6 { font-size: 1em; }
+
+input, select, button {
+  color: initial;
+  &:disabled {
+    color: graytext;
+  }
+}
 tt, code, kbd, samp { font-family: monospace; }
 code { font-size: 0.8em; }
-b { font-weight: bold; }
+b, strong { font-weight: bold; }
 em, i { font-style: italic; }
-a { font-size: 1em; cursor: pointer; }
 hr { clear: both; }
 ul { margin: 0; }
 
+sup, sub {
+  vertical-align: baseline;
+  position: relative;
+  top: -0.4em;
+}
+sub { top: 0.4em; }
+
 body {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 
-  background: var(--gray-bright);
+  background: $gray-bright;
   font-family: sans-serif;
 
   min-height: 100vh;
@@ -35,17 +51,13 @@ body {
 
 a {
   display: inline-block;
-
+  font-size: 1em;
   font-weight: bold;
   text-decoration: underline;
   text-decoration-color: transparent;
+  cursor: pointer;
 
-  cursor: default;
-  &[href] {
-    cursor: pointer;
-  }
-
-  &[href]:hover {
+  &:hover {
     filter: invert(40%);
     text-decoration-color: currentColor;
   }
diff --git a/scss/_sidenotes.scss b/scss/_sidenotes.scss
new file mode 100644
index 0000000..0b9effe
--- /dev/null
+++ b/scss/_sidenotes.scss
@@ -0,0 +1,73 @@
+$sidenote-width: 14rem;
+
+:root {
+  --sidenote-width: #{$sidenote-width};
+}
+
+.sidenote-container {
+  margin-right: $sidenote-width + 1rem;
+
+  @include media-medium {
+    margin: auto;
+  }
+
+  .sidenote-container & {
+    margin-right: initial;
+    margin: initial;
+  }
+
+  .sidenote {
+    position: absolute;
+    box-sizing: border-box;
+
+    width: $sidenote-width;
+    right: -$sidenote-width - 2rem;
+    padding: 0 1rem;
+
+    color: $gray-dark;
+    border-top: 1px solid $gray-dark;
+    word-break: break-word;
+
+    font-size: 0.8em;
+    line-height: 1.1;
+    text-align: initial;
+    break-inside: avoid-page;
+
+    .hook {
+      position: absolute;
+      top: -4rem;
+      width: 0;
+      height: 0;
+
+      @media print {
+        top: 0;
+      }
+    }
+
+    .ref {
+      display: block;
+      position: absolute;
+
+      width: 1rem;
+      margin-left: -1.2rem;
+      text-align: right;
+    }
+
+    > .markdown > p:first-child {
+      margin-top: 0;
+    }
+
+    a {
+      display: inline;
+    }
+
+    @include media-medium {
+      width: initial;
+      position: initial;
+      right: initial;
+
+      border-bottom: 1px solid $gray-dark;
+      margin: 0.5rem 0;
+    }
+  }
+}
diff --git a/scss/codemirror.scss b/scss/codemirror.scss
new file mode 100644
index 0000000..fd50b00
--- /dev/null
+++ b/scss/codemirror.scss
@@ -0,0 +1,73 @@
+/*
+  vim-hybrid theme by w0ng (https://github.com/w0ng/vim-hybrid)
+*/
+
+/*background color*/
+.CodeMirror.cm-s-hybrid {
+  color: #c5c8c6;
+  background: #1d1f21;
+
+  height: auto;
+  flex: 1;
+
+  /*selection color*/
+  .CodeMirror-selected,
+  .CodeMirror-line::selection,
+  .CodeMirror-line > span::selection,
+  .CodeMirror-line > span > span::selection, {
+    background: #373b41;
+  }
+
+  /*foreground color*/
+  .CodeMirror-cursor {
+    border-color: #c5c8c6;
+  }
+
+  /*color: fg_yellow*/
+  .cm-keyword {
+    color: #f0c674;
+  }
+
+  /*color: fg_comment*/
+  .cm-comment,
+  .cm-meta {
+    color: #707880;
+  }
+
+  /*color: fg_red*/
+  .cm-number,
+  .cm-atom {
+   color: #cc6666
+  }
+
+  /*color: fg_green*/
+  .cm-string,
+  .cm-string-2,
+  .cm-operator {
+    color: #b5bd68;
+  }
+
+  /*color: fg_purple*/
+  .cm-attribute,
+  .cm-propery {
+   color: #b294bb;
+  }
+
+  /*color: fg_blue*/
+  .cm-tag,
+  .cm-qualifier {
+   color: #81a2be;
+  }
+
+  /*color: fg_aqua*/
+  .cm-link,
+  .cm-header,
+  .cm-hr {
+    color: #8abeb7;
+  }
+
+  /*color: fg_orange*/
+  .cm-builtin, {
+    color: #de935f;
+  }
+}
diff --git a/scss/main.scss b/scss/main.scss
index c1e9d38..9b6e6ce 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -1,8 +1,11 @@
 @import 'defs';
 @import 'reset';
 @import 'hljs';
+@import 'codemirror';
 @import 'header';
 @import 'footer';
 @import 'browser';
 @import 'content';
+@import 'sidenotes';
 @import 'canvasapp';
+@import 'print';