From ee087dcfc842bbc8e1b9cdcae80bf7e6e7426669 Mon Sep 17 00:00:00 2001 From: s-ol Date: Mon, 4 Jan 2021 12:24:21 +0100 Subject: move style into root --- root/static/style/$order | 9 ++ root/static/style/browser/text$x-scss.scss | 147 ++++++++++++++++++ root/static/style/canvasapp/text$x-scss.scss | 36 +++++ root/static/style/content/text$x-scss.scss | 166 +++++++++++++++++++++ root/static/style/defs/text$x-scss.scss | 49 ++++++ root/static/style/footer/text$x-scss.scss | 43 ++++++ root/static/style/header/text$x-scss.scss | 81 ++++++++++ root/static/style/print/text$x-scss.scss | 45 ++++++ root/static/style/reset/text$x-scss.scss | 72 +++++++++ root/static/style/sidenotes/text$x-scss.scss | 73 +++++++++ .../text$moonscript -> fn -> text$x-scss.moon | 7 + scss/_browser.scss | 147 ------------------ scss/_canvasapp.scss | 36 ----- scss/_content.scss | 166 --------------------- scss/_defs.scss | 49 ------ scss/_footer.scss | 43 ------ scss/_header.scss | 81 ---------- scss/_print.scss | 45 ------ scss/_reset.scss | 72 --------- scss/_sidenotes.scss | 73 --------- scss/codemirror.scss | 73 --------- scss/hljs.scss | 110 -------------- scss/main.scss | 11 -- 23 files changed, 728 insertions(+), 906 deletions(-) create mode 100644 root/static/style/$order create mode 100644 root/static/style/browser/text$x-scss.scss create mode 100644 root/static/style/canvasapp/text$x-scss.scss create mode 100644 root/static/style/content/text$x-scss.scss create mode 100644 root/static/style/defs/text$x-scss.scss create mode 100644 root/static/style/footer/text$x-scss.scss create mode 100644 root/static/style/header/text$x-scss.scss create mode 100644 root/static/style/print/text$x-scss.scss create mode 100644 root/static/style/reset/text$x-scss.scss create mode 100644 root/static/style/sidenotes/text$x-scss.scss create mode 100644 root/static/style/text$moonscript -> fn -> text$x-scss.moon delete mode 100644 scss/_browser.scss delete mode 100644 scss/_canvasapp.scss delete mode 100644 scss/_content.scss delete mode 100644 scss/_defs.scss delete mode 100644 scss/_footer.scss delete mode 100644 scss/_header.scss delete mode 100644 scss/_print.scss delete mode 100644 scss/_reset.scss delete mode 100644 scss/_sidenotes.scss delete mode 100644 scss/codemirror.scss delete mode 100644 scss/hljs.scss delete mode 100644 scss/main.scss 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 diff --git a/scss/_browser.scss b/scss/_browser.scss deleted file mode 100644 index 89628fd..0000000 --- a/scss/_browser.scss +++ /dev/null @@ -1,147 +0,0 @@ -.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/scss/_canvasapp.scss b/scss/_canvasapp.scss deleted file mode 100644 index 2eb1a42..0000000 --- a/scss/_canvasapp.scss +++ /dev/null @@ -1,36 +0,0 @@ -.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/scss/_content.scss b/scss/_content.scss deleted file mode 100644 index 937b02b..0000000 --- a/scss/_content.scss +++ /dev/null @@ -1,166 +0,0 @@ -.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/scss/_defs.scss b/scss/_defs.scss deleted file mode 100644 index 40804b2..0000000 --- a/scss/_defs.scss +++ /dev/null @@ -1,49 +0,0 @@ -$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/scss/_footer.scss b/scss/_footer.scss deleted file mode 100644 index 721ff12..0000000 --- a/scss/_footer.scss +++ /dev/null @@ -1,43 +0,0 @@ -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/scss/_header.scss b/scss/_header.scss deleted file mode 100644 index a51457f..0000000 --- a/scss/_header.scss +++ /dev/null @@ -1,81 +0,0 @@ -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/scss/_print.scss b/scss/_print.scss deleted file mode 100644 index c221fa4..0000000 --- a/scss/_print.scss +++ /dev/null @@ -1,45 +0,0 @@ -.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 deleted file mode 100644 index d157fcf..0000000 --- a/scss/_reset.scss +++ /dev/null @@ -1,72 +0,0 @@ -* { - 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/scss/_sidenotes.scss b/scss/_sidenotes.scss deleted file mode 100644 index 0b9effe..0000000 --- a/scss/_sidenotes.scss +++ /dev/null @@ -1,73 +0,0 @@ -$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 deleted file mode 100644 index fd50b00..0000000 --- a/scss/codemirror.scss +++ /dev/null @@ -1,73 +0,0 @@ -/* - 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/hljs.scss b/scss/hljs.scss deleted file mode 100644 index 0acf4a2..0000000 --- a/scss/hljs.scss +++ /dev/null @@ -1,110 +0,0 @@ -/* - -vim-hybrid theme by w0ng (https://github.com/w0ng/vim-hybrid) - -*/ - -/*background color*/ -.hljs { - background: #1d1f21; - border-radius: 6px; - padding: 0.2em 0.5em; - white-space: nowrap; -} - -pre > .hljs { - display: block; - overflow-x: auto; - padding: 1em; - white-space: pre-wrap; - margin: 0 2em; -} - -/*selection color*/ -.hljs::selection, -.hljs span::selection { - background: #373b41; -} - -.hljs::-moz-selection, -.hljs span::-moz-selection { - background: #373b41; -} - -/*foreground color*/ -.hljs { - color: #c5c8c6; -} - -/*color: fg_yellow*/ -.hljs-title, -.hljs-name { - color: #f0c674; -} - -/*color: fg_comment*/ -.hljs-comment, -.hljs-meta, -.hljs-meta .hljs-keyword { - color: #707880; -} - -/*color: fg_red*/ -.hljs-number, -.hljs-symbol, -.hljs-literal, -.hljs-deletion, -.hljs-link { - color: #cc6666 -} - -/*color: fg_green*/ -.hljs-string, -.hljs-doctag, -.hljs-addition, -.hljs-regexp, -.hljs-selector-attr, -.hljs-selector-pseudo { - color: #b5bd68; -} - -/*color: fg_purple*/ -.hljs-attribute, -.hljs-code, -.hljs-selector-id { - color: #b294bb; -} - -/*color: fg_blue*/ -.hljs-keyword, -.hljs-selector-tag, -.hljs-bullet, -.hljs-tag { - color: #81a2be; -} - -/*color: fg_aqua*/ -.hljs-subst, -.hljs-variable, -.hljs-template-tag, -.hljs-template-variable { - color: #8abeb7; -} - -/*color: fg_orange*/ -.hljs-type, -.hljs-built_in, -.hljs-builtin-name, -.hljs-quote, -.hljs-section, -.hljs-selector-class { - color: #de935f; -} - -.hljs-emphasis { - font-style: italic; -} - -.hljs-strong { - font-weight: bold; -} diff --git a/scss/main.scss b/scss/main.scss deleted file mode 100644 index 9b6e6ce..0000000 --- a/scss/main.scss +++ /dev/null @@ -1,11 +0,0 @@ -@import 'defs'; -@import 'reset'; -@import 'hljs'; -@import 'codemirror'; -@import 'header'; -@import 'footer'; -@import 'browser'; -@import 'content'; -@import 'sidenotes'; -@import 'canvasapp'; -@import 'print'; -- cgit v1.2.3