wgroeneveld
/
brainbaking
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

use semantic HTML5 tags wherever possible

This commit is contained in:
wgroeneveld 2020-06-03 08:46:59 +02:00
parent 172b0f3504
commit 031de40b9a
11 changed files with 100 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
static/img/Archive.jpg → assets/bigimg/Archive.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 65 KiB

After

Width:  |  Height:  |  Size: 65 KiB

3
themes/brainbaking-minimal/assets/sass/_bootstrap-minimal.sass
View File

@ -81,6 +81,7 @@ pre code
padding-bottom: 9px
margin: 40px 0 20px
border-bottom: 1px solid #eee
text-align: center
.jumbotron
padding-top: 30px
@ -195,7 +196,7 @@ nav
line-height: 20px
font-weight: bold
footer
body > footer
border-bottom: 5px solid var(--accent)
background-color: rgba(243, 243, 243, 0.8)

24
themes/brainbaking-minimal/assets/sass/_brainbaking.sass
View File

@ -42,13 +42,18 @@ main
.icon
@extend %icon-in-text
&.single .text-justify > p:first-of-type::first-letter
&.single article > p:first-of-type::first-letter
font-size: 3.05em
font-weight: bold
line-height: 1.1em
float: left
margin-right: 10px
footer
margin-top: 3.5rem
.icon
width: 32px
height: 32px
@ -83,7 +88,7 @@ div.highlight
padding-bottom: 1.5rem
.text-justify img
article img
display: block
margin-left: auto
margin-right: auto
@ -160,10 +165,13 @@ main
@media (min-width: 1600px)
max-width: 930px !important
.text-justify p
margin: 0 0 20px !important
article
text-align: justify
margin-bottom: 1rem
p
margin: 0 0 20px !important
.text-justify blockquote p
article blockquote p
margin: 0 !important
@ -178,7 +186,7 @@ main
border-bottom: 1px solid var(--accent)
.item
header
margin: auto
padding-top: 1rem
padding-bottom: 1.5rem
@ -192,6 +200,10 @@ main
font-weight: normal
h3
font-size: 1.3rem
color: grey
time
color: grey
kbd
color: var(--accent)

2
themes/brainbaking-minimal/assets/sass/_listing.sass
View File

@ -1,4 +1,4 @@
.list
div.list
text-align: left
padding-left: 2rem
padding-bottom: 2rem

19
themes/brainbaking-minimal/layouts/_default/list.html
View File

@ -5,17 +5,19 @@
<main class="list">
{{ if .Title }}
<h1>
<svg class='icon'><use xlink:href="#{{ .Params.icontag }}"></use></svg>&nbsp;{{ .Title }}
</h1>
<header>
<h1>
<svg class='icon'><use xlink:href="#{{ .Params.icontag }}"></use></svg>&nbsp;{{ .Title }}
</h1>
</header>
{{ end }}
{{ if eq .Paginator.PageNumber 1 }}
<hr/>
{{ with .Content }}
<div class="text-justify">
<article>
{{ . }}
</div>
</article>
{{ end }}
{{ end }}
@ -54,9 +56,10 @@
</div>
{{ end }}
{{ template "_internal/pagination.html" . }}
{{ template "_internal/pagination.html" . }}
<footer>
<svg class='icon icon-text'><use xlink:href='#up'></use></svg><a href="#top">Top</a>
</footer>
</main>
{{ partial "footer" . }}

48
themes/brainbaking-minimal/layouts/_default/single.html
View File

@ -2,10 +2,10 @@
{{ partial "bigimg" . }}
{{ partial "list-item" . }}
{{ partial "single-header" . }}
<main class="single">
<br>
<div class="text-justify">
<article>
<!-- thanks https://www.godo.dev/tutorials/hugo-image-figure-wrap/ -->
{{ $reAltIn := "<p><img src=\"([^\"]+)\" alt=\"([^\"]*)\" /></p>" }}
{{ $reAltOut := "<figure><a href=\"$1\" class=\"lbox\"><img src=\"$1\" alt=\"$2\"></a></figure>" }}
@ -16,46 +16,14 @@
{{ $finalContent := $altContent | replaceRE $reAltTitleIn $reAltTitleOut | safeHTML }}
{{ $finalContent }}
</div>
</article>
<!-- related posts with the same tags -->
{{ $related := first 3 (where (where .Site.RegularPages.ByDate.Reverse ".Params.tags" "intersect" .Params.tags) "Permalink" "!=" .Permalink) }}
{{ if $related }}
<h4 class="page-header"><svg class='icon icon-text'><use xlink:href='#news'></use></svg>Related Articles</h4>
<div class="text-justify">
{{ range $related }} {{ partial "related-item" . }} {{ end }}
</div>
<hr/>
{{ end }}
<!-- commenting part -->
{{ if (not .Params.disableComments) }}
<h4 class="page-header"><svg class='icon icon-text'><use xlink:href='#discuss'></use></svg>
{{ if eq "essays" .Section }}
Discussieer mee
{{ else }}
Join the Discussion
{{ end }}
</h4>
{{- if (ne hugo.Environment "development") }}
<script defer src="https://commento.brainbaking.com/js/commento.js"></script>
<script src="https://commento.brainbaking.com/js/count.js"></script>
<div id="commento"></div>
{{- else }}
(localhost, comments disabled)
{{- end }}
{{ end }}
<h4 class="page-header">&nbsp;</h4>
<svg class='icon icon-text'><use xlink:href='#up'></use></svg><a href="#top">Top</a>
{{ partial "single-related" . }}
{{ partial "single-comments" . }}
<footer>
<svg class='icon icon-text'><use xlink:href='#up'></use></svg><a href="#top">Top</a>
</footer>
</main>
{{ partial "footer.html" . }}

15
themes/brainbaking-minimal/layouts/_default/terms.html
View File

@ -1,19 +1,20 @@
{{ partial "header" . }}
{{ partial "bigimg" . }}
<main>
<main class="list">
<h1>
<svg class='icon'><use xlink:href="#{{ .Params.icontag }}"></use></svg>&nbsp;{{ .Title }}
</h1>
<header>
<h1>
<svg class='icon'><use xlink:href="#{{ .Params.icontag }}"></use></svg>&nbsp;{{ .Title }}
</h1>
</header>
<hr/>
{{ with .Content }}
<div class="text-justify">
<article>
{{ . }}
</div>
</article>
{{ end }}
<div class="list">

11
themes/brainbaking-minimal/layouts/partials/related-item.html
View File

@ -1,11 +0,0 @@
<div class="item">
<h4><a href="{{ .RelPermalink }}">{{ .Title }}</a></h4>
{{ .Date.Format (.Site.Params.dateFormat | default "2 January 2006") | $.Scratch.Set "subtitle" }}
{{ with .Description }} {{ $.Scratch.Set "subtitle" . }} {{ end }}
{{ if isset $.Params "subtitle" }}
{{ .Params.subtitle }} <span style="color: lightgrey;"><svg class='icon icon-text'><use xlink:href='#cal1'></use></svg> {{ $.Scratch.Get "subtitle" }}</span>
{{ end }}
</div>

19
themes/brainbaking-minimal/layouts/partials/single-comments.html Normal file
View File

@ -0,0 +1,19 @@
{{ if (not .Params.disableComments) }}
<article>
<h4 class="page-header"><svg class='icon icon-text'><use xlink:href='#discuss'></use></svg>
{{ if eq "essays" .Section }}
Discussieer mee
{{ else }}
Join the Discussion
{{ end }}
</h4>
{{- if (ne hugo.Environment "development") }}
<script defer src="https://commento.brainbaking.com/js/commento.js"></script>
<script src="https://commento.brainbaking.com/js/count.js"></script>
<div id="commento"></div>
{{- else }}
(localhost, comments disabled)
{{- end }}
</article>
{{ end }}

28
themes/brainbaking-minimal/layouts/partials/list-item.html → themes/brainbaking-minimal/layouts/partials/single-header.html
View File

@ -1,4 +1,4 @@
<div class="item">
<header>
{{ if .Title }}
<h1>
@ -13,20 +13,18 @@
{{ if isset .Params "subtitle" }}
<h2>{{ .Params.subtitle }}</h2>
<h3>
<span style="color: grey;">
{{ if isset .Params "date" }}
<span title="Created Date">
<svg class='icon icon-text'><use xlink:href='#cal1'></use></svg>
{{ .Date.Format (.Site.Params.dateFormat | default "2 January 2006") }}
{{ if isset .Params "date" }}
<time datetime='{{ .Date.Format "2006-01-02" }}'>
<svg class='icon icon-text'><use xlink:href='#cal1'></use></svg>
{{ .Date.Format (.Site.Params.dateFormat | default "2 January 2006") }}
</time>
{{ end }}
{{ if (not .Params.disableComments) }}
&nbsp;|&nbsp;
<span title="Comments">
<svg class='icon icon-text'><use xlink:href='#discuss'></use></svg><a href="{{ .Permalink }}#commento"></a>
</span>
{{ end }}
{{ if (not .Params.disableComments) }}
&nbsp;|&nbsp;
<span title="Comments">
<svg class='icon icon-text'><use xlink:href='#discuss'></use></svg><a href="{{ .Permalink }}#commento"></a>
</span>
{{ end }}
</span>
{{ end }}
</h3>
{{ end }}
@ -38,4 +36,4 @@
<a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}"><kbd class="item-tag">{{ . }}</kbd></a>
{{ end }}
</div>
</header>

20
themes/brainbaking-minimal/layouts/partials/single-related.html Normal file
View File

@ -0,0 +1,20 @@
{{ $related := first 3 (where (where .Site.RegularPages.ByDate.Reverse ".Params.tags" "intersect" .Params.tags) "Permalink" "!=" .Permalink) }}
{{ if $related }}
<h4 class="page-header"><svg class='icon icon-text'><use xlink:href='#news'></use></svg>Related Articles</h4>
{{ range $related }}
<article>
<h4><a href="{{ .RelPermalink }}">{{ .Title }}</a></h4>
{{ if isset $.Params "subtitle" }}
{{ .Params.subtitle }}
<time datetime='{{ .Date.Format "2006-01-02" }}'>
<svg class='icon icon-text'><use xlink:href='#cal1'></use></svg>
{{ .Date.Format (.Site.Params.dateFormat | default "2 January 2006") }}
</time>
{{ end }}
</article>
{{ end }}
<hr/>
{{ end }}