Spicing up blog list and tag list pages

This commit is contained in:
Brandon Rozek 2022-11-23 00:56:13 -05:00
parent 89aade301c
commit 4d5f0f30cb
7 changed files with 83 additions and 20 deletions

View file

@ -65,7 +65,7 @@ a:active {
align-items: center; align-items: center;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
max-width: 800px; max-width: 1000px;
} }
.header-top .title { margin-right: 1rem; max-width: 400px; } .header-top .title { margin-right: 1rem; max-width: 400px; }
@ -121,7 +121,6 @@ mark {
#searchBox { #searchBox {
position: relative; position: relative;
max-width: 300px;
height: 30px; height: 30px;
margin: 20px auto; margin: 20px auto;
} }
@ -137,7 +136,7 @@ mark {
bottom: 0; bottom: 0;
border-radius: 15px; border-radius: 15px;
outline: 0; outline: 0;
font-size: 15px; /* font-size: 15px; */
color: #707070; color: #707070;
background-color:#f6f6f6; background-color:#f6f6f6;
border: solid 1px #c9c9c9; border: solid 1px #c9c9c9;
@ -159,10 +158,10 @@ mark {
#searchResults { #searchResults {
display: none; display: none;
position: absolute; position: absolute;
max-width: 600px; max-width: 1000px;
/* min-width: 300px; */ /* min-width: 300px; */
margin: 0 auto; margin: 0 auto;
top: 330px; top: 230px;
left: 0; left: 0;
right: 0; right: 0;
padding: 5px; padding: 5px;
@ -195,16 +194,22 @@ mark {
/* /*
** TAGS ** TAGS
*/ */
#tags ul { .tags {
text-align: left;
}
.tags ul {
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
padding: 0; padding: 0;
justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
list-style: none; list-style: none;
} }
#tags li a { .tags-page ul {
justify-content: center;
}
.tags li a {
display: block; display: block;
height: 24px; height: 24px;
margin: 5px; margin: 5px;
@ -216,7 +221,7 @@ mark {
text-decoration: none; text-decoration: none;
} }
#tags li a:hover { .tags li a:hover {
border: 1px solid black; border: 1px solid black;
} }
@ -231,6 +236,7 @@ mark {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
max-width: 650px; max-width: 650px;
text-align: left;
} }
.bloglist-date { .bloglist-date {
@ -240,10 +246,34 @@ mark {
} }
.bloglist { .bloglist {
text-align: left;
font-size: 1.5rem; font-size: 1.5rem;
padding: 20px 0; padding: 20px 0;
} }
.bloglist-item {
display: flex;
justify-content: space-between;
align-items: center;
}
.bloglist-item-tag a {
color: gray;
text-decoration: none;
font-size: 0.75em;
}
.bloglist-item-tag a:hover {
color: #555;
}
@media (max-width: 850px) {
.bloglist-item-tag {
display: none;
}
}
.bloglist hr.separator { .bloglist hr.separator {
width: 10px; width: 10px;
margin: 30px auto; margin: 30px auto;
@ -255,7 +285,7 @@ mark {
*/ */
#feedList { #feedList {
text-align: left; text-align: left;
max-width: 800px; max-width: 1000px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
@ -282,10 +312,12 @@ main {
} }
article { article {
padding-bottom: 20px; padding-bottom: 2rem;
} }
main .e-content { main .e-content {
padding-top: 2rem;
padding-bottom: 2rem;
text-align: left; text-align: left;
} }
@ -346,7 +378,7 @@ footer a:link {
} }
.footer-navs { .footer-navs {
max-width: 800px; max-width: 1000px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
display: flex; display: flex;

View file

@ -28,7 +28,17 @@
{{ end }} {{ end }}
<p class="bloglist-date">{{ .Key }}</p> <p class="bloglist-date">{{ .Key }}</p>
{{ range .Pages }} {{ range .Pages }}
<p><a href="{{ .Permalink }}">{{ .Title }}</a></p> <div class="bloglist-item">
<p><a href="{{ .Permalink }}">{{ .Title }}</a></p>
<p class="bloglist-item-tag">
{{ range .Params.tags }}
{{ $name := . }}
{{ with $.Site.GetPage (printf "/tags/%s" (. | urlize)) }}
<span><a href="{{ .Permalink }}">#{{ $name }}</a> </span>
{{ end }}
{{ end }}
</p>
</div>
{{ end }} {{ end }}
{{ end }} {{ end }}
</div> </div>

View file

@ -1,5 +1,5 @@
<!-- tags --> <!-- tags -->
<details id="tags"> <details class="tags tags-all">
<summary>Tags</summary> <summary>Tags</summary>
<ul> <ul>
{{ range .Site.Taxonomies.tags.ByCount }} {{ range .Site.Taxonomies.tags.ByCount }}

View file

@ -1,5 +1,5 @@
<!-- List the tags that apply to this page --> <!-- List the tags that apply to this page -->
<div id="tags"> <div class="tags tags-page">
<ul> <ul>
{{ range .Param "tags" }} {{ range .Param "tags" }}
{{ $name := . }} {{ $name := . }}

View file

@ -1,14 +1,16 @@
{{ define "main"}} {{ define "main"}}
{{ partial "header.html" . }} {{ partial "header.html" . }}
<main> <main>
{{ partial "search.html" . }} <div class='bloglist-teaser' style="margin-top: 2rem;">
{{ partial "tags/all.html" . }} Here you'll find <strong>{{ len .Pages | lang.NumFmt 0 }} posts</strong>
about <u>{{ .Title }}</u> </strong>.
</div>
<!-- contents --> <!-- contents -->
<div class="bloglist"> <div class="bloglist">
{{ $listPageDateFormat := .Site.Params.listPageDateFormat | default "January, 2006"}} {{ $listPageDateFormat := .Site.Params.listPageDateFormat | default "January, 2006"}}
{{ range $index, $value := .Pages.GroupByDate $listPageDateFormat }} {{ range $index, $value := .Pages.GroupByDate $listPageDateFormat }}
{{ if (ne $index 0) }} {{ if (ne $index 0) }}
<hr class="separator"> <br/>
{{ end }} {{ end }}
<p class="date">{{ .Key }}</p> <p class="date">{{ .Key }}</p>
{{ range .Pages }} {{ range .Pages }}

View file

@ -18,7 +18,7 @@
</ul> </ul>
</div> </div>
<!-- content --> <!-- content -->
<div id="contentBody"> <div class="e-content">
{{ .Content }} {{ .Content }}
</div> </div>
{{ partial "footer.html" . }} {{ partial "footer.html" . }}

View file

@ -1,7 +1,26 @@
{{ define "main"}} {{ define "main"}}
{{ partial "header.html" . }} {{ partial "header.html" . }}
<main> <main>
{{ partial "tags/all.html" . }} {{ $posts := where site.RegularPages "Type" "blog" }}
{{ $postCount := len $posts }}
{{ range last 1 $posts }}
{{ $tags := .Site.Taxonomies.tags }}
<div class='bloglist-teaser'>
Here you'll find <strong>{{ $postCount | lang.NumFmt 0 }} posts</strong>
written spanning <strong>{{ len $tags }} topics</strong>.
</div>
{{ end }}
<br/>
<div class="tags tags-all">
<ul>
{{ range .Site.Taxonomies.tags.ByCount }}
<li><a href="{{ .Page.Permalink }}">{{ .Page.Title }} ({{ .Count }})</a></li>
{{ end }}
</ul>
</div>
<div class="e-content">
{{ .Content }}
</div>
</main> </main>
{{ partial "footer.html" . }} {{ partial "footer.html" . }}
{{ end }} {{ end }}