Add fa as a package, address review comments

package.json

@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "@antimatter-dimensions/notations": "^2.2.0",
+    "@fortawesome/fontawesome-free": "^6.1.1",
     "break_infinity.js": "^1.3.0",
     "chevrotain": "^4.8.1",
     "codemirror": "^5.65.1",

public/index.html

@@ -7,7 +7,7 @@
   <meta name="Antimatter Dimensions" content="A game about huge numbers and watching them go up." >
   <script type="text/javascript" src='https://cdn1.kongregate.com/javascripts/kongregate_api.js'></script>
   <link href="https://fonts.googleapis.com/css?family=PT+Mono" rel="stylesheet">
-  <script src="https://kit.fontawesome.com/b660327b2c.js" crossorigin="anonymous"></script>
+  <link rel="stylesheet" type="text/css" href="stylesheets/fontawesome/css/all.css">
   <link rel="stylesheet" type="text/css" href="stylesheets/codemirror/codemirror.css">
   <link rel="stylesheet" type="text/css" href="stylesheets/codemirror/show-hint.css">
   <link rel="stylesheet" type="text/css" href="stylesheets/codemirror/lint.css">

src/components/modals/InformationModal.vue

@@ -10,14 +10,14 @@ export default {
 </script>
 
 <template>
-  <div class="information-modal">
+  <div class="l-information-modal c-information-modal">
     <ModalCloseButton @click="emitClose" />
     <div class="l-h2p-header">
       <div class="c-h2p-title">
         About the game
       </div>
     </div>
-    <div class="info-body">
+    <div class="c-info-body">
       Antimatter Dimensions is an Idle Incremental game created by Finnish developer Hevipelle. Originating as a solo
       project in 2016, it was expanded upon by a large team of developers and testers from then on.
       <br>
@@ -25,47 +25,66 @@ export default {
       The game has unfolding gameplay and multiple prestige layers. The "How to Play" button contains useful
       information about progressing.
     </div>
-    <div class="socials">
-      <span ach-tooltip="GitHub repository">
+    <div class="l-socials c-socials">
+      <span
+        ach-tooltip="GitHub repository"
+        class="c-socials--icon__wrapper"
+      >
         <a
           href="https://github.com/IvarK/IvarK.github.io"
           target="_blank"
-          class="socials--icon"
+          class="c-socials--icon"
         ><i class="fa-brands fa-github" /></a>
       </span>
-      <span ach-tooltip="Game changelog">
+      <span
+        ach-tooltip="Game changelog"
+        class="c-socials--icon__wrapper"
+      >
         <a
           href="changelog.html"
           target="_blank"
-          class="socials--icon"
+          class="c-socials--icon"
         ><i class="fa-solid fa-file-lines" /></a>
       </span>
-      <span ach-tooltip="r/AntimatterDimensions">
+      <span
+        ach-tooltip="r/AntimatterDimensions"
+        class="c-socials--icon__wrapper"
+      >
         <a
           href="https://www.reddit.com/r/antimatterdimensions"
           target="_blank"
-          class="socials--icon"
+          class="c-socials--icon"
         ><i class="fa-brands fa-reddit-alien" /></a>
       </span>
-      <span ach-tooltip="Antimatter Dimensions Discord Server">
+      <span
+        ach-tooltip="Antimatter Dimensions Discord Server"
+        class="c-socials--icon__wrapper"
+      >
         <a
           href="https://discord.gg/ST9NaXa"
           target="_blank"
-          class="socials--icon"
+          class="c-socials--icon"
         ><i class="fa-brands fa-discord" /></a>
       </span>
-      <span ach-tooltip="Antimatter Dimensions on Google Play">
+      <span
+        ach-tooltip="Antimatter Dimensions on Google Play"
+        class="c-socials--icon__wrapper"
+      >
         <a
           href="https://play.google.com/store/apps/details?id=kajfosz.antimatterdimensions"
           target="_blank"
-          class="socials--icon"
+          class="c-socials--icon"
         ><i class="fa-brands fa-google-play" /></a>
       </span>
-      <span ach-tooltip="Credits">
+      <!-- TODO: Add way to see credits here -->
+      <span
+        ach-tooltip="Credits"
+        class="c-socials--icon__wrapper"
+      >
         <a
           href="https://example.com"
           target="_blank"
-          class="socials--icon"
+          class="c-socials--icon"
         ><i class="fa-solid fa-users" /></a>
       </span>
     </div>
@@ -73,22 +92,43 @@ export default {
 </template>
 
 <style scoped>
-.socials {
+.l-information-modal {
   display: flex;
-  justify-content: space-evenly;
-  align-items: center;
+  flex-direction: column;
+  width: calc(100vw - 50vh);
+  justify-content: space-around;
+}
+
+.c-information-modal {
+  margin: 0.5rem;
+}
+
+.c-info-body {
+  margin: 1rem;
+  padding: 0.5rem;
+  text-align: left;
+  font-size: 2rem;
+}
+
+.c-socials {
   font-size: 7.5rem;
 }
 
-.socials--icon {
-  color: var(--color-text)
+.l-socials {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
 }
 
-span {
+.c-socials--icon {
+  color: var(--color-text);
+}
+
+.c-socials--icon__wrapper {
   transition: all .2s ease-in-out;
 }
 
-span:hover {
+.c-socials--icon__wrapper:hover {
   transform: scale(1.1);
 }
 
@@ -96,20 +136,4 @@ span:hover {
   width: 20rem;
   font-size: 1.5rem;
 }
-
-.information-modal {
-  display: flex;
-  flex-direction: column;
-  margin: 0.5rem;
-  width: calc(100vw - 50vh);
-  height: calc(100vh - 60vh);
-  justify-content: space-around;
-}
-
-.info-body {
-  margin: 1rem;
-  padding: 0.5rem;
-  text-align: left;
-  font-size: 2rem;
-}
 </style>