minor styling updates

This commit is contained in:
Drew
2025-04-25 11:55:48 -06:00
parent b33c8f409f
commit 5290772bce
6 changed files with 34 additions and 31 deletions

View File

@ -3,11 +3,12 @@
<p class="text-center font-iosevka capitalize">{{ .Data.Singular }}</p>
<h1 class="text-4xl font-bold text-center capitalize">{{ .Title }}</h1>
</header>
<main class="flex flex-wrap container mx-auto">
<main class="flex flex-wrap container mx-auto justify-center">
<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>
{{ if gt (len (index .Site.Taxonomies .Data.Singular)) 1 }}
<section>
<h2 class="text-4xl mt-8 mb-4 font-bold text-center">Other {{ .Data.Plural }}</h2>
<div class="wompum-container wompum-container--no-gap">
@ -17,5 +18,6 @@
{{ partial "taxonomy-cloud" (dict "taxonomy" .Data.Singular "Site" .Site "page" .Page) }}
</div>
</section>
{{ end }}
</main>
{{ end }}

View File

@ -5,7 +5,9 @@
<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 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">
<aside class="md:sticky md:top-0 md:h-screen md:overflow-y-auto lg:w-1/3 p-4 font-iosevka
{{ if .Params.headshot }}-mt-24{{ end }}
">
{{ if .Params.headshot }}
<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">

View File

@ -3,14 +3,14 @@
<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">
<div class="p-8 pt-16 flex justify-between md:items-center gap-8">
<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">
<nav class="font-iosevka mt-2">
<ul class="flex-col items-end gap-4">
<li>
<a href="/">Home</a>

View File

@ -3,10 +3,10 @@
<p>We use a protocol to generate the colorful wompum style grid for articles and other places around the site, learn how it works here.</p>
<div class="mb-8 font-iosevka">
<div class="mb-8">
<label class="block mb-2">Enter text to generate a grid:</label>
<input type="text"
class="w-full p-2 border rounded bg-sand-100"
class="w-full p-2 border rounded font-iosevka bg-sand-100"
placeholder="Type something..."
value="{{ .Site.Title}}"
oninput="updateWompumDemoGrid(this.value)">
@ -14,35 +14,35 @@
<p>First we generate a sigil by removing spaces, turning to lowercase, removing anything that isn't a consonant, removing repeat letters, find the unicode character number, and finally get the digital root of those numbers. From there the sigil digits are used to choose a color from our pallet.</p>
<div class="transformation-steps mb-8 font-iosevka">
<div>
<span class="font-bold">Original Text:</span>
<ol class="transformation-steps mb-8 font-iosevka pl-0 list-['↪']">
<li>
<span class="font-bold md:inline block">Original Text:</span>
<span class="text-input-display"></span>
</div>
<div>
<span class="font-bold">Lowercase:</span>
</li>
<li>
<span class="font-bold md:inline block">Lowercase:</span>
<span class="text-cleaned-display"></span>
</div>
<div>
<span class="font-bold">Consonants only:</span>
</li>
<li>
<span class="font-bold md:inline block">Consonants only:</span>
<span class="text-consonants-display"></span>
</div>
<div>
<span class="font-bold">Unique consonants:</span>
</li>
<li>
<span class="font-bold md:inline block">Unique consonants:</span>
<span class="text-unique-display"></span>
</div>
<div>
<span class="font-bold">Letters to numbers:</span>
</li>
<li>
<span class="font-bold md:inline block">Letters to numbers:</span>
<span class="text-sigil-numbers"></span>
</div>
<div>
<span class="font-bold">Digital root:</span>
</li>
<li>
<span class="font-bold md:inline block">Digital root:</span>
<span class="text-sigil-root"></span>
</div>
<div>
<span class="font-bold">The final grid:</span>
</div>
</div>
</li>
<li>
<span class="font-bold md:inline block">The final grid:</span>
</li>
</ol>
<div class="wompum-container wompum-container--demo h-48 mb-8">
<div class="wompum-grid h-full"