prettier

assets/.prettierrc.yml

@@ -0,0 +1,7 @@
+tabWidth: 2
+useTabs: false
+printWidth: 120
+semi: true
+singleQuote: false
+bracketSpacing: true
+endOfLine: lf

assets/.stylelintrc.yml

@@ -1,5 +1,7 @@
 ---
 extends: stylelint-config-recommended
+plugins:
+  - stylelint-prettier
 rules:
   block-no-empty: true
   at-rule-no-unknown:
@@ -73,3 +75,4 @@ rules:
   declaration-block-no-redundant-longhand-properties: true
   shorthand-property-no-redundant-values: true
   comment-whitespace-inside: always
+  prettier/prettier: true

assets/css/common/mixins.css

@@ -42,7 +42,7 @@
     background: var(--secondary-dark-color);
   }
   .$(classname):nth-child(even) {
-    background: var(--secondary-muted-color);;
+    background: var(--secondary-muted-color);
   }
 
   @mixin even-odd-type $classname, primary;
@@ -54,7 +54,9 @@
 }
 
 @define-mixin animated-transition {
-  transition: color var(--transition-animation-duration) ease, background var(--transition-animation-duration) ease;
+  transition:
+    color var(--transition-animation-duration) ease,
+    background var(--transition-animation-duration) ease;
 }
 
 @define-mixin subgrid {

assets/css/elements/base.css

@@ -22,7 +22,9 @@ main {
   }
 }
 
-a, a:active, a:visited {
+a,
+a:active,
+a:visited {
   color: var(--link-color);
   text-decoration: none;
 }
@@ -39,19 +41,36 @@ hr {
   display: none !important;
 }
 
-p, .paragraph {
+p,
+.paragraph {
   hyphens: none;
   line-height: var(--readable-line-height);
   margin: var(--padding-small);
   margin-right: 0;
 }
 
-.fa--padded {
+.icon--padded {
   padding: 0 var(--padding-normal);
 }
 
+.icon--padded--right {
+  padding-right: var(--padding-normal);
+}
+
+.icon--padded.small {
+  padding: 0 var(--padding-small);
+}
+
+.icon--padded--right.small {
+  padding-right: var(--padding-small);
+}
+
 @mixin if-mobile {
-  .fa-padded {
+  .icon--padded {
     padding: 0 var(--padding-small);
   }
+
+  .icon--padded--right {
+    padding-right: var(--padding-normal);
+  }
 }

assets/css/elements/block.css

@@ -59,7 +59,8 @@
   border-bottom-right-radius: var(--border-radius-outer) !important;
 }
 
-.block__content, .block__tab {
+.block__content,
+.block__tab {
   border-radius: var(--border-radius-outer);
   padding: var(--padding-normal);
   background: var(--primary-dark-color);
@@ -69,7 +70,8 @@
   padding: var(--padding-small);
 }
 
-.block__footer, .block__footer--small {
+.block__footer,
+.block__footer--small {
   display: flex;
   flex-direction: row;
   background: var(--primary-muted-color);
@@ -94,14 +96,16 @@
   }
 }
 
-.block__header, .block__header--single-item  {
+.block__header,
+.block__header--single-item {
   line-height: var(--block-header-height);
   padding: 0 var(--padding-normal);
   font-size: var(--font-header-size);
   margin-bottom: var(--padding-small);
 }
 
-.block__header > .fa, .block__header--single-item > .fa {
+.block__header > .fa,
+.block__header--single-item > .fa {
   margin-right: var(--padding-normal);
 }
 
@@ -132,11 +136,13 @@
   margin-bottom: var(--padding-normal);
 }
 
-.block__content > *:last-child, .block--fixed > *:last-child {
+.block__content > *:last-child,
+.block--fixed > *:last-child {
   margin-bottom: 0;
 }
 
-.block__content > *:first-child, .block--fixed > *:first-child {
+.block__content > *:first-child,
+.block--fixed > *:first-child {
   margin-top: 0;
 }
 

assets/css/elements/button.css

@@ -14,7 +14,9 @@
     background: var(--$(type)-color);
   }
 
-  .button--$(type):hover, .button--$(type):active, .button--$(type).selected {
+  .button--$(type):hover,
+  .button--$(type):active,
+  .button--$(type).selected {
     background: var(--$(type)-dark-color) !important;
     border-radius: var(--border-radius-inner);
   }
@@ -53,7 +55,8 @@
   border-width: 0;
 }
 
-.button:hover, .button:active {
+.button:hover,
+.button:active {
   @mixin animated-transition;
   background: var(--primary-dark-color);
   border-radius: var(--border-radius-inner);
@@ -87,7 +90,9 @@
   margin-right: 0;
 }
 
-.button__group, .button__group--single, .button__group--standalone {
+.button__group,
+.button__group--single,
+.button__group--standalone {
   display: flex;
   flex-direction: row;
   border-radius: var(--border-radius-inner);
@@ -96,16 +101,18 @@
   line-height: var(--button-group-height);
 }
 
-.button__group:last-child, .button__group--single:last-child, .button__group--standalone:last-child {
+.button__group:last-child,
+.button__group--single:last-child,
+.button__group--standalone:last-child {
   margin: 0;
 }
 
 .button__group--tall {
-  line-height: var(--button-group-tall-height)
+  line-height: var(--button-group-tall-height);
 }
 
 .button__group--small {
-  line-height: var(--button-group-small-height)
+  line-height: var(--button-group-small-height);
 }
 
 .block__header__buttons .button {

assets/css/elements/checkbox.css

@@ -10,12 +10,13 @@ input[type="checkbox"].checkbox {
   background: var(--danger-color);
   border: var(--checkbox-border-width) solid var(--danger-border-color);
   border-radius: var(--border-radius-checkbox);
-  transition: background var(--transition-long-animation-duration) ease,
-              border-color var(--transition-long-animation-duration) ease;
+  transition:
+    background var(--transition-long-animation-duration) ease,
+    border-color var(--transition-long-animation-duration) ease;
 }
 
 .checkbox:after {
-  content: '';
+  content: "";
   font-family: var(--fa-style-family, "Font Awesome 6 Free");
   font-weight: var(--fa-style, 900);
   text-align: center;
@@ -33,12 +34,13 @@ input[type="checkbox"].checkbox {
 .checkbox:checked {
   background: var(--success-color);
   border-color: var(--success-border-color);
-  transition: background var(--transition-long-animation-duration) ease,
-              border-color var(--transition-long-animation-duration) ease;
+  transition:
+    background var(--transition-long-animation-duration) ease,
+    border-color var(--transition-long-animation-duration) ease;
 }
 
 .checkbox:checked:after {
-  content: '';
+  content: "";
   left: calc(var(--checkbox-width) - var(--checkbox-height));
   transition: left var(--transition-long-animation-duration) ease;
 }

assets/css/elements/form.css

@@ -11,7 +11,8 @@ form .form--two-column {
   gap: var(--padding-normal);
 }
 
-form .form--two-column > .field, form .form--two-column > li {
+form .form--two-column > .field,
+form .form--two-column > li {
   display: grid;
   grid-template-columns: auto 1fr;
   gap: var(--padding-normal);

assets/css/elements/input.css

@@ -8,7 +8,8 @@
   font-family: var(--font-family-monospace);
 }
 
-.input:hover, .input:focus {
+.input:hover,
+.input:focus {
   background: var(--secondary-muted-color);
 }
 

assets/css/elements/layout.css

@@ -44,7 +44,8 @@
 }
 
 @mixin if-desktop {
-  .centered-layout .layout--medium, .centered-layout .layout--narrow {
+  .centered-layout .layout--medium,
+  .centered-layout .layout--narrow {
     margin-left: auto;
     margin-right: auto;
   }

assets/css/elements/list.css

@@ -1,4 +1,5 @@
-ul, ol {
+ul,
+ol {
   padding: 0;
   list-style-type: none;
 }

assets/css/elements/media.css

@@ -13,7 +13,7 @@
 }
 
 .media-list:before {
-  content: '';
+  content: "";
   width: 0;
   padding-bottom: calc(100% + var(--media-header-height));
   grid-row: 1 / 1;
@@ -90,17 +90,20 @@
   top: var(--media-header-height);
 }
 
-.post-image-container, .post-image-container img {
+.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 {
+.media-tiny-container,
+.media-tiny-container img {
   width: var(--media-tiny-container-width);
   height: var(--media-tiny-container-width);
 }
 
-.thumb-tiny, .thumb-tiny img {
+.thumb-tiny,
+.thumb-tiny img {
   max-width: var(--media-tiny-container-width);
   max-height: var(--media-tiny-container-width);
 }

assets/css/elements/table.css

@@ -15,7 +15,8 @@
   border-top-right-radius: 0;
 }
 
-.table td, th {
+.table td,
+th {
   padding: var(--padding-small);
   border: 1px solid var(--secondary-muted-color);
   text-align: left;

assets/css/options/block-borders.css

@@ -8,7 +8,8 @@
   --separator-vertical-size: inherit;
 }
 
-.block__content, .block__tab {
+.block__content,
+.block__tab {
   border: 1px solid var(--primary-border-color);
 }
 
@@ -16,7 +17,9 @@
   border: 1px solid var(--primary-border-color);
 }
 
-.button__group, .button__group--single, .button__group--standalone {
+.button__group,
+.button__group--single,
+.button__group--standalone {
   border: 1px solid var(--secondary-color);
 }
 

assets/css/options/checkbox-icons.css

@@ -1,7 +1,7 @@
 .checkbox:after {
-  content: '\f00d';
+  content: "\f00d";
 }
 
 .checkbox:checked:after {
-  content: '\f00c';
+  content: "\f00c";
 }

assets/css/options/compatibility.css

@@ -18,7 +18,8 @@
   }
 }
 
-header > *, nav.header__secondary > * {
+header > *,
+nav.header__secondary > * {
   margin-left: var(--padding-large);
 }
 

assets/css/themes/dark-purple.css

@@ -74,7 +74,7 @@ $spoiler-color: #0f0f0f;
   --comment-color: $comment-color;
   --hide-color: $hide-color;
 
-   /* Spoiler colors */
+  /* Spoiler colors */
   --spoiler-color: $spoiler-color;
   --spoiler-revealed-color: hsl(from $spoiler-color h s calc(l + 20));
 

assets/css/themes/light-blue.css

@@ -114,6 +114,7 @@ header {
   color: var(--text-light-color) !important;
 }
 
-.input:focus, .header__search > .input:hover {
+.input:focus,
+.header__search > .input:hover {
   color: var(--text-color) !important;
 }

assets/css/views/header.css

@@ -18,7 +18,7 @@ header {
 }
 
 .header__logo {
-  font-size: var(--font-h2-size)
+  font-size: var(--font-h2-size);
 }
 
 .header__search {

assets/css/views/image.css

@@ -8,7 +8,8 @@
   gap: var(--padding-small);
 }
 
-.image-source__icon, .image-source__link {
+.image-source__icon,
+.image-source__link {
   overflow: hidden;
 }
 

assets/css/views/interaction.css

@@ -6,7 +6,8 @@
     width: 1rem;
   }
 
-  .interaction--$(type).active, .interaction--$(type):hover {
+  .interaction--$(type).active,
+  .interaction--$(type):hover {
     color: var(--text-color) !important;
     background-color: var(--$(type)-color);
   }

assets/css/views/markdown.css

@@ -11,17 +11,20 @@
   margin-left: var(--padding-normal);
 }
 
-.spoiler, .spoiler a {
+.spoiler,
+.spoiler a {
   color: var(--spoiler-color);
-  background: var(--spoiler-color)
+  background: var(--spoiler-color);
 }
 
-.spoiler-revealed, .spoiler:hover {
+.spoiler-revealed,
+.spoiler:hover {
   color: var(--text-color);
   background: var(--spoiler-revealed-color);
 }
 
-.spoiler-revealed a, .spoiler:hover a {
+.spoiler-revealed a,
+.spoiler:hover a {
   color: var(--link-color);
 }
 

assets/css/views/pagination.css

@@ -12,7 +12,8 @@
   font-size: 0.8rem !important;
 }
 
-.pagination a, .pagination span {
+.pagination a,
+.pagination span {
   display: grid;
   grid-template-columns: auto;
   gap: var(--padding-tiny);

assets/css/views/tag.css

@@ -1,19 +1,19 @@
 @define-mixin tag-color $tagtype {
-  .tag[data-tag-category=$(tagtype)] {
+  .tag[data-tag-category="$(tagtype)"] {
     color: var(--tag-$(tagtype)-text-color);
     background: var(--tag-$(tagtype)-color);
     border-color: var(--tag-$(tagtype)-border-color);
   }
 
-  .tag[data-tag-category=$(tagtype)] .tag__state {
+  .tag[data-tag-category="$(tagtype)"] .tag__state {
     color: var(--tag-$(tagtype)-text-color);
   }
 
-  .tag[data-tag-category=$(tagtype)] .tag__name {
+  .tag[data-tag-category="$(tagtype)"] .tag__name {
     color: var(--tag-$(tagtype)-text-color);
   }
 
-  .tag[data-tag-category=$(tagtype)] .tag__count {
+  .tag[data-tag-category="$(tagtype)"] .tag__count {
     background: var(--tag-$(tagtype)-border-color);
   }
 }

assets/package-lock.json

@@ -29,8 +29,10 @@
         "chai": "^5",
         "eslint-plugin-vitest": "^0.5.4",
         "jsdom": "^24.0.0",
+        "prettier": "^3.2.5",
         "stylelint": "^16.5.0",
         "stylelint-config-standard": "^36.0.0",
+        "stylelint-prettier": "^5.0.0",
         "vitest": "^1.5.3",
         "vitest-fetch-mock": "^0.2.2"
       }
@@ -2843,6 +2845,12 @@
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
+    "node_modules/fast-diff": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
+      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
+      "dev": true
+    },
     "node_modules/fast-glob": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -4427,6 +4435,33 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
+      "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-linter-helpers": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+      "dev": true,
+      "dependencies": {
+        "fast-diff": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/pretty-format": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
@@ -4912,6 +4947,22 @@
         "stylelint": "^16.1.0"
       }
     },
+    "node_modules/stylelint-prettier": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-prettier/-/stylelint-prettier-5.0.0.tgz",
+      "integrity": "sha512-RHfSlRJIsaVg5Br94gZVdWlz/rBTyQzZflNE6dXvSxt/GthWMY3gEHsWZEBaVGg7GM+XrtVSp4RznFlB7i0oyw==",
+      "dev": true,
+      "dependencies": {
+        "prettier-linter-helpers": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "prettier": ">=3.0.0",
+        "stylelint": ">=16.0.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",

assets/package.json

@@ -2,7 +2,7 @@
   "type": "module",
   "scripts": {
     "deploy": "cross-env NODE_ENV=production tsc && cross-env NODE_ENV=production vite build",
-    "lint": "eslint . --ext .js,.ts",
+    "lint": "eslint . --ext .js,.ts && stylelint ./css/**/*.css",
     "test": "vitest run --coverage",
     "test:watch": "vitest watch --coverage",
     "dev": "vite",
@@ -34,8 +34,10 @@
     "chai": "^5",
     "eslint-plugin-vitest": "^0.5.4",
     "jsdom": "^24.0.0",
+    "prettier": "^3.2.5",
     "stylelint": "^16.5.0",
     "stylelint-config-standard": "^36.0.0",
+    "stylelint-prettier": "^5.0.0",
     "vitest": "^1.5.3",
     "vitest-fetch-mock": "^0.2.2"
   }

lib/philomena_web/plugs/content_security_policy_plug.ex

@@ -75,7 +75,7 @@ defmodule PhilomenaWeb.ContentSecurityPolicyPlug do
   defp default_connect_src,
     do: vite_hmr?(do: "*", else: "'self'")
 
-  defp default_style_src, do: vite_hmr?(do: "*", else: "'self'")
+  defp default_style_src, do: vite_hmr?(do: "'unsafe-inline' *", else: "'self'")
 
   defp to_uri(host) when host in [nil, ""], do: ""
   defp to_uri(host), do: URI.to_string(%URI{scheme: "https", host: host})

lib/philomena_web/templates/admin/user/index.html.slime

@@ -72,7 +72,7 @@ h1 Users
           td
             = if can?(@conn, :edit, user) do
               => link to: Routes.admin_user_path(@conn, :edit, user) do
-                i.fa.fa-fw.fa-user-edit
+                i.fa.icon--padded.small.fa-user-edit
                 ' Edit
 
             /= if user.deleted_at do
@@ -83,11 +83,11 @@ h1 Users
 
             = if can?(@conn, :index, Philomena.Bans.User) do
               => link to: Routes.admin_user_ban_path(@conn, :new, username: user.name) do
-                i.fa.fa-fw.fa-ban
+                i.fa.icon--padded.small.fa-ban
                 ' Ban
             = if can?(@conn, :edit, Philomena.ArtistLinks.ArtistLink) do
               => link to: Routes.profile_artist_link_path(@conn, :new, user) do
-                i.fa.fa-fw.fa-link
+                i.fa.icon--padded.small.fa-link
                 ' Add link
 
   .block__header.block__header--light

lib/philomena_web/templates/channel/_channel_box.html.slime

@@ -23,17 +23,17 @@
 
   = if @channel.associated_artist_tag do
     a href=Routes.tag_path(@conn, :show, @channel.associated_artist_tag) class=link_class
-      i.fa.fa-fw.fa-tags>
+      i.fa.icon--padded.small.fa-tags>
       = @channel.associated_artist_tag.name
   - else
     .media-box__header.media-box__header--channel No artist tag
 
   = if can?(@conn, :edit, @channel) do
     a href=Routes.channel_path(@conn, :edit, @channel) class=link_class
-      i.fas.fa-fw.fa-edit>
+      i.fas.icon--padded.small.fa-edit>
       ' Edit
     a href=Routes.channel_path(@conn, :delete, @channel) class=link_class data-method="delete" data-confirm="Are you really, really sure?"
-      i.fas.fa-fw.fa-trash>
+      i.fas.icon--padded.small.fa-trash>
       ' Delete
 
   = render PhilomenaWeb.Channel.SubscriptionView, "_subscription.html", conn: @conn, watching: @subscriptions[@channel.id], channel: @channel

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--padded.favicon-home>
+        i.icon--padded--right.favicon-home>
         = site_name()
 
       h3 = @short_msg

lib/philomena_web/templates/forum/index.html.slime

@@ -2,7 +2,7 @@ h1 Discussion Forums
 .block
   .block__header
     a href=Routes.post_path(@conn, :index)
-      i.fa.fa-fw.fa-search>
+      i.fa.icon--padded.small.fa-search>
       ' Search Posts
     span.block__header__item
       => @topic_count

lib/philomena_web/templates/forum/show.html.slime

@@ -7,11 +7,11 @@ h1 = @forum.name
     ' »
     => link(@forum.name, to: Routes.forum_path(@conn, :show, @forum))
     a href=Routes.forum_topic_path(@conn, :new, @forum)
-      i.fa.fa-fw.fa-edit>
+      i.fa.icon--padded.small.fa-edit>
       ' New Topic
 
     a href=Routes.post_path(@conn, :index, pq: "forum:#{@forum.short_name}")
-      i.fa.fa-fw.fa-search>
+      i.fa.icon--padded.small.fa-search>
       ' Search Posts
     span.spacing--left
       => @forum.topic_count

lib/philomena_web/templates/layout/_burger.html.slime

@@ -1,34 +1,34 @@
 nav#burger
   a href="/"
-    i.fa--padded.favicon-home<>
+    i.icon--padded--right.favicon-home<>
     ' Home
   a href="/images/new"
-    i.fa.fa-fw.fa-upload<>
+    i.fa.icon--padded--right.fa-upload<>
     ' Upload
   a href="/forums"
-    i.fas.fa-fw.fa-pen-square<>
+    i.fas.icon--padded--right.fa-pen-square<>
     ' Forums
   a href="/tags"
-    i.fa.fa-fw.fa-tag<>
+    i.fa.icon--padded--right.fa-tag<>
     ' Tags
   a href="/search?q=first_seen_at.gt:3 days ago&amp;sf=wilson_score&amp;sd=desc"
-    i.fas.fa-fw.fa-poll<>
+    i.fas.icon--padded--right.fa-poll<>
     ' Rankings
   a href="/filters"
-    i.fa.fa-fw.fa-filter<>
+    i.fa.icon--padded--right.fa-filter<>
     ' Filters
   a href="/galleries"
-    i.fa.fa-fw.fa-image<>
+    i.fa.icon--padded--right.fa-image<>
     ' Galleries
   a href="/comments"
-    i.fa.fa-fw.fa-comments<>
+    i.fa.icon--padded--right.fa-comments<>
     ' Comments
   a href="/commissions"
-    i.fa.fa-fw.fa-address-card<>
+    i.fa.icon--padded--right.fa-address-card<>
     ' Commissions
   a href="/channels"
-    i.fa.fa-fw.fa-podcast<>
+    i.fa.icon--padded--right.fa-podcast<>
     ' Channels
   a href="/pages/donations"
-    i.fa.fa-fw.fa-heart<>
+    i.fa.icon--padded--right.fa-heart<>
     ' Donate

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.fa--padded.favicon-home>
+    i.icon--padded--right.favicon-home>
     span.hidden--mobile = site_name()
   a.header__link.hidden--mobile href="/images/new" title="Upload"
     i.fa.fa-upload
@@ -59,71 +59,71 @@ header
         a href=Routes.profile_path(@conn, :show, @current_user)
           .dropdown__item
             .dropdown__icon
-              i.fa.fa-fw.fa-user
+              i.fa.icon--padded.small.fa-user
             .dropdown__text
               = @current_user.name
         hr.dropdown__separator
         a href="/search?q=my:watched"
           .dropdown__item
             .dropdown__icon
-              i.fa.fa-fw.fa-eye
+              i.fa.icon--padded.small.fa-eye
             .dropdown__text Watched
         a href="/search?q=my:faves"
           .dropdown__item
             .dropdown__icon
-              i.fa.fa-fw.fa-star
+              i.fa.icon--padded.small.fa-star
             .dropdown__text Faves
         a href="/search?q=my:upvotes"
           .dropdown__item
             .dropdown__icon
-              i.fa.fa-fw.fa-arrow-up
+              i.fa.icon--padded.small.fa-arrow-up
             .dropdown__text Upvotes
         a href=Routes.gallery_path(@conn, :index, gallery: [creator: @current_user.name])
           .dropdown__item
             .dropdown__icon
-              i.fa.fa-fw.fa-image
+              i.fa.icon--padded.small.fa-image
             .dropdown__text Galleries
         a href="/search?q=my:uploads"
           .dropdown__item
             .dropdown__icon
-              i.fa.fa-fw.fa-upload
+              i.fa.icon--padded.small.fa-upload
             .dropdown__text Uploads
         a href="/comments?cq=my:comments"
           .dropdown__item
             .dropdown__icon
-              i.fa.fa-fw.fa-comments
+              i.fa.icon--padded.small.fa-comments
             .dropdown__text Comments
         a href="/posts?pq=my:posts"
           .dropdown__item
             .dropdown__icon
-              i.fa.fa-fw.fa-pen-square
+              i.fa.icon--padded.small.fa-pen-square
             .dropdown__text Posts
         a href=Routes.profile_artist_link_path(@conn, :index, @current_user)
           .dropdown__item
             .dropdown__icon
-              i.fa.fa-fw.fa-link
+              i.fa.icon--padded.small.fa-link
             .dropdown__text Links
         a href="/conversations"
           .dropdown__item
             .dropdown__icon
-              i.fa.fa-fw.fa-envelope
+              i.fa.icon--padded.small.fa-envelope
             .dropdown__text Messages
         hr.dropdown__separator
         a href="/settings/edit"
           .dropdown__item
             .dropdown__icon
-              i.fa.fa-fw.fa-cogs
+              i.fa.icon--padded.small.fa-cogs
             .dropdown__text Settings
         a href=Routes.registration_path(@conn, :edit)
           .dropdown__item
             .dropdown__icon
-              i.fa.fa-fw.fa-user
+              i.fa.icon--padded.small.fa-user
             .dropdown__text Account
         hr.dropdown__separator
         a href=Routes.session_path(@conn, :delete) data-method="delete"
           .dropdown__item
             .dropdown__icon
-              i.fa.fa-fw.fa-sign-out-alt
+              i.fa.icon--padded.small.fa-sign-out-alt
             .dropdown__text Logout
   - else
     a.header__link.hidden--mobile href="/filters"
@@ -132,7 +132,7 @@ header
       | )
     span.js-burger-links.hidden--mobile
       a.header__link href="/settings/edit"
-        i.fa.fa-fw.fa-cogs.hidden--desktop>
+        i.fa.icon--padded.small.fa-cogs.hidden--desktop>
         | Settings
     a.header__link href=Routes.registration_path(@conn, :new)
       | Register

lib/philomena_web/templates/layout/_header_navigation.html.slime

@@ -8,7 +8,7 @@
     a href="/images/random"
       .dropdown__item
         .dropdown__icon
-          i.fa.fa-fw.fa-random>
+          i.fa.icon--padded.small.fa-random>
         .dropdown__text Random
 .dropdown.header__dropdown
   a.header__link href="/activity"
@@ -20,7 +20,7 @@
     a href="/comments"
       .dropdown__item
         .dropdown__icon
-          i.fa.fa-fw.fa-comments>
+          i.fa.icon--padded.small.fa-comments>
         .dropdown__text Comments
 .dropdown.header__dropdown
   a.header__link href="/forums"
@@ -37,7 +37,7 @@
     a href="/posts"
       .dropdown__item
         .dropdown__icon
-          i.fa.fa-fw.fa-search>
+          i.fa.icon--padded.small.fa-search>
         .dropdown__text Post Search
 a.header__link href="/tags"
   i.fa.fa-tag>

lib/philomena_web/templates/layout/_header_staff_links.html.slime

@@ -10,56 +10,56 @@
           = link to: Routes.admin_site_notice_path(@conn, :index) do
             .dropdown__item
               .dropdown__icon
-                i.fa.fa-fw.fa-info-circle
+                i.fa.icon--padded.small.fa-info-circle
               .dropdown__text Site Notices
 
         = if manages_users?(@conn) do
           = link to: Routes.admin_user_path(@conn, :index) do
             .dropdown__item
               .dropdown__icon
-                i.fa.fa-fw.fa-users
+                i.fa.icon--padded.small.fa-users
               .dropdown__text Users
 
         = if manages_forums?(@conn) do
           = link to: Routes.admin_forum_path(@conn, :index) do
             .dropdown__item
               .dropdown__icon
-                i.fa.fa-fw.fa-paragraph
+                i.fa.icon--padded.small.fa-paragraph
               .dropdown__text Forums
 
         = if manages_ads?(@conn) do
           = link to: Routes.admin_advert_path(@conn, :index) do
             .dropdown__item
               .dropdown__icon
-                i.fa.fa-fw.fa-shopping-bag
+                i.fa.icon--padded.small.fa-shopping-bag
               .dropdown__text Adverts
 
         = if manages_badges?(@conn) do
           = link to: Routes.admin_badge_path(@conn, :index) do
             .dropdown__item
               .dropdown__icon
-                i.fa.fa-fw.fa-trophy
+                i.fa.icon--padded.small.fa-trophy
               .dropdown__text Badges
 
         = if manages_static_pages?(@conn) do
           = link to: Routes.page_path(@conn, :index) do
             .dropdown__item
               .dropdown__icon
-                i.fa.fa-fw.fa-sticky-note
+                i.fa.icon--padded.small.fa-sticky-note
               .dropdown__text Pages
 
         = if manages_mod_notes?(@conn) do
           = link to: Routes.admin_mod_note_path(@conn, :index) do
             .dropdown__item
               .dropdown__icon
-                i.fa.fa-fw.fa-sticky-note
+                i.fa.icon--padded.small.fa-sticky-note
               .dropdown__text Mod Notes
 
         = if can_see_moderation_log?(@conn) do
           = link to: Routes.moderation_log_path(@conn, :index) do
             .dropdown__item
               .dropdown__icon
-                i.fa.fa-fw.fa-list-alt
+                i.fa.icon--padded.small.fa-list-alt
               .dropdown__text Mod Logs
 
   = if @pending_approval_count do
@@ -102,17 +102,17 @@
           = link to: Routes.admin_user_ban_path(@conn, :index) do
             .dropdown__item
               .dropdown__icon
-                i.fa.fa-fw.fa-user
+                i.fa.icon--padded.small.fa-user
               .dropdown__text User Bans
 
           = link to: Routes.admin_subnet_ban_path(@conn, :index) do
             .dropdown__item
               .dropdown__icon
-                i.fa.fa-fw.fa-network-wired
+                i.fa.icon--padded.small.fa-network-wired
               .dropdown__text IP Bans
 
           = link to: Routes.admin_fingerprint_ban_path(@conn, :index) do
             .dropdown__item
               .dropdown__icon
-                i.fa.fa-fw.fa-desktop
+                i.fa.icon--padded.small.fa-desktop
               .dropdown__text FP Bans

lib/philomena_web/templates/markdown/_input.html.slime

@@ -11,8 +11,8 @@
     = action_text
 
   a href="#" data-click-tab="preview"
-    i.fa.fa-cog.fa-fw.fa-spin.js-preview-loading.hidden> title=raw('Loading preview…')
-    i.fa.fa-eye.fa-fw.js-preview-idle>
+    i.fa.fa-cog.icon--padded.small.fa-spin.js-preview-loading.hidden> title=raw('Loading preview…')
+    i.fa.fa-eye.icon--padded.small.js-preview-idle>
     | Preview
 
 .block__tab.communication-edit__tab.selected.js-preview-input-wrapper data-tab="write"

lib/philomena_web/templates/profile/_admin_block.html.slime

@@ -3,12 +3,12 @@
     i.fa.fa-tools
     | Admin
   .block__content
-    i.fa.fa-fw.fa-calendar>
+    i.fa.icon--padded.small.fa-calendar>
     ' Account created
     = @user.created_at
 
     br
-    i.fa.fa-fw.fa-filter>
+    i.fa.icon--padded.small.fa-filter>
     ' Current Filter:
     = if @filter do
       = link @filter.name, to: Routes.filter_path(@conn, :show, @filter)
@@ -17,7 +17,7 @@
         ' (none)
 
     br
-    i.far.fa-fw.fa-clock>
+    i.far.icon--padded.small.fa-clock>
     ' Last seen
     = if @last_ip do
       => pretty_time(@last_ip.updated_at)
@@ -31,74 +31,74 @@
         ' (never)
 
     br
-    i.fas.fa-fw.fa-key>
+    i.fas.icon--padded.small.fa-key>
     ' Two factor auth:
     strong = enabled_text(@user.otp_required_for_login)
 
     br
 
     = if @user.locked_at do
-      i.fas.fa-fw.fa-lock>
+      i.fas.icon--padded.small.fa-lock>
       strong.comment_deleted>
         ' Account locked,
         => @user.failed_attempts
         ' failed login attempts
     - else
-      i.fas.fa-fw.fa-unlock>
+      i.fas.icon--padded.small.fa-unlock>
       ' Not currently locked
 
     hr.separator.separator--danger
 
     a.button.button--danger href="#" data-click-toggle=".js-admin__options__toggle" title="Toggle Controls"
-      i.fa.fa-fw.fa-bars
+      i.fa.icon--padded.small.fa-bars
       span Toggle Controls
 
 .profile-top__options.js-admin__options__toggle.hidden
   ul.profile-admin__options__column
     li
       = link to: Routes.profile_detail_path(@conn, :index, @user) do
-        i.fa.fa-fw.fa-eye
+        i.fa.icon--padded.small.fa-eye
         span.admin__button View Details
     li
       = link to: Routes.search_path(@conn, :index, q: "upvoted_by_id:#{@user.id}") do
-        i.fa.fa-fw.fa-arrow-up
+        i.fa.icon--padded.small.fa-arrow-up
         span.admin__button Upvotes
     li
       = link to: Routes.search_path(@conn, :index, q: "downvoted_by_id:#{@user.id}") do
-        i.fa.fa-fw.fa-arrow-down
+        i.fa.icon--padded.small.fa-arrow-down
         span.admin__button Downvotes
     li
       = link to: Routes.search_path(@conn, :index, q: "hidden_by_id:#{@user.id}") do
-        i.fa.fa-fw.fa-eye-slash
+        i.fa.icon--padded.small.fa-eye-slash
         span.admin__button Hidden Images
     li
       = link to: Routes.admin_report_path(@conn, :index, rq: "user_id:#{@user.id}") do
-        i.fa.fa-fw.fa-exclamation
+        i.fa.icon--padded.small.fa-exclamation
         span.admin__button Reports
     li
       = link to: Routes.profile_ip_history_path(@conn, :index, @user) do
-        i.fab.fa-fw.fa-internet-explorer
+        i.fab.icon--padded.small.fa-internet-explorer
         span.admin__button IP History
     li
       = link to: Routes.profile_fp_history_path(@conn, :index, @user) do
-        i.fa.fa-fw.fa-desktop
+        i.fa.icon--padded.small.fa-desktop
         span.admin__button FP History
     li
       = link to: Routes.profile_alias_path(@conn, :index, @user) do
-        i.fa.fa-fw.fa-users
+        i.fa.icon--padded.small.fa-users
         span.admin__button Potential Aliases
 
     = if can?(@conn, :index, %Philomena.Donations.Donation{}) do
       li
         = link to: Routes.admin_donation_user_path(@conn, :show, @user) do
-          i.fas.fa-fw.fa-dollar-sign
+          i.fas.icon--padded.small.fa-dollar-sign
           span.admin__button Donations
 
   ul.profile-admin__options__column
     = if can?(@conn, :edit, @user) do
       li
         = link to: Routes.admin_user_path(@conn, :edit, @user) do
-          i.fas.fa-fw.fa-edit
+          i.fas.icon--padded.small.fa-edit
           span.admin__button Edit User
 
       li
@@ -109,30 +109,30 @@
       = if @forced do
         li
           = link to: Routes.profile_detail_path(@conn, :index, @user) do
-            i.fa.fa-fw.fa-eye
+            i.fa.icon--padded.small.fa-eye
             span.admin__button View Details
         li
           = link to: Routes.search_path(@conn, :index, q: "upvoted_by_id:#{@user.id}") do
-            i.fa.fa-fw.fa-arrow-up
+            i.fa.icon--padded.small.fa-arrow-up
             span.admin__button Upvotes
         li
           = link to: Routes.search_path(@conn, :index, q: "downvoted_by_id:#{@user.id}") do
-            i.fa.fa-fw.fa-arrow-down
+            i.fa.icon--padded.small.fa-arrow-down
             span.admin__button Downvotes
         li
           = link to: Routes.admin_user_unlock_path(@conn, :create, @user), data: [method: "post"] do
-            i.fas.fa-fw.fa-unlock
+            i.fas.icon--padded.small.fa-unlock
             span.admin__button Unlock Account
 
       li
         = link to: Routes.admin_user_wipe_path(@conn, :create, @user), data: [confirm: "This is irreversible, destroying all identifying information including email. Are you sure?", method: "post"] do
-          i.fas.fa-fw.fa-eraser
+          i.fas.icon--padded.small.fa-eraser
           span.admin__button Wipe PII
 
     = if can?(@conn, :edit, %Philomena.ArtistLinks.ArtistLink{}) do
       li
         = link to: Routes.profile_artist_link_path(@conn, :new, @user) do
-          i.fa.fa-fw.fa-link
+          i.fa.icon--padded.small.fa-link
           span.admin__button Add Artist Link
 
           li
@@ -144,33 +144,33 @@
     = if can?(@conn, :index, Philomena.Users.User) do
       li
         = link to: Routes.admin_user_api_key_path(@conn, :delete, @user), data: [confirm: "Are you really, really sure?", method: "delete"] do
-          i.fas.fa-fw.fa-key
+          i.fas.icon--padded.small.fa-key
           span.admin__button Reset API key
 
       li
         = if @user.verified do
           = link to: Routes.admin_user_verification_path(@conn, :delete, @user), data: [confirm: "Are you really, really sure?", method: "delete"] do
-            i.fas.fa-fw.fa-user-times
+            i.fas.icon--padded.small.fa-user-times
             span.admin__button Revoke Verification
         - else
           = link to: Routes.admin_user_verification_path(@conn, :create, @user), data: [confirm: "Are you really, really sure?", method: "create"] do
-            i.fas.fa-fw.fa-user-check
+            i.fas.icon--padded.small.fa-user-check
             span.admin__button Grant Verification
 
   ul.profile-admin__options__column
     = if can?(@conn, :index, Philomena.Users.User) do
       li
         = link to: Routes.admin_user_vote_path(@conn, :delete, @user), data: [confirm: "Are you really, really sure?", method: "delete"] do
-          i.far.fa-fw.fa-file-excel
+          i.far.icon--padded.small.fa-file-excel
           span.admin__button Remove All Votes/Faves
 
       li
         = link to: Routes.admin_user_downvote_path(@conn, :delete, @user), data: [confirm: "Are you really, really sure?", method: "delete"] do
-          i.fa.fa-fw.fa-arrow-down
+          i.fa.icon--padded.small.fa-arrow-down
           span.admin__button Remove All Downvotes
 
     = if @user.role == "user" and can?(@conn, :revert, Philomena.TagChanges.TagChange) do
       li
         = link to: Routes.tag_change_full_revert_path(@conn, :create, [user_id: @user.id]), data: [confirm: "Are you really, really sure?", method: "create"] do
-          i.fa.fa-fw.fa-tag
+          i.fa.icon--padded.small.fa-tag
           span.admin__button Revert All Tag Changes

lib/philomena_web/templates/profile/show.html.slime

@@ -45,7 +45,7 @@
 
 = if @forced && (current?(@user, @conn.assigns.current_user) or can_index_user?(@conn)) do
   .block
-    i.fa.fa-fw.fa-filter>
+    i.fa.icon--padded.small.fa-filter>
     strong.comment_deleted> Forced Filter:
     = link @forced.name, to: Routes.filter_path(@conn, :show, @forced)
 

lib/philomena_web/templates/staff/index.html.slime

@@ -30,7 +30,7 @@ h1 Staff
         i class="fa #{category_icon(header)}"
         = header
       p.staff-block__description
-        i.fa.fa-fw.fa-info-circle>
+        i.fa.icon--padded.small.fa-info-circle>
         = category_description(header)
 
       .staff-block__grid

lib/philomena_web/templates/topic/show.html.slime

@@ -32,7 +32,7 @@ h1 = @topic.title
 
     = if not @topic.hidden_from_users or can?(@conn, :hide, @topic) do
       a href=Routes.post_path(@conn, :index, pq: "topic_id:#{@topic.id}")
-        i.fa.fa-fw.fa-search>
+        i.fa.icon--padded.small.fa-search>
         ' Search Posts
       .flex.flex--wrap.block__header.block__header--light.page__header
         .flex--fixed.page__pagination