sidebar part 1: character image, name, class, level, xp, hp

style/_sidebar.scss

@@ -0,0 +1,150 @@
+@use 'mixins';
+
+aside {
+    grid-row: 2/3;
+    grid-column: 1/2;
+    box-sizing: border-box;
+
+    .character-image {
+        max-height: 32vh;
+        overflow: hidden;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            object-position: center bottom;
+
+        }
+        $size: 30px;
+        clip-path: polygon(0 0, 100% 0, 100% calc(100% - $size), calc(100% - $size) 100%, 0 100%);
+    }
+
+    // @FIXME: long names stretch the sidebar
+    .names {
+        margin-top: 10px;
+        margin-left: 10px;
+        display: flex;
+        font-size: .9em;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        box-sizing: border-box;
+        max-width: 100%;
+        overflow: hidden;
+
+        transform: skewX(-3deg);
+
+        .alias-field {
+            margin: 0 5px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            input {
+                padding: 0;
+            }
+        }
+    }
+
+    .about {
+        display: flex;
+        flex-wrap: wrap;
+        padding: 2px 10px;
+        justify-content: space-evenly;
+
+        &, input.header-input, * {
+            font-size: 14px;
+            font-family: "Neusa Next Pro";
+            font-weight: 300;
+        }
+
+        .class {
+            input {
+
+            }
+        }
+
+        .level {
+        }
+
+        button {
+            color: white;
+        }
+
+        .level-adjust {
+            display: flex;
+            width: 100%;
+            justify-content: center;
+            button {
+                font-size: 1.5em;
+                width: 10%;
+                height: 20px;
+                margin: 4px 5px;
+                @include mixins.button;
+            }
+        }
+    }
+
+    > h6 {
+        font-size: 0.7em;
+        text-align: right;
+        padding: 5px;
+        color: #666;
+        font-family: "Galderglynn Titling";
+    }
+
+    .hp {
+        display: flex;
+        background: black;
+        .perm, .temp {
+            position: relative;
+            display: flex;
+            align-items: center;
+        }
+
+
+        .perm {
+            width: 80%;
+            justify-content: flex-end;
+
+            .bar {
+                background: rgba(crimson, 0.25);
+            }
+            #current_hp {
+                margin-right: -5px;
+            }
+            #max_hp {
+                margin-left: 5px;
+            }
+        }
+        .temp {
+            justify-content: flex-end;
+            text-align: right;
+            width: 20%;
+            .bar {
+                background: rgba(purple, 0.15);
+            }
+        }
+
+        .bar {
+            z-index: 1;
+            height: 100%;
+            display: block;
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+
+        .val {
+            z-index: 2;
+        }
+    }
+
+    input {
+        max-width: 100%;
+        width: fit-content;
+        field-sizing: content;
+    }
+}

style/main.scss

@@ -1,6 +1,7 @@
 @use 'mixins';
 @use 'reset';
 @use 'header';
+@use 'sidebar';
 
 html {
     background: black;
@@ -33,27 +34,16 @@ h1, h2, h3, h4, h5, h6 {
 
 header, aside, main {
     background: rgba(12, 12, 12, 1);
-    filter: drop-shadow(1px 1px 0px hsl(345, 69%, 20%))
-            drop-shadow(2px 1px 0px hsl(345, 69%, 15%));
     position: relative;
 }
 
 
-
-aside {
-    grid-row: 2/3;
-    grid-column: 1/2;
-}
-
 main {
     grid-row: 2/3;
     grid-column: 2/3;
 }
 
 input {
-    border: 1px solid black;
-    height: 36px;
-    font-size: 28px;
     padding: 3px;
 }
 
@@ -63,6 +53,7 @@ input {
 }
 
 input.header-input {
+    text-decoration: underline 1px rgba(255, 255, 255, 0.33);
     border: none;
     color: white;
 
@@ -76,5 +67,28 @@ input.header-input {
         font-weight: 200;
     }
 
+    &-1 {
+        font-size: 2em;
+    }
+    &-2 {
+        font-size: 1.5em;
+    }
+    &-3 {
+        font-size: 1.25em;
+    }
+    &-4 {
+        font-size: 1em;
+    }
+    &-5 {
+        font-size: 0.9em;
+    }
+    &-6 {
+        font-size: 0.75em;
+    }
+
     @include mixins.heading;
 }
+
+img {
+    overflow: hidden;
+}