Resolve #38; Fix styling of error pages.

build.sh

@@ -38,9 +38,16 @@ do
     then
         echo -e "$green"Styling...
 
-        sass src/style.scss target/style.css
+        files=(
+            'style'
+            'errors/style'
+        )
 
-        echo -e "$cyan"'  src/style.scss -> target/style.css'
+        for stylesheet in "${files[@]}"
+        do
+            echo -e "$cyan  src/$stylesheet.scss -> target/$stylesheet.css"
+            sass src/$stylesheet.scss target/$stylesheet.css
+        done
 
     elif [ "$x" == 'copy' ]
     then

src/errors/400.html

@@ -16,7 +16,7 @@
                 </div>
                 <include src="includes/nav_quick_links.html" />
             </nav>
-            <div class="error_pane">
+            <div class="pane_error">
                 <h1>400</h1>
                 <h2>Bad Request!</h2>
                 <hr />

src/errors/style.scss

@@ -0,0 +1,3 @@
+@use "../partials/common";
+
+@use "../partials/pane_error";

src/includes/meta.html

@@ -1,11 +1,9 @@
 <meta charset="utf-8" />
 
 <meta name="description" content="Cutieguwu's Official website" />
-<meta
+<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0" />
-    name="viewport"
-    content="width=device-width, height=device-height, initial-scale=1.0"
-/>
 <meta name="keywords" content="cutieguwu" />
 
 <link rel="icon" type="image/x-icon" href="img/test-favicon.jpg" />
+
 <link rel="stylesheet" type="text/css" href="style.css" />

src/partials/_common.scss

@@ -0,0 +1,113 @@
+@use "pane_main";
+@use "pane_nav";
+@use "pane_spacer";
+
+:root {
+    /*
+    0: Base of an element. Example: the viewport class.
+
+    The higher the integer, the lighter the colour, the higher it should be visually, meaning more nested in the cascade.
+
+    Odd numbers should be used as intermediate colours between the fore and back elements. Excepting white--white's special.
+    Eg. Current dropdown menu.
+
+    */
+    font-size: var(--font-size-generic);
+
+    --accent-red: #cb4c4cff;
+    --accent-orange: #e18142ff;
+    --accent-yellow: #e4d281ff;
+    --accent-green: #c5e689ff;
+    --accent-cyan: #a7edefff;
+    --accent-blue: #5f62e2ff;
+    --accent-indigo: #874ac0ff;
+    --accent-purple: #a355d3ff;
+    --accent-magenta: #df67dfff;
+    --accent-pink: #ff9f9fff;
+
+    --background-0: #130b21ff;
+    --background-1: #170d28ff;
+    --background-2: #231833ff;
+    --background-3: #211635ff;
+    --background-4: #2a223eff;
+
+    --block-0: #0d0d0dff;
+    --block-1: #1a1a1aff;
+    --block-2: #272727ff;
+
+    --highlight-hover: #944db6ff;
+
+    --white-0: #bfbfbfff;
+    --white-1: #d9d9d9ff;
+    --white-2: #e5e5e5ff;
+    --white-3: #f5f5f5ff;
+
+    --font-size-generic: 1.85vh;
+    --font-family-generic: "Liberation Sans", Arial, Sans-Serif;
+
+    --border-radius-small: calc(var(--border-radius-large) / 2);
+    --border-radius-large: 1rem;
+    --border-radius-leaf: var(--border-radius-small)
+        var(--border-radius-large);
+
+    --margin-pane: 1.5rem;
+
+    --spacing-horizontal: 0.75rem;
+    --spacing-menu-gap: 1rem;
+
+    --transition-fade: 0.4s ease-out;
+    --transition-cut: none;
+
+    --transform-scale-x: scaleX(1.15);
+
+    body {
+        background-color: var(--background-0);
+        margin: 0;
+        color: var(--white-3);
+    }
+}
+
+/*
+* {
+    outline: 1px solid red;
+}
+*/
+
+h1 {
+    font-size: 3.3vh;
+}
+
+h2 {
+    font-size: 2.5vh;
+}
+
+p {
+    font-family: var(--font-family-generic);
+}
+
+ion-icon {
+    width: 1rem;
+    height: 1rem;
+}
+
+.viewport {
+    /* Adds a margin otherwise for some reason. */
+    margin: inherit;
+
+    display: flex;
+    flex-flow: row wrap;
+    align-items: flex-start;
+}
+
+.footer {
+    margin: 0;
+    padding: var(--spacing-horizontal);
+
+    background-color: var(--background-2);
+    border-top-right-radius: var(--border-radius-large);
+
+    font-size: 1.65vh;
+
+    position: absolute;
+    bottom: 0;
+}

src/partials/_pane_error.scss

@@ -1,6 +1,10 @@
 .pane_error {
     width: max-content;
-    margin: auto; /* center object */
+
     text-align: center;
     background-color: var(--background-2);
+    margin: auto; /* center object */
+    padding: var(--spacing-horizontal);
+
+    border-radius: var(--border-radius-leaf);
 }

src/partials/_pane_main.scss

@@ -1,9 +1,10 @@
 .pane_main {
     flex: 1;
+
     text-align: center;
     background-color: var(--background-2);
     margin: var(--margin-pane);
-    padding: 0;
+    padding: var(--spacing-horizontal);
 
     border-radius: var(--border-radius-leaf);
 }

src/partials/_pane_spacer.scss

@@ -8,11 +8,12 @@
 
     .spacer_container {
         margin: 0;
+        padding: var(--spacing-horizontal);
         background-color: var(--background-2);
         height: calc(
             50vh - var(--margin-pane) - calc(
                     var(--spacing-menu-gap) / 2
-                )
+                ) - calc(var(--spacing-horizontal) * 2)
         );
         flex: 1;
         border-radius: var(--border-radius-leaf);

src/style.scss

@@ -1,122 +1 @@
-@use "partials/pane_main";
+@use "partials/common";
-@use "partials/pane_nav";
-@use "partials/pane_spacer";
-
-@use "partials/pane_error";
-
-/*
-@font-face {
-    font-family: Syncopate;
-    src: url(syncopate.woff);
-}
-*/
-
-:root {
-    /*
-    0: Base of an element. Example: the viewport class.
-
-    The higher the integer, the lighter the colour, the higher it should be visually, meaning more nested in the cascade.
-
-    Odd numbers should be used as intermediate colours between the fore and back elements. Excepting white--white's special.
-    Eg. Current dropdown menu.
-
-    */
-    font-size: var(--font-size-generic);
-
-    --accent-red: #cb4c4cff;
-    --accent-orange: #e18142ff;
-    --accent-yellow: #e4d281ff;
-    --accent-green: #c5e689ff;
-    --accent-cyan: #a7edefff;
-    --accent-blue: #5f62e2ff;
-    --accent-indigo: #874ac0ff;
-    --accent-purple: #a355d3ff;
-    --accent-magenta: #df67dfff;
-    --accent-pink: #ff9f9fff;
-
-    --background-0: #130b21ff;
-    --background-1: #170d28ff;
-    --background-2: #231833ff;
-    --background-3: #211635ff;
-    --background-4: #2a223eff;
-
-    --block-0: #0d0d0dff;
-    --block-1: #1a1a1aff;
-    --block-2: #272727ff;
-
-    --highlight-hover: #944db6ff;
-
-    --white-0: #bfbfbfff;
-    --white-1: #d9d9d9ff;
-    --white-2: #e5e5e5ff;
-    --white-3: #f5f5f5ff;
-
-    --font-size-generic: 1.85vh;
-    --font-family-generic: "Liberation Sans", Arial, Sans-Serif;
-
-    --border-radius-small: calc(var(--border-radius-large) / 2);
-    --border-radius-large: 1rem;
-    --border-radius-leaf: var(--border-radius-small)
-        var(--border-radius-large);
-
-    --margin-pane: 1.5rem;
-
-    --spacing-horizontal: 0.75rem;
-    --spacing-menu-gap: 1rem;
-
-    --transition-fade: 0.4s ease-out;
-    --transition-cut: none;
-
-    --transform-scale-x: scaleX(1.15);
-
-    body {
-        background-color: var(--background-0);
-        margin: 0;
-        color: var(--white-3);
-    }
-}
-
-/*
-* {
-    outline: 1px solid red;
-}
-*/
-
-h1 {
-    font-size: 3.3vh;
-}
-
-h2 {
-    font-size: 2.5vh;
-}
-
-p {
-    font-family: var(--font-family-generic);
-}
-
-ion-icon {
-    width: 1rem;
-    height: 1rem;
-}
-
-.viewport {
-    /* Adds a margin otherwise for some reason. */
-    margin: inherit;
-
-    display: flex;
-    flex-flow: row wrap;
-    align-items: flex-start;
-}
-
-.footer {
-    margin: 0;
-    padding: var(--spacing-horizontal);
-
-    background-color: var(--background-2);
-    border-top-right-radius: var(--border-radius-large);
-
-    font-size: 1.65vh;
-
-    position: absolute;
-    bottom: 0;
-}