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

adds basic layout

Browse Source
This commit is contained in:
Drew 2025-03-11 14:59:42 -06:00
parent 2139901402
commit e288bc703c
6 changed files with 105 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/scss/components/_wompum.scss
View File

@ -11,6 +11,10 @@
width: 100%; width: 100%;
} }
.single-article &-grid {
gap: 1rem;
}
&-cell { &-cell {
width: 100%; width: 100%;
min-height: 30px; min-height: 30px;

2
assets/scss/main.scss
View File

@ -14,6 +14,4 @@
body { body {
font-family: $font-garamond; font-family: $font-garamond;
font-size: 16px;
line-height: 1.5;
} }

2
layouts/_default/baseof.html
View File

@ -21,7 +21,7 @@
</head> </head>
<body class=""> <body class="">
{{ partial "header.html" . }} {{ partial "header.html" . }}
<div class="container px-4 lg:mx-auto my-10"> <div class="px-4 lg:mx-auto">
{{ block "main" . }}{{ end }} {{ block "main" . }}{{ end }}
</div> </div>
</body> </body>

29
layouts/_default/single.html
View File

@ -1,18 +1,21 @@
{{ define "main" }} {{ define "main" }}
<article class="flex flex-col lg:flex-row-reverse"> <article class="single-article">
<header class="lg:sticky lg:top-0 lg:h-screen lg:overflow-y-auto lg:w-1/3 p-4 font-iosevka">
<h1 class="font-bold">{{ .Title }}</h1> <header class="mb-4">{{ partial "article-wompum.html" . }}</header>
<p><strong>Date:</strong> <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "January 2, 2006" }}</time></p>
<p><strong>Narrator:</strong> {{ .Params.narrator }}</p> <div class="flex gap-4">
<p><strong>Facilitator:</strong> {{ .Params.facilitator }}</p> <aside class="lg:sticky lg:top-0 lg:h-screen lg:overflow-y-auto lg:w-1/3 p-4 font-iosevka">
<p><strong>Subject:</strong> {{ .Params.subject }}</p> <p class="text-3xl font-light mb-4"><time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "January 2, 2006" }}</time></p>
<p><strong>Tags:</strong> {{ partial "tags.html" . }}</p> <p><strong>Narrator:</strong> {{ .Params.narrator }}</p>
</header> <p><strong>Facilitator:</strong> {{ .Params.facilitator }}</p>
<div class="prose lg:prose-xl lg:w-2/3 p-4"> <p><strong>Subject:</strong> {{ .Params.subject }}</p>
{{ partial "article-wompum.html" . }} <p><strong>Tags:</strong> {{ partial "tags.html" . }}</p>
<p class="font-bold text-4xl">{{ .Title }}</p> </aside>
{{ .Content }} <div class="prose lg:prose-xl lg:w-2/3 p-4">
<p class="font-bold text-4xl">{{ .Title }}</p>
{{ .Content }}
</div>
</div> </div>
</article> </article>
{{ end }} {{ end }}

93
layouts/index.html
View File

@ -1,22 +1,87 @@
{{ define "main" }} {{ define "main" }}
<main> <main class="flex gap-4 lg:gap-16 justify-around mt-8">
<h1 class="text-4xl font-bold">Protocol Oral History Project</h1> <ul class="flex flex-col gap-4 w-full">
<ul class="flex flex-col gap-4 my-4">
{{ range where .Site.RegularPages "Section" "oral-histories" }} {{ range where .Site.RegularPages "Section" "oral-histories" }}
<li class="border-l border-gray-300 pl-4"> <li class="flex gap-4 items-center">
{{ partial "article-wompum.html" . }}
<p class="text-xs text-gray-800"><time datetime="{{ .Date.Format " 2006-01-02" }}">{{ .Date.Format "January 2, 2006" }}</time></p> <a class="flex-grow" href="{{ .RelPermalink }}">{{ partial "article-wompum.html" . }}</a>
<a class="font-bold hover:text-green-900 underline" href="{{ .RelPermalink }}">{{ .Title }}</a>
<p class="text-sm">{{ .Params.summary }}</p> <time class="text-gray-800 font-iosevka" datetime="{{ .Date.Format "2006-01-02" }}">
{{ partial "tags.html" .}} <p>{{ .Date.Format "Jan" }}</p>
<p>{{ .Date.Format "02" }}</p>
<p>{{ .Date.Format "2006" }}</p>
</time>
<div class="flex-shrink-0 max-w-max">
<a class="text-2xl font-bold hover:text-green-900 underline" href="{{ .RelPermalink }}">{{ .Title }}</a>
<p class="max-w-prose">{{ .Params.summary }}</p>
{{ partial "tags.html" .}}
</div>
</li> </li>
{{ end }} {{ end }}
</ul> </ul>
<article class="prose lg:prose-xl"> <aside class="max-w-prose w-1/4 flex flex-col gap-8 mb-8">
<h2 class="text-4xl">{{ .Title }}</h2>
{{ .Content }} <section>
</article> <h2 class="text-4xl mb-4 font-iosevka">About</h2>
{{ .Content }}
</section>
<section>
<h2 class="text-4xl mb-4 font-iosevka">Narrators</h2>
<div class="tag-cloud font-iosevka">
{{ $narrators := slice }}
{{ range .Site.RegularPages }}
{{ with .Params.narrator }}
{{ $narrators = $narrators | append . }}
{{ end }}
{{ end }}
{{ $narrators = $narrators | uniq | sort }}
{{ range $narrator := $narrators }}
<a href="{{ "/narrators/" | relLangURL }}{{ $narrator | urlize }}"
class="tag inline-block p-2 my-1 border border-gray-100 rounded-lg hover:bg-yellow-100 whitespace-nowrap"
style="font-size: 1rem;">
{{ $narrator }}
</a>
{{ end }}
</div>
</section>
<section>
<h2 class="text-4xl mb-4 font-iosevka">Facilitators</h2>
<div class="tag-cloud font-iosevka">
{{ $facilitators := slice }}
{{ range .Site.RegularPages }}
{{ with .Params.facilitator }}
{{ $facilitators = $facilitators | append . }}
{{ end }}
{{ end }}
{{ $facilitators = $facilitators | uniq | sort }}
{{ range $facilitator := $facilitators }}
<a href="{{ "/facilitators/" | relLangURL }}{{ $facilitator | urlize }}"
class="tag inline-block p-2 my-1 border border-gray-100 rounded-lg hover:bg-yellow-100 whitespace-nowrap"
style="font-size: 1rem;">
{{ $facilitator }}
</a>
{{ end }}
</div>
</section>
<section>
<h2 class="text-4xl mb-4 font-iosevka">Tags</h2>
<div class="tag-cloud font-iosevka">
{{ $tags := .Site.Taxonomies.tags }}
{{ range $tag, $pages := $tags }}
<a href="{{ "/tags/" | relLangURL }}{{ $tag | urlize }}" style="font-size: {{ add 1 (div (len $pages) 2) }}em;"
class="tag text-sm inline-block p-2 my-1 border border-gray-100 rounded-lg hover:bg-yellow-100 whitespace-nowrap">
{{ $tag }}
</a>
{{ end }}
</div>
</section>
</aside>
</main> </main>
{{ end }} {{ end }}

7
layouts/partials/header.html
View File

@ -1,6 +1,9 @@
<!-- basic header partial in hugo with just home and about --> <!-- basic header partial in hugo with just home and about -->
<header class="p-4"> <header class="p-4 flex justify-between items-center border-b border-gray-300 mb-4">
<nav> <h1 class="text-2xl font-bold">
<a href="/">{{ .Site.Title }}</a>
</h1>
<nav class="font-iosevka">
<ul class="flex gap-4"> <ul class="flex gap-4">
<li> <li>
<a href="/" class="hover:text-blue-700">Home</a> <a href="/" class="hover:text-blue-700">Home</a>