Split css (#1959)

Divides the css into sub-files and normalizes how colors are defined.

Co-authored-by: Joachim <joachim.robert@protonmail.com>

.github/workflows/lint-frontend.yaml

@@ -27,7 +27,7 @@ jobs:
       # See .stylelintignore for files that are not linted.
       - name: Run stylelint
         run: >
-          npx stylelint bookwyrm/static/css/*.scss \
+          npx stylelint bookwyrm/static/css/*.scss bookwyrm/static/css/bookwyrm/**/*.scss \
             --config dev-tools/.stylelintrc.js
 
       # See .eslintignore for files that are not linted.

bookwyrm/settings.py

@@ -11,7 +11,7 @@ from django.utils.translation import gettext_lazy as _
 env = Env()
 env.read_env()
 DOMAIN = env("DOMAIN")
-VERSION = "0.3.0"
+VERSION = "0.3.1"
 
 RELEASE_API = env(
     "RELEASE_API",
@@ -21,7 +21,7 @@ RELEASE_API = env(
 PAGE_LENGTH = env("PAGE_LENGTH", 15)
 DEFAULT_LANGUAGE = env("DEFAULT_LANGUAGE", "English")
 
-JS_CACHE = "7eb9174b"
+JS_CACHE = "a60e5a55"
 
 # email
 EMAIL_BACKEND = env("EMAIL_BACKEND", "django.core.mail.backends.smtp.EmailBackend")

bookwyrm/static/css/bookwyrm/_all.scss

@@ -0,0 +1,159 @@
+/** Imports
+ ******************************************************************************/
+@import "components/avatar";
+@import "components/book_cover";
+@import "components/book_grid";
+@import "components/book_list";
+@import "components/book_preview_table";
+@import "components/breadcrumbs";
+@import "components/copy";
+@import "components/details";
+@import "components/file_input";
+@import "components/live_message";
+@import "components/shelving";
+@import "components/stars";
+@import "components/status";
+@import "components/tabs";
+@import "components/toggle";
+
+@import "overrides/bulma_overrides";
+
+@import "utilities/a11y";
+@import "utilities/alignments";
+@import "utilities/colors";
+@import "utilities/size";
+@import "utilities/spacings";
+@import "utilities/transitions";
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+button {
+    border: none;
+    margin: 0;
+    padding: 0;
+    width: auto;
+    overflow: visible;
+    background: transparent;
+
+    /* inherit font, color & alignment from ancestor */
+    color: inherit;
+    font: inherit;
+    text-align: inherit;
+
+    /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
+    line-height: normal;
+
+    /* Corrects font smoothing for webkit */
+    -webkit-font-smoothing: inherit;
+    -moz-osx-font-smoothing: inherit;
+
+    /* Corrects inability to style clickable `input` types in iOS */
+    -webkit-appearance: none;
+
+    /* Generalizes pointer cursor */
+    cursor: pointer;
+}
+
+button::-moz-focus-inner {
+    /* Remove excess padding and border in Firefox 4+ */
+    border: 0;
+    padding: 0;
+}
+
+/* Better accessibility for keyboard users */
+*:focus-visible {
+    outline-style: auto !important;
+}
+
+/** Utilities not covered by Bulma
+ ******************************************************************************/
+
+
+.tag.is-small {
+    height: auto;
+}
+
+.button.is-transparent {
+    background-color: transparent;
+}
+
+.card.is-stretchable {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.card.is-stretchable .card-content {
+    flex-grow: 1;
+}
+
+.preserve-whitespace p {
+    white-space: pre-wrap !important;
+}
+
+.display-inline p {
+    display: inline !important;
+}
+
+button .button-invisible-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 1rem;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    background: rgba($scheme-invert, 0.66);
+    color: white;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+button:hover .button-invisible-overlay,
+button:active .button-invisible-overlay,
+button:focus-visible .button-invisible-overlay {
+    opacity: 1;
+}
+
+
+
+/** Tooltips
+ ******************************************************************************/
+
+.tooltip {
+    width: 100%;
+}
+
+/** States
+ ******************************************************************************/
+
+/* "disabled" for non-buttons */
+
+.is-disabled {
+    background-color: $pagination-disabled-background-color;
+    border-color: $pagination-disabled-border-color;
+    box-shadow: none;
+    color: $pagination-disabled-color;
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+
+/* Notifications page
+ ******************************************************************************/
+
+.notification a.icon {
+    text-decoration: none !important;
+}

bookwyrm/static/css/bookwyrm/components/_avatar.css

@@ -0,0 +1,7 @@
+/** Avatars
+ ******************************************************************************/
+
+.avatar {
+    vertical-align: middle;
+    display: inline;
+}

bookwyrm/static/css/bookwyrm/components/_book_cover.scss

@@ -0,0 +1,70 @@
+/** Book covers
+ *
+ * - .is-cover gives the behaviour of the cover and its surrounding. (optional)
+ * - .cover-container gives the dimensions and position (for borders, image and other elements).
+ * - .book-cover is positioned and sized based on its container.
+ *
+ * To have the cover within specific dimensions, specify a width or height for
+ * standard bulma’s named breapoints:
+ *
+ * `is-(w|h)-(auto|xs|s|m|l|xl|xxl)[-(mobile|tablet|desktop)]`
+ *
+ * The cover will be centered horizontally and vertically within those dimensions.
+ *
+ * When using `.column.is-N`, add `.is-w-auto` to the container so that the flex
+ * calculations are not biased by the default `max-content`.
+ ******************************************************************************/
+
+.column.is-cover {
+    flex-grow: 0 !important;
+}
+
+.column.is-cover,
+.column.is-cover + .column {
+    flex-basis: auto !important;
+}
+
+.cover-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    width: max-content;
+    max-width: 100%;
+    overflow: hidden;
+}
+
+/* Book cover
+ * -------------------------------------------------------------------------- */
+
+.book-cover {
+    display: block;
+    max-width: 100%;
+    max-height: 100%;
+
+    /* Useful when stretching under-sized images. */
+    image-rendering: optimizequality;
+    image-rendering: smooth;
+}
+
+/* Cover caption
+ * -------------------------------------------------------------------------- */
+
+.no-cover .cover-caption {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    padding: 0.5em;
+    font-size: 0.75em;
+    color: white;
+    background-color: $no-cover-color;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 1em;
+    white-space: initial;
+    text-align: center;
+}

bookwyrm/static/css/bookwyrm/components/_book_grid.scss

@@ -0,0 +1,36 @@
+/* Books grid
+ ******************************************************************************/
+
+.books-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+    align-items: end;
+    justify-items: stretch;
+}
+
+.books-grid > .is-big {
+    grid-column: span 2;
+    grid-row: span 2;
+    justify-self: stretch;
+}
+
+.books-grid .book-cover {
+    width: 100%;
+}
+
+.books-grid .book-title {
+    --height-basis: 1.35rem;
+
+    display: block;
+    margin-top: 0.5rem;
+    line-height: var(--height-basis);
+    min-height: calc(2 * var(--height-basis));
+}
+
+@media only screen and (min-width: 769px) {
+    .books-grid {
+        gap: 1.5rem;
+        grid-template-columns: repeat(auto-fill, minmax(8em, 1fr));
+    }
+}

bookwyrm/static/css/bookwyrm/components/_book_list.scss

@@ -0,0 +1,47 @@
+/* Book list
+ ******************************************************************************/
+
+ol.ordered-list {
+    list-style: none;
+    counter-reset: list-counter;
+}
+
+ol.ordered-list li {
+    counter-increment: list-counter;
+}
+
+ol.ordered-list li::before {
+    content: counter(list-counter);
+    position: absolute;
+    left: -20px;
+    width: 20px;
+    height: 24px;
+    background-color: $scheme-main;
+    border: 1px solid $border;
+    border-right: 0;
+    border-top-left-radius: 2px;
+    border-top-right-radius: 2px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: $text-light;
+    font-size: 0.8em;
+    font-weight: bold;
+}
+
+@media only screen and (max-width: 768px) {
+    ol.ordered-list li::before {
+        left: 0;
+        z-index: 1;
+        border: 0;
+        border-right: 1px solid $border;
+        border-bottom: 1px solid $border;
+        border-radius: 0;
+        border-bottom-right-radius: 2px;
+    }
+}
+
+.overflow-wrap-anywhere {
+    overflow-wrap: anywhere;
+    min-width: 10em;
+}

bookwyrm/static/css/bookwyrm/components/_book_preview_table.scss

@@ -0,0 +1,49 @@
+/* Book preview table
+ ******************************************************************************/
+
+.book-preview td {
+    vertical-align: middle;
+}
+
+@media only screen and (max-width: 768px) {
+    table.is-mobile,
+    table.is-mobile tbody {
+        display: block;
+    }
+
+    table.is-mobile tr {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        border-top: 1px solid $border;
+    }
+
+    table.is-mobile td {
+        display: block;
+        box-sizing: border-box;
+        flex: 1 0 100%;
+        order: 2;
+        border-bottom: 0;
+    }
+
+    table.is-mobile td.book-preview-top-row {
+        order: 1;
+        flex-basis: auto;
+    }
+
+    table.is-mobile td[data-title]:not(:empty)::before {
+        content: attr(data-title);
+        display: block;
+        font-size: 0.75em;
+        font-weight: bold;
+    }
+
+    table.is-mobile td:empty {
+        padding: 0;
+    }
+
+    table.is-mobile th,
+    table.is-mobile thead {
+        display: none;
+    }
+}

bookwyrm/static/css/bookwyrm/components/_breadcrumbs.scss

@@ -0,0 +1,13 @@
+/* Breadcrumbs
+ ******************************************************************************/
+
+.breadcrumb li:first-child * {
+    padding-left: 0;
+}
+
+.breadcrumb li > * {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    padding: 0 0.75em;
+}

bookwyrm/static/css/bookwyrm/components/_copy.scss

@@ -0,0 +1,30 @@
+/* Copy
+ ******************************************************************************/
+
+.horizontal-copy {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.horizontal-copy textarea {
+    min-width: initial;
+    white-space: nowrap;
+}
+
+.horizontal-copy button {
+    align-self: stretch;
+    height: unset;
+}
+
+.vertical-copy {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.75rem;
+}
+
+.vertical-copy button {
+    width: 100%;
+}

bookwyrm/static/css/bookwyrm/components/_details.scss

@@ -0,0 +1,116 @@
+/** General `details` element styles
+ ******************************************************************************/
+
+details summary {
+    cursor: pointer;
+}
+
+summary::-webkit-details-marker {
+    display: none;
+}
+
+details summary::marker {
+    content: none;
+}
+
+details.detail-pinned-button summary {
+    position: absolute;
+    right: 0;
+}
+
+details.detail-pinned-button form {
+    float: left;
+    width: 100%;
+    margin-top: 1em;
+}
+
+/** Dropdown w/ Details element
+ ******************************************************************************/
+
+details.dropdown[open] summary.dropdown-trigger::before {
+    content: "";
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+details.dropdown .dropdown-menu {
+    display: block !important;
+}
+
+details.dropdown .dropdown-menu button {
+    /* Fix weird Safari defaults */
+    box-sizing: border-box;
+}
+
+details.dropdown .dropdown-menu button:focus-visible,
+details.dropdown .dropdown-menu a:focus-visible {
+    outline-style: auto;
+    outline-offset: -2px;
+}
+
+@media only screen and (max-width: 768px) {
+    details.dropdown[open] summary.dropdown-trigger::before {
+        background-color: rgba($scheme-invert, 0.5);
+        z-index: 30;
+    }
+
+    details .dropdown-menu {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex !important;
+        align-items: center;
+        justify-content: center;
+        pointer-events: none;
+        z-index: 100;
+    }
+
+    details .dropdown-menu > * {
+        pointer-events: all;
+    }
+}
+
+/** Details panel
+ ******************************************************************************/
+
+details.details-panel {
+    box-shadow: 0 0 0 1px $border;
+    transition: box-shadow 0.2s ease;
+    padding: 0.75rem;
+}
+
+details[open].details-panel,
+details.details-panel:hover {
+    box-shadow: 0 0 0 1px $border;
+}
+
+details.details-panel summary {
+    position: relative;
+}
+
+details summary .details-close {
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: rotate(45deg);
+    transition: transform 0.2s ease;
+}
+
+details[open] summary .details-close {
+    transform: rotate(0deg);
+}
+
+@media only screen and (min-width: 769px) {
+    .details-panel .filters-field:not(:last-child) {
+        border-right: 1px solid $border;
+        margin-top: 0.75rem;
+        margin-bottom: 0.75rem;
+        padding-top: 0.25rem;
+        padding-bottom: 0.25rem;
+    }
+}

bookwyrm/static/css/bookwyrm/components/_file_input.scss

@@ -0,0 +1,28 @@
+/** File input styles
+ ******************************************************************************/
+
+input[type="file"]::file-selector-button {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    background-color: $scheme-main;
+    border-radius: 4px;
+    border: 1px solid $border;
+    box-shadow: none;
+    color: $text;
+    cursor: pointer;
+    font-size: 1rem;
+    height: 2.5em;
+    justify-content: center;
+    line-height: 1.5;
+    padding-bottom: calc(0.5em - 1px);
+    padding-left: 1em;
+    padding-right: 1em;
+    padding-top: calc(0.5em - 1px);
+    text-align: center;
+    white-space: nowrap;
+}
+
+input[type="file"]::file-selector-button:hover {
+    border-color: $border-hover;
+    color: text;
+}

bookwyrm/static/css/bookwyrm/components/_live_message.scss

@@ -0,0 +1,8 @@
+/** Transient notification
+ ******************************************************************************/
+
+#live-messages {
+    position: fixed;
+    bottom: 1em;
+    right: 1em;
+}

bookwyrm/static/css/bookwyrm/components/_shelving.scss

@@ -0,0 +1,10 @@
+/** Shelving
+ ******************************************************************************/
+
+/** @todo Replace icons with SVG symbols.
+    @see https://www.youtube.com/watch?v=9xXBYcWgCHA */
+.shelf-option:disabled > *::after {
+    font-family: icomoon; /* stylelint-disable font-family-no-missing-generic-family-keyword */
+    content: "\e919"; /* icon-check */
+    margin-left: 0.5em;
+}

bookwyrm/static/css/bookwyrm/components/_stars.scss

@@ -0,0 +1,52 @@
+/** Stars
+ ******************************************************************************/
+
+.stars {
+    white-space: nowrap;
+}
+
+/** Stars in a review form
+ *
+ * Specificity makes hovering taking over checked inputs.
+ *
+ * \e9d9: filled star
+ * \e9d7: empty star;
+ * -------------------------------------------------------------------------- */
+
+.form-rate-stars {
+    width: max-content;
+}
+
+/* All stars are visually filled by default. */
+.form-rate-stars .icon::before {
+    content: "\e9d9"; /* icon-star-full */
+}
+
+/* Icons directly following half star inputs are marked as half */
+.form-rate-stars input.half:checked ~ .icon::before {
+    content: "\e9d8"; /* icon-star-half */
+}
+
+/* stylelint-disable no-descending-specificity */
+.form-rate-stars input.half:checked + input + .icon:hover::before {
+    content: "\e9d8" !important; /* icon-star-half */
+}
+
+/* Icons directly following half check inputs that follow the checked input are emptied. */
+.form-rate-stars input.half:checked + input + .icon ~ .icon::before {
+    content: "\e9d7"; /* icon-star-empty */
+}
+
+/* Icons directly following inputs that follow the checked input are emptied. */
+.form-rate-stars input:checked ~ input + .icon::before {
+    content: "\e9d7"; /* icon-star-empty */
+}
+
+/* When a label is hovered, repeat the fill-all-then-empty-following pattern. */
+.form-rate-stars:hover .icon.icon::before {
+    content: "\e9d9" !important; /* icon-star-full */
+}
+
+.form-rate-stars .icon:hover ~ .icon::before {
+    content: "\e9d7" !important; /* icon-star-empty */
+}

bookwyrm/static/css/bookwyrm/components/_status.scss

@@ -0,0 +1,57 @@
+/** Statuses: Quotes
+ *
+ * \e906: icon-quote-open
+ * \e905: icon-quote-close
+ *
+ * The `content` class on the blockquote allows to apply styles to markdown
+ * generated HTML in the quote: https://bulma.io/documentation/elements/content/
+ *
+ * ```html
+ * <div class="quote block">
+ *     <blockquote dir="auto" class="content mb-2">
+ *         User generated quote in markdown…
+ *     </blockquote>
+ *
+ *     <p> — <a…>Book Title</a> by <a…class="author">Author</a></p>
+ * </div>
+ * ```
+ ******************************************************************************/
+
+.quote > blockquote {
+    position: relative;
+    padding-left: 2em;
+}
+
+.quote > blockquote::before,
+.quote > blockquote::after {
+    font-family: icomoon; /* stylelint-disable font-family-no-missing-generic-family-keyword */
+    position: absolute;
+}
+
+.quote > blockquote::before {
+    content: "\e907"; /* icon-quote-open */
+    top: 0;
+    left: 0;
+}
+
+.quote > blockquote::after {
+    content: "\e906"; /* icon-quote-close */
+    right: 0;
+}
+
+/* Threads
+ ******************************************************************************/
+
+.thread .is-main .card {
+    box-shadow: 0 0.5em 1em -0.125em rgba($link, 0.35), 0 0 0 1px rgba($link, 0.02);
+}
+
+.thread::after {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    bottom: 0;
+    left: 2.5em;
+    border-left: 2px solid $border;
+}

bookwyrm/static/css/bookwyrm/components/_tabs.scss

@@ -0,0 +1,176 @@
+/** Bookwyrm Tabs
+ ******************************************************************************/
+
+.bw-tabs {
+    -webkit-overflow-scrolling: touch;
+    -webkit-touch-callout: none;
+    position: relative;
+    align-items: center;
+    display: flex;
+    font-size: 1rem;
+    justify-content: flex-start;
+    overflow-x: auto;
+    overflow-y: hidden;
+    user-select: none;
+    white-space: nowrap;
+}
+
+.bw-tabs::before {
+    border-bottom-color: $border;
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    bottom: 0;
+    content: "";
+    position: absolute;
+    width: 100%;
+}
+
+.bw-tabs:not(:last-child) {
+    margin-bottom: 1.5rem;
+}
+
+.bw-tabs a {
+    align-items: center;
+    border-bottom-color: $border;
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    color: $text;
+    display: flex;
+    justify-content: center;
+    margin-bottom: -1px;
+    padding: 0.5em 1em;
+    position: relative;
+}
+
+.bw-tabs a:hover {
+    border-bottom-color: transparent;
+    color: $text;
+}
+
+.bw-tabs a.is-active {
+    border-bottom-color: transparent;
+    color: $link;
+}
+
+.bw-tabs.is-left {
+    padding-right: 0.75em;
+}
+
+.bw-tabs.is-center {
+    flex: none;
+    justify-content: center;
+    padding-left: 0.75em;
+    padding-right: 0.75em;
+}
+
+.bw-tabs.is-right {
+    justify-content: flex-end;
+    padding-left: 0.75em;
+}
+
+.bw-tabs .icon:first-child {
+    margin-right: 0.5em;
+}
+
+.bw-tabs .icon:last-child {
+    margin-left: 0.5em;
+}
+
+.bw-tabs.is-centered {
+    justify-content: center;
+}
+
+.bw-tabs.is-boxed a {
+    border: 1px solid transparent;
+    border-radius: 4px 4px 0 0;
+}
+
+.bw-tabs.is-boxed a:hover {
+    background-color: $background-secondary;
+    border-bottom-color: $border-hover;
+}
+
+.bw-tabs.is-boxed a.is-active {
+    background-color: $background-body;
+    border-color: $border;
+    border-bottom-color: $border !important;
+}
+
+.bw-tabs.is-fullwidth a {
+    flex-grow: 1;
+    flex-shrink: 0;
+}
+
+.bw-tabs.is-toggle a {
+    border-color: $border;
+    border-style: solid;
+    border-width: 1px;
+    margin-bottom: 0;
+    position: relative;
+}
+
+.bw-tabs.is-toggle a:hover {
+    background-color: $background-secondary;
+    border-color: $border;
+    z-index: 2;
+}
+
+.bw-tabs.is-toggle a + a {
+    margin-left: -1px;
+}
+
+.bw-tabs.is-toggle a:first-child {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+}
+
+.bw-tabs.is-toggle a:last-child {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+
+.bw-tabs.is-toggle a.is-active {
+    background-color: $link-background;
+    border-color: $link;
+    color: $text;
+    z-index: 1;
+}
+
+.bw-tabs.is-toggle {
+    border-bottom: none;
+}
+
+.bw-tabs.is-toggle.is-toggle-rounded a:first-child {
+    border-bottom-left-radius: 290486px;
+    border-top-left-radius: 290486px;
+    padding-left: 1.25em;
+}
+
+.bw-tabs.is-toggle.is-toggle-rounded a:last-child {
+    border-bottom-right-radius: 290486px;
+    border-top-right-radius: 290486px;
+    padding-right: 1.25em;
+}
+
+.bw-tabs.is-small {
+    font-size: 0.75rem;
+}
+
+.bw-tabs.is-medium {
+    font-size: 1.25rem;
+}
+
+.bw-tabs.is-large {
+    font-size: 1.5rem;
+}
+
+.bw-tabs.has-aside-text a {
+    margin-top: 1.5rem;
+}
+
+.bw-tabs a .aside-text {
+    position: absolute;
+    top: calc(-0.75rem - 0.75rem);
+    left: 0;
+    color: $text;
+}

bookwyrm/static/css/bookwyrm/components/_toggle.scss

@@ -0,0 +1,45 @@
+/** Toggles
+ ******************************************************************************/
+
+.toggle-button[aria-pressed="true"],
+.toggle-button[aria-pressed="true"]:hover {
+    background-color: hsl(171deg, 100%, 41%);
+    color: white;
+}
+
+.hide-active[aria-pressed="true"],
+.hide-inactive[aria-pressed="false"] {
+    display: none;
+}
+
+.transition-x.is-hidden,
+.transition-y.is-hidden {
+    display: block !important;
+    visibility: hidden !important;
+    height: 0 !important;
+    width: 0 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    overflow: auto;
+}
+
+.transition-x,
+.transition-y {
+    transition-duration: 0.5s;
+    transition-timing-function: ease;
+}
+
+.transition-x {
+    transition-property: width, margin-left, margin-right, padding-left, padding-right;
+}
+
+.transition-y {
+    transition-property: height, margin-top, margin-bottom, padding-top, padding-bottom;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .transition-x,
+    .transition-y {
+        transition-duration: 0.001ms !important;
+    }
+}

bookwyrm/static/css/bookwyrm/overrides/_bulma_overrides.scss

@@ -0,0 +1,61 @@
+.image {
+    overflow: hidden;
+}
+
+.navbar .logo {
+    max-height: 50px;
+}
+
+.card {
+    overflow: visible;
+}
+
+.card.has-border {
+    border: 1px solid $border;
+}
+
+.scroll-x {
+    overflow: hidden;
+    overflow-x: auto;
+}
+
+.modal-card {
+    pointer-events: none;
+}
+
+.modal-card > * {
+    pointer-events: all;
+}
+
+/* stylelint-disable no-descending-specificity */
+.modal-card:focus {
+    outline-style: auto;
+}
+
+.modal-card:focus:not(:focus-visible) {
+    outline-style: initial;
+}
+
+.modal-card:focus-visible {
+    outline-style: auto;
+}
+/* stylelint-enable no-descending-specificity */
+
+.modal-card.is-fullwidth {
+    min-width: 75% !important;
+}
+
+@media only screen and (min-width: 769px) {
+    .modal-card.is-thin {
+        width: 350px !important;
+    }
+}
+
+.modal-card-body {
+    max-height: 70vh;
+}
+
+.clip-text {
+    max-height: 35em;
+    overflow: hidden;
+}

bookwyrm/static/css/bookwyrm/utilities/_a11y.scss

@@ -0,0 +1,33 @@
+@media only screen and (max-width: 768px) {
+    .is-sr-only-mobile {
+        border: none !important;
+        clip: rect(0, 0, 0, 0) !important;
+        height: 0.01em !important;
+        overflow: hidden !important;
+        padding: 0 !important;
+        position: absolute !important;
+        white-space: nowrap !important;
+        width: 0.01em !important;
+    }
+
+    .m-0-mobile {
+        margin: 0 !important;
+    }
+
+    .card-footer.is-stacked-mobile {
+        flex-direction: column;
+    }
+
+    .card-footer.is-stacked-mobile .card-footer-item:not(:last-child) {
+        border-bottom: 1px solid $background-tertiary;
+        border-right: 0;
+    }
+
+    .is-flex-direction-row-mobile {
+        flex-direction: row !important;
+    }
+
+    .is-flex-direction-column-mobile {
+        flex-direction: column !important;
+    }
+}

bookwyrm/static/css/bookwyrm/utilities/_alignments.scss

@@ -0,0 +1,76 @@
+/* Alignments
+ *
+ * Use them with `.align.to-(c|t|r|b|l)[-(mobile|tablet)]`
+ ******************************************************************************/
+
+/* Flex item position
+ * -------------------------------------------------------------------------- */
+
+.align {
+    display: flex !important;
+    flex-direction: row !important;
+}
+
+.align.to-c {
+    justify-content: center !important;
+}
+
+.align.to-t {
+    align-items: flex-start !important;
+}
+
+.align.to-r {
+    justify-content: flex-end !important;
+}
+
+.align.to-b {
+    align-items: flex-end !important;
+}
+
+.align.to-l {
+    justify-content: flex-start !important;
+}
+
+@media screen and (max-width: 768px) {
+    .align.to-c-mobile {
+        justify-content: center !important;
+    }
+
+    .align.to-t-mobile {
+        align-items: flex-start !important;
+    }
+
+    .align.to-r-mobile {
+        justify-content: flex-end !important;
+    }
+
+    .align.to-b-mobile {
+        align-items: flex-end !important;
+    }
+
+    .align.to-l-mobile {
+        justify-content: flex-start !important;
+    }
+}
+
+@media screen and (min-width: 769px) {
+    .align.to-c-tablet {
+        justify-content: center !important;
+    }
+
+    .align.to-t-tablet {
+        align-items: flex-start !important;
+    }
+
+    .align.to-r-tablet {
+        justify-content: flex-end !important;
+    }
+
+    .align.to-b-tablet {
+        align-items: flex-end !important;
+    }
+
+    .align.to-l-tablet {
+        justify-content: flex-start !important;
+    }
+}

bookwyrm/static/css/bookwyrm/utilities/_colors.scss

@@ -0,0 +1,25 @@
+/* Semantic color classes */
+
+.has-background-primary-highlight {
+    background-color: $primary-highlight;
+}
+
+.has-background-info-highlight {
+    background-color: $info-highlight;
+}
+
+.has-background-success-highlight {
+    background-color: $success-highlight;
+}
+
+.has-background-body {
+    background-color: $background-body;
+}
+
+.has-background-secondary {
+    background-color: $background-secondary !important;
+}
+
+.has-background-tertiary {
+    background-color: $background-tertiary !important;
+}

bookwyrm/static/css/bookwyrm/utilities/_size.scss

@@ -0,0 +1,227 @@
+/* Dimensions
+ * @todo These could be in rem.
+ ******************************************************************************/
+
+.is-32x32 {
+    min-width: 32px !important;
+    min-height: 32px !important;
+}
+
+.is-96x96 {
+    min-width: 96px !important;
+    min-height: 96px !important;
+}
+
+.is-w-auto {
+    width: auto !important;
+}
+
+.is-w-xs {
+    width: 80px !important;
+}
+
+.is-w-s {
+    width: 100px !important;
+}
+
+.is-w-m {
+    width: 150px !important;
+}
+
+.is-w-l {
+    width: 200px !important;
+}
+
+.is-w-xl {
+    width: 250px !important;
+}
+
+.is-w-xxl {
+    width: 500px !important;
+}
+
+.is-h-xs {
+    height: 80px !important;
+}
+
+.is-h-s {
+    height: 100px !important;
+}
+
+.is-h-m {
+    height: 150px !important;
+}
+
+.is-h-l {
+    height: 200px !important;
+}
+
+.is-h-xl {
+    height: 250px !important;
+}
+
+.is-h-xxl {
+    height: 500px !important;
+}
+
+@media only screen and (max-width: 768px) {
+    .is-w-auto-mobile {
+        width: auto !important;
+    }
+
+    .is-w-xs-mobile {
+        width: 80px !important;
+    }
+
+    .is-w-s-mobile {
+        width: 100px !important;
+    }
+
+    .is-w-m-mobile {
+        width: 150px !important;
+    }
+
+    .is-w-l-mobile {
+        width: 200px !important;
+    }
+
+    .is-w-xl-mobile {
+        width: 250px !important;
+    }
+
+    .is-w-xxl-mobile {
+        width: 500px !important;
+    }
+
+    .is-h-xs-mobile {
+        height: 80px !important;
+    }
+
+    .is-h-s-mobile {
+        height: 100px !important;
+    }
+
+    .is-h-m-mobile {
+        height: 150px !important;
+    }
+
+    .is-h-l-mobile {
+        height: 200px !important;
+    }
+
+    .is-h-xl-mobile {
+        height: 250px !important;
+    }
+
+    .is-h-xxl-mobile {
+        height: 500px !important;
+    }
+}
+
+@media only screen and (min-width: 769px) {
+    .is-w-auto-tablet {
+        width: auto !important;
+    }
+
+    .is-w-xs-tablet {
+        width: 80px !important;
+    }
+
+    .is-w-s-tablet {
+        width: 100px !important;
+    }
+
+    .is-w-m-tablet {
+        width: 150px !important;
+    }
+
+    .is-w-l-tablet {
+        width: 200px !important;
+    }
+
+    .is-w-xl-tablet {
+        width: 250px !important;
+    }
+
+    .is-w-xxl-tablet {
+        width: 500px !important;
+    }
+
+    .is-h-xs-tablet {
+        height: 80px !important;
+    }
+
+    .is-h-s-tablet {
+        height: 100px !important;
+    }
+
+    .is-h-m-tablet {
+        height: 150px !important;
+    }
+
+    .is-h-l-tablet {
+        height: 200px !important;
+    }
+
+    .is-h-xl-tablet {
+        height: 250px !important;
+    }
+
+    .is-h-xxl-tablet {
+        height: 500px !important;
+    }
+}
+
+@media only screen and (min-width: 1024px) {
+    .is-w-auto-desktop {
+        width: auto !important;
+    }
+
+    .is-w-xs-desktop {
+        width: 80px !important;
+    }
+
+    .is-w-s-desktop {
+        width: 100px !important;
+    }
+
+    .is-w-m-desktop {
+        width: 150px !important;
+    }
+
+    .is-w-l-desktop {
+        width: 200px !important;
+    }
+
+    .is-w-xl-desktop {
+        width: 250px !important;
+    }
+
+    .is-w-xxl-desktop {
+        width: 500px !important;
+    }
+
+    .is-h-xs-desktop {
+        height: 80px !important;
+    }
+
+    .is-h-s-desktop {
+        height: 100px !important;
+    }
+
+    .is-h-m-desktop {
+        height: 150px !important;
+    }
+
+    .is-h-l-desktop {
+        height: 200px !important;
+    }
+
+    .is-h-xl-desktop {
+        height: 250px !important;
+    }
+
+    .is-h-xxl-desktop {
+        height: 500px !important;
+    }
+}

bookwyrm/static/css/bookwyrm/utilities/_spacings.scss

@@ -0,0 +1,167 @@
+/* Spacings
+ *
+ * Those are supplementary rules to Bulma’s. They follow the same conventions.
+ * Add those you’ll need.
+ ******************************************************************************/
+
+.mr-auto {
+    margin-right: auto !important;
+}
+
+.ml-auto {
+    margin-left: auto !important;
+}
+
+@media screen and (max-width: 768px) {
+    .m-0-mobile {
+        margin: 0 !important;
+    }
+
+    .mr-auto-mobile {
+        margin-right: auto !important;
+    }
+
+    .ml-auto-mobile {
+        margin-left: auto !important;
+    }
+
+    .mt-3-mobile {
+        margin-top: 0.75rem !important;
+    }
+
+    .ml-3-mobile {
+        margin-left: 0.75rem !important;
+    }
+
+    .mx-3-mobile {
+        margin-right: 0.75rem !important;
+        margin-left: 0.75rem !important;
+    }
+
+    .my-3-mobile {
+        margin-top: 0.75rem !important;
+        margin-bottom: 0.75rem !important;
+    }
+}
+
+@media screen and (min-width: 769px) {
+    .m-0-tablet {
+        margin: 0 !important;
+    }
+
+    .mr-auto-tablet {
+        margin-right: auto !important;
+    }
+
+    .ml-auto-tablet {
+        margin-left: auto !important;
+    }
+
+    .mt-3-tablet {
+        margin-top: 0.75rem !important;
+    }
+
+    .ml-3-tablet {
+        margin-left: 0.75rem !important;
+    }
+
+    .mx-3-tablet {
+        margin-right: 0.75rem !important;
+        margin-left: 0.75rem !important;
+    }
+
+    .my-3-tablet {
+        margin-top: 0.75rem !important;
+        margin-bottom: 0.75rem !important;
+    }
+}
+
+/* Gaps (for Flexbox and Grid)
+ *
+ * Those are supplementary rules to Bulma’s. They follow the same conventions.
+ * Add those you’ll need.
+ ******************************************************************************/
+
+.is-gap-0 {
+    gap: 0;
+}
+
+.is-gap-1 {
+    gap: 0.25rem;
+}
+
+.is-gap-2 {
+    gap: 0.5rem;
+}
+
+.is-gap-3 {
+    gap: 0.75rem;
+}
+
+.is-gap-4 {
+    gap: 1rem;
+}
+
+.is-gap-5 {
+    gap: 1.5rem;
+}
+
+.is-gap-6 {
+    gap: 3rem;
+}
+
+.is-row-gap-0 {
+    row-gap: 0;
+}
+
+.is-row-gap-1 {
+    row-gap: 0.25rem;
+}
+
+.is-row-gap-2 {
+    row-gap: 0.5rem;
+}
+
+.is-row-gap-3 {
+    row-gap: 0.75rem;
+}
+
+.is-row-gap-4 {
+    row-gap: 1rem;
+}
+
+.is-row-gap-5 {
+    row-gap: 1.5rem;
+}
+
+.is-row-gap-6 {
+    row-gap: 3rem;
+}
+
+.is-column-gap-0 {
+    column-gap: 0;
+}
+
+.is-column-gap-1 {
+    column-gap: 0.25rem;
+}
+
+.is-column-gap-2 {
+    column-gap: 0.5rem;
+}
+
+.is-column-gap-3 {
+    column-gap: 0.75rem;
+}
+
+.is-column-gap-4 {
+    column-gap: 1rem;
+}
+
+.is-column-gap-5 {
+    column-gap: 1.5rem;
+}
+
+.is-column-gap-6 {
+    column-gap: 3rem;
+}

bookwyrm/static/css/bookwyrm/utilities/_transitions.scss

@@ -0,0 +1,25 @@
+/** Animations and transitions
+ ******************************************************************************/
+
+@keyframes turning {
+    from { transform: rotateZ(0deg); }
+    to { transform: rotateZ(360deg); }
+}
+
+.is-processing .icon-spinner::before {
+    animation: turning 1.5s infinite linear;
+}
+
+.icon-spinner {
+    display: none;
+}
+
+.is-processing .icon-spinner {
+    display: flex;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .is-processing .icon::before {
+        transition-duration: 0.001ms !important;
+    }
+}

bookwyrm/static/css/themes/dark.scss

@@ -0,0 +1,55 @@
+@import "../vendor/bulma/sass/utilities/derived-variables.sass";
+
+/* Colors
+ ******************************************************************************/
+
+/* states */
+$primary: #016a5b;
+$info: #1f4666;
+$success: #246447;
+$warning: #8b6c15;
+$danger: #872538;
+
+/* book cover standins */
+$no-cover-color: #002549;
+
+/* background colors */
+$scheme-main: $grey-darker;
+$scheme-main-bis: $black-ter;
+$background-body: $grey-darker;
+$background-secondary: $grey-dark;
+$background-tertiary: #555;
+
+/* highlight colors */
+$primary-highlight: $primary;
+$info-highlight: $info;
+$success-highlight: $success;
+
+/* borders */
+$border: $grey;
+$border-hover: $grey-light;
+$border-light: $grey;
+$border-light-hover: $grey-light;
+
+/* text */
+$text: $grey-lightest;
+$text-light: $grey-lighter;
+$text-strong: $white-ter;
+
+/* links */
+$link: $white;
+$link-background: $background-tertiary;
+$link-hover: $white-bis;
+$link-focus: $white-bis;
+$link-active: $white-bis;
+
+/* misc */
+
+/* bulma overrides */
+$background: $background-secondary;
+$menu-item-active-background-color: $link-background;
+
+/* Fonts
+ ******************************************************************************/
+$family-primary: $family-sans-serif;
+$family-secondary: $family-sans-serif;

bookwyrm/static/css/themes/light.scss

@@ -0,0 +1,53 @@
+@import "../vendor/bulma/sass/utilities/derived-variables.sass";
+
+/* Colors
+ ******************************************************************************/
+
+/* states */
+$primary: $turquoise;
+$info: $cyan;
+$success: $green;
+$warning: $yellow;
+$danger: $red;
+
+/* book cover standins */
+$no-cover-color: #002549;
+
+/* background colors */
+$scheme-main: $white;
+$scheme-main: $white-bis;
+$background-body: $white;
+$background-secondary: $white-ter;
+$background-tertiary: $white-bis;
+
+/* highlight colors */
+$primary-highlight: $primary-light;
+$info-highlight: $info-light;
+$success-highlight: $success-light;
+
+/* borders */
+$border: $grey-lighter;
+$border-hover: $grey-light;
+$border-light: $grey-lightest;
+$border-light-hover: $grey-light;
+
+/* text */
+$text: $grey-dark;
+$text-light: $grey;
+$text-strong: $grey-darker;
+
+/* links */
+$link: #3273dc;
+$link-background: $link;
+$link-hover: $grey-darker;
+$link-focus: $grey-darker;
+$link-active: $grey-darker;
+
+/* bulma overrides */
+$background: $background-secondary;
+$menu-item-active-background-color: $link-background;
+
+/* Fonts
+ ******************************************************************************/
+$family-primary: $family-sans-serif;
+$family-secondary: $family-sans-serif;

bookwyrm/templates/about/about.html

@@ -19,7 +19,7 @@
         {% blocktrans with site_name=site.name %}Welcome to {{ site_name }}!{% endblocktrans %}
     </h2>
 
-    <p class="subtitle notification has-background-primary-light">
+    <p class="subtitle notification has-background-primary-highlight">
         {% blocktrans trimmed with site_name=site.name %}
             {{ site_name }} is part of <em>BookWyrm</em>, a network of independent, self-directed communities for readers.
             While you can interact seamlessly with users anywhere in the <a href="https://joinbookwyrm.com/instances/" target="_blank">BookWyrm network</a>, this community is unique.
@@ -107,7 +107,7 @@
         <div class="column">
             <div class="card is-stretchable">
                 {% with role=user.groups.first.name %}
-                <div class="card-header {% if role == "moderator" %}has-background-info-light{% else %}has-background-success-light{% endif %}">
+                <div class="card-header {% if role == "moderator" %}has-background-info-highlight{% else %}has-background-success-highlight{% endif %}">
                     <span class="card-header-title is-size-7 pt-1 pb-1">
                         {% if role == "moderator" %}
                             {% trans "Moderator" %}
@@ -123,7 +123,7 @@
                 </div>
 
                 {% if request.user.is_authenticated and user.id != request.user.id %}
-                <div class="has-background-white-bis card-footer">
+                <div class="has-background-tertiary card-footer">
                     <div class="card-footer-item">
                         {% include 'snippets/follow_button.html' with user=user minimal=True %}
                     </div>

bookwyrm/templates/components/card.html

@@ -11,7 +11,7 @@
     </section>
     {% endif %}
 
-    <footer class="card-footer has-background-white-bis">
+    <footer class="card-footer has-background-tertiary">
         {% block card-footer %}
         {% endblock %}
     </footer>

bookwyrm/templates/components/inline_form.html

@@ -1,6 +1,6 @@
 {% load i18n %}
 <section class="card {% if not visible %}is-hidden {% endif %}{{ class }}" id="{{ controls_text }}{% if controls_uid %}-{{ controls_uid }}{% endif %}">
-    <header class="card-header has-background-white-ter">
+    <header class="card-header has-background-secondary">
         <h2 class="card-header-title" tabindex="0" id="{{ controls_text }}{% if controls_uid %}-{{ controls_uid }}{% endif %}_header">
             {% block header %}{% endblock %}
         </h2>

bookwyrm/templates/components/tooltip.html

@@ -1,7 +1,7 @@
 {% load i18n %}
 
 {% trans "Help" as button_text %}
-{% include 'snippets/toggle/open_button.html' with text=button_text class="ml-3 is-rounded is-small is-white p-0 pb-1" icon="question-circle is-size-6" controls_text=controls_text controls_uid=controls_uid %}
+{% include 'snippets/toggle/open_button.html' with text=button_text class="ml-3 is-rounded is-small has-background-body p-0 pb-1" icon="question-circle is-size-6" controls_text=controls_text controls_uid=controls_uid %}
 
 <aside class="tooltip notification is-hidden transition-y is-pulled-left mb-2" id="{{ controls_text }}{% if controls_uid %}-{{ controls_uid }}{% endif %}">
     {% trans "Close" as button_text %}

bookwyrm/templates/discover/discover.html

@@ -15,7 +15,7 @@
         </p>
     </header>
 
-    {% with tile_classes="tile is-child box has-background-white-ter is-clipped" %}
+    {% with tile_classes="tile is-child box has-background-secondary is-clipped" %}
     <div class="tile is-ancestor">
         <div class="tile is-6 is-parent">
             <div class="{{ tile_classes }}">

bookwyrm/templates/discover/large-book.html

@@ -45,7 +45,7 @@
                 {% include 'snippets/follow_button.html' with user=status.user show_username=True minimal=True %}
             </div>
 
-            <div class="notification has-background-white p-2 mb-2 clip-text">
+            <div class="notification has-background-body p-2 mb-2 clip-text">
                 {% include "snippets/status/content_status.html" with hide_book=True trim_length=70 hide_more=True %}
             </div>
             <a href="{{ status.remote_id }}">

bookwyrm/templates/groups/members.html

@@ -37,7 +37,7 @@
 <div class="is-multiline is-flex is-flex-grow-0 is-flex-wrap-wrap">
     {% for membership in group.memberships.all %}
     {% with member=membership.user %}
-    <div class="box has-text-centered is-shadowless has-background-white-bis my-2 mx-2 member_{{ member.id }}">
+    <div class="box has-text-centered is-shadowless has-background-tertiary my-2 mx-2 member_{{ member.id }}">
         <a href="{{ member.local_path }}" class="has-text-black">
             {% include 'snippets/avatar.html' with user=member large=True %}
             <span title="{{ member.display_name }}" class="is-block is-6 has-text-weight-bold">{{ member.display_name|truncatechars:10 }}</span>

bookwyrm/templates/groups/suggested_users.html

@@ -8,7 +8,7 @@
     </h2>
     <div class="column is-flex is-flex-grow-0">
         {% for user in suggested_users %}
-        <div class="box has-text-centered is-shadowless has-background-white-bis m-2">
+        <div class="box has-text-centered is-shadowless has-background-tertiary m-2">
             <a href="{{ user.local_path }}" class="has-text-black">
                 {% include 'snippets/avatar.html' with user=user large=True %}
                 <span title="{{ user.display_name }}" class="is-block is-6 has-text-weight-bold">{{ user.display_name|truncatechars:10 }}</span>

bookwyrm/templates/landing/landing.html

@@ -15,18 +15,18 @@
 <section class="tile is-ancestor">
     <div class="tile is-vertical is-6">
         <div class="tile is-parent">
-            <div class="tile is-child box has-background-white-ter">
+            <div class="tile is-child box has-background-secondary">
                 {% include 'landing/large-book.html' with book=books.0 %}
             </div>
         </div>
         <div class="tile">
             <div class="tile is-parent is-6">
-                <div class="tile is-child box has-background-white-ter">
+                <div class="tile is-child box has-background-secondary">
                     {% include 'landing/small-book.html' with book=books.1 %}
                 </div>
             </div>
             <div class="tile is-parent is-6">
-                <div class="tile is-child box has-background-white-ter">
+                <div class="tile is-child box has-background-secondary">
                     {% include 'landing/small-book.html' with book=books.2 %}
                 </div>
             </div>
@@ -35,18 +35,18 @@
     <div class="tile is-vertical is-6">
         <div class="tile">
             <div class="tile is-parent is-6">
-                <div class="tile is-child box has-background-white-ter">
+                <div class="tile is-child box has-background-secondary">
                     {% include 'landing/small-book.html' with book=books.3 %}
                 </div>
             </div>
             <div class="tile is-parent is-6">
-                <div class="tile is-child box has-background-white-ter">
+                <div class="tile is-child box has-background-secondary">
                     {% include 'landing/small-book.html' with book=books.4 %}
                 </div>
             </div>
         </div>
         <div class="tile is-parent">
-            <div class="tile is-child box has-background-white-ter">
+            <div class="tile is-child box has-background-secondary">
                 {% include 'landing/large-book.html' with book=books.5 %}
             </div>
         </div>

bookwyrm/templates/landing/layout.html

@@ -78,7 +78,7 @@
             {% endif %}
         </div>
         {% else %}
-        <div class="tile is-child box has-background-white-bis">
+        <div class="tile is-child box has-background-tertiary">
             <h2 class="title is-4">{% trans "Your Account" %}</h2>
             {% include 'user/user_preview.html' with user=request.user %}
             {% if request.user.summary %}

bookwyrm/templates/lists/list.html

@@ -115,7 +115,7 @@
                         </div>
                         {% endif %}
                     </div>
-                    <div class="card-footer is-stacked-mobile has-background-white-bis is-align-items-stretch">
+                    <div class="card-footer is-stacked-mobile has-background-tertiary is-align-items-stretch">
                         <div class="card-footer-item">
                             <p>
                                 {% blocktrans trimmed with username=item.user.display_name user_path=item.user.local_path %}

bookwyrm/templates/notifications/items/boost.html

@@ -47,7 +47,7 @@
 
 
 {% block preview %}
-<div class="notification py-2 {% if notification.id in unread %}is-primary is-light{% else %}has-background-white has-text-grey-dark{% endif %}">
+<div class="notification py-2 {% if notification.id in unread %}is-primary is-light{% else %}has-background-body has-text-grey-dark{% endif %}">
     <div class="columns">
         <div class="column is-clipped">
             {% include 'snippets/status_preview.html' with status=related_status %}

bookwyrm/templates/notifications/items/fav.html

@@ -47,7 +47,7 @@
 
 
 {% block preview %}
-<div class="notification py-2 {% if notification.id in unread %}is-primary is-light{% else %}has-background-white has-text-grey-dark{% endif %}">
+<div class="notification py-2 {% if notification.id in unread %}is-primary is-light{% else %}has-background-body has-text-grey-dark{% endif %}">
     <div class="columns">
         <div class="column is-clipped">
             {% include 'snippets/status_preview.html' with status=related_status %}

bookwyrm/templates/notifications/items/mention.html

@@ -48,7 +48,7 @@
 
 
 {% block preview %}
-<div class="notification py-2 {% if notification.id in unread %}is-primary is-light{% else %}has-background-white has-text-black{% endif %}">
+<div class="notification py-2 {% if notification.id in unread %}is-primary is-light{% else %}has-background-body has-text-black{% endif %}">
     <div class="columns">
         <div class="column is-clipped">
             {% include 'snippets/status_preview.html' with status=related_status %}

bookwyrm/templates/notifications/items/reply.html

@@ -51,7 +51,7 @@
 
 
 {% block preview %}
-<div class="notification py-2 {% if notification.id in unread %}is-primary is-light{% else %}has-background-white has-text-black{% endif %}">
+<div class="notification py-2 {% if notification.id in unread %}is-primary is-light{% else %}has-background-body has-text-black{% endif %}">
     <div class="columns">
         <div class="column is-clipped">
             {% include 'snippets/status_preview.html' with status=related_status %}

bookwyrm/templates/readthrough/readthrough_list.html

@@ -3,7 +3,7 @@
 {% load tz %}
 {% load utilities %}
 <div class="content">
-    <div class="box is-shadowless has-background-white-bis">
+    <div class="box is-shadowless has-background-tertiary">
         <div class="columns">
             <div class="column">
                 {% trans "Progress Updates:" %}

bookwyrm/templates/settings/dashboard/dashboard.html

@@ -87,7 +87,7 @@
 <div class="block content">
     <h2>{% trans "Instance Activity" %}</h2>
 
-    <form method="get" action="{% url 'settings-dashboard' %}" class="notification has-background-white-bis scroll-x">
+    <form method="get" action="{% url 'settings-dashboard' %}" class="notification has-background-tertiary scroll-x">
         <div class="is-flex is-align-items-flex-end">
             <div class="ml-1 mr-1">
                 <label class="label" for="id_start">

bookwyrm/templates/settings/reports/report_preview.html

@@ -4,7 +4,7 @@
 {% load utilities %}
 
 {% block card-header %}
-<h2 class="card-header-title has-background-white-ter is-block">
+<h2 class="card-header-title has-background-secondary is-block">
     <a href="{% url 'settings-report' report.id %}">
         {% include "settings/reports/report_header.html" with report=report %}
     </a>

bookwyrm/templates/settings/users/user_info.html

@@ -8,7 +8,7 @@
         <div class="box is-flex-grow-1">
             {% include 'user/user_preview.html' with user=user %}
             {% if user.summary %}
-            <div class="box content has-background-white-ter is-shadowless">
+            <div class="box content has-background-secondary is-shadowless">
                 {{ user.summary|to_markdown|safe }}
             </div>
             {% endif %}
@@ -108,7 +108,7 @@
             </dl>
             {% if server.notes %}
             <h5>{% trans "Notes" %}</h5>
-            <div class="box content has-background-white-ter is-shadowless">
+            <div class="box content has-background-secondary is-shadowless">
                 {{ server.notes }}
             </div>
             {% endif %}

bookwyrm/templates/snippets/shelf_selector.html

@@ -23,7 +23,7 @@
         <input type="hidden" name="change-shelf-from" value="{{ current.identifier }}">
         <input type="hidden" name="shelf" value="{{ shelf.identifier }}">
 
-        <button class="button is-fullwidth is-small shelf-option is-radiusless is-white" type="submit" {% if shelf.identifier == current.identifier %}disabled{% endif %}>
+        <button class="button is-fullwidth is-small shelf-option is-radiusless has-background-body" type="submit" {% if shelf.identifier == current.identifier %}disabled{% endif %}>
             <span>
                 {% include "snippets/translated_shelf_name.html" with shelf=shelf %}
             </span>
@@ -32,7 +32,7 @@
 </li>
 {% else%}
 {% comparison_bool shelf.identifier active_shelf.shelf.identifier as is_current %}
-{% with button_class="is-fullwidth is-small shelf-option is-radiusless is-white" %}
+{% with button_class="is-fullwidth is-small shelf-option is-radiusless has-background-body" %}
 <li role="menuitem" class="dropdown-item p-0">
 {% if shelf.identifier == 'reading' %}
 

bookwyrm/templates/snippets/shelve_button/shelve_button_dropdown.html

@@ -7,5 +7,5 @@
 {% endblock %}
 
 {% block dropdown-list %}
-{% include 'snippets/shelve_button/shelve_button_dropdown_options.html' with active_shelf=active_shelf shelves=user_shelves dropdown=True class="shelf-option is-fullwidth is-small is-radiusless is-white" %}
+{% include 'snippets/shelve_button/shelve_button_dropdown_options.html' with active_shelf=active_shelf shelves=user_shelves dropdown=True class="shelf-option is-fullwidth is-small is-radiusless has-background-body" %}
 {% endblock %}

bookwyrm/templates/snippets/status/layout.html

@@ -4,7 +4,7 @@
 
 {% block card-header %}
 <div
-    class="card-header-title has-background-white-ter is-block"
+    class="card-header-title has-background-secondary is-block"
     {% if main %}id="anchor-{{ status.id }}"{% endif %}
 >
     {% include 'snippets/status/header.html' with status=status %}

bookwyrm/templates/snippets/status/status_options.html

@@ -31,7 +31,7 @@
 {# things you can do to other people's statuses #}
 <li role="menuitem" class="dropdown-item p-0">
     <span class="control">
-        <a href="{% url 'direct-messages-user' status.user|username %}" class="button is-small is-white is-radiusless is-fullwidth">
+        <a href="{% url 'direct-messages-user' status.user|username %}" class="button is-small has-background-body is-radiusless is-fullwidth">
             {% trans "Send direct message" %}
         </a>
     </span>

bookwyrm/templates/snippets/suggested_users.html

@@ -4,7 +4,7 @@
 <div class="columns is-mobile scroll-x mb-0">
     {% for user in suggested_users %}
     <div class="column is-flex is-flex-grow-0">
-        <div class="box has-text-centered is-shadowless has-background-white-bis m-0">
+        <div class="box has-text-centered is-shadowless has-background-tertiary m-0">
             <a href="{{ user.local_path }}" class="has-text-black">
                 {% include 'snippets/avatar.html' with user=user large=True %}
                 <span title="{{ user.display_name }}" class="is-block is-6 has-text-weight-bold">{{ user.display_name|truncatechars:10 }}</span>

bookwyrm/templates/user/layout.html

@@ -30,7 +30,7 @@
 
         {% if user.summary %}
         {% spaceless %}
-        <div class="column box has-background-white-bis content preserve-whitespace">
+        <div class="column box has-background-tertiary content preserve-whitespace">
             {{ user.summary|to_markdown|safe }}
         </div>
         {% endspaceless %}

bw-dev

@@ -143,13 +143,15 @@ case "$CMD" in
         ;;
     stylelint)
         docker-compose run --rm dev-tools npx stylelint \
-            bookwyrm/static/css/*.scss --fix \
+            bookwyrm/static/css/bookwyrm.scss bookwyrm/static/css/bookwyrm/**/*.scss --fix \
             --config dev-tools/.stylelintrc.js
         ;;
     formatters)
-        docker-compose run --rm dev-tools black celerywyrm bookwyrm && \
+        docker-compose run --rm dev-tools black celerywyrm bookwyrm
-            npx prettier --write bookwyrm/static/js/*.js && \
+        docker-compose run --rm dev-tools npx prettier --write bookwyrm/static/js/*.js
-            npx stylelint bookwyrm/static/css/*.scss --fix --config dev-tools/.stylelintrc.js
+        docker-compose run --rm dev-tools npx stylelint \
+            bookwyrm/static/css/bookwyrm.scss bookwyrm/static/css/bookwyrm/**/*.scss --fix \
+            --config dev-tools/.stylelintrc.js
         ;;
     compilescss)
         runweb python manage.py compilescss