diff options
Diffstat (limited to 'web/source/css')
| -rw-r--r-- | web/source/css/about.css | 8 | ||||
| -rw-r--r-- | web/source/css/base.css | 76 | ||||
| -rw-r--r-- | web/source/css/status.css | 63 |
3 files changed, 78 insertions, 69 deletions
diff --git a/web/source/css/about.css b/web/source/css/about.css index 55318572c..0a2ac763f 100644 --- a/web/source/css/about.css +++ b/web/source/css/about.css @@ -27,12 +27,8 @@ border: $boxshadow-border; border-radius: $br; - .about-section { - ul, ol { - margin-top: 0; - } - - h3, h4 { + .about-section { + h1, h2, h3, h4, h5 { margin-top: 0; } } diff --git a/web/source/css/base.css b/web/source/css/base.css index 0d3c436c8..5198ce6b8 100644 --- a/web/source/css/base.css +++ b/web/source/css/base.css @@ -16,7 +16,12 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */ +/*************************************** +***** SECTION 0: IMPORTS AND FONTS ***** +****************************************/ + @import "modern-normalize/modern-normalize.css"; +@import "./prism.css"; /* noto-sans-regular - latin */ @font-face { @@ -261,6 +266,77 @@ label { cursor: pointer; } +/* + Set our own nice background for + monospace code and pre blocks. +*/ +pre, pre[class*="language-"], +code, code[class*="language-"] { + background-color: $gray2; +} + +/* + Just code on its own inside status + content, ie, `here is some code`. +*/ +code { + padding: 0.25rem; + border-radius: $br-inner; + white-space: pre-wrap; +} + +/* + Restyle Prism code highlighting toolbar + plugin buttons to our own button style. + + We have to use really specific selectors + because of how specific prism.css is. +*/ +div.code-toolbar > div.toolbar { + margin-right: 0.5rem; + display: flex; + gap: 0.25rem; + + > div.toolbar-item { + > span, > button { + color: $button-fg; + background: $button-bg; + font-weight: bold; + box-shadow: $boxshadow; + + &:hover, &:focus { + color: $button-fg; + } + } + + .copy-to-clipboard-button:hover { + background: $button-hover-bg; + } + } +} + +pre, pre[class*="language-"] { + border-radius: $br; + padding: 0.5rem; + white-space: pre; + overflow-x: auto; + + /* + Code inside a pre block, ie., + + ``` + here is some code + ``` + */ + code { + width: 100%; + padding: 0; + white-space: pre; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } +} + /************************************* ***** SECTION 3: UTILITY CLASSES ***** **************************************/ diff --git a/web/source/css/status.css b/web/source/css/status.css index 019fbd0b4..009dd9f2b 100644 --- a/web/source/css/status.css +++ b/web/source/css/status.css @@ -19,7 +19,6 @@ @import "photoswipe/dist/photoswipe.css"; @import "photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css"; @import "plyr/dist/plyr.css"; -@import "./prism.css"; main { background: transparent; @@ -194,68 +193,6 @@ main { line-height: initial; } - pre, code { - background-color: $gray2; - } - - /* - Just code on its own inside status - content, ie, `here is some code`. - */ - code { - padding: 0.25rem; - border-radius: $br-inner; - white-space: pre-wrap; - } - - /* - Restyle Prism code highlighting toolbar - plugin buttons to our own button style. - */ - .code-toolbar .toolbar { - margin-right: 0.5rem; - display: flex; - gap: 0.25rem; - - .toolbar-item { - span, button { - color: $button-fg; - background: $button-bg; - font-weight: bold; - } - - .copy-to-clipboard-button, span { - box-shadow: $boxshadow; - } - - .copy-to-clipboard-button:hover, .copy-to-clipboard-button:hover span { - background: $button-hover-bg; - } - } - } - - pre, pre[class*="language-"] { - border-radius: $br; - padding: 0.5rem; - white-space: pre; - overflow-x: auto; - - /* - Code inside a pre block, ie., - - ``` - here is some code - ``` - */ - code { - width: 100%; - padding: 0; - white-space: pre; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - } - } - img { max-width: 100%; margin: 5px auto; |