Remove all inline styles and scripts

Gruntfile.js

@@ -6,6 +6,11 @@ module.exports = grunt => {
         clean: {
             default: ["dist/"],
         },
+        copy: {
+            css: {
+                files: [{expand: true, cwd: "src/main/", src: "**/*.css", dest: "dist/", flatten: true}],
+            },
+        },
         exec: {
             eleventy: "npx @11ty/eleventy",
         },
@@ -61,6 +66,7 @@ module.exports = grunt => {
     });
 
     grunt.loadNpmTasks("grunt-contrib-clean");
+    grunt.loadNpmTasks("grunt-contrib-copy");
     grunt.loadNpmTasks("grunt-exec");
     grunt.loadNpmTasks("grunt-text-replace");
     grunt.loadNpmTasks("grunt-webpack");
@@ -69,6 +75,7 @@ module.exports = grunt => {
         // Pre
         "clean",
         // Generate site
+        "copy:css",
         "exec:eleventy",
         // Compile JS
         "webpack:dev",
@@ -78,6 +85,7 @@ module.exports = grunt => {
         // Pre
         "clean",
         // Generate site
+        "copy:css",
         "exec:eleventy",
         // Compile JS
         "webpack:deploy",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "blog",
-    "version": "1.1.9",
+    "version": "1.1.10",
     "description": "Felix W. Dekker's personal blog.",
     "author": "Felix W. Dekker",
     "browser": "dist/bundle.js",
@@ -17,13 +17,14 @@
     },
     "devDependencies": {
         "@11ty/eleventy": "^0.12.1",
-        "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",
         "grunt-exec": "^3.0.0",
         "grunt-text-replace": "^0.4.0",
         "grunt-webpack": "^4.0.3",
-        "webpack": "^5.33.2",
+        "webpack": "^5.35.1",
         "webpack-cli": "^4.6.0"
     }
 }

src/main/_includes/default.njk

@@ -12,16 +12,7 @@
 
     <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" />
-    <style>
-        p {
-            text-align: justify !important;
-            text-justify: inter-word !important;
-        }
-
-        ol {
-            list-style: decimal outside !important;
-        }
-    </style>
+    <link rel="stylesheet" href="{{ '/main.css?v=%%VERSION_NUMBER%%' | url }}" />
     <script async src="https://stats.fwdekker.com/count.js"
             data-goatcounter="https://stats.fwdekker.com/count"></script>
 </head>
@@ -29,13 +20,13 @@
 <noscript>
     <img src="https://stats.fwdekker.com/count?p=/blog{{ page.url }}" 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>

src/main/_includes/home.njk

@@ -6,7 +6,7 @@ layout: default
 <div class="row">
     <div class="column">
         {% if post %}
-            <h2 style="display: inline;"><a href="{{ post.url | url }}">{{ post.data.title }}</a></h2>&nbsp;
+            <h2 class="inline-header"><a href="{{ post.url | url }}">{{ post.data.title }}</a></h2>&nbsp;
             {% if post.data.date %}<u>{{ post.data.date | isoDate }}</u>{% endif %}
             {% if post.data.excerpt %}
                 <p>{{ post.data.excerpt }}</p>

src/main/_includes/post.njk

@@ -6,7 +6,7 @@ layout: default
     <div class="column">
         <a href="{{ '/' | url }}">&larr; home</a><br />
 
-        <h2 style="display: inline;">{{ title }}</h2>&nbsp;
+        <h2 class="inline-header">{{ title }}</h2>&nbsp;
         {% if date %}<u>{{ date | isoDate }}</u>{% endif %}
 
         {{ content | safe }}

src/main/css/main.css

@@ -0,0 +1,12 @@
+p {
+    text-align: justify !important;
+    text-justify: inter-word !important;
+}
+
+ol {
+    list-style: decimal outside !important;
+}
+
+.inline-header {
+    display: inline;
+}