4 Commits

Author SHA1 Message Date
4bc8184593 Add arrow in the right side of list page section buttons
This makes it more obvious that you can click this to view a different
area.
2025-08-27 11:38:29 -05:00
22e7ad4b77 Remove nested list-page-container to simplify layout CSS on section page
Originally I was using gap on a flexbox to separate the .sections
container from the rest of the page list. But it's simpler if I just use
block layout and a bottom margin, then I don't need an extra layer of
div.
2025-08-27 11:13:48 -05:00
c2b10a6c99 Use hierarchical naming on top and its elements
Any element that can't stand on its own as a self-contained component
should have its naming nested under whatever parent it's supposed to
have.

Fixes #109
2025-08-27 10:50:52 -05:00
c7c1ee0f0a Put title on series page in div.page-title like other taxonomy pages
This must've gotten out of sync somehow throughout the history. It
slightly changes the margins by disabling the default one on h1, which
is slightly larger than the breadcrumb nav margin-block's.
2025-08-25 13:44:08 -05:00
5 changed files with 53 additions and 40 deletions

View File

@@ -340,7 +340,7 @@ body {
* or it will need its hover background to be chopped off on the left */
}
.brand {
.top-brand {
flex-grow: 1;
margin: 8px var(--page-margin);
font-size: 1.25em;
@@ -348,27 +348,27 @@ body {
align-items: center;
}
.brand a {
.top-brand > a {
color: inherit;
font-weight: bold;
}
.navbar {
.top-navbar {
display: flex;
flex-wrap: wrap;
}
.navbar-item {
.top-navbar-item {
padding: 12px var(--page-margin);
white-space: nowrap;
}
.navbar-item:hover {
.top-navbar-item:hover {
background-color: var(--background-2);
text-decoration: none;
}
.navbar-item.active {
.top-navbar-item--active {
font-weight: bold;
}
@@ -446,13 +446,6 @@ body {
/* List layout {{{ */
/* flexbox container for sections and main page list */
.list-page-container {
display: flex;
flex-direction: column;
gap: 40px;
}
.page-list {
display: flex;
flex-direction: column;
@@ -607,6 +600,7 @@ body {
/* Subsections on list pages {{{ */
.sections {
margin-bottom: 60px;
display: flex;
flex-direction: column;
gap: 10px;
@@ -617,6 +611,9 @@ body {
color: var(--text-1);
border-radius: 12px;
padding: 1px 25px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.section:hover {
@@ -640,6 +637,16 @@ body {
margin-bottom: 5px;
}
.section-arrow {
margin-block: auto;
max-height: fit-content;
float: right;
}
.section-arrow > .icon {
height: 48px;
width: 48px;
}
/* }}} */

View File

@@ -1,13 +1,13 @@
<header class="top">
<div class="brand">
<div class="top-brand">
<a href="{{ .Site.Home.Permalink | absLangURL }}">
{{ .Site.Title | markdownify }}
</a>
</div>
<nav class="navbar" aria-label="{{ i18n "aria_navbar" }}">
<nav class="top-navbar" aria-label="{{ i18n "aria_navbar" }}">
{{ with .Site.Home }}
<a class="navbar-item{{ if $.IsHome }} active{{ end }}" href="{{ .Permalink | absLangURL }}">{{ .Title | markdownify }}</a>
<a class="top-navbar-item{{ if $.IsHome }} top-navbar-item--active{{ end }}" href="{{ .Permalink | absLangURL }}">{{ .Title | markdownify }}</a>
{{ end }}
{{ range .Site.Menus.main }}
@@ -16,7 +16,7 @@
{{ if or ($.HasMenuCurrent .Menu .) (eq .Page $) }}
{{ $isActive = true }}
{{ end }}
<a class="navbar-item{{ if $isActive }} active{{ end }}"
<a class="top-navbar-item{{ if $isActive }} top-navbar-item--active{{ end }}"
{{ if strings.HasPrefix .URL "http" }}target="_blank" rel="noopener"{{ end }}
href="{{ .URL }}">{{ .Name }}</a>
{{ end }}

View File

@@ -9,17 +9,15 @@
{{ . }}
{{ end }}
<div class="list-page-container">
{{ with .Sections }}
<div class="sections">
{{ range . }}
{{ .Render "summary" }}
{{ end }}
</div>
{{ end }}
{{ with .Sections }}
<div class="sections">
{{ range . }}
{{ .Render "summary" }}
{{ end }}
</div>
{{ end }}
{{ partial "page-list.html" .Paginator.Pages }}
</div>
{{ partial "page-list.html" .Paginator.Pages }}
{{ partial "pagination.html" . }}
{{ end }}

View File

@@ -1,14 +1,20 @@
<a class="section-anchor" href="{{ .Permalink }}">
<div class="section">
<h2 class="section-title">
{{ with .Params.icon }}{{ partial "icon.html" . }}{{ end }}
{{ .Title | markdownify }}
</h2>
<div>
<h2 class="section-title">
{{ with .Params.icon }}{{ partial "icon.html" . }}{{ end }}
{{ .Title | markdownify }}
</h2>
{{ with .Summary }}
<div class="section-description">
{{ . }}
</div>
{{ end }}
{{ with .Summary }}
<div class="section-description">
{{ . }}
</div>
{{ end }}
</div>
<div class="section-arrow">
{{ partial "icon.html" "arrow-right" }}
</div>
</div>
</a>

View File

@@ -1,8 +1,10 @@
{{ define "main" }}
<h1>
{{ partial "icon.html" "files" }}
{{ .Title | markdownify }}
</h1>
<div class="page-title">
<h1>
{{ partial "icon.html" "files" }}
{{ .Title | markdownify }}
</h1>
</div>
{{ with .Content }}
{{ . }}