11 Commits

Author SHA1 Message Date
14475c13f4 Remove full-width-hr shortcode
Not sure what I planned to use this for. It has since become outdated
and out of sync with the new margins I set on body recently in
4e753395ba and
6b729c6acf.
2025-08-08 14:10:20 -05:00
6b729c6acf Adjust margins on related-posts to match rest of body
Didn't notice this when writing 4e753395ba
2025-08-08 14:01:37 -05:00
f751c4b104 Remove unused .full-width-page-list rule 2025-08-08 13:51:50 -05:00
de20387b5a Fix useless scrollbar on related posts
When all related posts fit on the same screen, there was a useless
scrollbar. I never noticed this because Firefox incorrectly hides the
scrollbar automatically. The issue is visible on Chromium.
2025-08-08 13:45:30 -05:00
84004d3ac0 Change pagefind to only index the content of articles
Fixes #97
2025-08-08 01:42:25 -05:00
52a6440011 Remove heading-link class
It was used to make both website title and page titles in summaries not
have link color. Instead, just directly configure those elements.
2025-08-08 01:41:38 -05:00
322928ed7a Reorganize CSS to have better sections
- Separate baseof.html elements from styling code for general elements
  used everywhere
- Rename some of the fold titles
- Include related posts section styling in the content styling section
2025-08-08 01:28:28 -05:00
4e753395ba Align top bar with main horizontal margin
- Use a variable to make sure that top bar and body margins stay equal
- Lower side margins to 16px so that the gap in navbar-items fits right
2025-08-08 01:02:04 -05:00
5d335647d0 Remove description-or-summary partial and just use .Summary
I think this may have changed in Hugo's history, but now description and
summary are considered different things. The description is what goes in
metadata (and what search engines see), while the summary is the blurb
about the article that should be displayed when rendering a summary
(what I should've been using always here).
2025-08-07 02:17:24 -05:00
22fff1a9c5 Replace _internal subdirectory in partials
I originally put it there to mimic the old pattern before Hugo 0.148,
but it probably just makes things confusing.

Fixes #90
2025-08-07 01:05:06 -05:00
b79c956c07 Remove make figure images centered and remove border
Also use a generic .figure-media class instead of manually specifying
both img and video in the CSS

Fixes #36 and a draft issue
2025-08-05 21:49:28 -05:00
14 changed files with 115 additions and 107 deletions

View File

@@ -158,61 +158,38 @@ pre > code {
/* }}} */
/* Basic elements {{{ */
/* Common distances/sizes {{{ */
html {
scroll-behavior: smooth;
:root {
--page-margin: 16px;
}
@media screen and (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
/* }}} */
body {
background-color: var(--background-0);
color: var(--text-0);
overflow-wrap: break-word;
margin: 0;
}
.main-container {
margin: 20px auto;
padding: 0 20px;
max-width: 760px; /* 720px + 20px for left & right padding */
}
footer {
margin: 20px 0;
text-align: center;
font-size: smaller;
}
footer p {
margin: 0;
}
/* Common elements {{{ */
img,
video {
max-width: 100%;
}
.post-media > figure img,
.post-media > figure video {
figure > .figure-media {
padding: 5px;
border: 7px solid var(--figure-border);
}
figure img,
figure video {
padding: 5px;
figure > .figure-media.border {
border: 2px solid var(--figure-border);
}
.post-media > figure > .figure-media {
border: 7px solid var(--figure-border);
}
figure {
margin: auto;
display: inline-block;
display: block;
text-align: center;
margin: 0;
}
figcaption {
@@ -240,14 +217,6 @@ hr {
border: 1px solid var(--background-3);
}
@media (min-width: 720px) {
.full-width-hr {
/* see also: the related-posts section too */
margin-left: calc(-100vw / 2 + 760px / 2);
margin-right: calc(-100vw / 2 + 760px / 2);
}
}
table.simple {
border-collapse: collapse;
border: 2px solid var(--text-1);
@@ -307,12 +276,40 @@ table.simple tbody tr:nth-child(even) {
/* }}} */
/* Heading formatting (article section titles) {{{ */
/* Baseof formatting {{{ */
/* this is also used i.e. in page-title */
.heading-link {
color: inherit;
font-weight: bold;
html {
scroll-behavior: smooth;
}
@media screen and (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
body {
background-color: var(--background-0);
color: var(--text-0);
overflow-wrap: break-word;
margin: 0;
}
.main-container {
margin: var(--page-margin) auto;
/* use padding because otherwise there's no way to have margin be both auto, and a minimum value */
padding: 0 var(--page-margin);
max-width: calc(720px + 2 * var(--page-margin)); /* padding is included in the element's width */
}
footer {
margin: var(--page-margin) 0;
text-align: center;
font-size: smaller;
}
footer p {
margin: 0;
}
/* }}} */
@@ -325,23 +322,30 @@ table.simple tbody tr:nth-child(even) {
flex-wrap: wrap;
justify-content: space-between;
background-color: var(--background-1);
/* padding can't be here because then the first navbar element will be shifted too far over,
* or it will need its hover background to be chopped off on the left */
}
.header {
flex-grow: 1;
margin: 8px 16px;
margin: 8px var(--page-margin);
font-size: 1.25em;
display: flex;
align-items: center;
}
.header a {
color: inherit;
font-weight: bold;
}
.navbar {
display: flex;
flex-wrap: wrap;
}
.navbar-item {
padding: 12px 16px;
padding: 12px var(--page-margin);
white-space: nowrap;
}
@@ -375,7 +379,7 @@ table.simple tbody tr:nth-child(even) {
/* Breadcrumb navigation {{{ */
.breadcrumb {
margin: 20px 0;
margin: var(--page-margin) 0;
}
.breadcrumb ul {
@@ -483,6 +487,10 @@ table.simple tbody tr:nth-child(even) {
margin-bottom: 10px;
}
.page-title a {
color: inherit;
}
.page-title h1 {
margin: 0;
}
@@ -633,7 +641,7 @@ table.simple tbody tr:nth-child(even) {
/* }}} */
/* Content (single) formatting {{{ */
/* Components exclusive to content/single pages {{{ */
.series-box {
background-color: var(--background-1);
@@ -873,19 +881,16 @@ aside.quote {
/* }}} */
/* }}} */
/* Related posts section {{{ */
.full-width-page-list {
/* make left/right 0 margin so it takes up full width */
margin: 25px 0;
}
/* set the margins on the contents instead of the parent .related-posts
* so that the posts in the list clip off the edge of the screen,
* which makes a more obvious indicator that it's scrollable
*/
.related-posts > hr,
.related-posts > h1 {
margin-left: 20px;
margin-right: 20px;
margin: var(--page-margin);
}
.related-posts .page {
@@ -895,21 +900,24 @@ aside.quote {
}
.related-posts .page:first-child {
margin-left: 20px;
margin-left: var(--page-margin);
}
.related-posts .page:last-child {
margin-right: 20px;
margin-right: var(--page-margin);
}
.related-posts .page-list {
display: flex;
flex-direction: row;
gap: 20px;
overflow-x: scroll;
overflow-x: auto;
margin-bottom: var(--page-margin);
}
/* }}} */
/* }}} */
/* @media specializations {{{ */

View File

@@ -1,7 +0,0 @@
{{ with .Description }}
<p>{{ . | markdownify }}</p>
{{ else }}
{{ with .Summary }}
{{ . }}
{{ end }}
{{ end }}

View File

@@ -3,9 +3,9 @@
* claims that images won't work with JS disabled since it would
* make tracking possible, but my experience says otherwise
*/}}
<img src="{{ .Permalink }}" {{ with .Params.alt }}alt="{{ . }}"{{ end }} />
<img class="figure-media" src="{{ .Permalink }}" {{ with .Params.alt }}alt="{{ . }}"{{ end }} />
{{ else if eq .ResourceType "video" }}
<video controls preload="metadata">
<video class="figure-media" controls preload="metadata">
{{ with .Params.alt }}
{{ warnf "video does not support alt text, '%s'" . }}
{{ end }}

View File

@@ -1,6 +1,6 @@
{{ if gt .Paginator.TotalPages 1 }}
<nav class="pagination">
{{/* https://github.com/gohugoio/hugo/blob/a88b488181279befd50e1d127f9f67604f2f9854/tpl/tplimpl/embedded/templates/_partials/pagination.html */}}
{{ partial "_internal/pagination.html" . }}
{{ partial "pagination-hugo.html" . }}
</nav>
{{ end }}

View File

@@ -1,6 +1,6 @@
<div class="top">
<header class="header">
<a class="heading-link" href="{{ .Site.Home.Permalink | absLangURL }}">
<a href="{{ .Site.Home.Permalink | absLangURL }}">
{{ .Site.Title | markdownify }}
</a>
</header>

View File

@@ -1 +0,0 @@
<hr class="full-width-hr">

View File

@@ -1,13 +1,15 @@
<h2 class="page-title">
<a class="heading-link" href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
<a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
{{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }}
</h2>
{{ partial "page-metadata/author.html" . }}
<div class="page-description">
{{ partial "description-or-summary.html" . }}
</div>
{{ with .Summary }}
<div class="page-description">
{{ . }}
</div>
{{ end }}
<div class="readmore">
<a href="{{ .Permalink }}">{{ i18n "read_more" }} &rarr;</a>

View File

@@ -13,28 +13,28 @@
{{ partial "breadcrumb.html" . }}
{{ end }}
<main id="main-content" {{ if .IsPage }}data-pagefind-body{{ end }}>
<main id="main-content">
{{ block "main" . }}
THIS TEXT SHOULD NOT SHOW. YUZSIQGHE (that string is so I can grep for it)
{{ end }}
</main>
{{ if or .Site.Copyright .Site.Params.footer }}
<footer>
{{ with .Site.Copyright }}
{{ . | safeHTML }}
{{ end }}
{{ with .Site.Params.footer }}
{{ . | $.RenderString (dict "display" "block") }}
{{ end }}
</footer>
{{ end }}
</div>
{{ block "post-body" . }}
{{/* currently this is only used for related posts */}}
{{ end }}
{{ if or .Site.Copyright .Site.Params.footer }}
<footer>
{{ with .Site.Copyright }}
{{ . | safeHTML }}
{{ end }}
{{ with .Site.Params.footer }}
{{ . | $.RenderString (dict "display" "block") }}
{{ end }}
</footer>
{{ end }}
</body>
</html>

View File

@@ -24,7 +24,7 @@
{{ partial "feature-figure.html" . }}
<article class="post-content">
<article class="post-content" data-pagefind-body>
{{ .Content }}
</article>

View File

@@ -5,8 +5,10 @@
{{ .Title | markdownify }}
</h2>
<div class="section-description">
{{ partial "description-or-summary.html" . }}
</div>
{{ with .Summary }}
<div class="section-description">
{{ . }}
</div>
{{ end }}
</div>
</a>

View File

@@ -1,14 +1,16 @@
<h2 class="page-title">
{{ with .Parent.Params.icon }}{{ partial "icon.html" . }}{{ end }}
<a class="heading-link" href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
<a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
{{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }}
</h2>
{{ partial "page-metadata/series.html" . }}
<div class="page-description">
{{ partial "description-or-summary.html" . }}
</div>
{{ with .Summary }}
<div class="page-description">
{{ . }}
</div>
{{ end }}
<div class="page-list series-inner">
{{ range .Data.Pages.Reverse }}

View File

@@ -1,6 +1,6 @@
<h2 class="page-title">
{{ with .Parent.Params.icon }}{{ partial "icon.html" . }}{{ end }}
<a class="heading-link" href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
<a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
{{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }}
</h2>
@@ -8,9 +8,11 @@
{{ partial "feature-figure.html" . }}
<div class="page-description">
{{ partial "description-or-summary.html" . }}
</div>
{{ with .Summary }}
<div class="page-description">
{{ . }}
</div>
{{ end }}
<div class="readmore">
<a href="{{ .Permalink }}">{{ i18n "read_more" }} &rarr;</a>

View File

@@ -28,7 +28,7 @@
</a>
{{ partial "page-metadata/taxonomy.html" . }}
</div>
{{ partial "description-or-summary.html" . }}
{{ .Summary }}
</article>
{{ end }}
{{ end }}