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"
+ }]]
}
}
});