mirror of
https://github.com/Brandon-Rozek/website-theme.git
synced 2024-11-09 10:50:34 -05:00
Spicing up blog list and tag list pages
This commit is contained in:
parent
89aade301c
commit
4d5f0f30cb
7 changed files with 83 additions and 20 deletions
|
@ -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;
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 }}
|
||||||
|
|
|
@ -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 := . }}
|
||||||
|
|
|
@ -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 }}
|
||||||
|
|
|
@ -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" . }}
|
||||||
|
|
|
@ -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 }}
|
||||||
|
|
Loading…
Reference in a new issue