{} -} - -

{ - article { - border-top: 3px solid var(--accent-line-color); - box-sizing: border-box; - flex: 1; - max-width: 56em; /* Equivalent to 50em on 19px font-size */ - margin-bottom: 1em; - overflow: auto; - padding: 0 1em; - } - article { - margin-left: auto; - margin-right: auto; - } - .noMaxWidth { max-width: initial; } - - {} -

{} - - {} - {} - {} - {} - {} - - - - - -

- - - - - - .no-wrap { - color: inherit; - vertical-align: baseline; - white-space: nowrap; - } - - -} - - { - -{ - .gap, .gap-small { - background-color: var(--body-bg); - margin: 0 -1em; - } - .gap { height: 1.5em; } - .gap-small { height: 0.5em; } -} -} - - { - -{ - article > footer { - margin: 0 -1em; - padding: 0.5em; - border: 3px solid var(--accent-line-color); - border-left: none; - border-right: none; - } -} -} - - { - -{ - #contents-container { float: right; margin-left: 2.5em; background-color: var(--bg-color); padding-right: 0.5em; } - #contents-container > h2 { margin-top: -1rem; } -} -} - - { - -{ - #pagenav { - filter: opacity(64%); - font-size: 0.8em; - margin: 0 0 3rem 2rem; - } - #pagenav strong, #pagenav a { white-space: nowrap; } - #pagenav + h2, #pagenav + h3, #pagenav + h4 { margin-top: 0; } - - #pagenav-breadcrumb { font-weight: bold; } - #pagenav-breadcrumb em { font-weight: normal; } -} -} - - { - -{ - .special-par { - position: relative; - padding: 0.5em; - padding-left: calc(32px + 1em); - } - .question-par { border-left: 2px solid #4a85cb; } - .warn-par { border: 2px dashed #fac848; } - .important-par { border: 2px solid #f46062; } - .special-par-icon { vertical-align: middle; } - .special-par > .special-par-icon { - position: absolute; - left: 0.5em; - top: calc(50% - 16px); - } -} -} - - { - { - .exercise-solution { - float: right; - font-weight: bold; - } - - /* Slightly smaller than browser defaults https://stackoverflow.com/a/70720104/12036073 https://stackoverflow.com/a/47560151/12036073 */ - h2 ~ .exercise-solution { font-size: 1.4em; margin-top: 0.6em; } - h3 ~ .exercise-solution { font-size: 1.1em; margin-top: 0.8em; } -} -} - - { - -{ - { - #about-image { - float: right; - margin-right: 1em; - margin-top: 2em; - max-width: 7.6em; - } - } -} -} - - { - h1, h2, h3, h4, h5, h6 { - color: var(--header-color); - display: inline-block; - line-height: 1.25em; - border-bottom: 2px solid var(--border-color); - } - h1 { display: block; font-size: 1.7em; margin-block-end: 0.5em; } - - h1 + *, h1 ~ h1, h2 + a + *, h3 + a + *, h4 + a + *, h5 + a + *, h6 + a + * { - margin-top: 0; - } - .h-anchor { color: var(--fg-color); border: none; } - - /* Slightly smaller than browser defaults https://stackoverflow.com/a/70720104/12036073 */ - h2 + .h-anchor { font-size: 1.4em; } - h3 + .h-anchor { font-size: 1.1em; } -} - - { - a, a strong { - border-bottom: 1px dashed; - color: var(--a-color); - text-decoration: none; - } - sup a, dt a { border: none; } - a * { color: var(--fg-color); } - a:hover, a strong:hover { color: var(--a-hover-color); } -} - - { - i, em { color: var(--em-color); } -} - - { - strong { color: var(--strong-color); } -} - - { - blockquote { - border-left: .25em solid var(--blockquote-border-color); - color: var(--blockquote-color); - margin: 0; - margin-top: 0; - margin-bottom: 16px; - padding: 0 1em; - } - blockquote > :first-child { margin-top: 0; } - blockquote > :last-child { margin-bottom: 0; } -} - - { - dt, dd { - border: 2px solid var(--border-color); - border-bottom: none; - border-top: none; - padding: 0 0.5em; - } - dt { font-size: 1.2em; padding-top: 0.2em; } - dt * { vertical-align: middle; } - dd { - line-height: 1.5em; - margin-bottom: 1em; - margin-left: 0; - padding-bottom: 0.4em; - padding-left: 49px; - } -} - - { - img { - box-sizing: border-box; - max-width: 100%; - } - img, hr { border: 1px solid var(--border-color); } - dt img, .svg { box-sizing: border-box; max-height: 1em; } - .pixelated-render { image-rendering: pixelated; } - .oldschool-badge { height: 38px; } - .flag { max-width: 1.3em; } /* Compatibility with Chrome 49.0.2623.112 (for old machines) */ - - .file-type-icon { min-width: 1.3em; vertical-align: middle; } - .borderless, .oldschool-badge, .file-type-icon { border: none; } -} - - { - /* The following CSS is a modified version of sindresorhus's github-markdown-css repo: https://github.com/sindresorhus/github-markdown-css */ - code, pre { - font-family: monospace; - font-size: 85%; - } - - { - pre { - overflow: auto; - word-break: normal; - word-wrap: normal; - } - } - - { - code { - background-color: var(--pre-bg-color); - margin: 0; - padding: 0 0.4em; - } - pre code { - border: 0; - display: inline-block; - font-size: 100%; - overflow: visible; - padding: 0; - word-wrap: normal; - } - pre > code { - white-space: pre-wrap; - word-break: break-all; - padding: 0.9em; - width: 100%; - box-sizing: border-box; - } - - table code { - font-size: 0.7em; - white-space: normal; - } - dd code { font-size: 0.8em; } - } - - {} - .language-terminal { - color: var(--terminal-fg); - background-color: var(--terminal-bg); - } -} - - { - table { - border-spacing: 0; - border-collapse: collapse; - margin: 1em 0; - overflow: auto; - } - table td, table th { word-break: normal !important; } - table td:not(:first-of-type), table th:not(:first-of-type) { - border-left: 2px dashed var(--table-border-color); - } - table td, table th { padding: 0.5em; } - table th { - font-size: 1.1em; - font-weight: bold; - } - table td:empty { height: 1em; } - - table tr { - background-color: var(--tr-bg-color); - } - thead tr { - border-bottom: 2px dashed var(--table-border-color); - } - table tr:nth-child(2n), thead tr { - background-color: var(--alternating-row-color); - } -} - -/* Small screen support */ - -@media screen and ((max-width: 610px) or (max-height: 610px)) { - article { - border-top: none; - max-width: calc(100vw - 16px - 3px); - } - table td, table th { word-break: break-all; } - - #about-image { max-width: 4.38em; } - - #content-wrapper { flex-direction: column; } - #sidebar { - max-width: initial; - margin: 0; - } - #sidebar > * { border-right: none; } - .sidebar-hidden { position: initial; } - .sidebar-hidden > :not(#header) { display: none; } - .sidebar-hidden + .noMaxWidth { margin-top: 0; } - /* page-width.js */ - #changeWidthBtn { display: none; } -} - -/* Printing support */ - -@media print { - h2 + a img, h3 + a img, h4 + a img, h5 + a img, h6 + a img, - nav, #scrollBtn, .gap, .gap-small { - display: none !important; - } - - body { margin: 0; } - body, article { - background-color: white; - border: none !important; - } - - pre, code { white-space: pre-wrap !important; } - .language-terminal { color: var(--fg-color); background-color: var(--bg-color); } - .slide, .absolute-slide { transform: none !important; margin: 0; } -} - - { - { - #expandNavbarBtn { float: right; margin-left: 1em; } - .sidebar-hidden { min-height: auto; position: absolute; } - .sidebar-hidden > :not(#header) { display: none; } - .sidebar-hidden + .noMaxWidth { margin-top: 6em; } - } - - { - #scrollBtn { - font-size: 1.66rem; - padding: 0 0.15em; - bottom: 1rem; - right: 1rem; - z-index: 1; - transition-duration: 0.5s; - background-color: var(--bg-color); - display: none; - position: fixed; - border: 1px solid; - } - } - - { - .clicked-image { - height: 100vh; - width: 100vw; - max-width: none; - max-height: none; - padding: 1em; - background-color: var(--bg-color); - left: 0; - top: 0; - z-index: 2; - border: none; - object-fit: contain; - position: fixed; - } - .body-on-clicked-image { overflow: hidden; } - } - - { - .nodisplay { display: none; } - } -} - - - { - { - .HI-comment { color: var(--hi-comment); } - .HI-const { color: var(--hi-const); } - .HI-string { color: var(--hi-string); } - .HI-char { color: var(--hi-char); } - .HI-number { color: var(--hi-number); } - .HI-bool { color: var(--hi-bool); } - .HI-float { color: var(--hi-float); } - .HI-identifier { color: var(--hi-identifier); } - .HI-function { color: var(--hi-function); } - .HI-statement { color: var(--hi-statement); } - .HI-conditional { color: var(--hi-conditional); } - .HI-repeat { color: var(--hi-repeat); } - .HI-operator { color: var(--hi-operator); } - .HI-keyword { color: var(--hi-keyword); /* Label and Exception are keywords */ } - .HI-preproc { color: var(--hi-preproc); } - .HI-type { color: var(--hi-type); } - .HI-storageclass { color: var(--hi-storageclass); } - .HI-structure { color: var(--hi-structure); } - .HI-typedef { color: var(--hi-typedef); } - .HI-ignore { color: var(--hi-ignore); } - .HI-comment * { color: inherit; } /* If text inside a comment is matched, don't show it */ -} -} diff --git a/src/styles.css b/src/styles.css new file mode 100644 index 0000000..ff394ac --- /dev/null +++ b/src/styles.css @@ -0,0 +1,498 @@ +:root { + --bg-color: white; + --fg-color: black; + + --body-bg: #ebe3d2; + --accent-line-color: #004080; + + --a-color: #336700; + --a-hover-color: #3ea100; + --bg-selection-color: #338fff; + --blockquote-color: #6a737d; + --blockquote-border-color: #dfe2e5; + --border-color: black; + --code-bg-color: var(--hi-bg); + --em-color: black; + --fg-selection-color: white; + --header-color: #006b8f; + --pre-bg-color: var(--hi-bg); + --strong-color: black; + --table-border-color: black; + --tr-bg-color: #fbfdff; + --alternating-row-color: #eef0f2; + + --terminal-fg: black; + --terminal-bg: white; + + /* https://github.com/morhetz/gruvbox/blob/master/autoload/gruvbox.vim */ + --hi-fg: var(--fg-color); + --hi-bg: #f5f5e2; + --hic-gray: #928374; + --hic-red: #fb4934; + --hic-green: #79740e; + --hic-blue: #076678; + --hic-yellow: #b57614; + --hic-purple: #8f3f71; + --hic-aqua: #427b58; + --hic-orange: #af3a03; + + --hi-comment: var(--hic-gray); + --hi-const: var(--hic-purple); + --hi-string: var(--hic-green); + --hi-char: var(--hic-purple); + --hi-number: var(--hic-purple); + --hi-bool: var(--hic-purple); + --hi-float: var(--hic-purple); + --hi-identifier: var(--hic-blue); + --hi-function: var(--hic-green); + --hi-statement: var(--hic-red); + --hi-conditional: var(--hic-red); + --hi-repeat: var(--hic-red); + --hi-operator: var(--hi-fg); + --hi-keyword: var(--hic-red); /* Label and Exception are keywords */ + --hi-preproc: var(--hic-aqua); + --hi-type: var(--hic-yellow); + --hi-storageclass: var(--hic-orange); + --hi-structure: var(--hic-aqua); + --hi-typedef: var(--hic-aqua); + --hi-ignore: var(--hi-fg); +} + +/*## Global ##*/ + +@font-face { + font-family: 'Tabler'; + src: url('/font/tabler-icons-subset.ttf') format('truetype'); +} + +body { + background-color: var(--body-bg); + border-color: var(--border-color); + color: var(--fg-color); + min-height: calc(100vh - 16px); + overflow-wrap: break-word; + + /* Stuff to make sure the font is rendered correctly on Safari + * https://stackoverflow.com/a/56065714/12036073 */ + font-rendering: optimizeLegibility; + font-weight: 400; + -webkit-font-kerning: normal; + -webkit-font-smoothing: antialiased; +} +body, td, th { font-size: 18px; font-family: 'Tabler', sans-serif; } +* { line-height: 1.3em; } + +/*## No-CSS compatibility ##*/ + + /* Inside _header we use , instead of , because if your browser + * doesn't support CSS, we want most stuff to be aligned on a single line, rather than preserve + * the "vertical" layout */ +.br { display: block; } +.brt { display: block; height: 0.8em; } + /* Without CSS, certain stuff look bad or confusing, so with this I can add elements which + * add elements for helping with website usage, but which shouldn't be seen otherwise */ +.nocss-aid { display: none; } + +nav, article { background-color: var(--bg-color); } + +/*## Wrapper ##*/ + +#content-wrapper { + min-height: calc(100vh - 16px); + display: flex; + flex-direction: row; + border-right: 3px solid var(--accent-line-color); +} + +#content-wrapper.content-wrapper-vertical { border: none; flex-direction: column; } +.content-wrapper-vertical > #sidebar { max-width: initial; margin: 0; } +.content-wrapper-vertical .sidebar-section:not(#header) { display: none; } +.content-wrapper-vertical > article { margin-top: 8px; } + +/*## Wrapper > Sidebar ##*/ + +#sidebar { + background-color: var(--body-bg); + font-size: 1.2em; + margin-right: 8px; + max-width: 11.2em; +} +#sidebar a { border: none; } + +.sidebar-section { + border: 3px solid var(--accent-line-color); + box-sizing: border-box; + padding: 1rem 1rem; +} +.sidebar-section ~ .sidebar-section { margin-top: 8px; } + +/*### Wrapper > Sidebar > header ###*/ + +#header { border-right: none; + font-size: 1.5em; +} +#expandNavbarBtn { float: right; margin-left: 1em; } + +/*### Wrapper > Sidebar > index ###*/ + +#index { border-right: none; border-bottom: none; } +.index-list { + margin: 0 0 0.5em 0.3em; + padding-left: 0.5em; + display: block; + border-left: 2px solid var(--border-color); +} +.index-list-item, .index-list-item:hover { + line-height: 1.2em; + display: block; /* Compatibility with Chrome 49.0.2623.112 (for old machines) */ +} + +/*### Wrapper > Sidebar > settingsWrapper ###*/ + +#settingsWrapper { border-top: none; border-bottom: none; + font-size: 1.2em; + line-height: 1em; +} +#settingsWrapper > .setting-btn { font-size: 0.5em; } + +/*### Wrapper > Sidebar > footer ###*/ + +#footer { border-left: none; border-top: none; + font-size: 0.7em; + overflow-x: hidden; + white-space: nowrap; +} + +/*## Wrapper > Article ##*/ + +article { + border-top: 3px solid var(--accent-line-color); + box-sizing: border-box; + flex: 1; + max-width: 56em; /* Equivalent to 50em on 19px font-size */ + margin-bottom: 1em; + overflow: auto; + padding: 0 1em; + + margin-left: auto; + margin-right: auto; +} +.article-wide { + max-width: initial; + margin-left: initial; + margin-right: initial; +} + +/*### Wrapper > Article > page navigation ###*/ + +#pagenav { + filter: opacity(64%); + font-size: 0.8em; + margin: 0 0 3rem 2rem; +} +#pagenav + h2, #pagenav + h3, #pagenav + h4 { margin-top: 0; } + +/*### Wrapper > Article > contents ###*/ + +#contents-container { + float: right; + margin-left: 2.5em; + background-color: var(--bg-color); + padding-right: 0.5em; +} +#contents-container > h2 { margin-top: -1rem; } + +/*### Wrapper > Article > section gap ###*/ + +.gap, .gap-small { + background-color: var(--body-bg); + margin: 0 -1em; +} +.gap { height: 1.5em; } +.gap-small { height: 0.5em; } + +/*### Wrapper > Article > special paragraphs ###*/ + +.special-par { + position: relative; + padding: 0.5em; + padding-left: calc(32px + 1em); +} +.special-par-icon { + vertical-align: middle; + position: absolute; + left: 0.5em; + top: calc(50% - 16px); +} + +.question-par { border-left: 2px solid #4a85cb; } +.warn-par { border: 2px dashed #fac848; } +.important-par { border: 2px solid #f46062; } + +/*### Wrapper > Article > page-specific ###*/ + +/*#### Exercise solution ####*/ + +.exercise-solution { float: right; font-weight: bold; } + +/* Slightly smaller than browser defaults https://stackoverflow.com/a/70720104/12036073 https://stackoverflow.com/a/47560151/12036073 */ +h2 ~ .exercise-solution { font-size: 1.4em; margin-top: 0.6em; } +h3 ~ .exercise-solution { font-size: 1.1em; margin-top: 0.8em; } + +/*#### Face in about page ####*/ + +#about-image { + float: right; + margin: 2em 1em 0 0; + max-width: 7.6em; +} + +/*#### Markdown overrides ####*/ + +.footnotes { font-size: 0.9em; margin-top: 3em; } +a[rev="footnote"] { border: none; } + +.language-terminal { + color: var(--terminal-fg); + background-color: var(--terminal-bg); +} + +/*#### No-property ####*/ + +.nodisplay { display: none; } +.no-wrap { + color: inherit; + vertical-align: baseline; + white-space: nowrap; +} + +/*### Wrapper > Article > buttons ###*/ + +.btn:hover { cursor: pointer; } +.btn:active { transform: scale(0.9); } + +.setting-btn { + text-align: center; + display: inline-block; + line-height: 1em; + border: 1px solid var(--border-color); + padding: 0.4em; +} + +.btn, .h-anchor { + /* Thanks https://stackoverflow.com/a/4407335/12036073 */ + + -webkit-touch-callout: none; /* iOS Safari */ + -webkit-user-select: none; /* Safari */ + -khtml-user-select: none; /* Konqueror HTML */ + -moz-user-select: none; /* Old versions of Firefox */ + -ms-user-select: none; /* Internet Explorer/Edge */ + user-select: none; +} + +/*### Wrapper > Article > footer ###*/ + +article > footer { + margin: 0 -1em; + padding: 0.5em; + border: 3px solid var(--accent-line-color); + border-left: none; + border-right: none; +} + +/*### Wrapper > Article > h, h-anchor ###*/ + +h1, h2, h3, h4, h5, h6 { + color: var(--header-color); + display: inline-block; + line-height: 1.25em; + border-bottom: 2px solid var(--border-color); +} +h1 { display: block; font-size: 1.7em; margin-block-end: 0.5em; } + +h1 + *, h1 ~ h1, .h-anchor + * { margin-top: 0; } +.h-anchor { color: var(--fg-color); border: none; } + +/* Slightly smaller than browser defaults https://stackoverflow.com/a/70720104/12036073 */ +h2 + .h-anchor { font-size: 1.4em; } +h3 + .h-anchor { font-size: 1.1em; } + +/*### Wrapper > Article > a ###*/ + +a, a strong { + border-bottom: 1px dashed; + color: var(--a-color); + text-decoration: none; +} +a:hover, a strong:hover { color: var(--a-hover-color); } +sup a, dt a { border: none; } +a * { color: var(--fg-color); } + +/*### Wrapper > Article > i, em, strong ###*/ + +i, em { color: var(--em-color); } +strong { color: var(--strong-color); } + +/*### Wrapper > Article > blockquote ###*/ + +blockquote { + border-left: 0.25em solid var(--blockquote-border-color); + color: var(--blockquote-color); + margin: 0 0 16px 0; + padding: 0 1em; +} +blockquote > :first-child { margin-top: 0; } +blockquote > :last-child { margin-bottom: 0; } + +/*### Wrapper > Article > dt, dd ###*/ + +dt, dd { + border: 2px solid var(--border-color); + border-bottom: none; + border-top: none; + padding: 0 0.5em; +} +dt { font-size: 1.2em; padding-top: 0.2em; } +dt * { vertical-align: middle; } +dd { + line-height: 1.5em; + margin: 0 0 1em 0; + padding: 0 0 0.4em 49px; +} + +/*### Wrapper > Article > img, hr ###*/ + +img { + box-sizing: border-box; + max-width: 100%; +} +img, hr { border: 1px solid var(--border-color); } +dt img, .svg { box-sizing: border-box; max-height: 1em; } +.pixelated-render { image-rendering: pixelated; } +.oldschool-badge { height: 38px; } +.flag { max-width: 1.3em; } /* Compatibility with Chrome 49.0.2623.112 (for old machines) */ + +.file-type-icon { min-width: 1.3em; vertical-align: middle; } +.borderless, .oldschool-badge, .file-type-icon { border: none; } + +/*### Wrapper > Article > code, pre ###*/ + +/* The following CSS is a modified version of sindresorhus's github-markdown-css repo: https://github.com/sindresorhus/github-markdown-css */ +code, pre { + font-family: monospace; + font-size: 85%; +} + +pre { + overflow: auto; + word-break: normal; + word-wrap: normal; +} + +code { + background-color: var(--pre-bg-color); + margin: 0; + padding: 0 0.4em; +} +pre code { + border: 0; + display: inline-block; + font-size: 100%; + overflow: visible; + padding: 0; + word-wrap: normal; +} +pre > code { + white-space: pre-wrap; + word-break: break-all; + padding: 0.9em; + width: 100%; + box-sizing: border-box; +} + +table code { + font-size: 0.7em; + white-space: normal; +} +dd code { font-size: 0.8em; } + +.HI-comment { color: var(--hi-comment); } +.HI-const { color: var(--hi-const); } +.HI-string { color: var(--hi-string); } +.HI-char { color: var(--hi-char); } +.HI-number { color: var(--hi-number); } +.HI-bool { color: var(--hi-bool); } +.HI-float { color: var(--hi-float); } +.HI-identifier { color: var(--hi-identifier); } +.HI-function { color: var(--hi-function); } +.HI-statement { color: var(--hi-statement); } +.HI-conditional { color: var(--hi-conditional); } +.HI-repeat { color: var(--hi-repeat); } +.HI-operator { color: var(--hi-operator); } +.HI-keyword { color: var(--hi-keyword); /* Label and Exception are keywords */ } +.HI-preproc { color: var(--hi-preproc); } +.HI-type { color: var(--hi-type); } +.HI-storageclass { color: var(--hi-storageclass); } +.HI-structure { color: var(--hi-structure); } +.HI-typedef { color: var(--hi-typedef); } +.HI-ignore { color: var(--hi-ignore); } +.HI-comment * { color: inherit; } /* If text inside a comment is matched, don't show it */ + +/*### Wrapper > Article > table ###*/ + +table { + border-collapse: collapse; + margin: 1em 0; + overflow: auto; +} +td, table th { word-break: normal !important; padding: 0.5em; } +tr { background-color: var(--tr-bg-color); } +th { border: 1px solid var(--table-border-color); font-size: 1.1em; font-weight: bold; } +td { border: 1px dashed var(--table-border-color); } +td:empty { height: 1em; } + +/*## Wrapper > Scroll Button ##*/ + +#scrollBtn { + font-size: 1.66rem; + padding: 0 0.15em; + bottom: 1rem; + right: 1rem; + z-index: 1; + transition-duration: 0.5s; + background-color: var(--bg-color); + display: none; + position: fixed; + border: 1px solid; +} + +/*## Small screen support ##*/ + +@media screen and ((max-width: 610px) or (max-height: 610px)) { + article { max-width: calc(100vw - 16px - 3px); margin-top: 8px; } + table td, table th { word-break: break-all; } + + #about-image { max-width: 4.38em; } + + #content-wrapper { border: none; flex-direction: column; } + #sidebar { max-width: initial; margin: 0; } + /* page-width.js */ + #changeWidthBtn { display: none; } +} + +/*## Printing support ##*/ + +@media print { + h2 + a img, h3 + a img, h4 + a img, h5 + a img, h6 + a img, + nav, #scrollBtn, .gap, .gap-small { display: none !important; } + + body { margin: 0; } + body, article { + background-color: white; + border: none !important; + } + + pre, code { white-space: pre-wrap !important; } + .language-terminal { color: var(--fg-color); background-color: var(--bg-color); } + .slide, .absolute-slide { transform: none !important; margin: 0; } +} -- cgit v1.3.1-23-gd82d