Add tiny UI

src/index.scss

@@ -0,0 +1,92 @@
+@use 'style/vars';
+@use 'style/fonts';
+@use 'style/mixins' as *;
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+
+  @media (prefers-reduced-motion) {
+    transition: none !important;
+    animation: none !important;
+  }
+}
+
+html {
+  height: 100%;
+  -webkit-font-smooth: antialiased;
+
+  > body {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    position: relative;
+
+    > .canvas-container {
+      height: 100%;
+      display: flex;
+      width: 100%;
+
+      > canvas {
+        height: 100%;
+        width: 100%;
+      }
+
+      > button.minimize-full-screen {
+        @include image-button(url('../assets/icons/minimize.svg'));
+        position: absolute;
+        bottom: var(--small-margin);
+        right: var(--small-margin);
+      }
+
+      > .errors-container {
+        color: red;
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: none;
+
+        pre {
+          font-size: 20px;
+        }
+      }
+    }
+
+    > aside {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      transform: translateY(-50%);
+
+      @include blurred-background;
+      border-radius: var(--border-radius);
+      margin: var(--small-margin);
+
+      > nav.buttons {
+        @include center-children;
+        flex-direction: column;
+        gap: var(--normal-margin);
+        margin: var(--small-margin);
+
+        > button.info {
+          @include image-button(url('../assets/icons/info.svg'));
+        }
+
+        > button.maximize-full-screen {
+          @include image-button(url('../assets/icons/maximize.svg'));
+        }
+
+        > button.restart {
+          @include image-button(url('../assets/icons/restart.svg'));
+        }
+      }
+
+      > main.pages {
+        display: none;
+      }
+    }
+  }
+}