update fa, autoprefixer, normalize

assets/brunch-config.js

@@ -24,13 +24,32 @@ module.exports = {
     sass: {
       mode: 'native',
       options: {
-        includePaths: ['css', 'node_modules/font-awesome/scss']
+        includePaths: ['css', 'node_modules/@fortawesome/fontawesome-free/scss']
       }
     },
     copycat: {
-      fonts: ['node_modules/font-awesome/fonts'],
+      fonts: ['node_modules/@fortawesome/fontawesome-free/webfonts'],
       verbose: false,
       onlyChanged: true
+    },
+    postcss: {
+      processors: [
+        require('autoprefixer')({
+          overrideBrowserslist: [
+            'last 2 Android versions',
+            'last 2 Chrome versions',
+            'last 2 ChromeAndroid versions',
+            'last 2 Edge versions',
+            'last 1 Explorer version',
+            'last 1 ExplorerMobile versions',
+            'last 2 Firefox versions',
+            'last 2 FirefoxAndroid versions',
+            'last 2 iOS versions',
+            'last 2 Opera versions'
+          ],
+          add: true
+        })
+      ]
     }
   },
   conventions: {

assets/css/common/base.scss

@@ -11,8 +11,14 @@
 
 @import "global";
 
-@import "../../node_modules/font-awesome/scss/font-awesome.scss";
+// Because FA is a SPECIAL SNOWFLAKE.
-@import "../../node_modules/normalize-scss/sass/_normalize.scss";
+$fa-font-path: "/fonts";
+
+@import "../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
+@import "../../node_modules/@fortawesome/fontawesome-free/scss/solid.scss";
+@import "../../node_modules/@fortawesome/fontawesome-free/scss/regular.scss";
+@import "../../node_modules/@fortawesome/fontawesome-free/scss/brands.scss";
+@import "../../node_modules/normalize-scss/sass/normalize/import-now";
 
 body {
   background-color: $background_color;

assets/package.json

@@ -6,14 +6,15 @@
   "dependencies": {
     "brunch": "^2.10.17",
     "copycat-brunch": "^1.1.1",
-    "font-awesome": "^4.7.0"
+    "@fortawesome/fontawesome-free": "^5.11.2"
   },
   "devDependencies": {
-    "acorn": "^7.0.0",
+    "acorn": "^7.1.0",
-    "autoprefixer": "^9.5.1",
+    "autoprefixer": "^9.7.3",
     "normalize-scss": "^7.0.1",
-    "rollup-brunch": "git+https://github.com/liamwhite/rollup-brunch#31967fc",
+    "rollup-brunch": "git+https://github.com/liamwhite/rollup-brunch.git#31967fc",
-    "sass-brunch": "git+https://github.com/brunch/sass-brunch#e9c0bfe",
+    "sass-brunch": "git+https://github.com/brunch/sass-brunch.git#e9c0bfe",
+    "spostcss-brunch": "git+https://github.com/Meow/spostcss-brunch.git#b64df45",
     "uglify-js-brunch": "^2.10.0"
   }
 }

lib/philomena_web/templates/image/_description.html.slime

@@ -2,7 +2,7 @@ div
   p
     = if can?(@conn, :edit_description, @image) do
       a.button#edit-description href="#" data-click-focus="#description" data-click-hide=".image-description" data-click-show="#description-form" title="Edit description" accessKey="d"
-        i.fa.fa-pencil>
+        i.fas.fa-edit>
         ' Description:
 
     - else

lib/philomena_web/templates/image/_source.html.slime

@@ -23,7 +23,7 @@
   .flex.flex--wrap#image-source
     p
       a.button.button--separate-right#edit-source data-click-focus="#source-field" data-click-hide="#image-source" data-click-show="#source-form" title="Edit source" accessKey="s"
-        i.fa.fa-pencil>
+        i.fas.fa-edit>
         ' Source:
 
     p

lib/philomena_web/templates/image/_tags.html.slime

@@ -52,7 +52,7 @@
   .tagsauce
     .block
       a.button.js-tag-sauce-toggle#edit-tags data-click-toggle=".tagsauce, .js-imageform" data-click-focus=".js-taginput-plain:not(.hidden), .js-taginput-input" title="Edit tags" accessKey="t"
-        i.fa.fa-pencil>
+        i.fas.fa-edit>
         ' Tags:
 
       a.button.button--link.button--separate-left href=Routes.image_tag_change_path(@conn, :index, @image) title="Tag history"

lib/philomena_web/templates/image/comment/_form.html.slime

@@ -6,7 +6,7 @@
   .block
     .block__header.block__header--js-tabbed
       a.selected href="#" data-click-tab="write"
-        i.fa.fa-pencil>
+        i.fas.fa-edit>
         ' Edit
 
       a href="#" data-click-tab="preview"

lib/philomena_web/templates/image/comment/index.html.slime

@@ -10,6 +10,7 @@ elixir:
       => pluralize("comment", "comments", @image.comments_count)
       ' posted
     button.button#js-refresh-comments title="Refresh" data-disable-with="..."
+      i.fa.fa-sync
       span.hide-mobile<> Refresh
 
 = for {comment, body} <- @comments do

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

@@ -70,7 +70,7 @@ header.header
               i.fa.fa-fw.fa-comments>
               | Comments
             a.header__link href="/posts/?pq=my:posts"
-              i.fa.fa-fw.fa-pencil>
+              i.fas.fa-fw.fa-pen-square>
               | Posts
             a.header__link href='/user_links'
               i.fa.fa-fw.fa-link>
@@ -85,7 +85,7 @@ header.header
               i.fa.fa-fw.fa-user>
               | Account
             a.header__link href="/session" data-method='delete'
-              i.fa.fa-fw.fa-sign-out>
+              i.fa.fa-fw.fa-sign-out-alt>
               | Logout
       - else
         a.header__link.hide-mobile href="/filters"

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

@@ -7,34 +7,34 @@
     .dropdown__content.js-burger-links
       = link to: "/admin/flipper", class: "header__link" do
         i.fa.fa-fw.fa-toggle-on
-        | Site Settings
+        =< "Site Settings"
       = link to: "/admin/site_notices", class: "header__link" do
         i.fa.fa-fw.fa-info-circle
-        | Site Notices
+        =< "Site Notices"
       = link to: "#", class: "header__link" do
         i.fa.fa-fw.fa-tags
-        | Tags
+        =< "Tags"
       = link to: "#", class: "header__link" do
         i.fa.fa-fw.fa-users
-        | Users
+        =< "Users"
       = link to: "#", class: "header__link" do
         i.fa.fa-fw.fa-comments
-        | Comments
+        =< "Comments"
       = link to: "#", class: "header__link" do
         i.fa.fa-fw.fa-paragraph
-        | Forums
+        =< "Forums"
       = link to: "#", class: "header__link" do
         i.fa.fa-fw.fa-shopping-bag
-        | Advertisements
+        =< "Advertisements"
       = link to: "#", class: "header__link" do
         i.fa.fa-fw.fa-trophy
-        | Badges
+        =< "Badges"
       = link to: "#", class: "header__link" do
         i.fa.fa-fw.fa-sticky-note
-        | Pages
+        =< "Pages"
       = link to: "#", class: "header__link" do
         i.fa.fa-fw.fa-sticky-note
-        | Mod Notes
+        =< "Mod Notes"
   = if @duplicate_report_count do
     = link to: "#", class: "header__link", title: "Duplicates" do
       =<> "D"
@@ -62,10 +62,10 @@
     .dropdown__content.dropdown__content-right.js-burger-links
       = link to: "#", class: "header__link" do
         i.fa.fa-fw.fa-user
-        | User Bans
+        =< "User Bans"
       = link to: "#", class: "header__link" do
-        i.fa.fa-fw.fa-internet-explorer
+        i.fab.fa-fw.fa-internet-explorer
-        | IP Bans
+        =< "IP Bans"
       = link to: "#", class: "header__link" do
         i.fa.fa-fw.fa-desktop
-        | FP Bans
+        =< "FP Bans"

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

@@ -6,7 +6,7 @@
   .block
     .block__header.block__header--js-tabbed
       a.selected href="#" data-click-tab="write"
-        i.fa.fa-pencil>
+        i.fas.fa-pencil-alt>
         ' Create a Topic
 
       a href="#" data-click-tab="preview"

lib/philomena_web/templates/topic/post/_form.html.slime

@@ -6,7 +6,7 @@
   .block
     .block__header.block__header--js-tabbed
       a.selected href="#" data-click-tab="write"
-        i.fa.fa-pencil>
+        i.fas.fa-edit>
         ' Edit
 
       a href="#" data-click-tab="preview"