refactor styles and structure for wompum components; improve grid spacing and layout

This commit is contained in:
Drew
2025-04-07 16:33:47 -06:00
parent 84cf190a9c
commit 80e9b781e5
8 changed files with 37 additions and 60 deletions

View File

@ -1,8 +1,10 @@
{{ define "main" }}
<article class="single-default">
<header class="mb-4">{{ partial "article-wompum.html" . }}</header>
<header class="mb-8 wompum-container wompum-container--wide-gap">
<div class="wompum-grid h-96" data-text="{{ .Params.wompum | default .Title }}" data-columns="7" data-rows="5"></div>
</header>
<div class="prose lg:prose-xl p-4 mx-auto">
<div class="prose lg:prose-xl p-4 mx-auto mt-4">
<p class="font-bold text-6xl">{{ .Title }}</p>
{{ .Content }}

View File

@ -2,9 +2,9 @@
<article class="single-article">
<header class="mb-4">{{ partial "article-wompum.html" . }}</header>
<header class="mb-4 wompum-container wompum-container--wide-gap">{{ partial "article-wompum.html" . }}</header>
<div class="flex gap-4">
<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">
{{ if .Params.headshot }}
<div class="narrator__container w-48 mb-2" data-text="{{ .Params.narrator }}">

View File

@ -5,7 +5,7 @@
{{- $page = .page -}}
{{- end -}}
<li class="flex gap-4 items-center">
<a class="flex-1 min-w-0" href="{{ $page.RelPermalink }}">{{ partial "article-wompum.html" $page }}</a>
<a class="flex-1 min-w-0 wompum-container" 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>

View File

@ -1,7 +1,5 @@
<div class="wompum-container">
<div class="wompum-article-grid"
data-metadata="{{ dict "narrator" .Params.narrator "subject" .Params.subject "facilitator" .Params.facilitator | jsonify }}"
data-columns="7"
data-rows="5">
</div>
<div class="wompum-article-grid"
data-metadata="{{ dict "narrator" .Params.narrator "subject" .Params.subject "facilitator" .Params.facilitator | jsonify }}"
data-columns="7"
data-rows="5">
</div>

View File

@ -15,8 +15,8 @@
</ul>
</nav>
</div>
<div class="wompum-container">
<div class="wompum-grid h-2"
<div class="wompum-container wompum-container--wide-gap px-4">
<div class="wompum-grid h-1"
data-text="{{ .Site.Title }}"
data-columns="7"
data-rows="1">