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

responsive design pass

Browse Source
This commit is contained in:
Drew 2025-04-22 13:47:21 -06:00
parent fbc26ed89c
commit 6be0bd3d7b
6 changed files with 36 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/css/components/wompum.css
View File

@ -11,10 +11,6 @@
grid-template-rows: repeat(var(--grid-rows, 5), 1fr);
}
.wompum-container--aspect-ratio {
aspect-ratio: 3/1;
}
.wompum-container--wide-gap .wompum-grid,
.wompum-container--wide-gap .wompum-article-grid {
gap: 1rem;

4
layouts/_default/single.html
View File

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

34
layouts/articles/single.html
View File

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

4
layouts/index.html
View File

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

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

@ -4,14 +4,14 @@
{{- 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" }}">
<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>
<div class="w-3/5 flex-shrink-0 py-8">
<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>
{{ if $page.Params.location }}
<p class="text-gray-800 italic">{{ $page.Params.location }}</p>

20
layouts/partials/article-metadata.html Normal file
View 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 }}