Under construction

aranroig/app/assets/css/colors.scss

@@ -0,0 +1,32 @@
+$themes: (
+    dark: (
+        background: #1e1e1e,
+        background-line: #2e2e2e,
+        border-color: #5a5a5a,
+        text: #ffffff,
+    ),
+    light: (
+        background: #ffffff,
+        background-line: #f0f0f0,
+        border-color: #e0e0e0,
+        text: #1e1e1e,
+    )
+);
+
+@mixin theme-vars($theme-map) {
+  @each $name, $value in $theme-map {
+    --color-#{$name}: #{$value};
+  }
+}
+
+:root {
+  @include theme-vars(map-get($themes, light));
+}
+
+[data-theme="dark"] {
+  @include theme-vars(map-get($themes, dark));
+}
+
+[data-theme="ocean"] {
+  @include theme-vars(map-get($themes, ocean));
+}

aranroig/app/assets/css/fonts.scss

@@ -0,0 +1,6 @@
+@font-face {
+  font-family: 'Hurmit';
+  src: url('@/assets/fonts/HurmitNerdFontMono-Regular.otf') format('opentype');
+  font-weight: normal;
+  font-style: normal;
+}

aranroig/app/assets/css/main.scss

@@ -0,0 +1,25 @@
+body {
+  background-size: 28px 28px;
+  background-image:
+    linear-gradient(to right, var(--color-background-line) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--color-background-line) 1px, var(--color-background) 1px);
+
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+* {
+  color: var(--color-text);
+  font-family: 'Hurmit';
+}
+
+.pixelated {
+  image-rendering: pixelated; /* good for pixel art or low-res images */
+  /* OR for standard crisp images */
+  image-rendering: crisp-edges;
+  pointer-events: none;
+}