Update theming

src/styles/index.scss

@@ -1,3 +1,10 @@
+:root {
+    --aside-note: #a698ff;
+    --aside-warning: #ffff7a;
+    --aside-dangerous: #e16262;
+    --aside-successful: #4ce14c;
+}
+
 body {
     max-width: 1200px;
     margin: auto;
@@ -99,7 +106,7 @@ header {
                 color: white;
                 border: 1px #2d2d2d solid;
                 border-radius: 6px;
-                padding: 12px 16px;
+                padding: 8px 12px;
                 font-size: 14px;
 
                 &:focus {
@@ -188,12 +195,23 @@ header {
             min-width: 250px;
             display: flex;
             flex-direction: column;
-            gap: 12px;
+            gap: 6px;
+
+            h2 {
+                margin: 12px 0px 12px 12px;
+            }
 
             a {
                 text-decoration: none;
                 font-size: 14px;
-                color: #898989;
+                background: transparent;
+                color: white;
+                border-radius: 6px;
+                padding: 12px;
+                border: 1px transparent solid;
+                &:hover {
+                    border-color: #323232;
+                }
             }
         }
 
@@ -226,6 +244,43 @@ header {
         }
     }
 
+    .aside {
+        border-left: 6px transparent solid;
+        padding-left: 24px;
+        padding-top: 12px;
+        padding-bottom: 12px;
+        &#aside-Note {
+            color: var(--aside-note);
+            border-color: var(--aside-note);
+            svg {stroke: var(--aside-note);}
+        }
+        &#aside-Warning {
+            color: var(--aside-warning);
+            border-color: var(--aside-warning);
+            svg {stroke: var(--aside-warning);}
+        }
+        &#aside-Dangerous {
+            color: var(--aside-dangerous);
+            border-color: var(--aside-dangerous);
+            svg {stroke: var(--aside-dangerous);}
+        }
+        &#aside-Successful {
+            color: var(--aside-successful);
+            border-color: var(--aside-successful);
+            svg {stroke: var(--aside-successful);}
+        }
+        h2 {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            font-size: 24px;
+            padding-bottom: 6px;
+        }
+        * {
+            margin: 0px;
+        }
+    }
+
     .footer {
         position: absolute;
         padding-bottom: 24px;