mxmehl/mehl.mx
1
0
Fork 0
Code Issues 3 Pull Requests Actions Releases Wiki Activity

feat: recent posts on index, CSS and HTML improvements

Browse Source
This commit is contained in:
Max Mehl
2026-02-22 15:22:32 +01:00
parent 668294d5bb
commit 6fd705e70e
5 changed files with 102 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
themes/hugo-sustain/assets/scss/default.scss
View File

@@ -3,9 +3,11 @@
--primary-color: #0D76EC; --primary-color: #0D76EC;
--hover-color: #12437A; --hover-color: #12437A;
--light-bg: #fff; --light-bg: #fff;
--light-bg-card: #f5f5f5;
--primary-color-dark: #4da3ff; --primary-color-dark: #4da3ff;
--hover-color-dark: #91c9ff; --hover-color-dark: #91c9ff;
--dark-bg: #222; --dark-bg: #14161e;
--dark-bg-card: #1c212d;
--dark-font-color: #eee; --dark-font-color: #eee;
--dark-nav-color: #ddd; --dark-nav-color: #ddd;
} }
@@ -16,6 +18,7 @@ html, body {
background-color: var(--light-bg); background-color: var(--light-bg);
font-family: 'Source Sans Pro', sans-serif; font-family: 'Source Sans Pro', sans-serif;
border-top: 3px solid var(--primary-color); border-top: 3px solid var(--primary-color);
font-size: 18px;
} }
#wrap { #wrap {
@@ -32,12 +35,15 @@ html, body {
.container { .container {
width: auto; width: auto;
max-width: 800px; max-width: 800px;
text-align: center;
.text-muted { .text-muted {
margin: 20px 0; margin: 20px 0;
} }
h1 {
text-align: center;
}
a { a {
color: var(--primary-color); color: var(--primary-color);
@@ -55,12 +61,23 @@ html, body {
} }
} }
p {
margin-bottom: 20px;
}
h1, h2, h3, h4, h5, h6 {
span {
cursor: default;
}
}
h1 { h1 {
font-weight: bold; font-weight: bold;
color: var(--primary-color); color: var(--primary-color);
} }
h2 a { h2 {
a {
color: var(--primary-color); color: var(--primary-color);
&:hover { &:hover {
@@ -68,6 +85,7 @@ html, body {
} }
} }
} }
}
/* Labels */ /* Labels */
.label { .label {
@@ -115,17 +133,17 @@ html, body {
} }
h2 { h2 {
font-size: 1.25rem;
line-height: 24px; line-height: 24px;
font-size: 22px;
} }
h5 { h5 {
line-height: 30px; line-height: 30px;
font-size: 18px; font-size: 1rem;
} }
h6 { h6 {
font-size: 15px; font-size: 0.9rem;
} }
} }
} }
@@ -250,7 +268,7 @@ html, body {
} }
.metadata-summary { .metadata-summary {
font-size: 0.8em; font-size: 0.8rem;
opacity: 0.7; opacity: 0.7;
} }
@@ -287,6 +305,10 @@ a.learn-more {
} }
/* Pagination */ /* Pagination */
#pagination {
display: flex;
justify-content: center;
.pagination { .pagination {
li.page-item:not(.active) { li.page-item:not(.active) {
a { a {
@@ -298,21 +320,26 @@ a.learn-more {
} }
} }
} }
}
/* Footer */ /* Footer */
footer { footer {
border-bottom: 5px solid var(--primary-color); border-bottom: 5px solid var(--primary-color);
text-align: center;
text-decoration: none !important; text-decoration: none !important;
.text-muted { .text-muted {
color: #6b6b6b; color: #6b6b6b;
} }
p {
font-size: 0.8rem;
}
} }
/* Site specific */ /* Site specific */
section#about p { div#index-content {
font-size: 18px; text-align: center;
margin-bottom: 20px;
} }
div.contact p { div.contact p {
@@ -320,6 +347,24 @@ div.contact p {
margin-bottom: 30px; 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 */ /* Helpers */
.vertical-align { .vertical-align {
display: flex; display: flex;
@@ -341,7 +386,6 @@ pre code {
.luxbar-menu a, .luxbar-menu a,
.luxbar-item a { .luxbar-item a {
color: var(--dark-nav-color); color: var(--dark-nav-color);
text-transform: uppercase;
} }
.luxbar-menu-light .luxbar-hamburger span { .luxbar-menu-light .luxbar-hamburger span {
@@ -360,10 +404,6 @@ pre code {
} }
} }
h2 span {
cursor: default;
}
h1, h1,
h2 a { h2 a {
color: var(--primary-color-dark); color: var(--primary-color-dark);
@@ -387,6 +427,10 @@ pre code {
} }
} }
#recent-posts .card {
background-color: var(--dark-bg-card);
}
// Pagination // Pagination
.pagination { .pagination {
li.page-item { li.page-item {

1
themes/hugo-sustain/assets/scss/luxbar.scss
View File

@@ -104,6 +104,7 @@
color: #6b6b6b; color: #6b6b6b;
cursor: pointer; cursor: pointer;
font-size: 16px; font-size: 16px;
text-transform: uppercase;
} }
.luxbar-item { .luxbar-item {

2
themes/hugo-sustain/layouts/_default/list.html
View File

@@ -88,7 +88,7 @@
{{ .Summary }} <a class="learn-more" href="{{ .RelPermalink }}"></a> {{ .Summary }} <a class="learn-more" href="{{ .RelPermalink }}"></a>
</div> </div>
{{ end }} {{ end }}
{{ template "_internal/pagination.html" . }} <div id="pagination">{{ template "_internal/pagination.html" . }}</div>
</div> </div>
</div> </div>
</div> </div>

9
themes/hugo-sustain/layouts/index.html
View File

@@ -2,19 +2,20 @@
<body> <body>
<div id="wrap"> <div id="wrap">
{{ partial "header" . }} {{ partial "header" . }}
<section id="about"> <section class="index" id="about">
<div class="container"> <div class="container">
<div id="index-content">
<div class="avatar"> <div class="avatar">
<img class="img-circle" src="{{ .Site.BaseURL }}img/{{ .Site.Params.avatar }}" alt="Responsive image"> <img class="img-circle" src="{{ .Site.BaseURL }}img/{{ .Site.Params.avatar }}" alt="Responsive image">
</div> </div>
{{ .Content }} {{ .Content }}
</div>
{{ partial "comments" . }} {{ partial "recent" . }}
{{ partial "social" . }}
</div> </div>
</section> </section>
</div> </div>
{{ partial "social" . }}
{{ partial "footer" . }} {{ partial "footer" . }}
{{ partial "js" . }} {{ partial "js" . }}
{{ partial "matomo" . }} {{ partial "matomo" . }}

21
themes/hugo-sustain/layouts/partials/recent.html Normal file
View File

@@ -0,0 +1,21 @@
{{- $lastno := 3 }}
{{- $size := sub 12 $lastno -1 }}
{{- $id := 0 }}
{{- $pages := .Site.RegularPages.ByDate.Reverse | first $lastno }}
<div id="recent-posts">
{{- range $pages }}
<div class="row">
<div class="card col-xs-12 col-sm-{{ $size }} col-sm-offset-{{ $id }}">
<h4 class="card-title">
{{ partial "blog/pre-headline.html" . -}}
<a href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a>
</h4>
<div class="metadata-summary">
{{- partial "blog/verb.html" . }}
on {{ .Date.Format "2 January 2006" }} - {{ range $i, $tag := .Params.tags }}{{ if $i }}, {{ end }}<a href="/tags/{{ lower $tag }}">#{{ $tag }}</a>{{ end }}
</div>
</div>
</div>
{{- $id = add $id 1 -}}
{{- end }}
</div>