From caccfd2898a424b2e249822f2f974dbecb2f1b2e Mon Sep 17 00:00:00 2001 From: f0x Date: Sat, 27 Jul 2024 22:17:43 +0200 Subject: [PATCH] split out base.css, new css bundler config --- web/assets/static-pages/index.html | 12 +- web/source/css/base/fonts.css | 20 + web/source/css/base/main.css | 53 ++ web/source/css/components/account-card.css | 32 + web/source/css/components/column-header.css | 29 + web/source/css/components/emoji.css | 23 + web/source/css/components/forms.css | 68 +++ web/source/css/components/html-elements.css | 61 ++ web/source/css/components/lists.css | 128 ++++ web/source/css/components/prism.css | 51 ++ web/source/css/components/utility.css | 17 + web/source/css/main.css | 31 + web/source/css/pages/error.css | 17 + web/source/css/pages/form.css | 50 ++ web/source/css/pages/oob-token.css | 8 + web/source/css/settings.css | 0 web/source/css/themes/default.css | 40 +- web/source/css_old/base.css | 631 -------------------- web/source/index.js | 19 +- 19 files changed, 623 insertions(+), 667 deletions(-) create mode 100644 web/source/css/base/fonts.css create mode 100644 web/source/css/base/main.css create mode 100644 web/source/css/components/account-card.css create mode 100644 web/source/css/components/column-header.css create mode 100644 web/source/css/components/emoji.css create mode 100644 web/source/css/components/forms.css create mode 100644 web/source/css/components/html-elements.css create mode 100644 web/source/css/components/lists.css create mode 100644 web/source/css/components/prism.css create mode 100644 web/source/css/components/utility.css create mode 100644 web/source/css/pages/error.css create mode 100644 web/source/css/pages/form.css create mode 100644 web/source/css/pages/oob-token.css delete mode 100644 web/source/css/settings.css delete mode 100644 web/source/css_old/base.css diff --git a/web/assets/static-pages/index.html b/web/assets/static-pages/index.html index 8f8662b93..d3340ed31 100644 --- a/web/assets/static-pages/index.html +++ b/web/assets/static-pages/index.html @@ -17,16 +17,8 @@ - - - - - - - - - - + + GoToSocial Testrig Instance - GoToSocial diff --git a/web/source/css/base/fonts.css b/web/source/css/base/fonts.css new file mode 100644 index 000000000..235b8b818 --- /dev/null +++ b/web/source/css/base/fonts.css @@ -0,0 +1,20 @@ +/* noto-sans-regular - latin */ +@font-face { + font-family: "Noto Sans"; + font-weight: 400; + font-display: swap; + font-style: normal; + src: url('../fonts/noto-sans-v27-latin-regular.woff2') format('woff2'), + url('../fonts/noto-sans-v27-latin-regular.woff') format('woff'); +} + +// TODO: do we really need to include the bold variant? +/* noto-sans-700 - latin */ +@font-face { + font-family: "Noto Sans"; + font-weight: 700; + font-display: swap; + font-style: normal; + src: url('../fonts/noto-sans-v27-latin-700.woff2') format('woff2'), + url('../fonts/noto-sans-v27-latin-700.woff') format('woff'); +} */ diff --git a/web/source/css/base/main.css b/web/source/css/base/main.css new file mode 100644 index 000000000..904ed473e --- /dev/null +++ b/web/source/css/base/main.css @@ -0,0 +1,53 @@ +/* + Standard border radius + for nice squircles. +*/ +$br: 0.4rem; + +/* + Border radius for items that + are framed/bordered inside + something with $br, eg avatar, + header img, etc. +*/ +$br-inner: 0.2rem; + +/* + Fork-Awesome 'fa-fw' fixed icon width; + keep in sync with https://github.com/ForkAwesome/Fork-Awesome/blob/a99579ae3e735ee70e51ed62dfcee3172b5b2db7/css/fork-awesome.css#L50 +*/ +$fa-fw: 1.28571429em; + +html, body { + padding: 0; + margin: 0; + background: $bg; + color: $fg; + font-family: "Noto Sans", sans-serif; + scrollbar-color: $orange1 $gray3; +} + +body { + line-height: 1.5em; + position: relative; +} + +a { + color: $link-fg; +} + +/* + Normalize margins of first and last children. + We generally don't want to open a paragraph or + paragraph-like element with a top margin or + close it with a bottom margin. +*/ +main { + p:first-child, ol:first-child, ul:first-child { + margin-top: 0; + } + + p:last-child, ol:last-child, ul:last-child { + margin-bottom: 0; + } +} \ No newline at end of file diff --git a/web/source/css/components/account-card.css b/web/source/css/components/account-card.css new file mode 100644 index 000000000..ded801043 --- /dev/null +++ b/web/source/css/components/account-card.css @@ -0,0 +1,32 @@ +/* Displays account with displayname, username and avatar */ +.account-card { + display: inline-grid; + grid-template-columns: auto 1fr; + grid-template-rows: auto auto; + text-decoration: none; + gap: 0.5rem 1rem; + border-radius: $br; + padding: 0.5rem; + min-width: 40%; + margin-bottom: 0.3rem; + + background: $list-entry-bg; + + &:hover { + background: $list-entry-alternate-bg; + } + + h3 { + align-self: end; + margin: 0; + color: $fg; + } + + img.avatar { + border-radius: 0.5rem; + width: 5rem; + height: 5rem; + object-fit: cover; + grid-row: 1 / span 2; + } +} \ No newline at end of file diff --git a/web/source/css/components/column-header.css b/web/source/css/components/column-header.css new file mode 100644 index 000000000..3950d43e5 --- /dev/null +++ b/web/source/css/components/column-header.css @@ -0,0 +1,29 @@ +/* + Column header that appears at the top + of threads, at the top of sections of + profiles (About, Pinned Posts, etc). +*/ +.col-header { + display: grid; + grid-template-columns: auto 1fr; + gap: 1rem; + + justify-content: start; + align-items: center; + + margin: 0; + background: $profile-bg; + border-top-left-radius: $br; + border-top-right-radius: $br; + padding: 0.75rem; + + a { + justify-self: end; + } + + h1, h2, h3, h4 { + font-size: 1.2rem; + line-height: 1.3rem; + margin: 0; + } +} diff --git a/web/source/css/components/emoji.css b/web/source/css/components/emoji.css new file mode 100644 index 000000000..8050f0731 --- /dev/null +++ b/web/source/css/components/emoji.css @@ -0,0 +1,23 @@ +// Style emoji to fit in-line with text +.emoji { + width: 1.45em; + height: 1.45em; + margin: -0.2em 0.02em 0; + object-fit: contain; + vertical-align: middle; + + @media (prefers-reduced-motion: no-preference) { + /* + Enlarge emojis on hover to give + viewer a good look at them. + */ + transition: 0.1s; + &:hover, &:active { + transform: scale(2); + background-color: $bg; + box-shadow: $boxshadow; + border: $boxshadow-border; + border-radius: $br-inner; + } + } +} diff --git a/web/source/css/components/forms.css b/web/source/css/components/forms.css new file mode 100644 index 000000000..6c8cd35d1 --- /dev/null +++ b/web/source/css/components/forms.css @@ -0,0 +1,68 @@ +input, select, textarea, .input { + box-sizing: border-box; + border: 0.15rem solid $input-border; + border-radius: 0.1rem; + color: $fg; + background: $input-bg; + width: 100%; + font-family: 'Noto Sans', sans-serif; + font-size: 1rem; + padding: 0.3rem; + + &:focus, &:active { + border-color: $input-focus-border; + } + + &:invalid, .invalid & { + border-color: $input-error-border; + } + + &:disabled { + background: transparent; + } + + &::placeholder { + opacity: 1; + color: $fg-reduced + } +} + +.button, button { + border-radius: $br-inner; + color: $button-fg; + background: $button-bg; + box-shadow: $boxshadow; + border: $button-border; + text-decoration: none; + font-size: 1.2rem; + font-weight: bold; + padding: 0.5rem; + border: none; + cursor: pointer; + text-align: center; + font-family: 'Noto Sans', sans-serif; + + &.danger { + color: $button-danger-fg; + background: $button-danger-bg; + + &:hover { + background: $button-danger-hover-bg; + } + } + + &:disabled, + &.disabled { + color: $white2; + background: $gray2; + cursor: not-allowed; + + &:hover { + background: $gray3; + } + } + + &:hover { + background: $button-hover-bg; + } +} \ No newline at end of file diff --git a/web/source/css/components/html-elements.css b/web/source/css/components/html-elements.css new file mode 100644 index 000000000..689fcf039 --- /dev/null +++ b/web/source/css/components/html-elements.css @@ -0,0 +1,61 @@ +/* + Outdent block quotes a bit; use + orange strip for left border. +*/ +blockquote { + padding: 0.5rem 0 0.5rem 0.5rem; + border-left: 0.2rem solid $border-accent; + margin: 0; + font-style: normal; + + /* + Same background color we + use for code blocks + */ + background-color: $gray2; + border-radius: $br; +} + +/* + Nice dashed orange line + for horizontal rules. +*/ +hr { + border: 0; + border-top: 1px dashed $border-accent; +} + +/* + Don't indent definition + lists and definitions. +*/ +dl { + margin: 0; + + dd { + margin-left: 0; + } +} + +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; +} diff --git a/web/source/css/components/lists.css b/web/source/css/components/lists.css new file mode 100644 index 000000000..073c64b43 --- /dev/null +++ b/web/source/css/components/lists.css @@ -0,0 +1,128 @@ +/* + Restyle unordered lists; outdent + and replace dot with orange dot (unless .nodot class applied). +*/ + +ul { + padding-left: 2.5rem; + list-style: none; + + li::before { + content: "\2022"; + color: $border-accent; + font-weight: bold; + display: inline-block; + width: 1.5rem; + margin-left: -1.5rem; + } + + &.nodot { + li::before { + content: initial; + } + } +} + +/* + Mirror the same styling a little bit + for ordered lists by making marker bold. +*/ + +ol { + padding-left: 2.5rem; + + li::marker { + font-weight: bold; + } +} + +/* Tabulated list */ +.list { + display: flex; + flex-direction: column; + + .header, .entry { + padding: 0.5rem; + } + + .header { + border: 0.1rem solid transparent !important; /* for alignment with .entry border padding */ + background: $gray1 !important; + display: flex; + font-weight: bold; + } + + .entries { + display: flex; + flex-direction: column; + + &.scrolling { + height: 20rem; + max-height: 20rem; + overflow: auto; + } + } + + input[type=checkbox] { + margin-left: 0.5rem; + } + + .entry { + display: flex; + flex-wrap: wrap; + background: $list-entry-bg; + border: 0.1rem solid transparent; + + &:nth-child(even) { + background: $list-entry-alternate-bg; + } + + &:hover { + background: $list-entry-hover-bg; + } + + &:active, &:focus, &:hover, &:target { + border-color: $fg-accent; + } + } +} + +/* Extends .list styling for domain-blocklist.tmpl */ +.domain-blocklist { + box-shadow: $boxshadow; + + .entry { + display: grid; + grid-template-columns: max(30%, 10rem) 1fr; + gap: 0.5rem; + align-items: start; + border: $boxshadow-border; + border-top-color: transparent; + + & > div { + display: flex; + align-items: center + } + + .domain a { + font-weight: bold; + text-decoration: none; + display: inline-block; /* so it wraps properly */ + } + + .public_comment p { + margin: 0; + } + } + + .header .domain { + color: $fg; + } +} + +@media screen and (max-width: 30rem) { + .domain-blocklist .entry { + grid-template-columns: 1fr; + gap: 0; + } +} diff --git a/web/source/css/components/prism.css b/web/source/css/components/prism.css new file mode 100644 index 000000000..64bd6164c --- /dev/null +++ b/web/source/css/components/prism.css @@ -0,0 +1,51 @@ +/* + 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; + } +} diff --git a/web/source/css/components/utility.css b/web/source/css/components/utility.css new file mode 100644 index 000000000..d08da2b0a --- /dev/null +++ b/web/source/css/components/utility.css @@ -0,0 +1,17 @@ +.hidden { + display: none; +} + +.nounderline { + text-decoration: none; +} + +.accent { + color: $acc1; +} + +.text-cutoff { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} \ No newline at end of file diff --git a/web/source/css/main.css b/web/source/css/main.css index e69de29bb..7090d4881 100644 --- a/web/source/css/main.css +++ b/web/source/css/main.css @@ -0,0 +1,31 @@ +/* + GoToSocial + Copyright (C) GoToSocial Authors admin@gotosocial.org + SPDX-License-Identifier: AGPL-3.0-or-later + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU Affero General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see . +*/ + +@import "modern-normalize/modern-normalize.css"; /* needs to be the first import */ + +@import "./base/fonts.css"; +@import "./base/main.css"; + +@import "./components/account-card.css"; +@import "./components/emoji.css"; +@import "./components/forms.css"; +@import "./components/lists.css"; +@import "./components/utility.css"; + +@import "./vendor/prism.css"; \ No newline at end of file diff --git a/web/source/css/pages/error.css b/web/source/css/pages/error.css new file mode 100644 index 000000000..c4a9c4a30 --- /dev/null +++ b/web/source/css/pages/error.css @@ -0,0 +1,17 @@ +/* + Error-only page, used by error.tmpl + TODO: unify colors with theming +*/ +section.error { + word-break: break-word; + margin-bottom: 0.5rem; + + pre { + border: 1px solid #ff000080; + padding: 0.5rem; + border-radius: 0.5em; + background-color: #ff000010; + font-size: 1.3em; + white-space: pre-wrap; + } +} diff --git a/web/source/css/pages/form.css b/web/source/css/pages/form.css new file mode 100644 index 000000000..392b97fc5 --- /dev/null +++ b/web/source/css/pages/form.css @@ -0,0 +1,50 @@ +/* + Page with form, used for sign-in/sign-up/authorization flows +*/ +section.with-form { + form { + display: flex; + flex-direction: column; + gap: 1rem; + + padding-bottom: 1rem; + padding-top: 1rem; + + p { + /* + We use gap so we don't + need top + bottom margins. + */ + margin-top: 0; + margin-bottom: 0; + } + + label, input { + padding-left: 0.2rem; + } + + .labelinput { + display: flex; + flex-direction: column; + gap: 0.4rem; + } + + .checkbox { + display: flex; + flex-direction: row-reverse; + gap: 0.4rem; + + & > input { + height: 100%; + width: 5%; + min-width: 1.2rem; + align-self: center; + } + } + + .btn { + /* Visually separate buttons a bit */ + margin-top: 1rem; + } + } +} diff --git a/web/source/css/pages/oob-token.css b/web/source/css/pages/oob-token.css new file mode 100644 index 000000000..00d88292b --- /dev/null +++ b/web/source/css/pages/oob-token.css @@ -0,0 +1,8 @@ +section.oob-token { + code { + background: $gray1; + padding: 0.5rem; + margin: 0; + border-radius: 0.3rem; + } +} \ No newline at end of file diff --git a/web/source/css/settings.css b/web/source/css/settings.css deleted file mode 100644 index e69de29bb..000000000 diff --git a/web/source/css/themes/default.css b/web/source/css/themes/default.css index 5200d696d..014842767 100644 --- a/web/source/css/themes/default.css +++ b/web/source/css/themes/default.css @@ -37,7 +37,6 @@ $gray5: #4d4e56; $gray6: #575861; $gray7: #5d5e67; $gray8: #696a75; -$gray5-trans: rgba(77, 78, 86, 0.62); $orange1: #fd6a00; /* Used for non-text accent colors, can be used as background: $gray1 for text color (contrast 4.6)*/ $orange2: #ff853e; /* hover/selected accent to $orange1, can be used with $gray1 (5.7), $gray2 (4.6) */ @@ -54,6 +53,12 @@ $red3: #ff9796; /* Error background text, can be used with $error1 (5.0), $gray1 $green1: #94E749; /* Green for positive/confirmation, similar contrast (luminance) as $blue2 */ +$boxshadow: 0 0.4rem 1rem -0.1rem rgba(0,0,0,0.15); +$boxshadow-border: 0.08rem solid $gray1; + +/* Color variables as used in a specific location */ + +/* Base */ $fg: $white1; $bg: $gray1; @@ -62,23 +67,16 @@ $fg-accent: $blue3; $fg-reduced: $white2; $border-accent: $orange2; -/* Color variables as used in a specific location */ - $link-fg: $fg-accent; +/* Profile */ +$profile-bg: $gray4; +$avatar-border: $orange2; + $role-admin: $orange2; $role-mod: $blue2; -$profile-bg: $gray4; - -$button-bg: $blue2; -$button-fg: $gray1; -$button-hover-bg: $blue3; - -$button-danger-bg: $error3; -$button-danger-fg: $white1; -$button-danger-hover-bg: $error2; - +/* Status */ $status-bg: $gray3; $status-info-bg: $gray2; @@ -90,11 +88,7 @@ $no-img-desc-fg: $gray1; $bg-sensitive: $gray1; -$boxshadow: 0 0.4rem 1rem -0.1rem rgba(0,0,0,0.15); -$boxshadow-border: 0.08rem solid $gray1; - -$avatar-border: $orange2; - +/* Form inputs */ $input-bg: $gray4; $input-disabled-bg: $gray2; $input-border: $blue1; @@ -111,6 +105,16 @@ $settings-nav-bg-active: $blue3; $settings-nav-border-active: $info-bg; $settings-nav-fg-active: $gray2; +/* Buttons */ +$button-bg: $blue2; +$button-fg: $gray1; +$button-hover-bg: $blue3; + +$button-danger-bg: $error3; +$button-danger-fg: $white1; +$button-danger-hover-bg: $error2; + +/* Alerts */ $info-fg: $gray1; $info-bg: $blue4; $info-link: $blue0; diff --git a/web/source/css_old/base.css b/web/source/css_old/base.css deleted file mode 100644 index 630e4a6d2..000000000 --- a/web/source/css_old/base.css +++ /dev/null @@ -1,631 +0,0 @@ -/* - GoToSocial - Copyright (C) GoToSocial Authors admin@gotosocial.org - SPDX-License-Identifier: AGPL-3.0-or-later - - This program is free software: you can redistribute it and/or modify - it under the terms of the GNU Affero General Public License as published by - the Free Software Foundation, either version 3 of the License, or - (at your option) any later version. - - This program is distributed in the hope that it will be useful, - but WITHOUT ANY WARRANTY; without even the implied warranty of - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - GNU Affero General Public License for more details. - - You should have received a copy of the GNU Affero General Public License - along with this program. If not, see . -*/ - -/*************************************** -***** SECTION 0: IMPORTS AND FONTS ***** -****************************************/ - -@import "modern-normalize/modern-normalize.css"; -@import "./prism.css"; - -/* noto-sans-regular - latin */ -@font-face { - font-family: "Noto Sans"; - font-weight: 400; - font-display: swap; - font-style: normal; - src: url('../fonts/noto-sans-v27-latin-regular.woff2') format('woff2'), - url('../fonts/noto-sans-v27-latin-regular.woff') format('woff'); -} - -/* noto-sans-700 - latin */ -@font-face { - font-family: "Noto Sans"; - font-weight: 700; - font-display: swap; - font-style: normal; - src: url('../fonts/noto-sans-v27-latin-700.woff2') format('woff2'), - url('../fonts/noto-sans-v27-latin-700.woff') format('woff'); -} - -/************************************* -***** SECTION 1: HANDY VARIABLES ***** -**************************************/ - -/* - Standard border radius - for nice squircles. -*/ -$br: 0.4rem; - -/* - Border radius for items that - are framed/bordered inside - something with $br, eg avatar, - header img, etc. -*/ -$br-inner: 0.2rem; - -/* - Fork-Awesome 'fa-fw' fixed icon width; - keep in sync with https://github.com/ForkAwesome/Fork-Awesome/blob/a99579ae3e735ee70e51ed62dfcee3172b5b2db7/css/fork-awesome.css#L50 -*/ -$fa-fw: 1.28571429em; - -/****************************************** -***** SECTION 2: BASIC GLOBAL STYLING ***** -*******************************************/ - -html, body { - padding: 0; - margin: 0; - background: $bg; - color: $fg; - font-family: "Noto Sans", sans-serif; - scrollbar-color: $orange1 $gray3; -} - -body { - line-height: 1.5em; - position: relative; -} - -a { - color: $link-fg; -} - -/* - Normalize margins of first and last children. - We generally don't want to open a paragraph or - paragraph-like element with a top margin or - close it with a bottom margin. -*/ -main { - p:first-child, ol:first-child, ul:first-child { - margin-top: 0; - } - - p:last-child, ol:last-child, ul:last-child { - margin-bottom: 0; - } -} - -.button, button { - border-radius: $br-inner; - color: $button-fg; - background: $button-bg; - box-shadow: $boxshadow; - border: $button-border; - text-decoration: none; - font-size: 1.2rem; - font-weight: bold; - padding: 0.5rem; - border: none; - cursor: pointer; - text-align: center; - font-family: 'Noto Sans', sans-serif; - - &.danger { - color: $button-danger-fg; - background: $button-danger-bg; - - &:hover { - background: $button-danger-hover-bg; - } - } - - &:disabled, - &.disabled { - color: $white2; - background: $gray2; - cursor: not-allowed; - - &:hover { - background: $gray3; - } - } - - &:hover { - background: $button-hover-bg; - } -} - -/* - Form styling - used in settings frontend as well. -*/ -input, select, textarea, .input { - box-sizing: border-box; - border: 0.15rem solid $input-border; - border-radius: 0.1rem; - color: $fg; - background: $input-bg; - width: 100%; - font-family: 'Noto Sans', sans-serif; - font-size: 1rem; - padding: 0.3rem; - - &:focus, &:active { - border-color: $input-focus-border; - } - - &:invalid, .invalid & { - border-color: $input-error-border; - } - - &:disabled { - background: transparent; - } - - &::placeholder { - opacity: 1; - color: $fg-reduced - } -} - -/* - Squeeze emojis so they fit inline in text. -*/ -.emoji { - width: 1.45em; - height: 1.45em; - margin: -0.2em 0.02em 0; - object-fit: contain; - vertical-align: middle; - - @media (prefers-reduced-motion: no-preference) { - /* - Enlarge emojis on hover to give - viewer a good look at them. - */ - transition: 0.1s; - &:hover, &:active { - transform: scale(2); - background-color: $bg; - box-shadow: $boxshadow; - border: $boxshadow-border; - border-radius: $br-inner; - } - } -} - -/* - Restyle unordered lists; outdent - and replace dot with orange dot. -*/ -ul { - padding-left: 2.5rem; - list-style: none; - - li::before { - content: "\2022"; - color: $border-accent; - font-weight: bold; - display: inline-block; - width: 1.5rem; - margin-left: -1.5rem; - } -} - -/* - Mirror the same styling a little bit - for ordered lists by making marker bold. -*/ -ol { - padding-left: 2.5rem; - - li::marker { - font-weight: bold; - } -} - -/* - Outdent block quotes a bit; use - orange strip for left border. -*/ -blockquote { - padding: 0.5rem 0 0.5rem 0.5rem; - border-left: 0.2rem solid $border-accent; - margin: 0; - font-style: normal; - - /* - Same background color we - use for code blocks - */ - background-color: $gray2; - border-radius: $br; -} - -/* - Nice dashed orange line - for horizontal rules. -*/ -hr { - border: 0; - border-top: 1px dashed $border-accent; -} - -/* - Don't indent definition - lists and definitions. -*/ -dl { - margin: 0; - - dd { - margin-left: 0; - } -} - -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 ***** -**************************************/ - -/* - Column header that appears at the top - of threads, at the top of sections of - profiles (About, Pinned Posts, etc). -*/ -.col-header { - display: grid; - grid-template-columns: auto 1fr; - gap: 1rem; - - justify-content: start; - align-items: center; - - margin: 0; - background: $profile-bg; - border-top-left-radius: $br; - border-top-right-radius: $br; - padding: 0.75rem; - - a { - justify-self: end; - } - - h1, h2, h3, h4 { - font-size: 1.2rem; - line-height: 1.3rem; - margin: 0; - } -} - -.hidden { - display: none; -} - -.nounderline { - text-decoration: none; -} - -.accent { - color: $acc1; -} - -.text-cutoff { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; -} - -/* - Class for lists that don't - want the orange dot. -*/ -.nodot { - li::before { - content: initial; - } -} - -/* - Forms and sign-in / sign-up / confirm pages. -*/ -section.with-form { - form { - display: flex; - flex-direction: column; - gap: 1rem; - - padding-bottom: 1rem; - padding-top: 1rem; - - p { - /* - We use gap so we don't - need top + bottom margins. - */ - margin-top: 0; - margin-bottom: 0; - } - - label, input { - padding-left: 0.2rem; - } - - .labelinput { - display: flex; - flex-direction: column; - gap: 0.4rem; - } - - .checkbox { - display: flex; - flex-direction: row-reverse; - gap: 0.4rem; - - & > input { - height: 100%; - width: 5%; - min-width: 1.2rem; - align-self: center; - } - } - - .btn { - /* Visually separate buttons a bit */ - margin-top: 1rem; - } - } -} - -/*********************************** -***** SECTION 4: SHAMEFUL MESS ***** -************************************/ - -/* - EVERYTHING BELOW THIS POINT: - Should be moved somewhere else - to avoid cluttering up this file. -*/ - -/* - Below section stylings are used - in transient pages + error templates. -*/ - -section.error { - word-break: break-word; - margin-bottom: 0.5rem; - - pre { - border: 1px solid #ff000080; - padding: 0.5rem; - border-radius: 0.5em; - background-color: #ff000010; - font-size: 1.3em; - white-space: pre-wrap; - } -} - -section.oob-token { - code { - background: $gray1; - padding: 0.5rem; - margin: 0; - border-radius: 0.3rem; - } -} - -/* - TODO: list and blocklist are only used - in settings panel and on blocklist page; - consider moving them somewhere else. -*/ -.list { - display: flex; - flex-direction: column; - - .header, .entry { - padding: 0.5rem; - } - - .header { - border: 0.1rem solid transparent !important; /* for alignment with .entry border padding */ - background: $gray1 !important; - display: flex; - font-weight: bold; - } - - .entries { - display: flex; - flex-direction: column; - - &.scrolling { - height: 20rem; - max-height: 20rem; - overflow: auto; - } - } - - input[type=checkbox] { - margin-left: 0.5rem; - } - - .entry { - display: flex; - flex-wrap: wrap; - background: $list-entry-bg; - border: 0.1rem solid transparent; - - &:nth-child(even) { - background: $list-entry-alternate-bg; - } - - &:hover { - background: $list-entry-hover-bg; - } - - &:active, &:focus, &:hover, &:target { - border-color: $fg-accent; - } - } -} - -.domain-blocklist { - box-shadow: $boxshadow; - - .entry { - display: grid; - grid-template-columns: max(30%, 10rem) 1fr; - gap: 0.5rem; - align-items: start; - border: $boxshadow-border; - border-top-color: transparent; - - & > div { - display: flex; - align-items: center - } - - .domain a { - font-weight: bold; - text-decoration: none; - display: inline-block; /* so it wraps properly */ - } - - .public_comment p { - margin: 0; - } - } - - .header .domain { - color: $fg; - } -} - -@media screen and (max-width: 30rem) { - .domain-blocklist .entry { - grid-template-columns: 1fr; - gap: 0; - } -} - -/* - TODO: this is only used on About - page and in settings application; - consider moving it somewhere else. -*/ -.account-card { - display: inline-grid; - grid-template-columns: auto 1fr; - grid-template-rows: auto auto; - text-decoration: none; - gap: 0.5rem 1rem; - border-radius: $br; - padding: 0.5rem; - min-width: 40%; - margin-bottom: 0.3rem; - - background: $list-entry-bg; - - &:hover { - background: $list-entry-alternate-bg; - } - - h3 { - align-self: end; - margin: 0; - color: $fg; - } - - img.avatar { - border-radius: 0.5rem; - width: 5rem; - height: 5rem; - object-fit: cover; - grid-row: 1 / span 2; - } -} diff --git a/web/source/index.js b/web/source/index.js index 7d7884635..2d1aacd4f 100644 --- a/web/source/index.js +++ b/web/source/index.js @@ -18,15 +18,11 @@ */ const skulk = require("skulk"); -const fs = require("fs"); const path = require("path"); const { globSync } = require("glob"); -// let cssEntryFiles = fs.readdirSync(path.join(__dirname, "./css")).map((file) => { -// return path.join(__dirname, "./css", file); -// }); - -let cssEntryFiles = globSync(path.join(__dirname, "./css/**/*.css")); +const cssDir = path.join(__dirname, "./css"); +const cssThemes = globSync(cssDir + "/themes/**/*.css"); const prodCfg = { transform: [ @@ -91,12 +87,19 @@ skulk({ }] ] }, - css: { - entryFiles: cssEntryFiles, + cssThemes: { + entryFiles: cssThemes, outputFile: "_discard", presets: [["postcss", { output: "_split" }]] + }, + css: { + entryFiles: cssDir + "/main.css", + outputFile: "_discard", + presets: [["postcss", { + output: "style.css" + }]] } } });