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;
+}

layouts/_default/baseof.html

@@ -7,15 +7,17 @@
     </title>
     <meta name="description" content="{{ .Description }}" />
     {{ partial "css-variables.html" . }}
-    {{/* styles */}}
-    {{ $options := dict "inlineImports" true }}
-    {{ $styles := resources.Get "css/styles.css" }}
-    {{ $styles = $styles | resources.PostCSS $options }}
+    
+    {{/* Main Styles */}}
+    {{ $styles := resources.Get "scss/main.scss" }}
+    {{ $styles = $styles | resources.ToCSS (dict "targetPath" "css/styles.css" "enableSourceMap" true) }}
+    {{ $styles = $styles | resources.PostCSS }}
+    
     {{ if hugo.IsProduction }}
       {{ $styles = $styles | minify | fingerprint | resources.PostProcess }}
     {{ end }}
+    
     <link href="{{ $styles.RelPermalink }}" rel="stylesheet" />
-    <link href="/css/wompum.css" rel="stylesheet" />
   </head>
   <body class="">
     {{ partial "header.html" . }}

layouts/_default/single.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
     
     <article class="flex flex-col lg:flex-row-reverse">
-      <header class="lg:sticky lg:top-0 lg:h-screen lg:overflow-y-auto lg:w-1/3 p-4">
+      <header class="lg:sticky lg:top-0 lg:h-screen lg:overflow-y-auto lg:w-1/3 p-4 font-iosevka">
         <h1 class="font-bold">{{ .Title }}</h1>
         <p><strong>Date:</strong> <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "January 2, 2006" }}</time></p>
         <p><strong>Narrator:</strong> {{ .Params.narrator }}</p>

package.json

@@ -19,6 +19,10 @@
     "postcss-purgecss": "^2.0.3",
     "tailwindcss": "^2.2.7"
   },
+  "scripts": {
+    "build:css": "postcss assets/css/tailwind.css -o static/css/tailwind.css",
+    "watch:css": "postcss assets/css/tailwind.css -o static/css/tailwind.css --watch"
+  },
   "name": "protocol-oral-history-project",
   "version": "0.1.0"
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

static/css/wompum.css

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

tailwind.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+  content: [
+    './layouts/**/*.html',
+    './content/**/*.md',
+    './assets/scss/**/*.scss',
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        'garamond': ['EB Garamond 12', 'serif'],
+        'iosevka': ['Iosevka', 'monospace'],
+      },
+    },
+  },
+  plugins: [
+    require('@tailwindcss/typography'),
+  ],
+};