Compare commits
6 Commits
a0f84311d2
...
5cff4da500
| Author | SHA1 | Date | |
|---|---|---|---|
| 5cff4da500 | |||
| 8e5ccb77c6 | |||
| 54533f62e9 | |||
| 6be0bd3d7b | |||
| fbc26ed89c | |||
| 255cd357c5 |
40
assets/css/components/wompum.css
Normal file
40
assets/css/components/wompum.css
Normal file
@ -0,0 +1,40 @@
|
||||
.wompum-container {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.wompum-container .wompum-grid,
|
||||
.wompum-container .wompum-article-grid {
|
||||
gap: 2px;
|
||||
height: 100%;
|
||||
min-height: 2px;
|
||||
grid-template-rows: repeat(var(--grid-rows, 5), 1fr);
|
||||
}
|
||||
|
||||
.wompum-container--wide-gap .wompum-grid,
|
||||
.wompum-container--wide-gap .wompum-article-grid {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.wompum-container--no-gap .wompum-grid,
|
||||
.wompum-container--no-gap .wompum-article-grid {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.wompum-grid,
|
||||
.wompum-article-grid {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wompum-cell {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.wompum-cell--narrator,
|
||||
.wompum-cell--subject,
|
||||
.wompum-cell--facilitator {
|
||||
min-height: unset;
|
||||
}
|
||||
94
assets/css/main.css
Normal file
94
assets/css/main.css
Normal file
@ -0,0 +1,94 @@
|
||||
body {
|
||||
@apply font-garamond;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
@apply text-pine-900;
|
||||
}
|
||||
|
||||
.interviewer-question {
|
||||
font-style: italic;
|
||||
color: #444;
|
||||
margin-left: -1rem;
|
||||
}
|
||||
|
||||
.article-title--single .article-title__narrator {
|
||||
@apply mb-2 block font-light;
|
||||
}
|
||||
|
||||
.article-title--single .article-title__subject {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.article-title--list .article-title__narrator::after {
|
||||
content: ":";
|
||||
}
|
||||
|
||||
.article-title--list .article-title__subject {
|
||||
@apply font-light;
|
||||
}
|
||||
|
||||
.wompum-radial-grid {
|
||||
@apply absolute w-full h-full top-0 left-0;
|
||||
}
|
||||
|
||||
.narrator__container {
|
||||
@apply relative;
|
||||
}
|
||||
|
||||
.narrator__frame {
|
||||
@apply relative p-4;
|
||||
}
|
||||
|
||||
.narrator__image {
|
||||
@apply w-full rounded-full object-cover relative z-10 bg-white text-center border-4 border-white grid place-items-center;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
.narrator__wompum {
|
||||
@apply absolute inset-0 w-full h-full;
|
||||
}
|
||||
|
||||
.tag {
|
||||
@apply p-2 bg-sand-100 border border-transparent hover:border-sand-500 rounded-lg whitespace-nowrap hover:text-gray-900 hover:opacity-100
|
||||
}
|
||||
|
||||
.tag-cloud .tag:nth-child(10n+1):hover {
|
||||
@apply border-blue-500;
|
||||
}
|
||||
|
||||
.tag-cloud .tag:nth-child(10n+2):hover {
|
||||
@apply border-clay-500;
|
||||
}
|
||||
|
||||
.tag-cloud .tag:nth-child(10n+3):hover {
|
||||
@apply border-cyan-500;
|
||||
}
|
||||
|
||||
.tag-cloud .tag:nth-child(10n+4):hover {
|
||||
@apply border-gold-500;
|
||||
}
|
||||
|
||||
.tag-cloud .tag:nth-child(10n+5):hover {
|
||||
@apply border-red-500;
|
||||
}
|
||||
|
||||
.tag-cloud .tag:nth-child(10n+6):hover {
|
||||
@apply border-pine-500;
|
||||
}
|
||||
|
||||
.tag-cloud .tag:nth-child(10n+7):hover {
|
||||
@apply border-pink-500;
|
||||
}
|
||||
|
||||
.tag-cloud .tag:nth-child(10n+8):hover {
|
||||
@apply border-moss-500;
|
||||
}
|
||||
|
||||
.tag-cloud .tag:nth-child(10n+9):hover {
|
||||
@apply border-rust-500;
|
||||
}
|
||||
|
||||
.tag-cloud .tag:nth-child(10n):hover {
|
||||
@apply border-sand-500;
|
||||
}
|
||||
47
assets/css/styles.css
Normal file
47
assets/css/styles.css
Normal file
@ -0,0 +1,47 @@
|
||||
@import "tailwindcss";
|
||||
@plugin "@tailwindcss/typography";
|
||||
|
||||
/* Add safelist for all color variations */
|
||||
@source inline("{bg,text,border}-{blue,clay,cyan,gold,moss,pine,pink,red,rust,sand}-{100,500,900}");
|
||||
|
||||
@theme {
|
||||
--font-garamond: 'EB Garamond 12', 'Garamond', 'Baskerville', 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif;
|
||||
--font-iosevka: 'Iosevka', Consolas, 'Liberation Mono', Menlo, monospace;
|
||||
--color-blue-100: #c2cfe0;
|
||||
--color-blue-500: #6f88a3;
|
||||
--color-blue-900: #5d7691;
|
||||
--color-clay-100: #ead4c2;
|
||||
--color-clay-500: #c49b6f;
|
||||
--color-clay-900: #b17f48;
|
||||
--color-cyan-100: #c0dadd;
|
||||
--color-cyan-500: #6a9799;
|
||||
--color-cyan-900: #436668;
|
||||
--color-gold-100: #e6dac1;
|
||||
--color-gold-500: #bca66d;
|
||||
--color-gold-900: #a88b48;
|
||||
--color-moss-100: #d0ddc7;
|
||||
--color-moss-500: #919f71;
|
||||
--color-moss-900: #69734a;
|
||||
--color-pine-100: #c7ddd2;
|
||||
--color-pine-500: #7b9b85;
|
||||
--color-pine-900: #516b57;
|
||||
--color-pink-100: #ead4d2;
|
||||
--color-pink-500: #c0928a;
|
||||
--color-pink-900: #a7695a;
|
||||
--color-red-100: #e8c9c9;
|
||||
--color-red-500: #b87977;
|
||||
--color-red-900: #a35754;
|
||||
--color-rust-100: #eacec4;
|
||||
--color-rust-500: #c48a74;
|
||||
--color-rust-900: #af6649;
|
||||
--color-sand-100: #eee8dd;
|
||||
--color-sand-500: #d4c5aa;
|
||||
--color-sand-900: #b19360;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply antialiased bg-sand-100/50;
|
||||
}
|
||||
|
||||
@import "components/wompum.css";
|
||||
@import "main.css";
|
||||
@ -1,79 +0,0 @@
|
||||
@font-face {
|
||||
font-family: 'EB Garamond 12';
|
||||
src: local('EB Garamond 12 Italic'), local('EBGaramond12-Italic'),
|
||||
url('/fonts/EBGaramond12-Italic.woff2') format('woff2'),
|
||||
url('/fonts/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('/fonts/EBGaramond12-Regular.woff2') format('woff2'),
|
||||
url('/fonts/EBGaramond12-Regular.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Iosevka';
|
||||
src: local('Iosevka'),
|
||||
url('/fonts/Iosevka.woff2') format('woff2'),
|
||||
url('/fonts/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('/fonts/Iosevka-Bold.woff2') format('woff2'),
|
||||
url('/fonts/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('/fonts/Iosevka-Bold-Italic.woff2') format('woff2'),
|
||||
url('/fonts/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('/fonts/Iosevka-Light.woff2') format('woff2'),
|
||||
url('/fonts/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('/fonts/Iosevka-Light-Italic.woff2') format('woff2'),
|
||||
url('/fonts/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('/fonts/Iosevka-Oblique.woff2') format('woff2'),
|
||||
url('/fonts/Iosevka-Oblique.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
@ -1,2 +0,0 @@
|
||||
$font-garamond: 'EB Garamond 12', 'Garamond', 'Baskerville', 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif;
|
||||
$font-iosevka: 'Iosevka', Consolas, 'Liberation Mono', Menlo, monospace;
|
||||
@ -1,49 +0,0 @@
|
||||
.wompum {
|
||||
&-container {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
|
||||
& .wompum-grid,
|
||||
& .wompum-article-grid {
|
||||
gap: 2px;
|
||||
height: 100%; // Fill container height
|
||||
min-height: 2px;
|
||||
grid-template-rows: repeat(var(--grid-rows, 5), 1fr); // Default 5 rows
|
||||
}
|
||||
|
||||
// When no height is set, use aspect ratio
|
||||
&--aspect-ratio {
|
||||
aspect-ratio: 3/1;
|
||||
}
|
||||
|
||||
&--wide-gap .wompum-grid,
|
||||
&--wide-gap .wompum-article-grid {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
&--no-gap .wompum-grid,
|
||||
&--no-gap .wompum-article-grid {
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-grid,
|
||||
&-article-grid {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-cell {
|
||||
width: 100%;
|
||||
height: 100%; // Ensure cells fill their grid areas
|
||||
transition: background-color 0.3s ease;
|
||||
background-color: var(--sand-500);
|
||||
|
||||
// Remove fixed heights since we're using aspect ratio now
|
||||
&--narrator,
|
||||
&--subject,
|
||||
&--facilitator {
|
||||
min-height: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,69 +0,0 @@
|
||||
// Tailwind
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
// Variables
|
||||
@import "variables";
|
||||
|
||||
// Fonts
|
||||
@import "fonts";
|
||||
|
||||
// Components
|
||||
@import "components/wompum";
|
||||
|
||||
body {
|
||||
font-family: $font-garamond;
|
||||
}
|
||||
|
||||
.interviewer-question {
|
||||
font-style: italic;
|
||||
color: #444;
|
||||
margin-left: -1rem;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
&--single {
|
||||
.article-title__narrator {
|
||||
@apply mb-2 block font-light;
|
||||
}
|
||||
.article-title__subject {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
&--list {
|
||||
.article-title__narrator {
|
||||
&::after {
|
||||
content: ":";
|
||||
}
|
||||
}
|
||||
.article-title__subject {
|
||||
@apply font-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Narrator Image Component
|
||||
.wompum-radial-grid {
|
||||
@apply absolute w-full h-full top-0 left-0;
|
||||
}
|
||||
|
||||
.narrator {
|
||||
&__container {
|
||||
@apply relative;
|
||||
}
|
||||
|
||||
&__frame {
|
||||
@apply relative p-4;
|
||||
}
|
||||
|
||||
&__image {
|
||||
@apply w-full rounded-full object-cover relative z-10 bg-white text-center border-4 border-white grid place-items-center;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
&__wompum {
|
||||
@apply absolute inset-0 w-full h-full;
|
||||
}
|
||||
}
|
||||
33
config.toml
33
config.toml
@ -1,4 +1,4 @@
|
||||
baseURL = 'http://example.org/'
|
||||
baseURL = 'https://protocol.ecologies.info/'
|
||||
languageCode = 'en-us'
|
||||
title = 'Protocol Oral History Project'
|
||||
theme = "hugo-starter-tailwind-basic"
|
||||
@ -16,7 +16,38 @@ theme = "hugo-starter-tailwind-basic"
|
||||
images = ["/images/default-og.jpg"] # Will be replaced by wompum generation
|
||||
twitterSite = ""
|
||||
facebookAppID = ""
|
||||
footer = """
|
||||
A project of the [Media Economies Design Lab](https://www.colorado.edu/lab/medlab/)
|
||||
Available under the [Creative Commons Attribution License (CC BY 4.0)](https://creativecommons.org/licenses/by/4.0/)
|
||||
Website design by [Drew Hornbein](https://dhornbein.com)
|
||||
"""
|
||||
|
||||
[params.author]
|
||||
name = "Media Economies Design Lab"
|
||||
twitter = ""
|
||||
|
||||
[module]
|
||||
[module.hugoVersion]
|
||||
extended = false
|
||||
min = "0.112.0"
|
||||
[[module.mounts]]
|
||||
source = "assets"
|
||||
target = "assets"
|
||||
[[module.mounts]]
|
||||
source = "hugo_stats.json"
|
||||
target = "assets/watching/hugo_stats.json"
|
||||
|
||||
[build]
|
||||
writeStats = true
|
||||
[[build.cachebusters]]
|
||||
source = "assets/watching/hugo_stats\\.json"
|
||||
target = "styles\\.css"
|
||||
[[build.cachebusters]]
|
||||
source = "(postcss|tailwind)\\.config\\.js"
|
||||
target = "css"
|
||||
[[build.cachebusters]]
|
||||
source = "assets/.*\\.(js|ts|jsx|tsx)"
|
||||
target = "js"
|
||||
[[build.cachebusters]]
|
||||
source = "assets/.*\\.(.*)$"
|
||||
target = "$1"
|
||||
@ -1,40 +0,0 @@
|
||||
sand:
|
||||
100: "#eee8dd"
|
||||
500: "#d4c5aa"
|
||||
900: "#b19360"
|
||||
pink:
|
||||
100: "#ead4d2"
|
||||
500: "#c0928a"
|
||||
900: "#a7695a"
|
||||
red:
|
||||
100: "#e8c9c9"
|
||||
500: "#b87977"
|
||||
900: "#a35754"
|
||||
rust:
|
||||
100: "#eacec4"
|
||||
500: "#c48a74"
|
||||
900: "#af6649"
|
||||
clay:
|
||||
100: "#ead4c2"
|
||||
500: "#c49b6f"
|
||||
900: "#b17f48"
|
||||
gold:
|
||||
100: "#e6dac1"
|
||||
500: "#bca66d"
|
||||
900: "#a88b48"
|
||||
moss:
|
||||
100: "#d0ddc7"
|
||||
500: "#919f71"
|
||||
900: "#69734a"
|
||||
pine:
|
||||
100: "#c7ddd2"
|
||||
500: "#7b9b85"
|
||||
900: "#516b57"
|
||||
cyan:
|
||||
100: "#c0dadd"
|
||||
500: "#6a9799"
|
||||
900: "#436668"
|
||||
blue:
|
||||
100: "#c2cfe0"
|
||||
500: "#6f88a3"
|
||||
900: "#5d7691"
|
||||
@ -82,22 +82,14 @@
|
||||
<!-- CSS Variables and Styles -->
|
||||
{{ partial "css-variables.html" . }}
|
||||
|
||||
{{/* 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" />
|
||||
{{ partial "css.html" . }}
|
||||
</head>
|
||||
<body class="">
|
||||
{{ partial "header.html" . }}
|
||||
<div class="px-4 lg:mx-auto">
|
||||
{{ block "main" . }}{{ end }}
|
||||
</div>
|
||||
{{ partial "footer.html" . }}
|
||||
<script src="/js/sigil.js"></script>
|
||||
<script src="/js/colorCalculator.js"></script>
|
||||
<script src="/js/wompum.js"></script>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
{{ define "main" }}
|
||||
<article class="single-default">
|
||||
<header class="mb-8 wompum-container wompum-container--wide-gap wompum-container--aspect-ratio">
|
||||
<header class="mb-8 wompum-container wompum-container--wide-gap aspect-3/1 md:aspect-4/1">
|
||||
<div class="wompum-grid" data-text="{{ .Params.wompum | default .Title }}" data-columns="7" data-rows="5"></div>
|
||||
</header>
|
||||
|
||||
<div class="prose lg:prose-xl p-4 mx-auto mt-4">
|
||||
<div class="prose lg:prose-xl p-4 mx-auto mt-8">
|
||||
<p class="font-bold text-6xl">{{ .Title }}</p>
|
||||
{{ .Content }}
|
||||
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
<p class="text-center font-iosevka capitalize">{{ .Data.Singular }}</p>
|
||||
<h1 class="text-4xl font-bold text-center capitalize">{{ .Title }}</h1>
|
||||
</header>
|
||||
<main class="container mx-auto">
|
||||
<ul class="flex flex-col gap-4 w-full mt-4">
|
||||
<main class="flex flex-wrap container mx-auto">
|
||||
<ul class="flex flex-col md:gap-4 gap-16 w-full mb-16 mt-4">
|
||||
{{ partial "article-list.html" (dict "Pages" .Data.Pages) }}
|
||||
</ul>
|
||||
|
||||
@ -13,18 +13,8 @@
|
||||
<div class="wompum-container wompum-container--no-gap">
|
||||
<div class="wompum-grid" data-text="Other {{ .Data.Plural }}" data-columns="4" data-rows="1"></div>
|
||||
</div>
|
||||
<div class="tag-cloud font-iosevka text-gray-600 text-center mt-4">
|
||||
{{ $terms := index .Site.Taxonomies .Data.Plural }}
|
||||
{{ range $term, $pages := $terms }}
|
||||
{{ if ne $term $.Title }}
|
||||
{{ with $.Site.GetPage (printf "/%s/%s" $.Data.Plural ($term | urlize)) }}
|
||||
<a href="{{ .RelPermalink }}"
|
||||
class="tag inline-block p-2 my-1 border border-gray-100 rounded-lg hover:bg-yellow-100 whitespace-nowrap">
|
||||
{{ .Title }}
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<div class="tag-cloud font-iosevka text-gray-600 text-center my-4 w-full flex flex-wrap gap-2 items-center justify-center">
|
||||
{{ partial "taxonomy-cloud" (dict "taxonomy" .Data.Singular "Site" .Site "page" .Page) }}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
@ -2,45 +2,27 @@
|
||||
|
||||
<article class="single-article">
|
||||
|
||||
<header class="mb-4 wompum-container wompum-container--wide-gap wompum-container--aspect-ratio">{{ partial "article-wompum.html" . }}</header>
|
||||
<header class="mb-4 wompum-container wompum-container--wide-gap aspect-2/1 md:aspect-3/1">{{ partial "article-wompum.html" . }}</header>
|
||||
|
||||
<div class="flex gap-4 mt-4">
|
||||
<aside class="lg:sticky lg:top-0 lg:h-screen lg:overflow-y-auto lg:w-1/3 p-4 font-iosevka">
|
||||
<div class="flex md:flex-row flex-col gap-4 mt-4">
|
||||
<aside class="md:sticky md:top-0 -mt-24 md:h-screen md:overflow-y-auto lg:w-1/3 p-4 font-iosevka">
|
||||
{{ if .Params.headshot }}
|
||||
<div class="narrator__container w-48 mb-2" data-text="{{ .Params.narrator }}">
|
||||
<div class="narrator__container w-48 mb-2 mx-auto md:mx-0 bg-white rounded-full border-4 border-white" data-text="{{ .Params.narrator }}">
|
||||
<div class="narrator__frame">
|
||||
<img src="{{ .Params.headshot }}" alt="Photo of {{ .Params.narrator }}" class="narrator__image" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
<p><strong>Date:</strong> <time datetime="{{ .Date.Format " 2006-01-02" }}">{{ .Date.Format "January 2, 2006" }}</time></p>
|
||||
<p><strong>Narrator:</strong> <a href="{{ "/narrator/" | relLangURL }}{{ .Params.narrator | urlize }}">{{ .Params.narrator }}</a></p>
|
||||
<p><strong>Facilitator:</strong> <a href="{{ "/facilitator/" | relLangURL }}{{ .Params.facilitator | urlize }}">{{ .Params.facilitator }}</a></p>
|
||||
<p><strong>Subject:</strong> {{ .Params.subject }}</p>
|
||||
{{ if .Params.location }}
|
||||
<p><strong>Location:</strong> {{ .Params.location }}</p>
|
||||
{{ end }}
|
||||
<p><strong>Topics:</strong> {{ partial "topics.html" . }}</p>
|
||||
{{ if .Params.links }}
|
||||
<div class="mt-4">
|
||||
<p><strong>Narrator Links:</strong></p>
|
||||
<ul class="list-disc pl-4 ml-4 mt-2">
|
||||
{{ range .Params.links }}
|
||||
<li class="mb-2">
|
||||
<a href="{{ .url }}" target="_blank" rel="noopener noreferrer">{{ .text }} <sup>↗</sup></a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class="md:block hidden">{{ partial "article-metadata.html" . }}</div>
|
||||
</aside>
|
||||
<div class="prose lg:prose-xl lg:w-2/3 p-4">
|
||||
<div class="prose lg:prose-xl lg:w-2/3 p-4 mx-auto md:mx-0">
|
||||
<p class="font-bold text-4xl article-title article-title--single">{{ partial "article-title" . }}</p>
|
||||
{{ .Content }}
|
||||
</div>
|
||||
<aside class="md:hidden block p-8 mt-8 border-t border-gray-200">{{ partial "article-metadata.html" . }}</aside>
|
||||
</div>
|
||||
</article>
|
||||
<aside class="max-w-screen-xl mx-auto px-4 lg:px-0">
|
||||
<aside class="max-w-screen-xl mx-auto">
|
||||
{{ partial "related-articles" (dict "page" . "topics" .Params.topics "limit" 3) }}
|
||||
</aside>
|
||||
<div class="text-center my-12"><a href="/">Go Home</a></div>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
{{ define "main" }}
|
||||
<main class="flex gap-4 lg:gap-16 justify-around mt-8 max-w-screen-xl mx-auto px-4 lg:px-0">
|
||||
<ul class="flex flex-col gap-4 w-full">
|
||||
<main class="flex flex-col md:flex-row gap-4 md:gap-8 lg:gap-16 justify-around mt-8 max-w-screen-xl mx-auto">
|
||||
<ul class="flex flex-col md:gap-4 gap-16 w-full mb-16">
|
||||
{{ partial "article-list.html" (dict "Pages" (where .Site.RegularPages "Section" "articles")) }}
|
||||
</ul>
|
||||
|
||||
<aside class="max-w-prose w-1/4 flex flex-col gap-8 mb-8">
|
||||
<aside class="max-w-prose md:w-1/4 flex flex-col gap-8 mb-8">
|
||||
|
||||
<section>
|
||||
<h2 class="text-2xl font-bold mb-2">About</h2>
|
||||
@ -19,14 +19,8 @@
|
||||
<div class="wompum-container wompum-container--no-gap">
|
||||
<div class="wompum-grid" data-text="Topics" data-columns="4" data-rows="1"></div>
|
||||
</div>
|
||||
<div class="tag-cloud font-iosevka text-gray-600 text-sm mt-4">
|
||||
{{ $topics := .Site.Taxonomies.topics }}
|
||||
{{ range $tag, $pages := $topics }}
|
||||
<a href="{{ "/topics/" | relLangURL }}{{ $tag | urlize }}" style="font-size: {{ add 1 (div (len $pages) 2) }}em;" data-count="{{ len $pages}}"
|
||||
class="tag inline-block p-2 my-1 border border-gray-100 rounded-lg hover:bg-yellow-100 whitespace-nowrap">
|
||||
{{ $tag }}
|
||||
</a>
|
||||
{{ end }}
|
||||
<div class="tag-cloud font-iosevka text-gray-600 my-4 flex flex-wrap gap-2">
|
||||
{{ partial "taxonomy-cloud" (dict "taxonomy" "topics" "Site" .Site) }}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
@ -4,15 +4,17 @@
|
||||
{{- if reflect.IsMap . -}}
|
||||
{{- $page = .page -}}
|
||||
{{- end -}}
|
||||
<li class="flex gap-4 items-center">
|
||||
<a class="flex-1 min-w-0 wompum-container wompum-container--aspect-ratio h-full block" href="{{ $page.RelPermalink }}">{{ partial "article-wompum.html" $page }}</a>
|
||||
<time class="text-gray-800 font-iosevka w-12 flex-shrink-0" datetime="{{ $page.Date.Format "2006-01-02" }}">
|
||||
<p>{{ $page.Date.Format "Jan" }}</p>
|
||||
<p>{{ $page.Date.Format "02" }}</p>
|
||||
<p>{{ $page.Date.Format "2006" }}</p>
|
||||
</time>
|
||||
<div class="w-3/5 flex-shrink-0 py-8">
|
||||
<a class="article-title article-title--list text-2xl font-bold hover:text-green-900 underline" href="{{ $page.RelPermalink }}">{{ partial "article-title" $page }}</a>
|
||||
<li class="group flex md:flex-row flex-col md:gap-4 gap-2 md:items-center">
|
||||
<div class="flex-1 min-w-0 flex gap-2 items-center h-full">
|
||||
<a class="wompum-container h-full aspect-7/2 md:aspect-auto" href="{{ $page.RelPermalink }}">{{ partial "article-wompum.html" $page }}</a>
|
||||
<time class="text-gray-800 font-iosevka w-12 flex-shrink-0" datetime="{{ $page.Date.Format "2006-01-02" }}">
|
||||
<p>{{ $page.Date.Format "Jan" }}</p>
|
||||
<p>{{ $page.Date.Format "02" }}</p>
|
||||
<p>{{ $page.Date.Format "2006" }}</p>
|
||||
</time>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 md:w-3/5 flex-shrink-0 md:py-8">
|
||||
<a class="article-title article-title--list text-2xl font-bold text-gray-900 group-hover:text-pine-900 underline underline-offset-5 decoration-sand-500 hover:decoration-pine-900" href="{{ $page.RelPermalink }}">{{ partial "article-title" $page }}</a>
|
||||
{{ if $page.Params.location }}
|
||||
<p class="text-gray-800 italic">{{ $page.Params.location }}</p>
|
||||
{{ end }}
|
||||
|
||||
20
layouts/partials/article-metadata.html
Normal file
20
layouts/partials/article-metadata.html
Normal file
@ -0,0 +1,20 @@
|
||||
<p><strong>Date:</strong> <time datetime="{{ .Date.Format " 2006-01-02" }}">{{ .Date.Format "January 2, 2006" }}</time></p>
|
||||
<p><strong>Narrator:</strong> <a href="{{ "/narrator/" | relLangURL }}{{ .Params.narrator | urlize }}">{{ .Params.narrator }}</a></p>
|
||||
<p><strong>Facilitator:</strong> <a href="{{ "/facilitator/" | relLangURL }}{{ .Params.facilitator | urlize }}">{{ .Params.facilitator }}</a></p>
|
||||
<p><strong>Subject:</strong> {{ .Params.subject }}</p>
|
||||
{{ if .Params.location }}
|
||||
<p><strong>Location:</strong> {{ .Params.location }}</p>
|
||||
{{ end }}
|
||||
<p><strong>Topics:</strong> {{ partial "topics.html" . }}</p>
|
||||
{{ if .Params.links }}
|
||||
<div class="mt-4">
|
||||
<p><strong>Narrator Links:</strong></p>
|
||||
<ul class="list-disc pl-4 ml-4 mt-2">
|
||||
{{ range .Params.links }}
|
||||
<li class="mb-2">
|
||||
<a href="{{ .url }}" target="_blank" rel="noopener noreferrer">{{ .text }} <sup>↗</sup></a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
{{ end }}
|
||||
23
layouts/partials/css.html
Normal file
23
layouts/partials/css.html
Normal file
@ -0,0 +1,23 @@
|
||||
{{ with (templates.Defer (dict "key" "global")) }}
|
||||
{{ $t := debug.Timer "tailwindcss" }}
|
||||
{{ with resources.Get "css/styles.css" }}
|
||||
{{ $opts := dict
|
||||
"inlineImports" true
|
||||
"optimize" (not hugo.IsDevelopment)
|
||||
}}
|
||||
{{ with . | css.TailwindCSS $opts }}
|
||||
{{ if hugo.IsDevelopment }}
|
||||
<link rel="stylesheet" href="{{ .RelPermalink }}" />
|
||||
{{ else }}
|
||||
{{ with . | minify | fingerprint }}
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="{{ .RelPermalink }}"
|
||||
integrity="{{ .Data.Integrity }}"
|
||||
crossorigin="anonymous" />
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ $t.Stop }}
|
||||
{{ end }}
|
||||
24
layouts/partials/footer.html
Normal file
24
layouts/partials/footer.html
Normal file
@ -0,0 +1,24 @@
|
||||
<footer class="bg-sand-500 text-amber-900 mt-16">
|
||||
<div class="wompum-container wompum-container--no-gap h-1">
|
||||
<div class="wompum-grid" data-text="{{ .Site.Title }}" data-columns="7" data-rows="1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-8 pt-16 flex justify-between items-center">
|
||||
<section>
|
||||
<h1 class="text-2xl font-bold">
|
||||
<a href="/">{{ .Site.Title }}</a>
|
||||
</h1>
|
||||
<p class="text-lg">{{ .Site.Params.footer | markdownify }}</p>
|
||||
</section>
|
||||
<nav class="font-iosevka">
|
||||
<ul class="flex-col items-end gap-4">
|
||||
<li>
|
||||
<a href="/">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/about">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</footer>
|
||||
@ -7,10 +7,10 @@
|
||||
<nav class="font-iosevka">
|
||||
<ul class="flex gap-4">
|
||||
<li>
|
||||
<a href="/" class="hover:text-blue-700">Home</a>
|
||||
<a href="/">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/about" class="hover:text-blue-700">About</a>
|
||||
<a href="/about">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
{{- end -}}
|
||||
|
||||
{{- if gt (len $finalArticles) 0 -}}
|
||||
<div class="related-articles flex flex-col gap-4">
|
||||
<div class="related-articles flex flex-wrap gap-4">
|
||||
<h2 class="title text-3xl font-bold">Related Articles</h2>
|
||||
<div class="wompum-container wompum-container--no-gap">
|
||||
<div class="wompum-grid" data-text="Related Articles" data-columns="8" data-rows="1"></div>
|
||||
|
||||
16
layouts/partials/taxonomy-cloud.html
Normal file
16
layouts/partials/taxonomy-cloud.html
Normal file
@ -0,0 +1,16 @@
|
||||
{{ $taxonomy := .taxonomy }}
|
||||
{{ range $term, $pages := index .Site.Taxonomies $taxonomy }}
|
||||
{{ $termPage := $.Site.GetPage (printf "/%s/%s" $taxonomy $term) }}
|
||||
<a href="{{ $termPage.RelPermalink }}"
|
||||
data-size="{{ len $pages }}"
|
||||
class="tag font-bold
|
||||
{{ if eq $.page.RelPermalink $termPage.RelPermalink }}hidden{{ else }}inline-block{{ end }}
|
||||
data-[size=1]:text-sm data-[size=1]:font-normal data-[size=1]:opacity-90
|
||||
data-[size=2]:text-base
|
||||
data-[size=3]:text-xl
|
||||
data-[size=4]:text-3xl
|
||||
data-[size=5]:text-4xl"
|
||||
data-count="{{ len $pages}}">
|
||||
{{ $term }}
|
||||
</a>
|
||||
{{ end }}
|
||||
@ -1,8 +1,8 @@
|
||||
{{- if .Params.topics }}
|
||||
<div class="flex flex-wrap gap-2 my-2 text-xs font-iosevka">
|
||||
<div class="tag-cloud flex flex-wrap gap-2 my-2 text-xs font-iosevka">
|
||||
{{- range .Params.topics }}
|
||||
<a href="{{ "topics/" | relURL }}{{ . | urlize }}"
|
||||
class="px-3 py-1 border border-green-100 hover:bg-green-300 text-green-900 rounded no-underline">
|
||||
class="tag no-underline">
|
||||
{{ . }}
|
||||
</a>
|
||||
{{- end }}
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<div class="mb-8 font-iosevka">
|
||||
<label class="block mb-2">Enter text to generate a grid:</label>
|
||||
<input type="text"
|
||||
class="w-full p-2 border rounded"
|
||||
class="w-full p-2 border rounded bg-sand-100"
|
||||
placeholder="Type something..."
|
||||
value="{{ .Site.Title}}"
|
||||
oninput="updateWompumDemoGrid(this.value)">
|
||||
|
||||
2696
package-lock.json
generated
2696
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
24
package.json
24
package.json
@ -1,26 +1,8 @@
|
||||
{
|
||||
"comments": {
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/typography": "hugo-starter-tailwind-basic",
|
||||
"autoprefixer": "hugo-starter-tailwind-basic",
|
||||
"postcss": "hugo-starter-tailwind-basic",
|
||||
"postcss-cli": "hugo-starter-tailwind-basic",
|
||||
"postcss-purgecss": "hugo-starter-tailwind-basic",
|
||||
"tailwindcss": "hugo-starter-tailwind-basic"
|
||||
}
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/typography": "^0.4.1",
|
||||
"autoprefixer": "^10.3.1",
|
||||
"postcss": "^8.3.6",
|
||||
"postcss-cli": "^8.3.1",
|
||||
"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"
|
||||
"@tailwindcss/cli": "^4.0.0",
|
||||
"tailwindcss": "^4.0.0",
|
||||
"@tailwindcss/typography": "^0.5.16"
|
||||
},
|
||||
"name": "protocol-oral-history-project",
|
||||
"version": "0.1.0"
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
@ -14,7 +14,7 @@ class ColorCalculator {
|
||||
// Calculate shade based on influences
|
||||
const shade = this.calculateShade(influences);
|
||||
|
||||
return `var(--${colorFamily}-${shade})`;
|
||||
return `${colorFamily}-${shade}`;
|
||||
}
|
||||
|
||||
// Calculate shade based on surrounding influences
|
||||
|
||||
@ -87,7 +87,7 @@ class WompumGrid {
|
||||
|
||||
// Calculate and apply color
|
||||
const color = this.colorCalculator.getColor(sigilDigit, influences);
|
||||
cell.style.backgroundColor = color;
|
||||
cell.classList.add(`bg-${color}`);
|
||||
});
|
||||
}
|
||||
|
||||
@ -192,7 +192,7 @@ class RadialWompumGrid {
|
||||
const sigilDigit = this.getSigilDigit(index);
|
||||
// Pass empty array for influences since we don't need adjacent segments
|
||||
const color = this.colorCalculator.getColor(sigilDigit, []);
|
||||
path.setAttribute('fill', color);
|
||||
path.setAttribute('fill', `var(--color-${color})`);
|
||||
|
||||
return path;
|
||||
}
|
||||
|
||||
@ -1,18 +1,8 @@
|
||||
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'),
|
||||
],
|
||||
};
|
||||
/*
|
||||
This file is present to satisy a requiremenet of the Tailwind CSS IntelliSense
|
||||
extension for Visual Studio Code.
|
||||
|
||||
https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
|
||||
|
||||
The rest of this file is intentionally empty.
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user