Make header/footer same width as article and use flexbox for layout

package-lock.json

@@ -38,8 +38,7 @@
     "@types/ejs": {
       "version": "2.6.3",
       "resolved": "https://registry.npmjs.org/@types/ejs/-/ejs-2.6.3.tgz",
-      "integrity": "sha512-/F+qQ0Fr0Dr1YvHjX+FCvbba4sQ27RdCPDqmP/si0e1v1GOkbQ3VRBvZPSQM7NoQ3iz3SyiJVscCP2f0vKuIhQ==",
+      "integrity": "sha512-/F+qQ0Fr0Dr1YvHjX+FCvbba4sQ27RdCPDqmP/si0e1v1GOkbQ3VRBvZPSQM7NoQ3iz3SyiJVscCP2f0vKuIhQ=="
-      "dev": true
     },
     "@types/express": {
       "version": "4.16.1",
@@ -71,8 +70,7 @@
     "@types/highlight.js": {
       "version": "9.12.3",
       "resolved": "https://registry.npmjs.org/@types/highlight.js/-/highlight.js-9.12.3.tgz",
-      "integrity": "sha512-pGF/zvYOACZ/gLGWdQH8zSwteQS1epp68yRcVLJMgUck/MjEn/FBYmPub9pXT8C1e4a8YZfHo1CKyV8q1vKUnQ==",
+      "integrity": "sha512-pGF/zvYOACZ/gLGWdQH8zSwteQS1epp68yRcVLJMgUck/MjEn/FBYmPub9pXT8C1e4a8YZfHo1CKyV8q1vKUnQ=="
-      "dev": true
     },
     "@types/htmlparser2": {
       "version": "3.7.31",
@@ -85,14 +83,12 @@
     "@types/linkify-it": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-2.0.4.tgz",
-      "integrity": "sha512-9o5piu3tP6DwqT+Cyf7S3BitsTc6Cl0pCPKUhIE5hzQbtueiBXdtBipTLLvaGfT11/8XHRmsagu4YfBesTaiCA==",
+      "integrity": "sha512-9o5piu3tP6DwqT+Cyf7S3BitsTc6Cl0pCPKUhIE5hzQbtueiBXdtBipTLLvaGfT11/8XHRmsagu4YfBesTaiCA=="
-      "dev": true
     },
     "@types/markdown-it": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-0.0.7.tgz",
       "integrity": "sha512-WyL6pa76ollQFQNEaLVa41ZUUvDvPY+qAUmlsphnrpL6I9p1m868b26FyeoOmo7X3/Ta/S9WKXcEYXUSHnxoVQ==",
-      "dev": true,
       "requires": {
         "@types/linkify-it": "*"
       }
@@ -119,7 +115,6 @@
       "version": "3.10.32",
       "resolved": "https://registry.npmjs.org/@types/node-sass/-/node-sass-3.10.32.tgz",
       "integrity": "sha1-spbM5xRP+rd7hAkMqtTx5Lvqjgk=",
-      "dev": true,
       "requires": {
         "@types/node": "*"
       }
@@ -160,8 +155,7 @@
     "@types/sindresorhus__slugify": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/@types/sindresorhus__slugify/-/sindresorhus__slugify-0.6.0.tgz",
-      "integrity": "sha512-e67QA1mn1St20y/Ews9EQjUXvfrhZSoD9mqfgQ1LjaSip3zjFwyfiMOdyD6OeBQsuwabTML4ytKyn+PcOwblKA==",
+      "integrity": "sha512-e67QA1mn1St20y/Ews9EQjUXvfrhZSoD9mqfgQ1LjaSip3zjFwyfiMOdyD6OeBQsuwabTML4ytKyn+PcOwblKA=="
-      "dev": true
     },
     "@types/sqlite3": {
       "version": "3.1.4",
@@ -274,12 +268,6 @@
       "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
       "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU="
     },
-    "async": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
-      "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=",
-      "dev": true
-    },
     "async-foreach": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz",
@@ -439,12 +427,6 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
-    "colors": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/colors/-/colors-1.0.3.tgz",
-      "integrity": "sha1-BDP0TYCWgP3rYO0mDxsMJi6CpAs=",
-      "dev": true
-    },
     "combined-stream": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.7.tgz",
@@ -488,12 +470,6 @@
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
       "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
     },
-    "corser": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz",
-      "integrity": "sha1-jtolLsqrWEDc2XXOuQ2TcMgZ/4c=",
-      "dev": true
-    },
     "cross-spawn": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz",
@@ -524,15 +500,6 @@
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
       "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw=="
     },
-    "debug": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-      "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-      "dev": true,
-      "requires": {
-        "ms": "2.0.0"
-      }
-    },
     "decamelize": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
@@ -608,18 +575,6 @@
         "safer-buffer": "^2.1.0"
       }
     },
-    "ecstatic": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/ecstatic/-/ecstatic-3.3.0.tgz",
-      "integrity": "sha512-EblWYTd+wPIAMQ0U4oYJZ7QBypT9ZUIwpqli0bKDjeIIQnXDBK2dXtZ9yzRCOlkW1HkO8gn7/FxLK1yPIW17pw==",
-      "dev": true,
-      "requires": {
-        "he": "^1.1.1",
-        "mime": "^1.6.0",
-        "minimist": "^1.1.0",
-        "url-join": "^2.0.5"
-      }
-    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -663,12 +618,6 @@
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
       "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
     },
-    "eventemitter3": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.0.tgz",
-      "integrity": "sha512-ivIvhpq/Y0uSjcHDcOIccjmYjGLcP09MFGE7ysAwkAvkXfpZlC985pH2/ui64DKazbTW/4kN3yqozUxlXzI6cA==",
-      "dev": true
-    },
     "express": {
       "version": "4.16.4",
       "resolved": "https://registry.npmjs.org/express/-/express-4.16.4.tgz",
@@ -769,15 +718,6 @@
         "pinkie-promise": "^2.0.0"
       }
     },
-    "follow-redirects": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.6.1.tgz",
-      "integrity": "sha512-t2JCjbzxQpWvbhts3l6SH1DKzSrx8a+SsaVf4h6bG4kOXUuPYS/kg2Lr4gQSb7eemaHqJkOThF1BGyjlUkO1GQ==",
-      "dev": true,
-      "requires": {
-        "debug": "=3.1.0"
-      }
-    },
     "forever-agent": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
@@ -817,9 +757,9 @@
       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
     },
     "fstream": {
-      "version": "1.0.11",
+      "version": "1.0.12",
-      "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz",
+      "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz",
-      "integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=",
+      "integrity": "sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==",
       "requires": {
         "graceful-fs": "^4.1.2",
         "inherits": "~2.0.0",
@@ -928,12 +868,6 @@
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
       "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk="
     },
-    "he": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
-      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
-      "dev": true
-    },
     "highlight.js": {
       "version": "9.13.1",
       "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.13.1.tgz",
@@ -980,33 +914,6 @@
         "statuses": ">= 1.4.0 < 2"
       }
     },
-    "http-proxy": {
-      "version": "1.17.0",
-      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.17.0.tgz",
-      "integrity": "sha512-Taqn+3nNvYRfJ3bGvKfBSRwy1v6eePlm3oc/aWVxZp57DQr5Eq3xhKJi7Z4hZpS8PC3H4qI+Yly5EmFacGuA/g==",
-      "dev": true,
-      "requires": {
-        "eventemitter3": "^3.0.0",
-        "follow-redirects": "^1.0.0",
-        "requires-port": "^1.0.0"
-      }
-    },
-    "http-server": {
-      "version": "0.11.1",
-      "resolved": "https://registry.npmjs.org/http-server/-/http-server-0.11.1.tgz",
-      "integrity": "sha512-6JeGDGoujJLmhjiRGlt8yK8Z9Kl0vnl/dQoQZlc4oeqaUoAKQg94NILLfrY3oWzSyFaQCVNTcKE5PZ3cH8VP9w==",
-      "dev": true,
-      "requires": {
-        "colors": "1.0.3",
-        "corser": "~2.0.0",
-        "ecstatic": "^3.0.0",
-        "http-proxy": "^1.8.1",
-        "opener": "~1.4.0",
-        "optimist": "0.6.x",
-        "portfinder": "^1.0.13",
-        "union": "~0.4.3"
-      }
-    },
     "http-signature": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
@@ -1305,12 +1212,6 @@
       "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
       "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
     },
-    "mime": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-      "dev": true
-    },
     "mime-db": {
       "version": "1.37.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.37.0.tgz",
@@ -1612,30 +1513,6 @@
         "wrappy": "1"
       }
     },
-    "opener": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/opener/-/opener-1.4.3.tgz",
-      "integrity": "sha1-XG2ixdflgx6P+jlklQ+NZnSskLg=",
-      "dev": true
-    },
-    "optimist": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
-      "integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=",
-      "dev": true,
-      "requires": {
-        "minimist": "~0.0.1",
-        "wordwrap": "~0.0.2"
-      },
-      "dependencies": {
-        "minimist": {
-          "version": "0.0.10",
-          "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
-          "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=",
-          "dev": true
-        }
-      }
-    },
     "os-homedir": {
       "version": "1.0.2",
       "resolved": "http://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
@@ -1727,28 +1604,6 @@
         "pinkie": "^2.0.0"
       }
     },
-    "portfinder": {
-      "version": "1.0.20",
-      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz",
-      "integrity": "sha512-Yxe4mTyDzTd59PZJY4ojZR8F+E5e97iq2ZOHPz3HDgSvYC5siNad2tLooQ5y5QHyQhc3xVqvyk/eNA3wuoa7Sw==",
-      "dev": true,
-      "requires": {
-        "async": "^1.5.2",
-        "debug": "^2.2.0",
-        "mkdirp": "0.5.x"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        }
-      }
-    },
     "postcss": {
       "version": "7.0.14",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.14.tgz",
@@ -1950,12 +1805,6 @@
       "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
       "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE="
     },
-    "requires-port": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
-      "dev": true
-    },
     "rimraf": {
       "version": "2.6.3",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
@@ -2259,12 +2108,12 @@
       "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
     },
     "tar": {
-      "version": "2.2.1",
+      "version": "2.2.2",
-      "resolved": "http://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.2.tgz",
-      "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=",
+      "integrity": "sha512-FCEhQ/4rE1zYv9rYXJw/msRqsnmlje5jHP6huWeBZ704jUTy02c5AZyWujpMR1ax6mVw9NyJMfuK2CMDWVIfgA==",
       "requires": {
         "block-stream": "*",
-        "fstream": "^1.0.2",
+        "fstream": "^1.0.12",
         "inherits": "2"
       }
     },
@@ -2329,23 +2178,6 @@
       "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.5.tgz",
       "integrity": "sha512-JoLI4g5zv5qNyT09f4YAvEZIIV1oOjqnewYg5D38dkQljIzpPT296dbIGvKro3digYI1bkb7W6EP1y4uDlmzLg=="
     },
-    "union": {
-      "version": "0.4.6",
-      "resolved": "http://registry.npmjs.org/union/-/union-0.4.6.tgz",
-      "integrity": "sha1-GY+9rrolTniLDvy2MLwR8kopWeA=",
-      "dev": true,
-      "requires": {
-        "qs": "~2.3.3"
-      },
-      "dependencies": {
-        "qs": {
-          "version": "2.3.3",
-          "resolved": "http://registry.npmjs.org/qs/-/qs-2.3.3.tgz",
-          "integrity": "sha1-6eha2+ddoLvkyOBHaghikPhjtAQ=",
-          "dev": true
-        }
-      }
-    },
     "unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
@@ -2359,12 +2191,6 @@
         "punycode": "^2.1.0"
       }
     },
-    "url-join": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/url-join/-/url-join-2.0.5.tgz",
-      "integrity": "sha1-WvIvGMBSoACkjXuCxenC4v7tpyg=",
-      "dev": true
-    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -2425,12 +2251,6 @@
         "string-width": "^1.0.2 || 2"
       }
     },
-    "wordwrap": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
-      "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc=",
-      "dev": true
-    },
     "wrap-ansi": {
       "version": "2.1.0",
       "resolved": "http://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",

site/css/main.scss

@@ -46,7 +46,6 @@ article {
 	&::after {
 		content: "";
 		width: calc(100% - 2 * 30px); // account for .container padding, don't overflow
-		max-width: 720px;
 		height: 1px;
 		background-image: linear-gradient(to right, var(--secondary-ui-text-color), var(--shadow-color));
 		position: absolute;
@@ -243,7 +242,11 @@ figure {
 	box-shadow: 0 10px 15px var(--shadow-color);
 
 	.container {
-		position: relative;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: flex-end;
+		flex-wrap: wrap;
 	}
 
 	.site-title {
@@ -255,7 +258,7 @@ figure {
 	.site-description {
 		color: var(--secondary-ui-text-color);
 		font-variant: small-caps;
-		margin-top: 0;
+		margin: 0;
 	}
 
 	.site-nav ul {
@@ -327,14 +330,6 @@ figure {
 			}
 		}
 	}
-
-	@media (min-width: 992px) {
-		.site-nav {
-			position: absolute;
-			right: 0;
-			bottom: 0;
-		}
-	}
 }
 
 // Footer
@@ -345,7 +340,11 @@ figure {
 	box-shadow: 0 -10px 15px var(--shadow-color);
 
 	.container {
-		position: relative;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: flex-start;
+		flex-wrap: wrap;
 	}
 
 	.site-title {
@@ -369,14 +368,6 @@ figure {
 			}
 		}
 	}
-
-	@media (min-width: 992px) {
-		.social-links {
-			position: absolute;
-			right: 0;
-			top: 0;
-		}
-	}
 }
 
 // Pagination
@@ -420,22 +411,19 @@ figure {
 	.container {
 		max-width: 540px;
 	}
+
+	article::after {
+		max-width: 540px;
+	}
 }
 
 @media (min-width: 768px) {
 	.container {
 		max-width: 720px;
 	}
-}
 
-@media (min-width: 992px) {
+	article::after {
-	.container {
+		max-width: 720px;
-		max-width: 960px;
 	}
 }
 
-@media (min-width: 1200px) {
-	.container {
-		max-width: 1140px;
-	}
-}

site/layouts/article.html.ejs

@@ -2,17 +2,15 @@
 metadata.layout = "default.html.ejs"
 ```
 
-<div class="main">
+<article itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
-	<article itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
 	<meta itemprop="mainEntityOfPage" content="https://shadowfacts.net<%= metadata.permalink %>">
 	<h1 class="article-title" itemprop="name headline"><%= metadata.title %></h1>
 	<%- include("../includes/article-meta.html.ejs", { metadata }) %>
 	<div class="article-content" itemprop="articleBody">
 		<%- content %>
 	</div>
-	</article>
+</article>
-	<section id="comments-container"></section>
+<section id="comments-container"></section>
-</div>
 
 <script>
 	const permalink = "<%= metadata.permalink %>";

site/layouts/default.html.ejs

@@ -46,8 +46,10 @@
 <body itemscope itemtype="https://schema.org/Blog">
 	<header class="site-header">
 		<div class="container">
+			<div>
 				<h1 class="site-title"><%- fancyLink("Shadowfacts", "/") %></h1>
 				<p class="site-description">The outper part of a shadow is called the penumbra.</p>
+			</div>
 			<nav class="site-nav" role="navigation">
 				<ul>
 					<li><%- fancyLink("Tutorials", "/tutorials/") %></li>