3 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
6 changed files with 76 additions and 73 deletions

View File

@@ -340,7 +340,7 @@ body {
* or it will need its hover background to be chopped off on the left */ * or it will need its hover background to be chopped off on the left */
} }
.brand { .top-brand {
flex-grow: 1; flex-grow: 1;
margin: 8px var(--page-margin); margin: 8px var(--page-margin);
font-size: 1.25em; font-size: 1.25em;
@@ -348,27 +348,27 @@ body {
align-items: center; align-items: center;
} }
.brand a { .top-brand > a {
color: inherit; color: inherit;
font-weight: bold; font-weight: bold;
} }
.navbar { .top-navbar {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.navbar-item { .top-navbar-item {
padding: 12px var(--page-margin); padding: 12px var(--page-margin);
white-space: nowrap; white-space: nowrap;
} }
.navbar-item:hover { .top-navbar-item:hover {
background-color: var(--background-2); background-color: var(--background-2);
text-decoration: none; text-decoration: none;
} }
.navbar-item.active { .top-navbar-item--active {
font-weight: bold; font-weight: bold;
} }
@@ -446,13 +446,6 @@ body {
/* List layout {{{ */ /* List layout {{{ */
/* flexbox container for sections and main page list */
.list-page-container {
display: flex;
flex-direction: column;
gap: 40px;
}
.page-list { .page-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -607,6 +600,7 @@ body {
/* Subsections on list pages {{{ */ /* Subsections on list pages {{{ */
.sections { .sections {
margin-bottom: 60px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
@@ -617,6 +611,9 @@ body {
color: var(--text-1); color: var(--text-1);
border-radius: 12px; border-radius: 12px;
padding: 1px 25px; padding: 1px 25px;
display: flex;
flex-direction: row;
justify-content: space-between;
} }
.section:hover { .section:hover {
@@ -640,6 +637,16 @@ body {
margin-bottom: 5px; 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"> <header class="top">
<div class="brand"> <div class="top-brand">
<a href="{{ .Site.Home.Permalink | absLangURL }}"> <a href="{{ .Site.Home.Permalink | absLangURL }}">
{{ .Site.Title | markdownify }} {{ .Site.Title | markdownify }}
</a> </a>
</div> </div>
<nav class="navbar" aria-label="{{ i18n "aria_navbar" }}"> <nav class="top-navbar" aria-label="{{ i18n "aria_navbar" }}">
{{ with .Site.Home }} {{ 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 }} {{ end }}
{{ range .Site.Menus.main }} {{ range .Site.Menus.main }}
@@ -16,7 +16,7 @@
{{ if or ($.HasMenuCurrent .Menu .) (eq .Page $) }} {{ if or ($.HasMenuCurrent .Menu .) (eq .Page $) }}
{{ $isActive = true }} {{ $isActive = true }}
{{ end }} {{ 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 }} {{ if strings.HasPrefix .URL "http" }}target="_blank" rel="noopener"{{ end }}
href="{{ .URL }}">{{ .Name }}</a> href="{{ .URL }}">{{ .Name }}</a>
{{ end }} {{ end }}

View File

@@ -1,7 +1,4 @@
{{ define "main" }} {{ define "main" }}
<section>
{{ if .Content }}<article>{{ end }}
<h1> <h1>
{{ partial "icon.html" "user-circle" }} {{ partial "icon.html" "user-circle" }}
{{ .Title | markdownify }} {{ .Title | markdownify }}
@@ -11,9 +8,7 @@
{{ . }} {{ . }}
{{ end }} {{ end }}
{{ if .Content }}</article>{{ end }} <div class="page-list">
<section class="page-list">
{{ with .Paginator.Pages }} {{ with .Paginator.Pages }}
{{ range . }} {{ range . }}
<article class="page"> <article class="page">
@@ -25,6 +20,5 @@
{{ i18n "no_posts" }} {{ i18n "no_posts" }}
</div> </div>
{{ end }} {{ end }}
</section> </div>
</section>
{{ end }} {{ end }}

View File

@@ -7,7 +7,7 @@
{{ if .Site.Params.homepageLatestPosts }} {{ if .Site.Params.homepageLatestPosts }}
<hr> <hr>
<section class="homepage-latest-posts"> <div class="homepage-latest-posts">
<h1> <h1>
{{ i18n "latest_posts" }} {{ i18n "latest_posts" }}
{{ partial "rss-link.html" . }} {{ partial "rss-link.html" . }}
@@ -16,6 +16,6 @@
{{ partial "page-list.html" (.Paginate .Site.RegularPages).Pages }} {{ partial "page-list.html" (.Paginate .Site.RegularPages).Pages }}
{{ partial "pagination.html" . }} {{ partial "pagination.html" . }}
</section> </div>
{{ end }} {{ end }}
{{ end }} {{ end }}

View File

@@ -1,5 +1,4 @@
{{ define "main" }} {{ define "main" }}
<section>
<h1> <h1>
{{ with .Params.icon }}{{ partial "icon.html" . }}{{ end }} {{ with .Params.icon }}{{ partial "icon.html" . }}{{ end }}
{{ .Title | markdownify }} {{ .Title | markdownify }}
@@ -10,7 +9,6 @@
{{ . }} {{ . }}
{{ end }} {{ end }}
<div class="list-page-container">
{{ with .Sections }} {{ with .Sections }}
<div class="sections"> <div class="sections">
{{ range . }} {{ range . }}
@@ -20,8 +18,6 @@
{{ end }} {{ end }}
{{ partial "page-list.html" .Paginator.Pages }} {{ partial "page-list.html" .Paginator.Pages }}
</div>
{{ partial "pagination.html" . }} {{ partial "pagination.html" . }}
</section>
{{ end }} {{ end }}

View File

@@ -1,5 +1,6 @@
<a class="section-anchor" href="{{ .Permalink }}"> <a class="section-anchor" href="{{ .Permalink }}">
<div class="section"> <div class="section">
<div>
<h2 class="section-title"> <h2 class="section-title">
{{ with .Params.icon }}{{ partial "icon.html" . }}{{ end }} {{ with .Params.icon }}{{ partial "icon.html" . }}{{ end }}
{{ .Title | markdownify }} {{ .Title | markdownify }}
@@ -11,4 +12,9 @@
</div> </div>
{{ end }} {{ end }}
</div> </div>
<div class="section-arrow">
{{ partial "icon.html" "arrow-right" }}
</div>
</div>
</a> </a>