dhorn/Protocol-oral-history-project
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

applies wompum color to tailwind class system

Browse Source
This commit is contained in:
Drew
2025-04-22 18:08:19 -06:00
parent 54533f62e9
commit 8e5ccb77c6
13 changed files with 107 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
layouts/_default/taxonomy.html
View File

@ -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,7 +13,7 @@
<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 my-4">
<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>

4
layouts/index.html
View File

@ -1,6 +1,6 @@
{{ define "main" }}
<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 gap-4 w-full">
<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>
@ -19,7 +19,7 @@
<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 my-4">
<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>

18
layouts/partials/article-list.html
View File

@ -4,15 +4,17 @@
{{- if reflect.IsMap . -}}
{{- $page = .page -}}
{{- end -}}
<li class="flex md:flex-row flex-col md:gap-4 gap-2 md:items-center">
<a class="flex-1 min-w-0 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 flex gap-4 md:block" 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>
<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 hover:text-green-900 underline" href="{{ $page.RelPermalink }}">{{ partial "article-title" $page }}</a>
<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 }}

2
layouts/partials/related-articles.html
View File

@ -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>

6
layouts/partials/taxonomy-cloud.html
View File

@ -3,9 +3,9 @@
{{ $termPage := $.Site.GetPage (printf "/%s/%s" $taxonomy $term) }}
<a href="{{ $termPage.RelPermalink }}"
data-size="{{ len $pages }}"
class="tag {{ if eq $.page.RelPermalink $termPage.RelPermalink }}hidden{{ else }}inline-block{{ end }}
p-2 my-1 border border-gray-100 rounded-lg whitespace-nowrap hover:text-gray-900 hover:opacity-100
data-[size=1]:text-sm data-[size=1]:font-normal data-[size=1]:opacity-80
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

4
layouts/partials/topics.html
View File

@ -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 }}

2
layouts/partials/wompum-demo.html
View File

@ -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)">