Remove inline styles

Gruntfile.js

@@ -7,13 +7,16 @@ module.exports = grunt => {
             default: ["dist/"],
         },
         copy: {
+            css: {
+                files: [{expand: true, cwd: "src/main/", src: "**/*.css", dest: "dist/", flatten: true}]
+            },
             html: {
                 files: [{expand: true, cwd: "src/main/", src: "**/*.html", dest: "dist/", flatten: true}]
             },
         },
         focus: {
             dev: {
-                include: ["html", "js"],
+                include: ["css", "html", "js"],
             },
         },
         replace: {
@@ -39,6 +42,10 @@ module.exports = grunt => {
             },
         },
         watch: {
+            css: {
+                files: ["src/main/**/*.css"],
+                tasks: ["copy:css"],
+            },
             html: {
                 files: ["src/main/**/*.html"],
                 tasks: ["copy:html"],
@@ -88,6 +95,7 @@ module.exports = grunt => {
         // Pre
         "clean",
         // Copy files
+        "copy:css",
         "copy:html",
         // Compile JS
         "webpack:dev",
@@ -98,6 +106,7 @@ module.exports = grunt => {
         // Pre
         "clean",
         // Copy files
+        "copy:css",
         "copy:html",
         // Compile JS
         "webpack:deploy",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "codsworth-namegen",
-    "version": "1.1.4",
+    "version": "1.1.5",
     "description": "Choose a fitting name for your Fallout 4 character that Codsworth can pronounce",
     "author": "Felix W. Dekker",
     "browser": "dist/bundle.js",
@@ -16,7 +16,7 @@
         "deploy": "grunt deploy"
     },
     "devDependencies": {
-        "grunt": "^1.3.0",
+        "grunt": "^1.4.0",
         "grunt-cli": "^1.4.2",
         "grunt-contrib-clean": "^2.0.0",
         "grunt-contrib-copy": "^1.0.0",
@@ -24,7 +24,7 @@
         "grunt-focus": "^1.0.0",
         "grunt-text-replace": "^0.4.0",
         "grunt-webpack": "^4.0.3",
-        "webpack": "^5.33.2",
+        "webpack": "^5.36.0",
         "webpack-cli": "^4.6.0"
     }
 }

src/main/css/main.css

@@ -0,0 +1,3 @@
+textarea.nameArea {
+    height: 10em;
+}

src/main/index.html

@@ -13,6 +13,8 @@
 
     <link rel="stylesheet" href="https://static.fwdekker.com/fonts/roboto/roboto.css" />
     <link rel="stylesheet" href="https://static.fwdekker.com/lib/template/2.x.x/template.css" />
+    <!--suppress HtmlUnknownTarget -->
+    <link rel="stylesheet" href="main.css?v=%%VERSION_NUMBER%%" />
     <script async src="https://stats.fwdekker.com/count.js"
             data-goatcounter="https://stats.fwdekker.com/count"></script>
 </head>
@@ -20,13 +22,13 @@
 <noscript>
     <img src="https://stats.fwdekker.com/count?p=/tools/codsworth-namegen/" alt="Counting pixel" />
 
-    <p style="color: red; font-weight: bold;">
+    <p>
         This website does not function if JavaScript is disabled.
         Please check the <a href="https://www.enable-javascript.com/">
         instructions on how to enable JavaScript in your web browser</a>.
     </p>
 </noscript>
-<main style="display: none;">
+<main class="hidden">
     <div id="nav"></div>
     <div id="contents">
         <div id="header"></div>
@@ -58,13 +60,13 @@
                     <button id="generateSimilar" type="button">Generate similar names</button>
 
                     <label for="similarNames">Similar names are...</label>
-                    <textarea id="similarNames" style="height: 10em;" readonly></textarea>
+                    <textarea id="similarNames" class="nameArea" readonly></textarea>
                 </div>
                 <div class="column">
                     <button id="generateRandom" type="button">Generate random name</button>
 
                     <label for="randomNames">Your name is...</label>
-                    <textarea id="randomNames" style="height: 10em;" readonly></textarea>
+                    <textarea id="randomNames" class="nameArea" readonly></textarea>
                 </div>
             </div>
         </section>

src/main/js/main.js

@@ -1,4 +1,4 @@
-const {$, doAfterLoad, footer, header, nav, showPage} = window.fwdekker;
+const {$, doAfterLoad, footer, header, nav} = window.fwdekker;
 import {jaroWinkler} from "./jaroWinkler";
 
 
@@ -98,7 +98,7 @@ doAfterLoad(() => {
         vcsURL: "https://git.fwdekker.com/FWDekker/codsworth-namegen/",
         version: "v%%VERSION_NUMBER%%"
     }));
-    showPage();
+    $("main").classList.remove("hidden");
 });
 
 // Event handlers