bbaovanc
/
bobatheme
mirror of https://github.com/BBaoVanC/bobatheme.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Replace <li> in page lists with semantic HTML <article>

This commit is contained in:
BBaoVanC 2022-05-21 23:20:22 -05:00
parent 73dc916d5a
commit a65a435b1d
Signed by: bbaovanc
GPG Key ID: 18089E4E3CCF1D3A
9 changed files with 122 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
assets/css/bobastyle.css
View File

@ -123,8 +123,8 @@
gap: 40px; gap: 40px;
} }
.page-list ul, .page-list,
.series-taxonomy ul { .series-taxonomy-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
list-style: none; list-style: none;
@ -132,12 +132,13 @@
gap: 40px; gap: 40px;
} }
.series-taxonomy ul { .series-taxonomy-list {
gap: 80px; gap: 80px;
} }
.page-list li, .page-list .post,
.series-taxonomy li { .series-taxonomy-list .series-taxonomy,
.series-taxonomy .post {
padding-top: 8px; padding-top: 8px;
padding-left: 24px; padding-left: 24px;
padding-right: 24px; padding-right: 24px;
@ -206,7 +207,7 @@
margin: 0; margin: 0;
} }
.taxonomy-list ul { .taxonomy-list {
list-style: none; list-style: none;
padding: 0; padding: 0;
display: flex; display: flex;
@ -214,7 +215,7 @@
gap: 10px; gap: 10px;
} }
.taxonomy-list li { .taxonomy-list .taxonomy-term {
background-color: var(--background-1); background-color: var(--background-1);
color: var(--text-1); color: var(--text-1);
padding: 8px 12px; padding: 8px 12px;
@ -230,7 +231,7 @@
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.taxonomy-list li { .taxonomy-list .taxonomy-term {
flex-direction: column; flex-direction: column;
gap: 4px; gap: 4px;
} }
@ -244,7 +245,7 @@
/* Series list format */ /* Series list format */
.series-pages ul { .series-page-list {
display: flex; display: flex;
gap: 10px; gap: 10px;
flex-flow: row wrap; flex-flow: row wrap;
@ -255,7 +256,7 @@
border-radius: 16px; border-radius: 16px;
} }
.series-pages li { .series-page-list .post {
flex: 1; flex: 1;
min-width: 49%; min-width: 49%;
} }
@ -304,8 +305,13 @@
/* Header formatting (website title and article section headers) */ /* Header formatting (website title and article section headers) */
h1.header { .header {
margin: 16px 0;
}
.header h1 {
font-size: 1.5em; font-size: 1.5em;
font-weight: bold;
} }
.header a, .header a,
@ -347,6 +353,7 @@ h1.header {
} }
/* Related posts */ /* Related posts */
.full-width-page-list { .full-width-page-list {
/* make left/right 0 margin so it takes up full width */ /* make left/right 0 margin so it takes up full width */
@ -359,16 +366,16 @@ h1.header {
margin-right: 20px; margin-right: 20px;
} }
.full-width-page-list li { .full-width-page-list .post {
min-width: 300px; min-width: 300px;
max-width: 300px; max-width: 300px;
} }
.full-width-page-list li:first-child { .full-width-page-list .post:first-child {
margin-left: 20px; margin-left: 20px;
} }
.full-width-page-list li:last-child { .full-width-page-list .post:last-child {
margin-right: 20px; margin-right: 20px;
} }
@ -393,7 +400,7 @@ h1.header {
} }
} }
.full-width-page-list .page-list ul { .full-width-page-list .page-list {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 20px; gap: 20px;
@ -401,6 +408,7 @@ h1.header {
} }
/* Social media share buttons */ /* Social media share buttons */
.share-buttons { .share-buttons {
background: var(--background-1); background: var(--background-1);
@ -439,6 +447,7 @@ h1.header {
*/ */
/* See also formating */ /* See also formating */
.see-also { .see-also {
background-color: var(--background-1); background-color: var(--background-1);
@ -453,6 +462,7 @@ h1.header {
} }
/* Back to top */ /* Back to top */
#back-to-top { #back-to-top {
position: fixed; position: fixed;

34
layouts/_default/summary/post.html
View File

@ -1,23 +1,21 @@
<div class="post"> <h2 class="post-title">
<h2 class="post-title"> {{ with .Parent.Params.icon }}{{ partial "icon.html" . }}{{ end }}
{{ with .Parent.Params.icon }}{{ partial "icon.html" . }}{{ end }} <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
<a href="{{ .Permalink }}">{{ .Title | markdownify }}</a> {{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }}
{{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }} </h2>
</h2>
{{ partial "post-metadata/short.html" . }} {{ partial "post-metadata/short.html" . }}
{{ with .Resources.GetMatch "feature" }} {{ with .Resources.GetMatch "feature" }}
<div class="post-media"> <div class="post-media">
{{ partial "figure.html" (dict "src" .) }} {{ partial "figure.html" (dict "src" .) }}
</div>
{{ end }}
<div class="post-description">
{{ partial "description-or-summary.html" . }}
</div> </div>
{{ end }}
<div class="readmore"> <div class="post-description">
<a href="{{ .Permalink }}">{{ i18n "read_more" }} &rarr;</a> {{ partial "description-or-summary.html" . }}
</div> </div>
<div class="readmore">
<a href="{{ .Permalink }}">{{ i18n "read_more" }} &rarr;</a>
</div> </div>

44
layouts/_default/summary/series.html
View File

@ -1,26 +1,24 @@
<div class="post"> <h2 class="post-title">
<h2 class="post-title"> {{ with .Parent.Params.icon }}{{ partial "icon.html" . }}{{ end }}
{{ with .Parent.Params.icon }}{{ partial "icon.html" . }}{{ end }} <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
<a href="{{ .Permalink }}">{{ .Title | markdownify }}</a> {{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }}
{{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }} </h2>
</h2>
{{ partial "post-metadata/series.html" . }} {{ partial "post-metadata/series.html" . }}
<div class="post-description"> <div class="post-description">
{{ partial "description-or-summary.html" . }} {{ partial "description-or-summary.html" . }}
</div> </div>
<div class="series-pages"> <div class="series-page-list">
<ul> {{ $i := 0 }}
{{ $i := 0 }} {{ $total := len .Data.Pages }}
{{ $total := len .Data.Pages }} {{ range .Data.Pages.Reverse }}
{{ range .Data.Pages.Reverse }} {{ $i = add 1 $i }}
{{ $i = add 1 $i }} {{ .Scratch.Set "series_position" $i }}
{{ .Scratch.Set "series_position" $i }} {{ .Scratch.Set "series_total" $total }}
{{ .Scratch.Set "series_total" $total }} <article class="post">
<li>{{ .Render "summary/series_post" }}</li> {{ .Render "summary/series_post" }}
{{ end }} </article>
</ul> {{ end }}
</div>
</div> </div>

52
layouts/_default/summary/series_post.html
View File

@ -1,29 +1,27 @@
<div class="post"> <div class="post-series-position">
<div class="post-series-position"> {{ if .Scratch.Get "series_position" }}
{{ if .Scratch.Get "series_position" }} ({{ .Scratch.Get "series_position" }}/{{ .Scratch.Get "series_total" }})
({{ .Scratch.Get "series_position" }}/{{ .Scratch.Get "series_total" }})
{{ end }}
</div>
<h2 class="post-title">
{{ with .Parent.Params.icon }}{{ partial "icon.html" . }}{{ end }}
<a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
{{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }}
</h2>
{{ partial "post-metadata/short.html" . }}
{{ with .Resources.GetMatch "feature" }}
<div class="post-media">
{{ partial "figure.html" (dict "src" .) }}
</div>
{{ end }} {{ end }}
</div>
<div class="post-description">
{{ partial "description-or-summary.html" . }} <h2 class="post-title">
</div> {{ with .Parent.Params.icon }}{{ partial "icon.html" . }}{{ end }}
<a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
<div class="readmore"> {{ if .Draft }}{{ partial "icon.html" "write" }}{{ end }}
<a href="{{ .Permalink }}">{{ i18n "read_more" }} &rarr;</a> </h2>
</div>
{{ partial "post-metadata/short.html" . }}
{{ with .Resources.GetMatch "feature" }}
<div class="post-media">
{{ partial "figure.html" (dict "src" .) }}
</div>
{{ end }}
<div class="post-description">
{{ partial "description-or-summary.html" . }}
</div>
<div class="readmore">
<a href="{{ .Permalink }}">{{ i18n "read_more" }} &rarr;</a>
</div> </div>

10
layouts/authors/list.html
View File

@ -6,11 +6,11 @@
<div class="page-list"> <div class="page-list">
{{ with .Paginator.Pages }} {{ with .Paginator.Pages }}
<ul> {{ range . }}
{{ range . }} <article class="post">
<li>{{ .Render "summary/author" }}</li> {{ .Render "summary/author" }}
{{ end }} </article>
</ul> {{ end }}
{{ else }} {{ else }}
<div> <div>
{{ i18n "no_posts" }} {{ i18n "no_posts" }}

10
layouts/partials/page-list.html
View File

@ -1,10 +1,10 @@
<div class="page-list"> <div class="page-list">
{{ with . }} {{ with . }}
<ul> {{ range . }}
{{ range . }} <article class="post">
<li>{{ .Render "summary/post" }}</li> {{ .Render "summary/post" }}
{{ end }} </article>
</ul> {{ end }}
{{ else }} {{ else }}
<div> <div>
{{ i18n "no_posts" }} {{ i18n "no_posts" }}

10
layouts/partials/top.html
View File

@ -1,6 +1,10 @@
<h1 class="header"> <header class="header">
<a href="{{ .Site.Home.Permalink | absLangURL }}">{{ .Site.Title | markdownify }}</a> <h1>
</h1> <a href="{{ .Site.Home.Permalink | absLangURL }}">
{{ .Site.Title | markdownify }}
</a>
</h1>
</header>
<div class="topbar"> <div class="topbar">
<nav class="navbar" aria-label="{{ i18n "aria_navbar" }}"> <nav class="navbar" aria-label="{{ i18n "aria_navbar" }}">

12
layouts/series/list.html
View File

@ -4,13 +4,13 @@
{{ .Title | markdownify }} {{ .Title | markdownify }}
</h1> </h1>
<div class="series-taxonomy"> <div class="series-taxonomy-list">
{{ with .Pages }} {{ with .Pages }}
<ul> {{ range . }}
{{ range . }} <article class="series-taxonomy">
<li>{{ .Render "summary/series" }}</li> {{ .Render "summary/series" }}
{{ end }} </article>
</ul> {{ end }}
{{ else }} {{ else }}
<div> <div>
{{ i18n "no_posts" }} {{ i18n "no_posts" }}

26
layouts/taxonomy/list.html
View File

@ -13,21 +13,19 @@
<div class="taxonomy-list"> <div class="taxonomy-list">
{{ with .Data.Terms.Alphabetical }} {{ with .Data.Terms.Alphabetical }}
<ul> {{ range . }}
{{ range . }} {{ with .Page }}
{{ with .Page }} <article class="taxonomy-term">
<li> <div class="taxonomy-list-left">
<div class="taxonomy-list-left"> <a href="{{ .Permalink }}">
<a href="{{ .Permalink }}"> <p>{{ .Title | markdownify }}</p>
<p>{{ .Title | markdownify }}</p> </a>
</a> {{ partial "post-metadata/taxonomy.html" . }}
{{ partial "post-metadata/taxonomy.html" . }} </div>
</div> {{ partial "description-or-summary.html" . }}
{{ partial "description-or-summary.html" . }} </article>
</li>
{{ end }}
{{ end }} {{ end }}
</ul> {{ end }}
{{ else }} {{ else }}
<div> <div>
{{ i18n "no_posts" }} {{ i18n "no_posts" }}