From 6fd705e70eff6f31726e90b4bde6ecda8f5af471 Mon Sep 17 00:00:00 2001 From: Max Mehl Date: Sun, 22 Feb 2026 15:22:32 +0100 Subject: [PATCH] feat: recent posts on index, CSS and HTML improvements --- themes/hugo-sustain/assets/scss/default.scss | 92 ++++++++++++++----- themes/hugo-sustain/assets/scss/luxbar.scss | 1 + .../hugo-sustain/layouts/_default/list.html | 2 +- themes/hugo-sustain/layouts/index.html | 21 +++-- .../hugo-sustain/layouts/partials/recent.html | 21 +++++ 5 files changed, 102 insertions(+), 35 deletions(-) create mode 100644 themes/hugo-sustain/layouts/partials/recent.html diff --git a/themes/hugo-sustain/assets/scss/default.scss b/themes/hugo-sustain/assets/scss/default.scss index 2c3498b..bd092e9 100755 --- a/themes/hugo-sustain/assets/scss/default.scss +++ b/themes/hugo-sustain/assets/scss/default.scss @@ -3,9 +3,11 @@ --primary-color: #0D76EC; --hover-color: #12437A; --light-bg: #fff; + --light-bg-card: #f5f5f5; --primary-color-dark: #4da3ff; --hover-color-dark: #91c9ff; - --dark-bg: #222; + --dark-bg: #14161e; + --dark-bg-card: #1c212d; --dark-font-color: #eee; --dark-nav-color: #ddd; } @@ -16,6 +18,7 @@ html, body { background-color: var(--light-bg); font-family: 'Source Sans Pro', sans-serif; border-top: 3px solid var(--primary-color); + font-size: 18px; } #wrap { @@ -32,12 +35,15 @@ html, body { .container { width: auto; max-width: 800px; - text-align: center; .text-muted { margin: 20px 0; } + h1 { + text-align: center; + } + a { color: var(--primary-color); @@ -55,16 +61,28 @@ html, body { } } + p { + margin-bottom: 20px; + } + + h1, h2, h3, h4, h5, h6 { + span { + cursor: default; + } + } + h1 { font-weight: bold; color: var(--primary-color); } - h2 a { - color: var(--primary-color); + h2 { + a { + color: var(--primary-color); - &:hover { - color: var(--hover-color); + &:hover { + color: var(--hover-color); + } } } } @@ -115,17 +133,17 @@ html, body { } h2 { + font-size: 1.25rem; line-height: 24px; - font-size: 22px; } h5 { line-height: 30px; - font-size: 18px; + font-size: 1rem; } h6 { - font-size: 15px; + font-size: 0.9rem; } } } @@ -250,7 +268,7 @@ html, body { } .metadata-summary { - font-size: 0.8em; + font-size: 0.8rem; opacity: 0.7; } @@ -287,13 +305,18 @@ a.learn-more { } /* Pagination */ -.pagination { - li.page-item:not(.active) { - a { - color: var(--primary-color); +#pagination { + display: flex; + justify-content: center; - &:hover { - color: var(--hover-color); + .pagination { + li.page-item:not(.active) { + a { + color: var(--primary-color); + + &:hover { + color: var(--hover-color); + } } } } @@ -302,17 +325,21 @@ a.learn-more { /* Footer */ footer { border-bottom: 5px solid var(--primary-color); + text-align: center; text-decoration: none !important; .text-muted { color: #6b6b6b; } + + p { + font-size: 0.8rem; + } } /* Site specific */ -section#about p { - font-size: 18px; - margin-bottom: 20px; +div#index-content { + text-align: center; } div.contact p { @@ -320,6 +347,24 @@ div.contact p { margin-bottom: 30px; } +/* Recent posts */ +#recent-posts { + padding: 0 1rem; + .card { + // Box + padding: 1rem; + background-color: var(--light-bg-card); + border-radius: 0 1rem; + margin-bottom: .3rem; + text-align: left; + + .card-title { + font-size: 1.1rem; + margin-top: 0; + } + } +} + /* Helpers */ .vertical-align { display: flex; @@ -341,7 +386,6 @@ pre code { .luxbar-menu a, .luxbar-item a { color: var(--dark-nav-color); - text-transform: uppercase; } .luxbar-menu-light .luxbar-hamburger span { @@ -360,10 +404,6 @@ pre code { } } - h2 span { - cursor: default; - } - h1, h2 a { color: var(--primary-color-dark); @@ -387,6 +427,10 @@ pre code { } } + #recent-posts .card { + background-color: var(--dark-bg-card); + } + // Pagination .pagination { li.page-item { diff --git a/themes/hugo-sustain/assets/scss/luxbar.scss b/themes/hugo-sustain/assets/scss/luxbar.scss index 13fccd2..de3a426 100644 --- a/themes/hugo-sustain/assets/scss/luxbar.scss +++ b/themes/hugo-sustain/assets/scss/luxbar.scss @@ -104,6 +104,7 @@ color: #6b6b6b; cursor: pointer; font-size: 16px; + text-transform: uppercase; } .luxbar-item { diff --git a/themes/hugo-sustain/layouts/_default/list.html b/themes/hugo-sustain/layouts/_default/list.html index cfe79ad..df99306 100644 --- a/themes/hugo-sustain/layouts/_default/list.html +++ b/themes/hugo-sustain/layouts/_default/list.html @@ -88,7 +88,7 @@ {{ .Summary }} {{ end }} - {{ template "_internal/pagination.html" . }} + diff --git a/themes/hugo-sustain/layouts/index.html b/themes/hugo-sustain/layouts/index.html index 9447ba1..76aa7b3 100644 --- a/themes/hugo-sustain/layouts/index.html +++ b/themes/hugo-sustain/layouts/index.html @@ -2,19 +2,20 @@
{{ partial "header" . }} -
+
-
- Responsive image -
- - {{ .Content }} +
+
+ Responsive image +
- {{ partial "comments" . }} - {{ partial "social" . }} + {{ .Content }}
-
-
+ {{ partial "recent" . }} + + + + {{ partial "social" . }} {{ partial "footer" . }} {{ partial "js" . }} {{ partial "matomo" . }} diff --git a/themes/hugo-sustain/layouts/partials/recent.html b/themes/hugo-sustain/layouts/partials/recent.html new file mode 100644 index 0000000..0d1dbca --- /dev/null +++ b/themes/hugo-sustain/layouts/partials/recent.html @@ -0,0 +1,21 @@ +{{- $lastno := 3 }} +{{- $size := sub 12 $lastno -1 }} +{{- $id := 0 }} +{{- $pages := .Site.RegularPages.ByDate.Reverse | first $lastno }} +
+ {{- range $pages }} +
+
+

+ {{ partial "blog/pre-headline.html" . -}} + {{ .Title | markdownify }} +

+
+ {{- partial "blog/verb.html" . }} + on {{ .Date.Format "2 January 2006" }} - {{ range $i, $tag := .Params.tags }}{{ if $i }}, {{ end }}#{{ $tag }}{{ end }} +
+
+
+ {{- $id = add $id 1 -}} + {{- end }} +