move style into root

1 files changed, 166 insertions, 0 deletions

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;
+    }
+  }
+}