diff --git a/assets/scss/_fonts.scss b/assets/scss/_fonts.scss new file mode 100644 index 0000000..726c3cc --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss new file mode 100644 index 0000000..b9fab27 --- /dev/null +++ b/assets/scss/_variables.scss @@ -0,0 +1,2 @@ +$font-garamond: 'EB Garamond 12', serif; +$font-iosevka: 'Iosevka', monospace; diff --git a/assets/scss/components/_wompum.scss b/assets/scss/components/_wompum.scss new file mode 100644 index 0000000..b1af246 --- /dev/null +++ b/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); + } + } +} diff --git a/assets/scss/main.scss b/assets/scss/main.scss new file mode 100644 index 0000000..760f891 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/config.toml b/config.toml index ee1f7ce..6b4f1e2 100644 --- a/config.toml +++ b/config.toml @@ -5,3 +5,6 @@ theme = "hugo-starter-tailwind-basic" [taxonomies] tag = "tags" + +[params] + customCSS = ["css/tailwind.css"] diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index e2765c0..9beb303 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -7,15 +7,17 @@ {{ 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 }} + - {{ partial "header.html" . }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 4bb254e..395f845 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,7 +1,7 @@ {{ define "main" }}
-
+

{{ .Title }}

Date:

Narrator: {{ .Params.narrator }}

diff --git a/package.json b/package.json index 54eefad..41a8daf 100644 --- a/package.json +++ b/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" } diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..8567b4c --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; \ No newline at end of file diff --git a/static/css/wompum.css b/static/css/wompum.css deleted file mode 100644 index 4ff6ab2..0000000 --- a/static/css/wompum.css +++ /dev/null @@ -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); -} \ No newline at end of file diff --git a/static/fonts/EBGaramond12-Italic.woff b/static/fonts/EBGaramond12-Italic.woff new file mode 100644 index 0000000..8eeca33 Binary files /dev/null and b/static/fonts/EBGaramond12-Italic.woff differ diff --git a/static/fonts/EBGaramond12-Italic.woff2 b/static/fonts/EBGaramond12-Italic.woff2 new file mode 100644 index 0000000..fec7393 Binary files /dev/null and b/static/fonts/EBGaramond12-Italic.woff2 differ diff --git a/static/fonts/EBGaramond12-Regular.woff b/static/fonts/EBGaramond12-Regular.woff new file mode 100644 index 0000000..09a220d Binary files /dev/null and b/static/fonts/EBGaramond12-Regular.woff differ diff --git a/static/fonts/EBGaramond12-Regular.woff2 b/static/fonts/EBGaramond12-Regular.woff2 new file mode 100644 index 0000000..d017837 Binary files /dev/null and b/static/fonts/EBGaramond12-Regular.woff2 differ diff --git a/static/fonts/Iosevka-Bold-Italic.woff b/static/fonts/Iosevka-Bold-Italic.woff new file mode 100644 index 0000000..2891352 Binary files /dev/null and b/static/fonts/Iosevka-Bold-Italic.woff differ diff --git a/static/fonts/Iosevka-Bold-Italic.woff2 b/static/fonts/Iosevka-Bold-Italic.woff2 new file mode 100644 index 0000000..86d7133 Binary files /dev/null and b/static/fonts/Iosevka-Bold-Italic.woff2 differ diff --git a/static/fonts/Iosevka-Bold.woff b/static/fonts/Iosevka-Bold.woff new file mode 100644 index 0000000..13ee7d0 Binary files /dev/null and b/static/fonts/Iosevka-Bold.woff differ diff --git a/static/fonts/Iosevka-Bold.woff2 b/static/fonts/Iosevka-Bold.woff2 new file mode 100644 index 0000000..b450146 Binary files /dev/null and b/static/fonts/Iosevka-Bold.woff2 differ diff --git a/static/fonts/Iosevka-Light-Italic.woff b/static/fonts/Iosevka-Light-Italic.woff new file mode 100644 index 0000000..cf9f226 Binary files /dev/null and b/static/fonts/Iosevka-Light-Italic.woff differ diff --git a/static/fonts/Iosevka-Light-Italic.woff2 b/static/fonts/Iosevka-Light-Italic.woff2 new file mode 100644 index 0000000..3d1c294 Binary files /dev/null and b/static/fonts/Iosevka-Light-Italic.woff2 differ diff --git a/static/fonts/Iosevka-Light.woff b/static/fonts/Iosevka-Light.woff new file mode 100644 index 0000000..69035bf Binary files /dev/null and b/static/fonts/Iosevka-Light.woff differ diff --git a/static/fonts/Iosevka-Light.woff2 b/static/fonts/Iosevka-Light.woff2 new file mode 100644 index 0000000..8d2602f Binary files /dev/null and b/static/fonts/Iosevka-Light.woff2 differ diff --git a/static/fonts/Iosevka-Oblique.woff b/static/fonts/Iosevka-Oblique.woff new file mode 100644 index 0000000..69ca145 Binary files /dev/null and b/static/fonts/Iosevka-Oblique.woff differ diff --git a/static/fonts/Iosevka-Oblique.woff2 b/static/fonts/Iosevka-Oblique.woff2 new file mode 100644 index 0000000..d2b7208 Binary files /dev/null and b/static/fonts/Iosevka-Oblique.woff2 differ diff --git a/static/fonts/Iosevka.woff b/static/fonts/Iosevka.woff new file mode 100644 index 0000000..633e359 Binary files /dev/null and b/static/fonts/Iosevka.woff differ diff --git a/static/fonts/Iosevka.woff2 b/static/fonts/Iosevka.woff2 new file mode 100644 index 0000000..16d903d Binary files /dev/null and b/static/fonts/Iosevka.woff2 differ diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..038fa8c --- /dev/null +++ b/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'), + ], +}; \ No newline at end of file