From e96eda0c91c4b146fdf742df37716bd27f3999f0 Mon Sep 17 00:00:00 2001 From: rylim <36293596+rylim@users.noreply.github.com> Date: Sun, 24 Oct 2021 16:58:11 -0700 Subject: [PATCH] Add template for custom 404 page --- bin/build-site.js | 11 +++- site/assets/404.css | 111 ++++++++++++++++++++++++++++++++++++++++ site/templates/404.html | 41 +++++++++++++++ 3 files changed, 162 insertions(+), 1 deletion(-) create mode 100644 site/assets/404.css create mode 100644 site/templates/404.html diff --git a/bin/build-site.js b/bin/build-site.js index 1f038bac..4dc431c9 100755 --- a/bin/build-site.js +++ b/bin/build-site.js @@ -220,6 +220,9 @@ async function buildSite() { }, { url: copyAssetToBuild( 'companies-table.js' ), } ]; + const notFoundStyles = [ { + url: copyAssetToBuild( '404.css' ) + } ]; // Copy favicon files console.log( 'Copying favicon files' ); @@ -282,7 +285,13 @@ async function buildSite() { // Generate custom 404 page console.log(); console.log( 'Writing custom 404 page' ); - writePage( '404.html', '

Test Custom 404

' ); + const notFoundTemplate = swig.compileFile( + path.join( sitePath, 'templates', '404.html' ) + ); + // writePage( '404.html', '

Test Custom 404

' ); + writePage( '404.html', notFoundTemplate( { + notFoundStyles + } ) ); console.log(); console.log( 'Site files are ready in "site/build/"' ); diff --git a/site/assets/404.css b/site/assets/404.css new file mode 100644 index 00000000..1c22c70b --- /dev/null +++ b/site/assets/404.css @@ -0,0 +1,111 @@ +* { + -webkit-box-sizing: border-box; + box-sizing: border-box; + } + + body { + padding: 0; + margin: 0; + } + + #notfound { + position: relative; + height: 100vh; + } + + #notfound .notfound { + position: absolute; + left: 50%; + top: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + } + + .notfound { + max-width: 520px; + width: 100%; + line-height: 1.4; + text-align: center; + } + + .notfound .notfound-404 { + position: relative; + height: 200px; + margin: 0px auto 20px; + z-index: -1; + } + + .notfound .notfound-404 h1 { + font-family: 'Montserrat', sans-serif; + font-size: 236px; + font-weight: 200; + margin: 0px; + color: #211b19; + text-transform: uppercase; + position: absolute; + left: 50%; + top: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + } + + .notfound .notfound-404 h2 { + font-family: 'Montserrat', sans-serif; + font-size: 28px; + font-weight: 400; + text-transform: uppercase; + color: #211b19; + background: #fff; + padding: 10px 5px; + margin: auto; + display: inline-block; + position: absolute; + bottom: 0px; + left: 0; + right: 0; + } + + .notfound a { + font-family: 'Montserrat', sans-serif; + display: inline-block; + font-weight: 700; + text-decoration: none; + color: #fff; + text-transform: uppercase; + padding: 13px 23px; + background: #ff6300; + font-size: 18px; + -webkit-transition: 0.2s all; + transition: 0.2s all; + } + + .notfound a:hover { + color: #ff6300; + background: #211b19; + } + + @media only screen and (max-width: 767px) { + .notfound .notfound-404 h1 { + font-size: 148px; + } + } + + @media only screen and (max-width: 480px) { + .notfound .notfound-404 { + height: 148px; + margin: 0px auto 10px; + } + .notfound .notfound-404 h1 { + font-size: 86px; + } + .notfound .notfound-404 h2 { + font-size: 16px; + } + .notfound a { + padding: 7px 15px; + font-size: 14px; + } + } + \ No newline at end of file diff --git a/site/templates/404.html b/site/templates/404.html new file mode 100644 index 00000000..2f8807c0 --- /dev/null +++ b/site/templates/404.html @@ -0,0 +1,41 @@ + + + + + + + + + + 404 HTML Template by Colorlib + + + + + + + + + + + + + + + +
+
+
+

Oops!

+

404 - The Page can't be found

+
+ Go TO Homepage +
+
+ + + +