aboutsummaryrefslogtreecommitdiffstats
path: root/scss
diff options
context:
space:
mode:
Diffstat (limited to 'scss')
-rw-r--r--scss/_browser.scss190
-rw-r--r--scss/_content.scss59
-rw-r--r--scss/_footer.scss6
-rw-r--r--scss/_print.scss45
-rw-r--r--scss/_reset.scss34
-rw-r--r--scss/_sidenotes.scss73
-rw-r--r--scss/codemirror.scss73
-rw-r--r--scss/main.scss3
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';
generated by cgit v1.2.3 (git 2.25.1) at 2026-09-05 18:53:37 +0000