diff options
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_browser.scss | 147 | ||||
| -rw-r--r-- | scss/_canvasapp.scss | 36 | ||||
| -rw-r--r-- | scss/_content.scss | 166 | ||||
| -rw-r--r-- | scss/_defs.scss | 49 | ||||
| -rw-r--r-- | scss/_footer.scss | 43 | ||||
| -rw-r--r-- | scss/_header.scss | 81 | ||||
| -rw-r--r-- | scss/_print.scss | 45 | ||||
| -rw-r--r-- | scss/_reset.scss | 72 | ||||
| -rw-r--r-- | scss/_sidenotes.scss | 73 | ||||
| -rw-r--r-- | scss/codemirror.scss | 73 | ||||
| -rw-r--r-- | scss/hljs.scss | 110 | ||||
| -rw-r--r-- | scss/main.scss | 11 |
12 files changed, 0 insertions, 906 deletions
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'; |
