move style into root

11 files changed, 728 insertions, 0 deletions

diff --git a/root/static/style/$order b/root/static/style/$order
new file mode 100644
index 0000000..655aac7
--- /dev/null
+++ b/root/static/style/$order
@@ -0,0 +1,9 @@
+defs
+reset
+header
+footer
+browser
+content
+sidenotes
+canvasapp
+print
diff --git a/root/static/style/browser/text$x-scss.scss b/root/static/style/browser/text$x-scss.scss
new file mode 100644
index 0000000..89628fd
--- /dev/null
+++ b/root/static/style/browser/text$x-scss.scss
@@ -0,0 +1,147 @@
+.browser {
+  display: flex;
+  flex: 1;
+
+  border-top: 0.2rem solid $gray-bright;
+}
+
+.view {
+  display: flex;
+  flex-direction: column;
+
+  flex: 1 0 auto;
+  min-width: 0;
+  max-width: calc(100vw - 1rem);
+
+  &.inspector {
+    top: 0;
+    position: sticky;
+    max-height: calc(100vh - 3rem);
+    color: #c5c8c6;
+
+    @include left-border;
+    border-color: $gray-dark;
+    background: $gray-dark;
+
+    nav {
+      background: inherit;
+    }
+
+    .subnav {
+      display: flex;
+      flex: 0;
+      background: $gray-darker;
+      border-bottom: 2px solid $gray-dark;
+      padding: 0.5em;
+    }
+
+    .content {
+      margin: 0;
+      padding: 0;
+      display: flex;
+      align-self: stretch;
+      background: $gray-darker;
+
+      > * {
+        display: block;
+        margin: 0;
+        padding: 1em;
+        border-radius: 0;
+        border: 0;
+        flex: 1;
+      }
+    }
+
+    .children {
+      margin: 0;
+      padding: 1em;
+
+      align-self: stretch;
+      background: $gray-darker;
+    }
+  }
+
+  nav {
+    position: sticky;
+    top: 0;
+
+    @media print {
+      position: relative;
+      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;
+    }
+
+    > * {
+      margin: 1em;
+      white-space: nowrap;
+    }
+
+    &.thin > * {
+      margin: 0.5em 1em;
+    }
+
+    > .inspect-btn {
+      @include media-small() { display: none; }
+    }
+
+    .tight {
+      margin-left: 0;
+    }
+  }
+
+  .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 {
+    flex: 1 0 auto;
+    overflow: auto;
+    padding: 1em 2em;
+    margin: 0 1em;
+    align-self: flex-start;
+    min-width: 30vw;
+    background: $white;
+
+    position: relative;
+  }
+}
+
+.content {
+  opacity: 1;
+  transition: opacity 150ms;
+
+  body.loading & {
+    opacity: 0;
+  }
+}
diff --git a/root/static/style/canvasapp/text$x-scss.scss b/root/static/style/canvasapp/text$x-scss.scss
new file mode 100644
index 0000000..2eb1a42
--- /dev/null
+++ b/root/static/style/canvasapp/text$x-scss.scss
@@ -0,0 +1,36 @@
+.canvas_app {
+  position: relative;
+
+  display: inline-block;
+
+  .overlay {
+    position: absolute;
+    padding: 1rem;
+
+
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    opacity: 0;
+
+    background: rgba(0, 0, 0, 0.7);
+
+    transition: opacity 300ms;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    > * {
+      margin: 0.5em;
+    }
+
+    a {
+      display: block;
+      color: $gray-bright;
+      font-family: inherit;
+    }
+  }
+}
diff --git a/root/static/style/content/text$x-scss.scss b/root/static/style/content/text$x-scss.scss
new file mode 100644
index 0000000..937b02b
--- /dev/null
+++ b/root/static/style/content/text$x-scss.scss
@@ -0,0 +1,166 @@
+.content {
+  img, video {
+    width: inherit;
+    height: inherit;
+  }
+
+  ul, ol {
+    break-before: avoid-page;
+    break-inside: avoid-page;
+  }
+
+  .wide.markdown,
+  .wide .markdown {
+    max-width: max-content;
+  }
+
+  .markdown {
+    position: relative;
+    max-width: 640px;
+    text-align: justify;
+
+    > 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 > p > a {
+
+    p, a {
+      max-width: 100%;
+    }
+
+    > img, > video {
+      display: block;
+      max-width: 100%;
+      max-height: 50vh;
+
+      padding: 0 2em;
+      box-sizing: border-box;
+    }
+
+    a, p {
+      max-width: 100%;
+    }
+  }
+
+  .markdown {
+    h2 + p,
+    h3 + p,
+    h4 + p,
+    h5 + p,
+    h6 + p {
+      margin-top: 0.2em;
+    }
+  }
+
+  .markdown > ul {
+    margin-block-end: 1em;
+    text-align: none;
+  }
+
+  .embed {
+    display: block;
+    width: inherit;
+    height: inherit;
+    max-width: inherit;
+    break-inside: avoid-page;
+
+    line-height: normal;
+
+    .description {
+      text-align: center;
+    }
+
+    &.inline {
+      display: inline-block;
+    }
+
+    &.desc {
+      display: inline-block;
+      padding: 0.5em;
+      margin: 0.2em;
+      background: $gray-bright;
+    }
+
+    > *:not(.description) {
+      max-width: 100%;
+    }
+  }
+
+  pre, code {
+    text-align: initial;
+  }
+
+  pre > code {
+    @include left-border;
+    border-color: $gray-dark;
+
+    display: block;
+    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;
+  }
+
+  pre.dual-code {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 2rem;
+
+    > code {
+      @include right-border(0.3rem);
+
+      flex: 1;
+      margin: 0;
+    }
+
+    > code + code {
+      @include left-border(0.3rem);
+    }
+  }
+
+  .example, .well {
+    @include left-border;
+
+    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/root/static/style/defs/text$x-scss.scss b/root/static/style/defs/text$x-scss.scss
new file mode 100644
index 0000000..40804b2
--- /dev/null
+++ b/root/static/style/defs/text$x-scss.scss
@@ -0,0 +1,49 @@
+$white:         #ffffff;
+$gray-bright:   #eeeeee;
+$gray-dark:     #303336;
+$gray-darker:   #1d1f21;
+$gray-neutral:  #b9bdc1;
+$gray-success:  #bdddc1;
+$gray-fail:     #ddbdc1;
+
+$break-small: 425px;
+$break-large: 768px;
+
+@mixin media-small() {
+  @media only screen and (max-width: $break-small) { @content; }
+}
+
+@mixin media-medium() {
+  @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) { @content; }
+}
+
+@mixin media-large() {
+  @media only screen and (min-width: $break-large) { @content; }
+}
+
+:root {
+  --white:        #{$white};
+  --gray-bright:  #{$gray-bright};
+  --gray-dark:    #{$gray-dark};
+  --gray-darker:  #{$gray-darker};
+  --gray-neutral: #{$gray-neutral};
+  --gray-success: #{$gray-success};
+  --gray-fail:    #{$gray-fail};
+
+  --margin-wide: 2rem;
+  @include media-small() {
+    --margin-wide: 0.5rem;
+  }
+}
+
+@mixin left-border($w: 0.6rem) {
+  border-style: solid;
+  border-width: 0 0 0 $w;
+  border-radius: 0 6px 6px 0;
+}
+
+@mixin right-border($w: 0.6rem) {
+  border-style: solid;
+  border-width: 0 $w 0 0;
+  border-radius: 6px 0 0 6px;
+}
diff --git a/root/static/style/footer/text$x-scss.scss b/root/static/style/footer/text$x-scss.scss
new file mode 100644
index 0000000..721ff12
--- /dev/null
+++ b/root/static/style/footer/text$x-scss.scss
@@ -0,0 +1,43 @@
+footer {
+  display: flex;
+  padding: 1rem 2rem;
+  height: 1rem;
+
+  position: sticky;
+  bottom: 0;
+
+  @include media-medium() {
+    position: initial;
+  }
+  @include media-small() {
+    position: initial;
+  }
+  
+  @media print {
+    position: absolute;
+    display: none;
+  }
+
+  color: $gray-bright;
+  background: $gray-dark;
+
+  .icons {
+    flex: 1;
+    display: flex;
+    justify-content: flex-end;
+
+    .iconlink  {
+      filter: invert(.7);
+
+      &:hover {
+        filter: invert(1);
+      }
+
+      > img {
+        height: 1em;
+        margin-left: 0.5em;
+        vertical-align: middle;
+      }
+    }
+  }
+}
diff --git a/root/static/style/header/text$x-scss.scss b/root/static/style/header/text$x-scss.scss
new file mode 100644
index 0000000..a51457f
--- /dev/null
+++ b/root/static/style/header/text$x-scss.scss
@@ -0,0 +1,81 @@
+header {
+  > div {
+    font-family: 'Source Sans Pro', sans-serif;
+    padding: 1rem 2rem;
+    text-align: right;
+
+    color: $gray-bright;
+    background: $gray-dark;
+
+    h1 {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      flex-wrap: wrap;
+      margin: 0;
+      line-height: 5rem;
+
+      font-size: 4rem;
+      font-weight: 200;
+
+      > span {
+        margin-left: auto;
+      }
+
+      .bold {
+        font-weight: 400;
+      }
+
+      > a {
+        height: 5rem;
+      }
+
+      @include media-small() {
+        font-size: 2rem;
+        line-height: 5rem
+      }
+
+      .sun {
+        height: 100%;
+        stroke: currentColor;
+        fill: currentColor;
+
+        .out, .in {
+          animation: spin 2s;
+          animation-iteration-count: 1;
+          transform: scale(1);
+        }
+
+        .in {
+          animation: size 2s;
+        }
+
+        &.spin .circle {
+          animation: none;
+        }
+      }
+    }
+  }
+
+  aside {
+    margin: 0;
+    padding: 0 2rem;
+    color: $gray-bright;
+    background: $gray-darker;
+    line-height: 3em;
+
+    > a {
+      margin-right: 2em;
+    }
+  }
+}
+
+@keyframes spin {
+  0% { transform: rotate3d(0.5, 1, 0, 0turn); }
+  100% { transform: rotate3d(0.5, 1, 0, 1turn); }
+}
+
+@keyframes size {
+  0%, 100% { transform: scale(1); }
+  40%, 60% { transform: scale(1.8); }
+}
diff --git a/root/static/style/print/text$x-scss.scss b/root/static/style/print/text$x-scss.scss
new file mode 100644
index 0000000..c221fa4
--- /dev/null
+++ b/root/static/style/print/text$x-scss.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/root/static/style/reset/text$x-scss.scss b/root/static/style/reset/text$x-scss.scss
new file mode 100644
index 0000000..d157fcf
--- /dev/null
+++ b/root/static/style/reset/text$x-scss.scss
@@ -0,0 +1,72 @@
+* {
+  font-weight: inherit;
+  font-style: inherit;
+  font-family: inherit;
+  color: inherit;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body, html, h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+  padding: 0;
+}
+
+h1, h2, h3, h4, h5, h6 { font-weight: bold; }
+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, strong { font-weight: bold; }
+em, i { font-style: italic; }
+hr { clear: both; }
+ul { margin: 0; padding-inline-start: 2em; }
+
+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: $gray-bright;
+  font-family: sans-serif;
+
+  min-height: 100vh;
+}
+
+a {
+  display: inline-block;
+  font-size: 1em;
+  font-weight: bold;
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  cursor: pointer;
+
+  &:hover {
+    filter: invert(40%);
+    text-decoration-color: currentColor;
+  }
+
+  transition: filter 500ms, text-decoration-color 500ms;
+}
+
+::selection {
+  background: $gray-dark;
+  color: $gray-bright;
+  padding: 1em;
+}
diff --git a/root/static/style/sidenotes/text$x-scss.scss b/root/static/style/sidenotes/text$x-scss.scss
new file mode 100644
index 0000000..0b9effe
--- /dev/null
+++ b/root/static/style/sidenotes/text$x-scss.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/root/static/style/text$moonscript -> fn -> text$x-scss.moon b/root/static/style/text$moonscript -> fn -> text$x-scss.moon
new file mode 100644
index 0000000..d952acf
--- /dev/null
+++ b/root/static/style/text$moonscript -> fn -> text$x-scss.moon
@@ -0,0 +1,7 @@
+=>
+  scss = ''
+
+  for fileder in *@children
+    scss ..= fileder\gett 'text/x-scss'
+
+  scss