Adjust style of 404 page

src/_includes/misc/base.njk

@@ -9,12 +9,9 @@
         <meta property="og:title" content="{% if title %}{{ title }}{% else %}{{ sitemeta.siteName }}{% endif %}">
         {% include "global/metagen.njk" %}
 
-        {# CSS #}
+        {# Style #}
+        {% include "global/defaultfont.njk" %}
         <link rel="stylesheet" href="{{'/assets/css/misc.css' | url | safe}}">
-        <link rel="stylesheet" href="{{'/assets/fonts/noto-sans/noto-sans.css' | url | safe}}">
-
-        {# JavaScript #}
-        <script rel="preload" src="/assets/js/redirect.js" as="script"></script>
 
         {# Favicon #}
         <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">

src/assets/css/misc.css

@@ -2,29 +2,22 @@
 /* Custom Properties   */
 /* ------------------- */
 :root {
-    --clr-body-bg: #000000;
-    --clr-body-txt: #ffffff;
+    --clr-body-bg: #08031A;
+    --clr-body-txt: #fceaff;
     --clr-h1: #BA6FE8;
     --clr-link-btn-bg: #7A37A3;
     --clr-link-btn-hover: #BA6FE8;
 
-    --ff-default: 'Noto Sans';
+    --ff-default: 'Lexend';
 
-    --fs-h1: 3.1rem;
-    --fs-body: 1rem;
-    --fs-link-btn: 2rem;
+    --fs-h1: clamp(2rem, 1.5rem + 5vw, 3.5rem);
+    --fs-p: 1.25rem;
+    --fs-link-btn: clamp(1.55rem, 1rem + 3vw, 2.15rem);
 
     --fw-reg: 400;
     --fw-link-btn: 600;
 }
 
-/* Tablet screen size */
-@media only screen and (min-width: 43.75rem) {
-    :root {
-        --fs-h1: 4rem;
-    }
-}
-
 /* ------------------- */
 /* CSS Reset           */
 /* ------------------- */
@@ -108,8 +101,8 @@ textarea:not([rows]) {
 
 body {
     font-size: var(--clr-body-bg);
-    font-family: var(--ff-default), Arial, Helvetica, sans-serif;
-    color: #FFFFFF;
+    font-family: var(--ff-default), system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    color: var(--clr-body-txt);
     background: var(--clr-body-bg);
     text-align: center;
 }
@@ -136,7 +129,7 @@ h1 {
 }
 
 p {
-    font-size: 1.5rem;
+    font-size: var(--fs-p);
 }
 
 .index__btn-wrapper {
@@ -151,8 +144,8 @@ p {
     font-size: var(--fs-link-btn);
     font-weight: var(--fw-link-btn);
     border: none;
-    border-radius: 0.6rem;
-    padding: 1rem 1.25rem;
+    border-radius: 0.4em;
+    padding: 0.4em 0.75em;
     margin: 0.5rem;
     background: var(--clr-link-btn-bg);
     color: var(--clr-body-txt);
@@ -162,14 +155,10 @@ p {
 .index__link:hover {
     cursor: pointer;
     background: var(--clr-link-btn-hover);
-    transition: 0.5s;
+    transition: 0.3s;
 }
 
 .index__link:focus {
-    outline-offset: 0.15em;
     outline: 0.1em solid var(--clr-body-txt);
-}
-
-a:focus img {
-    outline: 0.2em solid var(--clr-body-txt);
+    outline-offset: -0.15em;
 }