error pages; js system to support back/front-end

3 files changed, 39 insertions, 31 deletions

diff --git a/html/app/views/basic.php b/html/app/views/basic.php
index 3d9abde..39bdf00 100644
--- a/html/app/views/basic.php
+++ b/html/app/views/basic.php
@@ -6,13 +6,10 @@
     <title>ΣΚΛΑΒΕΝΙΤΗΣ - <?=$page['title']?></title>
 
     <!-- import assets -->
-    <?php link_asset(
-            'font',
-            ['iconfont', 'CFAstyStdBold', 'CFAstyStdBook', 'CFAstyStdMedium'],
-            'crossorogin'
-        ) ?>
 
-    <?php link_asset('css', ['main']); ?>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;700&display=swap" rel="stylesheet">
 
     <!-- TODO: parse seo data -->
 
diff --git a/html/app/views/error/404.php b/html/app/views/error/404.php
index a7ea624..30fe206 100644
--- a/html/app/views/error/404.php
+++ b/html/app/views/error/404.php
@@ -3,24 +3,28 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>404: Not Found</title>
+
     <style>
-    html,body{ padding:0; margin:0;
-      font-size:1.25em; color: #037 /*#a05*/; font-family: 'Roboto Slab', Consolas, Monaco, "Ubuntu Mono", fixed;
-      line-height:1.2em; background: ##f3f4f5;
+    html,body{
+      padding:0; margin:0;
+      font-size:1.25em; font-family: Arial, Helvetica, Ubuntu, sans-serif;
+      color: #037; background: #f3f4f5;
+      line-height:1.2em; 
     }
-    h3 { font-size: 5.2em; font-style: normal; color: #05a /*#a05*/;
-      margin: 0; padding: 0;
+    h3 {
+      font-size: 2em; font-style: normal;
+      font-weight: 400;
+      color: #05a;
+      margin: 0; padding: 5px;
       opacity: 0.27;
+      border-bottom: 1px solid #05a;
     }
     .container { display: flex; height: 100vh; align-items:center; }
     .content { position: relative;
-        max-width:520px; width: 100%; margin: auto auto; padding: 1.5em;
-        /* text-align: center; justify-center: center; */
-        font-size: .75em; opacity: .33; font-style: italic;
-    }
-    @media screen and ( max-width: 720px) {
-      html, body { font-size: 1.24em; }
-      h3 { font-size: 4em; }
+        max-width:320px; width: 100%;
+        margin: auto auto; padding: 1.5em;
+        text-align: center; justify-center: center;
+        opacity: .33;
     }
     </style>
   </head>
@@ -28,10 +32,12 @@
     <div class='container'>
       <div class='content'>
           <h3>4O4</h3>
-          NOT FOUND<br />
+          Not found<br />
+          <!--
           —
           <br />
           <span><?= $message ?? "and I still haven't found what I'm looking for." ?></span>
+          -->
       </div>
     </div>
   </body>
diff --git a/html/app/views/error/general.php b/html/app/views/error/general.php
index 1c3c6ae..82a1d6e 100644
--- a/html/app/views/error/general.php
+++ b/html/app/views/error/general.php
@@ -3,24 +3,29 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>404: Not Found</title>
+
     <style>
-    html,body{ padding:0; margin:0;
-      font-size:1.25em; color: #037 /*#a05*/; font-family: 'Roboto Slab', Consolas, Monaco, "Ubuntu Mono", fixed;
-      line-height:1.2em; background: ##f3f4f5;
+    html,body{
+      padding:0; margin:0;
+      font-size:1.25em; font-family: Arial, Helvetica, Ubuntu, sans-serif;
+      color: #037; background: #f3f4f5;
+      line-height:1.2em; 
     }
-    h3 { font-size: 5.2em; font-style: normal; color: #05a /*#a05*/;
-      margin: 0; padding: 0;
+    h3 {
+      font-size: 2em; font-style: normal;
+      font-weight: 400;
+      color: #05a;
+      margin: 0; padding: 5px;
       opacity: 0.27;
+      border-bottom: 1px solid #05a;
     }
     .container { display: flex; height: 100vh; align-items:center; }
     .content { position: relative;
-        max-width:720px; width: 100%; margin: auto auto; padding: 1.5em;
-        /* text-align: center; justify-center: center; */
-        font-size: .75em; opacity: .33; font-style: italic;
-    }
-    @media screen and ( max-width: 720px) {
-      html, body { font-size: 1.24em; }
-      h3 { font-size: 4em; }
+        max-width: 480px; width: 100%;
+        margin: auto auto; padding: 1.5em;
+        text-align: center; justify-center: center;
+        opacity: .33;
+        font-size: .87em
     }
     </style>
   </head>