fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup! restyle

static/scss/main.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 $base: #1e1e2e;
 $text: #cdd6f4;
 
@@ -15,6 +17,9 @@ $surface2: #585b70;
 $subtext0: #a6adc8;
 $subtext1: #bac2de;
 
+$red: #f38ba8;
+$green: #a6e3a1;
+$peach: #fab387;
 $blue: #89b4fa;
 
 
@@ -23,7 +28,6 @@ body {
   font-family: Pixeloid;
   color: $text;
   width: 100%;
-  /* margin: 0 8px; */
   margin: 0;
 }
 
@@ -90,6 +94,28 @@ header {
   & + & {
     margin-top: 8px;
   }
+
+  &.red {
+    background-color: color.mix($surface0, $red, 50%);
+  }
+  &.orange {
+    background-color: color.mix($surface0, $peach, 50%);
+  }
+  &.green {
+    background-color: color.mix($surface0, $green, 50%);
+  }
+
+  & .header {
+    display: flex;
+    align-items: center;
+    font-size: x-large;
+
+    .icon {
+      margin-right: 4px;
+      width: 48px;
+      border-radius: 6px;
+    }
+  }
 }
 
 @font-face {
@@ -110,10 +136,3 @@ header {
     url("/static/font/Pixeloid/otf/Sans-Bold.otf") format("opentype");
   font-weight: bold;
 }
-@font-face {
-  font-family: PixeloidMono;
-  src:
-    url("/static/font/Pixeloid/woff/Mono.woff2") format("woff2"),
-    url("/static/font/Pixeloid/otf/Mono.otf") format("opentype");
-  font-style: mono;
-}