diff options
1 files changed, 49 insertions, 39 deletions
| -rw-r--r-- | src/styles.css | 88 |
diff --git a/src/styles.css b/src/styles.css index 04425e0..a4b1b9d 100644 --- a/src/styles.css +++ b/src/styles.css @@ -62,7 +62,7 @@ --bg-selection-color: #338fff; --blockquote-color: #6a737d; --blockquote-border-color: #dfe2e5; - --body-bg: #dbdbdb; + --body-bg: #ebe3d2; --border-color: black; --code-bg-color: var(--hi-bg); --em-color: black; @@ -109,14 +109,19 @@ /* 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); } - nav, article { background-color: var(--bg-color); } - body, td, th { font: 18px sans-serif; } + nav, article { background-color: var(--bg-color); } + body, td, th { font-size: 18px; font-family: 'Tabler', sans-serif; } * { line-height: 1.3em; } img { @@ -131,8 +136,17 @@ img { .file-icon { min-width: 1.3em; vertical-align: text-bottom; } .borderless, .oldschool-badge, .file-icon { border: none; } - .setting-btn { border: none; vertical-align: middle; } + .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; + } .btn:hover { cursor: pointer; } + .btn:active { transform: scale(0.9); } /* image-show.js */ .clicked-image { @@ -181,18 +195,13 @@ h1, h2, h3, h4, h5, h6 { h1 { display: block; font-size: 1.7em; margin-block-end: 0.5em; } h2 { margin-top: 2.5em; } h3 { margin-top: 2em; } - - .h-anchor { border: none !important; display: inline; } - .h-anchor img { border: none; height: 1.3em; vertical-align: text-bottom; } - .h-anchor img, .icon, .file-icon, .file-wrapper > summary { - /* Since link images are made for dark mode, and have a white-ish - * foreground, this filter makes them black (when in light mode) - */ - filter: invert(1) brightness(0); - } 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; } /* The following CSS is a modified version of sindresorhus's github-markdown-css repo: https://github.com/sindresorhus/github-markdown-css */ code, pre { @@ -219,8 +228,8 @@ code, pre { word-wrap: normal; } pre > code { - white-space: pre; - word-break: normal; + white-space: pre-wrap; + word-break: break-all; padding-right: 0.9em; } table code { @@ -311,7 +320,6 @@ dt, dd { #sidebar > :not(:first-child) { margin-top: 1.5rem; } #sidebar a { border: none; } - #header, #footer { font-family: Arial; } #header { border-right: none; font-size: 1.5em; @@ -325,7 +333,16 @@ dt, dd { border-bottom: none; margin: 0.58em 0 1em 0; font-size: 1.2em; + line-height: 1em; } + .setting-btn { + text-align: center; + display: inline-block; + line-height: 1em; + border: 1px solid var(--border-color); + padding: 0.2em 0.3em 0.4em; + } + #settingsWrapper > .setting-btn { font-size: 0.5em; } #footer { font-size: 0.7em; overflow-x: hidden; @@ -335,7 +352,7 @@ dt, dd { #footer > * { white-space: nowrap; } /* expand-navbar.js */ - #expandNavbarBtn { float: right; margin: 0.25em 0 0 1em; } + #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; } @@ -359,19 +376,18 @@ dt, dd { font-size: 0.8em; margin: 0 0 3rem 2rem; } - #pagenav > * { - white-space: nowrap; - } + #pagenav > * { white-space: nowrap; } + #pagenav + h2, #pagenav + h3, #pagenav + h4 { margin-top: 0; } /* back-to-top.js */ #scrollBtn { - background-color: transparent; - bottom: 1em; + background-color: var(--bg-color); + bottom: 1rem; border: 1px solid; display: none; - font-size: 1rem; + font-size: 1.66rem; position: fixed; - padding: 0.3em; - right: 1em; + padding: 0 0.15em; + right: 1rem; transition-duration: 0.5s; z-index: 1; } @@ -404,12 +420,13 @@ dt, dd { #about-image { float: right; margin-right: 1em; + margin-top: 2em; max-width: 7.6em; } /* Small screen support */ -@media screen and (max-width: 610px) { +@media screen and ((max-width: 610px) or (max-height: 610px)) { article { border-top: none; max-width: calc(100vw - 16px - 3px); @@ -418,6 +435,7 @@ dt, dd { #about-image { max-width: 4.38em; } + #content-wrapper { flex-direction: column; } #sidebar { max-width: initial; margin: 0; @@ -445,6 +463,7 @@ dt, dd { } pre, code { white-space: pre-wrap !important; } + .slide, .absolute-slide { transform: none !important; margin: 0; } } /* presentation.js */ @@ -452,19 +471,10 @@ dt, dd { /* File tables */ .file-wrapper { margin: 0.5em 0; } - .file-wrapper > summary { - background: url('/img/folder-plus.svg') no-repeat left top; - list-style: none; - padding-left: 1.5em; - user-select: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - } - .file-wrapper[open] > summary { - background: url('/img/folder-minus.svg') no-repeat left top; - } - .file-wrapper > summary:hover { cursor: pointer; } + .file-wrapper > summary { list-style: none; } + .file-wrapper > summary::before { content: '\FF0B'; } + .file-wrapper[open] > summary::before { content: '\FF0D'; } + .file-wrapper > summary:hover { cursor: pointer; } .file-wrapper > .file-list { margin-left: 1.5em; } .file-list { |