update css

resources/css/app.scss

@@ -15,108 +15,201 @@ html {
 
 html,
 body {
-    font-family: $default-font-family;
+    font-family: var(--default-font-family);
-    font-size: $default-font-size;
+    font-size: var(--default-font-size);
-    background-color: var(--base-colour);
+    background-color: var(--base-color);
-    color: var(--base-colour-text);
+    color: var(--base-color-text);
     width: 100vw;
     min-height: 100vh;
     min-width: 100vw;
     overflow-x: hidden;
 }
 
-// Who knows why ion-icon randomally sets this to hidden.....
+header {
-ion-icon {
+    box-shadow: var(--base-shadow);
-    visibility: visible;
 }
 
-#app {
+h1,
-    display: flex;
+h2,
-    flex-direction: column;
+h3,
-    min-height: 100vh;
+h4,
+h5,
+h6 {
+    font-family: var(--header-font-family);
+}
+
+h2 {
+    font-size: 36px;
+    margin-bottom: 0;
 }
 
 a,
 a:visited {
-    color: $primary-color;
+    color: var(--primary-color);
-    text-decoration: none;
+    text-decoration-thickness: 0.1em;
-    transition: color 0.1s, underline 0.1s;
+    text-decoration-color: var(--primary-color-light);
 
     &:hover {
-        color: $primary-color-dark;
+        filter: brightness(115%);
-        text-decoration: underline;
     }
 }
 
-h1 {
-    text-align: left;
-    font-weight: 800;
-}
-
 p {
-    line-height: 1.5rem;
+    margin: 1rem 0;
-    margin-top: 0;
 }
 
-code {
+small,
-    display: block;
+.small {
-    font-size: 0.8rem;
+    font-size: 70%;
-    background-color: #eee;
-    padding: 1rem;
-    border: 1px solid #ddd;
-    white-space: pre-wrap;
-    overflow-x: auto;
-    max-height: 30rem;
-    margin-bottom: 1rem;
 }
 
-/* Page Errors */
+.container {
-.sm-page-error {
+    width: 100%;
-    display: flex;
+    max-width: 1200px;
-    flex-direction: column;
+    margin: 0 auto;
+    padding: 0 16px;
+}
 
-    .sm-error-number {
+.card {
-        display: flex;
+    background-color: var(--card-color);
-        justify-content: center;
+    border-radius: 10px;
-        align-items: center;
+    box-shadow: 0 11px 10px -10px rgba(0, 0, 0, 0.2);
-        font-size: 30vw;
+    margin: 48px auto 48px auto;
-        font-weight: 600;
-        color: #295b7e;
 
-        img {
+    .card-header {
-            height: 25vw;
-            margin: 0 0.5rem 0 1rem;
-        }
-    }
-
-    .sm-error-content {
         text-align: center;
-        font-size: 120%;
+        padding: 24px 48px 0;
 
-        h2 {
+        p {
-            margin-top: 0;
+            opacity: 0.6;
-            margin-bottom: 0.5rem;
         }
     }
+
+    .card-body {
+        padding: 0 48px;
+    }
+
+    .card-footer {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 48px 24px 48px;
+    }
+
+    .btn {
+        background-color: var(--base-color-dark);
+    }
 }
 
-/* SM Dialog */
+.btn {
-.sm-dialog-outer {
+    cursor: pointer;
-    position: fixed;
+    position: relative;
-    display: flex;
+    font-family: var(--header-font-family);
-    top: 0;
+    font-weight: 800;
-    left: 0;
+    padding: 16px 32px 16px 32px;
-    bottom: 0;
+    border: 0;
-    right: 0;
+    background-color: var(--base-color-light);
-    flex-direction: column;
+    -webkit-backdrop-filter: blur(4px);
-    align-items: center;
+    backdrop-filter: blur(4px);
-    justify-content: center;
+    color: var(--link-color);
-    z-index: 1000;
+
-    padding: 1rem;
+    &:hover {
+        filter: brightness(85%);
+    }
 }
 
-.sm-dialog-outer:last-of-type {
+// Who knows why ion-icon randomally sets this to hidden.....
-    background-color: rgba(0, 0, 0, 0.4);
+// ion-icon {
-    backdrop-filter: blur(2px);
+//     visibility: visible;
-    -webkit-backdrop-filter: blur(2px);
+// }
-}
+
+// #app {
+//     display: flex;
+//     flex-direction: column;
+//     min-height: 100vh;
+// }
+
+// a,
+// a:visited {
+//     color: $primary-color;
+//     text-decoration: none;
+//     transition: color 0.1s, underline 0.1s;
+
+//     &:hover {
+//         color: $primary-color-dark;
+//         text-decoration: underline;
+//     }
+// }
+
+// h1 {
+//     text-align: left;
+//     font-weight: 800;
+// }
+
+// p {
+//     line-height: 1.5rem;
+//     margin-top: 0;
+// }
+
+// code {
+//     display: block;
+//     font-size: 0.8rem;
+//     background-color: #eee;
+//     padding: 1rem;
+//     border: 1px solid #ddd;
+//     white-space: pre-wrap;
+//     overflow-x: auto;
+//     max-height: 30rem;
+//     margin-bottom: 1rem;
+// }
+
+// /* Page Errors */
+// .sm-page-error {
+//     display: flex;
+//     flex-direction: column;
+
+//     .sm-error-number {
+//         display: flex;
+//         justify-content: center;
+//         align-items: center;
+//         font-size: 30vw;
+//         font-weight: 600;
+//         color: #295b7e;
+
+//         img {
+//             height: 25vw;
+//             margin: 0 0.5rem 0 1rem;
+//         }
+//     }
+
+//     .sm-error-content {
+//         text-align: center;
+//         font-size: 120%;
+
+//         h2 {
+//             margin-top: 0;
+//             margin-bottom: 0.5rem;
+//         }
+//     }
+// }
+
+// /* SM Dialog */
+// .sm-dialog-outer {
+//     position: fixed;
+//     display: flex;
+//     top: 0;
+//     left: 0;
+//     bottom: 0;
+//     right: 0;
+//     flex-direction: column;
+//     align-items: center;
+//     justify-content: center;
+//     z-index: 1000;
+//     padding: 1rem;
+// }
+
+// .sm-dialog-outer:last-of-type {
+//     background-color: rgba(0, 0, 0, 0.4);
+//     backdrop-filter: blur(2px);
+//     -webkit-backdrop-filter: blur(2px);
+// }

resources/css/utils.scss

@@ -44,6 +44,22 @@
     width: 25%;
 }
 
+.max-w-sm {
+    max-width: 640px;
+}
+
+.max-w-md {
+    max-width: 768px;
+}
+
+.max-w-lg {
+    max-width: 1024px;
+}
+
+.max-w-xl {
+    max-width: 1280px;
+}
+
 /* Float */
 .float-left {
     float: left;

resources/css/variables.scss

@@ -1,25 +1,55 @@
-@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;1000&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800&family=Nunito:wght@400;700;800;1000&display=swap");
 
 :root {
-    --base-colour: #efefef;
+    --base-color: #eee;
-    --base-colour-text: #333;
+    --base-color-text: rgba(0, 0, 0, 0.8);
+    --base-color-light: #fff;
+    --base-color-dark: #ddd;
+    --base-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
+
+    --default-font-size: 18px;
+    --default-font-family: "Nunito", "Nunito override", "Arial", "Helvetica",
+        sans-serif;
+
+    --link-color: var(--primary-color);
+
+    --primary-color-lighter: #cce8fb;
+    --primary-color-light: #67bbf4;
+    --primary-color: #35a5f1;
+    --primary-color-dark: #0e80ce;
+    --primary-color-darker: #095589;
+
+    --header-font-family: "Montserrat", "Montserrat override", "Arial",
+        "Helvetica", sans-serif;
+
+    --navbar-color: var(--base-color-light);
+
+    --card-color: var(--base-color-light);
+
+    --footer-color: #666;
+    --footer-color-text: #ccc;
 }
 
 @media (prefers-color-scheme: dark) {
     :root {
-        --base-colour: #333;
+        --base-color: #222;
-        --base-colour-text: #efefef;
+        --base-color-text: rgba(255, 255, 255, 0.9);
+        --base-color-light: #333;
+        --base-color-dark: #444;
+
+        --footer-color: #333;
+        --footer-color-text: #999;
+
+        --primary-color-lighter: #095589;
+        --primary-color-light: #0e80ce;
+        --primary-color: #35a5f1;
+        --primary-color-dark: #67bbf4;
+        --primary-color-darker: #cce8fb;
     }
 }
 
-$default-font-family: "Nunito", "Nunito override", "Arial", "Helvetica",
-    sans-serif;
-$default-font-size: 18px;
-
-$base-colour: #efefef;
-
 /* interim */
-$font-size: $default-font-size;
+$font-size: var(--default-font-size);
 
 /* old variables */