adds fonts and tailwind generation

assets/scss/_fonts.scss

@@ -0,0 +1,79 @@
+@font-face {
+  font-family: 'EB Garamond 12';
+  src: local('EB Garamond 12 Italic'), local('EBGaramond12-Italic'),
+    url('EBGaramond12-Italic.woff2') format('woff2'),
+    url('EBGaramond12-Italic.woff') format('woff');
+  font-weight: normal;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'EB Garamond 12';
+  src: local('EB Garamond 12 Regular'), local('EBGaramond12-Regular'),
+    url('EBGaramond12-Regular.woff2') format('woff2'),
+    url('EBGaramond12-Regular.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Iosevka';
+  src: local('Iosevka'),
+    url('Iosevka.woff2') format('woff2'),
+    url('Iosevka.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Iosevka';
+  src: local('Iosevka Bold'), local('Iosevka-Bold'),
+    url('Iosevka-Bold.woff2') format('woff2'),
+    url('Iosevka-Bold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Iosevka';
+  src: local('Iosevka Bold Italic'), local('Iosevka-Bold-Italic'),
+    url('Iosevka-Bold-Italic.woff2') format('woff2'),
+    url('Iosevka-Bold-Italic.woff') format('woff');
+  font-weight: bold;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Iosevka';
+  src: local('Iosevka Light'), local('Iosevka-Light'),
+    url('Iosevka-Light.woff2') format('woff2'),
+    url('Iosevka-Light.woff') format('woff');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Iosevka';
+  src: local('Iosevka Light Italic'), local('Iosevka-Light-Italic'),
+    url('Iosevka-Light-Italic.woff2') format('woff2'),
+    url('Iosevka-Light-Italic.woff') format('woff');
+  font-weight: 300;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Iosevka';
+  src: local('Iosevka Oblique'), local('Iosevka-Oblique'),
+    url('Iosevka-Oblique.woff2') format('woff2'),
+    url('Iosevka-Oblique.woff') format('woff');
+  font-weight: normal;
+  font-style: italic;
+  font-display: swap;
+}

assets/scss/_variables.scss

@@ -0,0 +1,2 @@
+$font-garamond: 'EB Garamond 12', serif;
+$font-iosevka: 'Iosevka', monospace;

assets/scss/components/_wompum.scss

@@ -0,0 +1,32 @@
+.wompum {
+    &-container {
+        width: 100%;
+        margin: 0 auto;
+    }
+
+    &-grid {
+        display: grid;
+        gap: 0;
+        padding: 0;
+        width: 100%;
+    }
+
+    &-cell {
+        width: 100%;
+        min-height: 30px;
+        background-color: var(--sand-500);
+
+        // Create pseudo-random pattern using prime numbers
+        &:nth-child(7n+1) {
+            background-color: var(--sand-100);
+        }
+
+        &:nth-child(5n+2) {
+            background-color: var(--sand-900);
+        }
+
+        &:nth-child(11n+3) {
+            background-color: var(--sand-500);
+        }
+    }
+}

assets/scss/main.scss

@@ -0,0 +1,19 @@
+// Tailwind
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+// Variables
+@import "variables";
+
+// Fonts
+@import "fonts";
+
+// Components
+@import "components/wompum";
+
+body {
+  font-family: $font-garamond;
+  font-size: 16px;
+  line-height: 1.5;
+}