stylelint

2024-11-23 20:18:00 +01:00 · 2024-05-20 21:25:43 +02:00 · 2024-05-20 21:25:43 +02:00 · f659023649
commit f659023649
parent 511c419e5e
36 changed files with 946 additions and 162 deletions
--- a/assets/.stylelintrc.yml
+++ b/assets/.stylelintrc.yml
@ -0,0 +1,75 @@
+---
+extends: stylelint-config-recommended
+rules:
+  block-no-empty: true
+  at-rule-no-unknown:
+    - true
+    - ignoreAtRules:
+      - mixin
+      - define-mixin
+  media-query-no-invalid: 
+  rule-empty-line-before:
+    - always-multi-line
+    - except:
+      - after-single-line-comment
+      - first-nested
+  declaration-block-no-duplicate-custom-properties: true
+  declaration-block-no-duplicate-properties: true
+  font-family-no-duplicate-names: true
+  keyframe-block-no-duplicate-selectors: true
+  no-duplicate-at-import-rules: true
+  no-duplicate-selectors: true
+  color-no-invalid-hex: true
+  function-calc-no-unspaced-operator: true
+  named-grid-areas-no-invalid: true
+  no-invalid-double-slash-comments: true
+  no-invalid-position-at-import-rule: true
+  string-no-newline: true
+  no-irregular-whitespace: true
+  custom-property-no-missing-var-function: true
+  font-family-no-missing-generic-family-keyword: true
+  function-linear-gradient-no-nonstandard-direction: true
+  declaration-block-no-shorthand-property-overrides: true
+  selector-anb-no-unmatchable: true
+  function-no-unknown: true
+  media-feature-name-no-unknown: true
+  media-feature-name-value-no-unknown: true
+  no-unknown-animations: true
+  length-zero-no-unit: true
+  media-feature-name-no-vendor-prefix: true
+  selector-no-vendor-prefix: true
+  value-no-vendor-prefix: true
+  function-name-case: lower
+  selector-type-case: lower
+  value-keyword-case: lower
+  at-rule-empty-line-before:
+    - always
+    - except:
+      - first-nested
+      ignore:
+      - after-comment
+      - blockless-after-blockless
+  custom-property-empty-line-before: never
+  declaration-empty-line-before: never
+  declaration-block-single-line-max-declarations: 3
+  number-max-precision: 2
+  max-nesting-depth: 1
+  color-hex-length: long
+  alpha-value-notation: number
+  font-weight-notation: named-where-possible
+  hue-degree-notation: number
+  import-notation: string
+  keyframe-selector-notation: percentage-unless-within-keyword-only-block
+  lightness-notation: percentage
+  media-feature-range-notation: prefix
+  selector-not-notation: simple
+  selector-pseudo-element-colon-notation: single
+  custom-property-pattern: "[a-z\\-\\$]+"
+  selector-class-pattern: "^[a-z\\-]+(\\-\\-|__)?[a-z\\-]*(\\-\\-|__)?[a-z\\-]*$"
+  selector-id-pattern: "[a-z\\-]+"
+  font-family-name-quotes: always-unless-keyword
+  function-url-quotes: always
+  selector-attribute-quotes: always
+  declaration-block-no-redundant-longhand-properties: true
+  shorthand-property-no-redundant-values: true
+  comment-whitespace-inside: always
--- a/assets/css/common/measurements.css
+++ b/assets/css/common/measurements.css
@ -2,53 +2,64 @@ $min-desktop-width: 1280px;
 $max-phone-width: 700px;
 $narrow-layout-width: 960px;
 $medium-layout-width: $min-desktop-width;
-
 $font-family-base: verdana, arial, helvetica, sans-serif;
 $font-family-monospace: "Droid Sans Mono", monospace;

 :root {
+  /* Paddings */
  --padding-tiny: 0.3rem;
  --padding-small: 0.4rem;
  --padding-normal: 0.75rem;
  --padding-large: 1.5rem;

+  /* Common line heights */
  --default-line-height: 1.15;
  --readable-line-height: 1.35rem;

+  /* Header height */
  --block-header-height: 2rem;

+  /* Navbar */
  --navbar-size: 4rem;
  --navbar-secondary-size: 2.5rem;
  --navbar-input-size: 2rem;
  --navbar-input-width: 18vw;
  --navbar-input-max-width: 22rem;

+  /* Avatars */
  --avatar-navbar-size: 2.5rem;
  --avatar-small-size: 6rem;
  --avatar-large-size: 8rem;

+  /* Buttons */
  --button-height: 2rem;
  --button-group-height: 2rem;
  --button-group-tall-height: 2.5rem;
  --button-group-small-height: 1.5rem;
  
+  /* Checkboxes */
  --checkbox-width: 3rem;
  --checkbox-height: 1.5rem;
  --checkbox-border-width: 2px;

+  /* Separators */
  --separator-vertical-size: 1.3em;

+  /* Tags */
  --tag-height: 2em;
  --tag-border-width: 0;

+  /* Homepage left column width on desktop */
  --column-left-width: 360px;

+  /* Borders and rounding */
  --border-radius-outer: 0.35rem;
  --border-radius-inner: 0.25rem;
  --border-radius-tag: 0.2rem;
  --border-radius-avatar: 100%;
  --border-radius-checkbox: 1rem;

+  /* Images and media */
  --media-container-width: 225px;
  --media-tiny-container-width: 50px;
  --media-small-container-width: 150px;
@ -59,18 +70,20 @@ $font-family-monospace: "Droid Sans Mono", monospace;
  --media-header-height: 2rem;
  --media-small-header-height: 1rem;

+  /* Badges */
  --badge-small-size: 1.1rem;
  --badge-normal-size: 2rem;

+  /* Counter badges (the "red notification badge") */
  --number-badge-size: 0.6rem;
  --number-badge-padding: 0.1rem;
  --number-badge-border: 2px;
  --number-badge-lower-offset: 0.7rem;
  --number-badge-upper-offset: 0.7rem;

+  /* Fonts */
  --font-family: $font-family-base;
  --font-family-monospace: $font-family-monospace;
-
  --font-size: 14px;
  --font-tiny-size: 12px;
  --font-micro-size: 10px;
@ -83,13 +96,16 @@ $font-family-monospace: "Droid Sans Mono", monospace;
  --font-h5-size: 1.1rem;
  --font-h6-size: 1rem;

+  /* Inputs */
  --input-text-height: 9rem;

+  /* Layout sizes */
  --min-desktop-width: $min-desktop-width;
  --max-phone-width: $max-phone-width;
  --medium-layout-width: $medium-layout-width;
  --narrow-layout-width: $narrow-layout-width;

+  /* Animations */
  --transition-animation-duration: 0.15s;
  --transition-long-animation-duration: 0.3s;
 }
--- a/assets/css/common/mixins.css
+++ b/assets/css/common/mixins.css
@ -60,6 +60,5 @@
@define-mixin subgrid {
  display: grid;
  grid-template-columns: 1 / -1;
-  grid: inherit;
  grid-gap: inherit;
 }
--- a/assets/css/elements/base.css
+++ b/assets/css/elements/base.css
@ -45,3 +45,13 @@ p, .paragraph {
  margin: var(--padding-small);
  margin-right: 0;
 }
+
+.fa--padded {
+  padding: 0 var(--padding-normal);
+}
+
+@mixin if-mobile {
+  .fa-padded {
+    padding: 0 var(--padding-small);
+  }
+}
--- a/assets/css/elements/block.css
+++ b/assets/css/elements/block.css
@ -59,10 +59,6 @@
  border-bottom-right-radius: var(--border-radius-outer) !important;
 }

-.block--borderless .block__header {
-  padding: 0;
-}
-
 .block__content, .block__tab {
  border-radius: var(--border-radius-outer);
  padding: var(--padding-normal);
@ -125,6 +121,10 @@
  padding: 0 var(--padding-normal);
 }

+.block--borderless .block__header {
+  padding: 0;
+}
+
 .block--fixed {
  padding: var(--padding-normal);
  border-radius: var(--border-radius-inner);
--- a/assets/css/elements/button.css
+++ b/assets/css/elements/button.css
@ -83,6 +83,10 @@
  margin-right: var(--padding-small);
 }

+.button__group--single {
+  margin-right: 0;
+}
+
 .button__group, .button__group--single, .button__group--standalone {
  display: flex;
  flex-direction: row;
@ -104,6 +108,11 @@
  line-height: var(--button-group-small-height)
 }

+.block__header__buttons .button {
+  color: var(--link-color);
+  border-width: 0 !important;
+}
+
 .button__group .button {
  border: 0;
  border-right: var(--secondary-color);
@ -113,10 +122,6 @@
  border-right: 0;
 }

-.button__group--single {
-  margin-right: 0;
-}
-
 .button__group--standalone a {
  @mixin animated-transition;
  font-weight: bold;
@ -133,11 +138,6 @@
  border-width: 0;
 }

-.block__header__buttons .button {
-  color: var(--link-color);
-  border-width: 0 !important;
-}
-
 .block__header__buttons .button:hover {
  background: var(--primary-muted-color);
  border-radius: var(--border-radius-inner);
--- a/assets/css/elements/checkbox.css
+++ b/assets/css/elements/checkbox.css
@ -1,4 +1,4 @@
-input[type=checkbox].checkbox {
+input[type="checkbox"].checkbox {
  appearance: none;
 }

@ -14,7 +14,7 @@ input[type=checkbox].checkbox {
              border-color var(--transition-long-animation-duration) ease;
 }

-.checkbox::after {
+.checkbox:after {
  content: '';
  font-family: var(--fa-style-family, "Font Awesome 6 Free");
  font-weight: var(--fa-style, 900);
@ -26,7 +26,7 @@ input[type=checkbox].checkbox {
  width: calc(var(--checkbox-height) - var(--checkbox-border-width) * 2);
  height: calc(var(--checkbox-height) - var(--checkbox-border-width) * 2);
  border-radius: 100%;
-  left: 0px;
+  left: 0;
  transition: left var(--transition-long-animation-duration) ease;
 }

@ -37,7 +37,7 @@ input[type=checkbox].checkbox {
              border-color var(--transition-long-animation-duration) ease;
 }

-.checkbox:checked::after {
+.checkbox:checked:after {
  content: '';
  left: calc(var(--checkbox-width) - var(--checkbox-height));
  transition: left var(--transition-long-animation-duration) ease;
--- a/assets/css/elements/dropdown.css
+++ b/assets/css/elements/dropdown.css
@ -3,12 +3,6 @@
  display: inline-block;
 }

-.dropdown:hover .dropdown__content {
-  display: block;
-  min-width: 100%;
-  z-index: 999;
-}
-
 .dropdown__content {
  background: var(--primary-muted-color);
  border: 1px solid var(--primary-border-color);
@ -18,6 +12,12 @@
  left: 0;
 }

+.dropdown:hover .dropdown__content {
+  display: block;
+  min-width: 100%;
+  z-index: 999;
+}
+
 .dropdown__content > :not(.hidden) {
  display: block;
  white-space: nowrap;
@ -34,6 +34,12 @@
  color: var(--text-color);
 }

+.dropdown__text {
+  padding: 0 var(--padding-small);
+  background: var(--primary-muted-color);
+  border-left: 1px solid var(--primary-border-color);
+}
+
 .dropdown__item:hover .dropdown__text {
  background: var(--primary-dark-color);
 }
@ -44,12 +50,6 @@
  border-right: 1px solid var(--primary-muted-color);
 }

-.dropdown__text {
-  padding: 0 var(--padding-small);
-  background: var(--primary-muted-color);
-  border-left: 1px solid var(--primary-border-color);
-}
-
 .dropdown__separator {
  margin: 0;
  border-color: var(--primary-border-color);
--- a/assets/css/elements/input.css
+++ b/assets/css/elements/input.css
@ -30,6 +30,6 @@
  cursor: text;
 }

-input[type=file] {
+input[type="file"] {
  padding-top: var(--padding-small);
 }
--- a/assets/css/elements/media.css
+++ b/assets/css/elements/media.css
@ -12,7 +12,7 @@
  grid-gap: var(--padding-small);
 }

-.media-list::before {
+.media-list:before {
  content: '';
  width: 0;
  padding-bottom: calc(100% + var(--media-header-height));
@ -61,12 +61,9 @@
  overflow: hidden;
 }

-.media-box__content .image-container {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+.media-box__image {
+  max-width: 100%;
+  height: auto;
 }

 .media-box__content--featured .media-box__image {
@ -93,6 +90,21 @@
  top: var(--media-header-height);
 }

+.post-image-container, .post-image-container img {
+  width: var(--media-tiny-container-width);
+  height: var(--media-tiny-container-width);
+}
+
+.media-tiny-container, .media-tiny-container img {
+  width: var(--media-tiny-container-width);
+  height: var(--media-tiny-container-width);
+}
+
+.thumb-tiny, .thumb-tiny img {
+  max-width: var(--media-tiny-container-width);
+  max-height: var(--media-tiny-container-width);
+}
+
 .image-container {
  display: flex;
  flex-direction: column;
@ -109,6 +121,7 @@

 /* For some reason tall images don't center properly within the container
    without this hack. I blame CSS. */
+
 .image-container a img {
  max-height: 100%;
  margin: auto;
@ -122,11 +135,16 @@
  height: 100%;
 }

+.media-box__content .image-container {
+  position: absolute;
+  inset: 0;
+}
+
 .media__standalone {
  position: relative;
 }

-.thumb_tiny .media-box__overlay {
+.thumb-tiny .media-box__overlay {
  width: 100%;
  max-width: 100%;
  padding: 0 var(--padding-tiny);
@ -134,16 +152,6 @@
  font-size: var(--font-micro-size);
 }

-.post-image-container, .post-image-container img {
-  width: var(--media-tiny-container-width);
-  height: var(--media-tiny-container-width);
-}
-
-.media-box__image {
-  max-width: 100%;
-  height: auto;
-}
-
 .media-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
@ -154,13 +162,3 @@
 .image-scaled {
  max-width: 100%;
 }
-
-.media-tiny-container, .media-tiny-container img {
-  width: var(--media-tiny-container-width);
-  height: var(--media-tiny-container-width);
-}
-
-.thumb_tiny, .thumb_tiny img {
-  max-width: var(--media-tiny-container-width);
-  max-height: var(--media-tiny-container-width);
-}
--- a/assets/css/options/checkbox-icons.css
+++ b/assets/css/options/checkbox-icons.css
@ -1,7 +1,7 @@
-.checkbox::after {
+.checkbox:after {
  content: '\f00d';
 }

-.checkbox:checked::after {
+.checkbox:checked:after {
  content: '\f00c';
 }
--- a/assets/css/themes/dark-blue.css
+++ b/assets/css/themes/dark-blue.css
@ -44,40 +44,48 @@ $spoiler-color: #0f0f0f;
 }

 :root {
+  /* Main colors */
  --background-color: $background-color;
  --text-color: $text-color;
  --text-light-color: $text-color;

+  /* Link colors */
  --link-color: hsl(from $primary-color h calc(s + 10) calc(l + 40));
  --link-hover-color: $text-color;

+  /* Primary color (block backgrounds and such) */
  --primary-color: $primary-color;
  --primary-border-color: hsl(from $primary-color h calc(s - 20) calc(l + 5));
  --primary-muted-color: hsl(from $primary-color h calc(s - 10) calc(l - 10));
  --primary-dark-color: hsl(from $primary-color h calc(s - 15) calc(l - 15));
  --primary-link-color: var(--link-color); /* for consistency */

+  /* Secondary color (most buttons) */
  --secondary-color: $secondary-color;
  --secondary-border-color: hsl(from $secondary-color h s calc(l + 5));
  --secondary-muted-color: hsl(from $secondary-color h s calc(l - 17));
  --secondary-dark-color: hsl(from $secondary-color h calc(s - 5) calc(l - 25));
  --secondary-link-color: hsl(from $secondary-color h s calc(l + 40));

+  /* Interaction (vote) colors */
  --upvote-color: $upvote-color;
  --downvote-color: $downvote-color;
  --fave-color: $fave-color;
  --comment-color: $comment-color;
  --hide-color: $hide-color;

+  /* Spoiler colors */
  --spoiler-color: $spoiler-color;
  --spoiler-revealed-color: hsl(from $spoiler-color h s calc(l + 20));

+  /* Type (information category) colors */
  @mixin type-color success, $success-color;
  @mixin type-color warning, $warning-color;
  @mixin type-color danger, $danger-color;
  @mixin type-color information, $information-color;
  @mixin type-color special, $special-color;

+  /* Tag colors */
  @mixin tag-color default, $tag-default-color;
  @mixin tag-color error, $tag-error-color, 37;
  @mixin tag-color rating, $tag-rating-color, 37;
--- a/assets/css/themes/dark-purple.css
+++ b/assets/css/themes/dark-purple.css
@ -44,40 +44,48 @@ $spoiler-color: #0f0f0f;
 }

 :root {
+  /* Main colors */
  --background-color: $background-color;
  --text-color: $text-color;
  --text-light-color: $text-color;

+  /* Link colors */
  --link-color: hsl(from $primary-color h calc(s + 10) calc(l + 50));
  --link-hover-color: $text-color;

+  /* Primary color (block backgrounds and such) */
  --primary-color: $primary-color;
  --primary-border-color: hsl(from $primary-color h calc(s - 20) calc(l + 5));
  --primary-muted-color: hsl(from $primary-color h calc(s - 10) calc(l - 5));
  --primary-dark-color: hsl(from $primary-color h calc(s - 15) calc(l - 9));
  --primary-link-color: var(--link-color); /* for consistency */

+  /* Secondary color (most buttons) */
  --secondary-color: $secondary-color;
  --secondary-border-color: hsl(from $secondary-color h s calc(l + 5));
  --secondary-muted-color: hsl(from $secondary-color h s calc(l - 17));
  --secondary-dark-color: hsl(from $secondary-color h calc(s - 5) calc(l - 25));
  --secondary-link-color: hsl(from $secondary-color h s calc(l + 40));

+  /* Interaction (vote) colors */
  --upvote-color: $upvote-color;
  --downvote-color: $downvote-color;
  --fave-color: $fave-color;
  --comment-color: $comment-color;
  --hide-color: $hide-color;

+   /* Spoiler colors */
  --spoiler-color: $spoiler-color;
  --spoiler-revealed-color: hsl(from $spoiler-color h s calc(l + 20));

+  /* Type (information category) colors */
  @mixin type-color success, $success-color;
  @mixin type-color warning, $warning-color;
  @mixin type-color danger, $danger-color;
  @mixin type-color information, $information-color;
  @mixin type-color special, $special-color;

+  /* Tag colors */
  @mixin tag-color default, $tag-default-color;
  @mixin tag-color error, $tag-error-color, 37;
  @mixin tag-color rating, $tag-rating-color, 37;
--- a/assets/css/themes/light-blue.css
+++ b/assets/css/themes/light-blue.css
@ -44,40 +44,48 @@ $spoiler-color: #0f0f0f;
 }

 :root {
+  /* Main colors */
  --background-color: $background-color;
  --text-color: $text-color;
  --text-light-color: $background-color;

+  /* Link colors */
  --link-color: hsl(from $primary-color h calc(s + 25) calc(l - 25));
  --link-hover-color: $text-color;

+  /* Primary color (block backgrounds and such) */
  --primary-color: $primary-color;
  --primary-border-color: hsl(from $primary-color h calc(s + 5) calc(l - 5));
  --primary-muted-color: hsl(from $primary-color h calc(s + 7) calc(l + 20));
  --primary-dark-color: hsl(from $primary-color h calc(s + 20) calc(l + 35));
  --primary-link-color: var(--link-color); /* for consistency */

+  /* Secondary color (most buttons) */
  --secondary-color: $secondary-color;
  --secondary-border-color: hsl(from $secondary-color h s calc(l - 45));
  --secondary-muted-color: hsl(from $secondary-color h calc(s + 5) calc(l + 18));
  --secondary-dark-color: hsl(from $secondary-color h calc(s - 5) calc(l + 25));
  --secondary-link-color: hsl(from $secondary-color h s calc(l - 55));

+  /* Interaction (vote) colors */
  --upvote-color: $upvote-color;
  --downvote-color: $downvote-color;
  --fave-color: $fave-color;
  --comment-color: $comment-color;
  --hide-color: $hide-color;

+  /* Spoiler colors */
  --spoiler-color: $spoiler-color;
  --spoiler-revealed-color: hsl(from $spoiler-color h s calc(l + 20));

+  /* Type (information category) colors */
  @mixin type-color success, $success-color;
  @mixin type-color warning, $warning-color;
  @mixin type-color danger, $danger-color;
  @mixin type-color information, $information-color;
  @mixin type-color special, $special-color;

+  /* Tag colors */
  @mixin tag-color default, $tag-default-color;
  @mixin tag-color error, $tag-error-color, 37;
  @mixin tag-color rating, $tag-rating-color, 37;
@ -106,6 +114,6 @@ header {
  color: var(--text-light-color) !important;
 }

-.header__search > .input:hover, .input:focus {
+.input:focus, .header__search > .input:hover {
  color: var(--text-color) !important;
 }
--- a/assets/css/views/approval.css
+++ b/assets/css/views/approval.css
@ -39,8 +39,7 @@

@mixin if-mobile {
  .approval-grid {
-    grid-template-columns: 1fr;
-    grid-template-rows: auto;
+    grid-template: auto / 1fr;
    grid-template-areas:
      "main"
      "footer";
--- a/assets/css/views/communication.css
+++ b/assets/css/views/communication.css
@ -32,7 +32,7 @@
 .communication__anonymous {
  display: flex;
  flex-direction: row;
-  line-height: ar(--block-header-height);
+  line-height: var(--block-header-height);
  background: var(--secondary-color);
  border: 1px solid var(--secondary-border-color);
 }
--- a/assets/css/views/header.css
+++ b/assets/css/views/header.css
@ -84,6 +84,16 @@ nav.dropdown__content {
  line-height: var(--navbar-secondary-size);
 }

+i.favicon-home {
+  background-image: url("/favicon.svg");
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  min-width: 1em;
+  height: 1em;
+  display: inline-block;
+}
+
@mixin if-mobile {
  header {
    gap: var(--padding-normal);
--- a/assets/css/views/image.css
+++ b/assets/css/views/image.css
@ -2,16 +2,16 @@
  margin-top: var(--padding-normal);
 }

-.image_sources {
+.image-sources {
  display: grid;
  grid-template-columns: var(--font-icon-size) auto;
  gap: var(--padding-small);
 }

-.image_source__icon, .image_source__link {
+.image-source__icon, .image-source__link {
  overflow: hidden;
 }

-.image_source__icon {
+.image-source__icon {
  justify-self: center;
 }
--- a/assets/css/views/interaction.css
+++ b/assets/css/views/interaction.css
@ -18,7 +18,7 @@
@mixin interaction-type comment;
@mixin interaction-type hide;

-.comments_count {
+.comments-count {
  position: absolute;
  background: var(--background-color);
  border: var(--number-badge-border) solid var(--background-color);
@ -29,6 +29,6 @@
  top: var(--number-badge-lower-offset);
 }

-.interaction--comment:hover > .comments_count {
+.interaction--comment:hover > .comments-count {
  visibility: hidden;
 }
--- a/assets/css/views/markdown.css
+++ b/assets/css/views/markdown.css
@ -1,10 +1,9 @@
 .textile-syntax-reference {
  display: flex;
-  flex-direction: row;
+  flex-flow: row wrap;
  line-height: var(--block-header-height);
  vertical-align: center;
  margin-bottom: var(--padding-small);
-  flex-wrap: wrap;
 }

 .textile-syntax-reference > span,
@ -12,11 +11,6 @@
  margin-left: var(--padding-normal);
 }

-.textile_help {
-  width: 100%;
-  margin-top: var(--padding-normal);
-}
-
 .spoiler, .spoiler a {
  color: var(--spoiler-color);
  background: var(--spoiler-color)
--- a/assets/css/views/metabar.css
+++ b/assets/css/views/metabar.css
@ -8,7 +8,7 @@
  display: block;
 }

-.metabar__interactions .comments_count {
+.metabar__interactions .comments-count {
  background: 0;
  border: 0;
  position: static;
@ -27,8 +27,7 @@
  @mixin fix-interaction hide;

  .metabar__interactions * {
-    align-self: center;
-    justify-self: center;
+    place-self: center center;
  }

  .metabar__mobile-separator {
@ -46,8 +45,7 @@
  }

  .metabar__navigation a {
-    align-self: center;
-    justify-self: center;
+    place-self: center center;
  }
 }

@ -70,7 +68,7 @@
  gap: var(--padding-small);
 }

-.metabar__user-credit .image_uploader {
+.metabar__user-credit .image-uploader {
  display: flex;
  align-items: center;
  gap: var(--padding-small);
@ -79,7 +77,7 @@
 /* For some bizarre reason the icon appears to have
 * comically large gap on desktop */
@mixin if-desktop {
-  .image_uploader > .username-with-icon {
+  .image-uploader > .username-with-icon {
    gap: 0;
  }
 }
--- a/assets/css/views/tag.css
+++ b/assets/css/views/tag.css
@ -20,8 +20,7 @@

 .tag-list {
  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
  gap: var(--padding-small);
  margin-bottom: var(--padding-normal);
 }
--- a/assets/css/views/user.css
+++ b/assets/css/views/user.css
@ -27,8 +27,7 @@

 .user-title {
  display: flex;
-  flex-direction: row;
+  flex-flow: row wrap;
  gap: var(--padding-small);
-  flex-wrap: wrap;
  margin-top: var(--padding-small);
 }
--- a/assets/js/misc.js
+++ b/assets/js/misc.js
@ -11,7 +11,7 @@ function formResult({target, detail}) {

  const elements = {
    '#description-form': '.image-description',
-    '#uploader-form': '.image_uploader'
+    '#uploader-form': '.image-uploader'
  };

  function showResult(resultEl, formEl, response) {
--- a/assets/package-lock.json
+++ b/assets/package-lock.json
@ -29,6 +29,8 @@
        "chai": "^5",
        "eslint-plugin-vitest": "^0.5.4",
        "jsdom": "^24.0.0",
+        "stylelint": "^16.5.0",
+        "stylelint-config-standard": "^36.0.0",
        "vitest": "^1.5.3",
        "vitest-fetch-mock": "^0.2.2"
      }
@ -270,9 +272,9 @@
      }
    },
    "node_modules/@csstools/css-parser-algorithms": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.6.1.tgz",
-      "integrity": "sha512-ubEkAaTfVZa+WwGhs5jbo5Xfqpeaybr/RvWzvFxRs4jfq16wH8l8Ty/QEEpINxll4xhuGfdMbipRyz5QZh9+FA==",
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.6.3.tgz",
+      "integrity": "sha512-xI/tL2zxzEbESvnSxwFgwvy5HS00oCXxL4MLs6HUiDcYfwowsoQaABKxUElp1ARITrINzBnsECOc1q0eg2GOrA==",
      "funding": [
        {
          "type": "github",
@ -287,13 +289,13 @@
        "node": "^14 || ^16 || >=18"
      },
      "peerDependencies": {
-        "@csstools/css-tokenizer": "^2.2.4"
+        "@csstools/css-tokenizer": "^2.3.1"
      }
    },
    "node_modules/@csstools/css-tokenizer": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.2.4.tgz",
-      "integrity": "sha512-PuWRAewQLbDhGeTvFuq2oClaSCKPIBmHyIobCV39JHRYN0byDcUWJl5baPeNUcqrjtdMNqFooE0FGl31I3JOqw==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.3.1.tgz",
+      "integrity": "sha512-iMNHTyxLbBlWIfGtabT157LH9DUx9X8+Y3oymFEuMj8HNc+rpE3dPFGFgHjpKfjeFDjLjYIAIhXPGvS2lKxL9g==",
      "funding": [
        {
          "type": "github",
@ -308,6 +310,29 @@
        "node": "^14 || ^16 || >=18"
      }
    },
+    "node_modules/@csstools/media-query-list-parser": {
+      "version": "2.1.11",
+      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.11.tgz",
+      "integrity": "sha512-uox5MVhvNHqitPP+SynrB1o8oPxPMt2JLgp5ghJOWf54WGQ5OKu47efne49r1SWqs3wRP8xSWjnO9MBKxhB1dA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^2.6.3",
+        "@csstools/css-tokenizer": "^2.3.1"
+      }
+    },
    "node_modules/@csstools/postcss-progressive-custom-properties": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-3.2.0.tgz",
@ -360,6 +385,28 @@
        "postcss": "^8.4"
      }
    },
+    "node_modules/@csstools/selector-specificity": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.1.1.tgz",
+      "integrity": "sha512-a7cxGcJ2wIlMFLlh8z2ONm+715QkPHiyJcxwQlKOz/03GPw1COpfhcmC9wm4xlZfp//jWHNNMwzjtqHXVWU9KA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss-selector-parser": "^6.0.13"
+      }
+    },
    "node_modules/@csstools/utilities": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/@csstools/utilities/-/utilities-1.0.0.tgz",
@ -381,6 +428,16 @@
        "postcss": "^8.4"
      }
    },
+    "node_modules/@dual-bundle/import-meta-resolve": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@dual-bundle/import-meta-resolve/-/import-meta-resolve-4.1.0.tgz",
+      "integrity": "sha512-+nxncfwHM5SgAtrVzgpzJOI1ol0PkumhVo469KCf9lUi21IGcY90G98VuHm9VRrUypmAzawAHO9bs6hqeADaVg==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
    "node_modules/@esbuild/aix-ppc64": {
      "version": "0.20.2",
      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
@ -1974,6 +2031,15 @@
        "node": ">=12"
      }
    },
+    "node_modules/astral-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
+      "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/asynckit": {
      "version": "0.4.0",
      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@ -2193,6 +2259,12 @@
      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
    },
+    "node_modules/colord": {
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
+      "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
+      "dev": true
+    },
    "node_modules/combined-stream": {
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@ -2215,6 +2287,32 @@
      "integrity": "sha512-uJcB/FKZtBMCJpK8MQji6bJHgu1tixKPxRLeGkNzBoOZzpnZUJm0jm2/sBDWcuBx1dYgxV4JU+g5hmNxCyAmdA==",
      "dev": true
    },
+    "node_modules/cosmiconfig": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz",
+      "integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==",
+      "dev": true,
+      "dependencies": {
+        "env-paths": "^2.2.1",
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/cross-env": {
      "version": "7.0.3",
      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
@ -2254,12 +2352,46 @@
        "node": ">= 8"
      }
    },
+    "node_modules/css-functions-list": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.2.tgz",
+      "integrity": "sha512-c+N0v6wbKVxTu5gOBBFkr9BEdBWaqqjQeiJ8QvSRIJOf+UxlJh930m8e6/WNeODIK0mYLFkoONrnj16i2EcvfQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12 || >=16"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "dev": true,
+      "dependencies": {
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
    "node_modules/css.escape": {
      "version": "1.5.1",
      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
      "dev": true
    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
    "node_modules/cssom": {
      "version": "0.5.0",
      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
@ -2396,6 +2528,12 @@
      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.751.tgz",
      "integrity": "sha512-2DEPi++qa89SMGRhufWTiLmzqyuGmNF3SK4+PQetW1JKiZdEpF4XQonJXJCzyuYSA6mauiMhbyVhqYAP45Hvfw=="
    },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true
+    },
    "node_modules/entities": {
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@ -2407,6 +2545,24 @@
        "url": "https://github.com/fb55/entities?sponsor=1"
      }
    },
+    "node_modules/env-paths": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
+      "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dev": true,
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
    "node_modules/esbuild": {
      "version": "0.20.2",
      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
@ -2723,6 +2879,15 @@
      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="
    },
+    "node_modules/fastest-levenshtein": {
+      "version": "1.0.16",
+      "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
+      "integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4.9.1"
+      }
+    },
    "node_modules/fastq": {
      "version": "1.17.1",
      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
@ -2888,6 +3053,44 @@
        "node": "*"
      }
    },
+    "node_modules/global-modules": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
+      "integrity": "sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==",
+      "dev": true,
+      "dependencies": {
+        "global-prefix": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/global-prefix": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz",
+      "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==",
+      "dev": true,
+      "dependencies": {
+        "ini": "^1.3.5",
+        "kind-of": "^6.0.2",
+        "which": "^1.3.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/global-prefix/node_modules/which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dev": true,
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "which": "bin/which"
+      }
+    },
    "node_modules/globals": {
      "version": "13.24.0",
      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
@ -2921,6 +3124,12 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/globjoin": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/globjoin/-/globjoin-0.1.4.tgz",
+      "integrity": "sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==",
+      "dev": true
+    },
    "node_modules/graceful-fs": {
      "version": "4.2.11",
      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@ -2957,6 +3166,18 @@
      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
      "dev": true
    },
+    "node_modules/html-tags": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz",
+      "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/http-proxy-agent": {
      "version": "7.0.2",
      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
@ -3048,6 +3269,18 @@
      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
    },
+    "node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "dev": true
+    },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "dev": true
+    },
    "node_modules/is-extglob": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@ -3056,6 +3289,15 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/is-glob": {
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@ -3083,6 +3325,15 @@
        "node": ">=8"
      }
    },
+    "node_modules/is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/is-potential-custom-element-name": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
@ -3488,6 +3739,12 @@
      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ=="
    },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true
+    },
    "node_modules/json-schema-traverse": {
      "version": "0.4.1",
      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@ -3506,6 +3763,21 @@
        "json-buffer": "3.0.1"
      }
    },
+    "node_modules/kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/known-css-properties": {
+      "version": "0.30.0",
+      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.30.0.tgz",
+      "integrity": "sha512-VSWXYUnsPu9+WYKkfmJyLKtIvaRJi1kXUqVmBACORXZQxT5oZDsoZ2vQP+bQFDnWtpI/4eq3MLoRMjI2fnLzTQ==",
+      "dev": true
+    },
    "node_modules/levn": {
      "version": "0.4.1",
      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@ -3518,6 +3790,12 @@
        "node": ">= 0.8.0"
      }
    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true
+    },
    "node_modules/local-pkg": {
      "version": "0.5.0",
      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.5.0.tgz",
@ -3559,6 +3837,12 @@
      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
    },
+    "node_modules/lodash.truncate": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
+      "integrity": "sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==",
+      "dev": true
+    },
    "node_modules/loupe": {
      "version": "2.3.7",
      "resolved": "https://registry.npmjs.org/loupe/-/loupe-2.3.7.tgz",
@ -3623,6 +3907,34 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/mathml-tag-names": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz",
+      "integrity": "sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/mdn-data": {
+      "version": "2.0.30",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "dev": true
+    },
+    "node_modules/meow": {
+      "version": "13.2.0",
+      "resolved": "https://registry.npmjs.org/meow/-/meow-13.2.0.tgz",
+      "integrity": "sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/merge-stream": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@ -3777,6 +4089,15 @@
      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw=="
    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/normalize-range": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
@ -3858,6 +4179,24 @@
        "node": ">=6"
      }
    },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/parse5": {
      "version": "7.1.2",
      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
@ -4015,6 +4354,51 @@
        "postcss": "^8.2.14"
      }
    },
+    "node_modules/postcss-resolve-nested-selector": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz",
+      "integrity": "sha512-HvExULSwLqHLgUy1rl3ANIqCsvMS0WHss2UOsXhXnQaZ9VCc2oBvIpXrl00IUFT5ZDITME0o6oiXeiHr2SAIfw==",
+      "dev": true
+    },
+    "node_modules/postcss-safe-parser": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-7.0.0.tgz",
+      "integrity": "sha512-ovehqRNVCpuFzbXoTb4qLtyzK3xn3t/CUBxOs8LsnQjQrShaB4lKiHoVqY8ANaC0hBMHq5QVWk77rwGklFUDrg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss-safe-parser"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "engines": {
+        "node": ">=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.0.16",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
+      "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
    "node_modules/postcss-simple-vars": {
      "version": "7.0.1",
      "resolved": "https://registry.npmjs.org/postcss-simple-vars/-/postcss-simple-vars-7.0.1.tgz",
@ -4131,6 +4515,15 @@
      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
      "dev": true
    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/requires-port": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@ -4284,6 +4677,18 @@
      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
      "dev": true
    },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
    "node_modules/slash": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@ -4292,6 +4697,23 @@
        "node": ">=8"
      }
    },
+    "node_modules/slice-ansi": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz",
+      "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "astral-regex": "^2.0.0",
+        "is-fullwidth-code-point": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+      }
+    },
    "node_modules/source-map": {
      "version": "0.6.1",
      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@ -4340,6 +4762,20 @@
      "integrity": "sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==",
      "dev": true
    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/strip-ansi": {
      "version": "6.0.1",
      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@ -4392,6 +4828,157 @@
      "integrity": "sha512-WriZw1luRMlmV3LGJaR6QOJjWwgLUTf89OwT2lUOyjX2dJGBwgmIkbcz+7WFZjrZM635JOIR517++e/67CP9dQ==",
      "dev": true
    },
+    "node_modules/stylelint": {
+      "version": "16.5.0",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.5.0.tgz",
+      "integrity": "sha512-IlCBtVrG+qTy3v+tZTk50W8BIomjY/RUuzdrDqdnlCYwVuzXtPbiGfxYqtyYAyOMcb+195zRsuHn6tgfPmFfbw==",
+      "dev": true,
+      "dependencies": {
+        "@csstools/css-parser-algorithms": "^2.6.1",
+        "@csstools/css-tokenizer": "^2.2.4",
+        "@csstools/media-query-list-parser": "^2.1.9",
+        "@csstools/selector-specificity": "^3.0.3",
+        "@dual-bundle/import-meta-resolve": "^4.0.0",
+        "balanced-match": "^2.0.0",
+        "colord": "^2.9.3",
+        "cosmiconfig": "^9.0.0",
+        "css-functions-list": "^3.2.2",
+        "css-tree": "^2.3.1",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.3.2",
+        "fastest-levenshtein": "^1.0.16",
+        "file-entry-cache": "^8.0.0",
+        "global-modules": "^2.0.0",
+        "globby": "^11.1.0",
+        "globjoin": "^0.1.4",
+        "html-tags": "^3.3.1",
+        "ignore": "^5.3.1",
+        "imurmurhash": "^0.1.4",
+        "is-plain-object": "^5.0.0",
+        "known-css-properties": "^0.30.0",
+        "mathml-tag-names": "^2.1.3",
+        "meow": "^13.2.0",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.38",
+        "postcss-resolve-nested-selector": "^0.1.1",
+        "postcss-safe-parser": "^7.0.0",
+        "postcss-selector-parser": "^6.0.16",
+        "postcss-value-parser": "^4.2.0",
+        "resolve-from": "^5.0.0",
+        "string-width": "^4.2.3",
+        "strip-ansi": "^7.1.0",
+        "supports-hyperlinks": "^3.0.0",
+        "svg-tags": "^1.0.0",
+        "table": "^6.8.2",
+        "write-file-atomic": "^5.0.1"
+      },
+      "bin": {
+        "stylelint": "bin/stylelint.mjs"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/stylelint"
+      }
+    },
+    "node_modules/stylelint-config-recommended": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-14.0.0.tgz",
+      "integrity": "sha512-jSkx290CglS8StmrLp2TxAppIajzIBZKYm3IxT89Kg6fGlxbPiTiyH9PS5YUuVAFwaJLl1ikiXX0QWjI0jmgZQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "stylelint": "^16.0.0"
+      }
+    },
+    "node_modules/stylelint-config-standard": {
+      "version": "36.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-36.0.0.tgz",
+      "integrity": "sha512-3Kjyq4d62bYFp/Aq8PMKDwlgUyPU4nacXsjDLWJdNPRUgpuxALu1KnlAHIj36cdtxViVhXexZij65yM0uNIHug==",
+      "dev": true,
+      "dependencies": {
+        "stylelint-config-recommended": "^14.0.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "stylelint": "^16.1.0"
+      }
+    },
+    "node_modules/stylelint/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/stylelint/node_modules/balanced-match": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz",
+      "integrity": "sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==",
+      "dev": true
+    },
+    "node_modules/stylelint/node_modules/file-entry-cache": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+      "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
+      "dev": true,
+      "dependencies": {
+        "flat-cache": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/stylelint/node_modules/flat-cache": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+      "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
+      "dev": true,
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/stylelint/node_modules/resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/stylelint/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
    "node_modules/sugarss": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-4.0.1.tgz",
@ -4418,11 +5005,68 @@
        "node": ">=8"
      }
    },
+    "node_modules/supports-hyperlinks": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-3.0.0.tgz",
+      "integrity": "sha512-QBDPHyPQDRTy9ku4URNGY5Lah8PAaXs6tAAwp55sL5WCsSW7GIfdf6W5ixfziW+t7wh3GVvHyHHyQ1ESsoRvaA==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0",
+        "supports-color": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
+    "node_modules/svg-tags": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
+      "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==",
+      "dev": true
+    },
    "node_modules/symbol-tree": {
      "version": "3.2.4",
      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
    },
+    "node_modules/table": {
+      "version": "6.8.2",
+      "resolved": "https://registry.npmjs.org/table/-/table-6.8.2.tgz",
+      "integrity": "sha512-w2sfv80nrAh2VCbqR5AK27wswXhqcck2AhfnNW76beQXskGZ1V12GwS//yYVa3d3fcvAip2OUnbDAjW2k3v9fA==",
+      "dev": true,
+      "dependencies": {
+        "ajv": "^8.0.1",
+        "lodash.truncate": "^4.4.2",
+        "slice-ansi": "^4.0.0",
+        "string-width": "^4.2.3",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/table/node_modules/ajv": {
+      "version": "8.13.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.13.0.tgz",
+      "integrity": "sha512-PRA911Blj99jR5RMeTunVbNXMF6Lp4vZXnk5GQjcnUWUTsrXtekg/pnmFFI2u/I36Y/2bITGS30GZCXei6uNkA==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.4.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/table/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true
+    },
    "node_modules/test-exclude": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
@ -4652,6 +5296,12 @@
        "requires-port": "^1.0.0"
      }
    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true
+    },
    "node_modules/vite": {
      "version": "5.2.10",
      "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.10.tgz",
@ -4978,18 +5628,6 @@
        "node": "*"
      }
    },
-    "node_modules/vitest/node_modules/signal-exit": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
-      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
-      "dev": true,
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
    "node_modules/vitest/node_modules/strip-final-newline": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
@ -5099,6 +5737,19 @@
      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
    },
+    "node_modules/write-file-atomic": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-5.0.1.tgz",
+      "integrity": "sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==",
+      "dev": true,
+      "dependencies": {
+        "imurmurhash": "^0.1.4",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
    "node_modules/ws": {
      "version": "8.17.0",
      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
--- a/assets/package.json
+++ b/assets/package.json
@ -34,6 +34,8 @@
    "chai": "^5",
    "eslint-plugin-vitest": "^0.5.4",
    "jsdom": "^24.0.0",
+    "stylelint": "^16.5.0",
+    "stylelint-config-standard": "^36.0.0",
    "vitest": "^1.5.3",
    "vitest-fetch-mock": "^0.2.2"
  }
--- a/lib/philomena_web/templates/error/show.html.slime
+++ b/lib/philomena_web/templates/error/show.html.slime
@ -17,7 +17,7 @@ html lang="en"
  body.minimal
    .minimal__message
      h1.minimal__message__header
-        i.fa.fw.favicon-home>
+        i.fa--padded.favicon-home>
        = site_name()

      h3 = @short_msg
--- a/lib/philomena_web/templates/image/_image_box.html.slime
+++ b/lib/philomena_web/templates/image/_image_box.html.slime
@ -31,7 +31,7 @@ elixir:
      a.interaction--comment href="/#{@image.id}#comments" title="Comments"
        i.fa.fa-comments>
        = if @image.comments_count > 0 do
-          span.comments_count data-image-id=@image.id = @image.comments_count
+          span.comments-count data-image-id=@image.id = @image.comments_count
      /a.interaction--hide href="#" rel="nofollow" data-image-id=@image.id
        i.fa.fa-eye-slash title="Hide"
  .media-box__content class=size_class
--- a/lib/philomena_web/templates/image/_image_meta.html.slime
+++ b/lib/philomena_web/templates/image/_image_meta.html.slime
@ -27,7 +27,7 @@
          span.downvotes< title="Downvotes" data-image-id=@image.id = @image.downvotes_count
      a.interaction--comment.hidden--phone href="#comments" title="Comments"
        i.fa.fa-comments
-        span.comments_count< data-image-id=@image.id = @image.comments_count
+        span.comments-count< data-image-id=@image.id = @image.comments_count
      a.interaction--hide href="#" rel="nofollow" data-image-id=@image.id
        span.hide-span title="Hide"
          i.fa.fa-eye-slash
--- a/lib/philomena_web/templates/image/_source.html.slime
+++ b/lib/philomena_web/templates/image/_source.html.slime
@ -66,22 +66,22 @@
              i.fas.fa-eraser>
              ' Wipe
    .block__content.flex.flex--wrap.flex--column
-      .image_sources
+      .image-sources
        = if has_sources do
          - [first_source | sources] = @image.sources
-          .image_source__icon
+          .image-source__icon
            i class=image_source_icon(first_source.source)
-          .image_source__link
+          .image-source__link
            a.js-source-link href=first_source.source
              strong = first_source.source
          = for source <- sources do
-            .image_source__icon
+            .image-source__icon
              i class=image_source_icon(source.source)
-            .image_source__link
+            .image-source__link
              a href=source.source
                strong = source.source
        - else
-          .image_source__icon
+          .image-source__icon
            i.fa.fa-unlink
-          .image_source__link
+          .image-source__link
            em> not provided yet
--- a/lib/philomena_web/templates/image/_uploader.html.slime
+++ b/lib/philomena_web/templates/image/_uploader.html.slime
@ -1,11 +1,11 @@
-span.image_uploader
+span.image-uploader
  ' by
  => render PhilomenaWeb.UserAttributionView, "_anon_user.html", object: @image, awards: true, conn: @conn

  = if can?(@conn, :show, :ip_address) and not hide_staff_tools?(@conn) do
    => link_to_ip(@conn, @image.ip)
    => link_to_fingerprint(@conn, @image.fingerprint)
-    a#edit-uploader href="#" data-click-hide=".image_uploader" data-click-show="#uploader-form"
+    a#edit-uploader href="#" data-click-hide=".image-uploader" data-click-show="#uploader-form"
      i.fas.fa-edit
    a#edit-anonymous href="#" data-click-toggle=".image-anonymous"
      i.fas.fa-eye
--- a/lib/philomena_web/templates/layout/_burger.html.slime
+++ b/lib/philomena_web/templates/layout/_burger.html.slime
@ -1,6 +1,6 @@
 nav#burger
  a href="/"
-    i.fa-fw.favicon-home<>
+    i.fa--padded.favicon-home<>
    ' Home
  a href="/images/new"
    i.fa.fa-fw.fa-upload<>
--- a/lib/philomena_web/templates/layout/_header.html.slime
+++ b/lib/philomena_web/templates/layout/_header.html.slime
@ -3,7 +3,7 @@ header
    a.header__link href="#"
      i.fa.fa-bars
  a.header__logo.header__link href="/"
-    i.fab.fa-phoenix-framework>
+    i.fa--padded.favicon-home>
    span.hidden--mobile = site_name()
  a.header__link.hidden--mobile href="/images/new" title="Upload"
    i.fa.fa-upload
--- a/lib/philomena_web/views/image_view.ex
+++ b/lib/philomena_web/views/image_view.ex
@ -175,7 +175,7 @@ defmodule PhilomenaWeb.ImageView do

  def image_container(conn, image, size, block) do
    content_tag(:div, block.(),
-      class: "image-container #{size}",
+      class: "image-container #{String.replace(to_string(size), "_", "-", global: true)}",
      data: image_container_data(conn, image, size)
    )
  end
--- a/lib/philomena_web/views/setting_view.ex
+++ b/lib/philomena_web/views/setting_view.ex
@ -3,41 +3,46 @@ defmodule PhilomenaWeb.SettingView do

  def theme_options(conn) do
    [
-      [
-        key: "Blue (default)",
-        value: "dark-blue",
-        data: [theme_path: Routes.static_path(conn, "/css/dark-blue.css")]
-      ],
      [
        key: "Red",
        value: "dark-red",
        data: [theme_path: Routes.static_path(conn, "/css/dark-red.css")]
      ],
      [
-        key: "Green",
-        value: "dark-green",
-        data: [theme_path: Routes.static_path(conn, "/css/dark-green.css")]
-      ],
-      [
-        key: "Purple",
-        value: "dark-purple",
-        data: [theme_path: Routes.static_path(conn, "/css/dark-purple.css")]
-      ],
-      [
-        key: "Pink",
-        value: "dark-pink",
-        data: [theme_path: Routes.static_path(conn, "/css/dark-pink.css")]
+        key: "Orange",
+        value: "dark-orange",
+        data: [theme_path: Routes.static_path(conn, "/css/dark-orange.css")]
      ],
      [
        key: "Yellow",
        value: "dark-yellow",
        data: [theme_path: Routes.static_path(conn, "/css/dark-yellow.css")]
      ],
+      [
+        key: "Green",
+        value: "dark-green",
+        data: [theme_path: Routes.static_path(conn, "/css/dark-green.css")]
+      ],
+      [
+        key: "Blue",
+        value: "dark-blue",
+        data: [theme_path: Routes.static_path(conn, "/css/dark-blue.css")]
+      ],
+      [
+        key: "Purple",
+        value: "dark-purple",
+        data: [theme_path: Routes.static_path(conn, "/css/dark-purple.css")]
+      ],
      [
        key: "Cyan",
        value: "dark-cyan",
        data: [theme_path: Routes.static_path(conn, "/css/dark-cyan.css")]
      ],
+      [
+        key: "Pink",
+        value: "dark-pink",
+        data: [theme_path: Routes.static_path(conn, "/css/dark-pink.css")]
+      ],
      [
        key: "Grey",
        value: "dark-grey",
@ -48,41 +53,46 @@ defmodule PhilomenaWeb.SettingView do

  def light_theme_options(conn) do
    [
-      [
-        key: "Blue (default)",
-        value: "light-blue",
-        data: [theme_path: Routes.static_path(conn, "/css/light-blue.css")]
-      ],
      [
        key: "Red",
        value: "light-red",
        data: [theme_path: Routes.static_path(conn, "/css/light-red.css")]
      ],
      [
-        key: "Green",
-        value: "light-green",
-        data: [theme_path: Routes.static_path(conn, "/css/light-green.css")]
-      ],
-      [
-        key: "Purple",
-        value: "light-purple",
-        data: [theme_path: Routes.static_path(conn, "/css/light-purple.css")]
-      ],
-      [
-        key: "Pink",
-        value: "light-pink",
-        data: [theme_path: Routes.static_path(conn, "/css/light-pink.css")]
+        key: "Orange",
+        value: "light-orange",
+        data: [theme_path: Routes.static_path(conn, "/css/light-orange.css")]
      ],
      [
        key: "Yellow",
        value: "light-yellow",
        data: [theme_path: Routes.static_path(conn, "/css/light-yellow.css")]
      ],
+      [
+        key: "Green",
+        value: "light-green",
+        data: [theme_path: Routes.static_path(conn, "/css/light-green.css")]
+      ],
+      [
+        key: "Blue",
+        value: "light-blue",
+        data: [theme_path: Routes.static_path(conn, "/css/light-blue.css")]
+      ],
+      [
+        key: "Purple",
+        value: "light-purple",
+        data: [theme_path: Routes.static_path(conn, "/css/light-purple.css")]
+      ],
      [
        key: "Cyan",
        value: "light-cyan",
        data: [theme_path: Routes.static_path(conn, "/css/light-cyan.css")]
      ],
+      [
+        key: "Pink",
+        value: "light-pink",
+        data: [theme_path: Routes.static_path(conn, "/css/light-pink.css")]
+      ],
      [
        key: "Grey",
        value: "light-grey",