migrate to sass

This commit is contained in:
wgroeneveld 2020-05-27 21:20:01 +02:00
parent f0ce6be518
commit deb97bd39f
30 changed files with 718 additions and 892 deletions

1
.gitignore vendored
View File

@ -5,5 +5,6 @@ public/
.gradle/
out/
build/
resources/
*.class

View File

@ -22,9 +22,6 @@ enableGitInfo = true
disableComments = true
accent = "purple"
showBorder = true
twitter = "woutergroenev"
backgroundColor = "white"
font = "Source Serif Pro"
copyright = "No <i class='fa fa-copyright'></i> reserved - sharing is caring. <i class='fa fa-github'></i> <a href='https://github.com/wgroeneveld/brainbaking/'>Hack away</a>! <i class='fa fa-lightbulb-o'></i> <a href='/'>Brain Baking</a>"
[Author]

View File

@ -1,58 +0,0 @@
{{ partial "header" . }}
<main>
{{ if .Title }}
<h1>
<i class='fa {{ .Params.icontag }}'></i>&nbsp;{{ .Title }}
</h1>
<hr/>
{{ end }}
{{ with .Content }}
<div class="text-justify">
{{ . }}
</div>
{{ end }}
{{ if (not .Params.disableList) }}
<div class="list">
{{ range .Paginator.Pages.GroupByDate "2006" "desc" }}
<h2>{{ .Key }}</h2>
{{ range .Pages.GroupByDate "Jan" }}
<h3>{{ .Key }}</h3>
<ul class="list-ul">
{{ range .Pages.ByDate.Reverse }}
<li>
<span class="list-date">{{ .Date.Format ("02") }}</span>
<div class="list-title">
<h4>
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
</h4>
{{ .Params.subtitle }}
</div>
{{ if isset .Params "tags" }}
<div class="list-tags">
<i class='fa fa-tags' style='color: grey;'></i>&nbsp;
{{ range .Params.tags }}
<a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}"><kbd class="item-tag">{{ . }}</kbd></a>
{{ end }}
</div>
{{ end }}
</li>
{{ end }}
</ul>
{{ end }}
{{ end }}
</div>
{{ end }}
{{ template "_internal/pagination.html" . }}
</main>
{{ partial "footer" . }}

View File

@ -1,56 +0,0 @@
{{ partial "header" . }}
{{ if .Params.bigimg }}
<div class="jumbotron big-img" style='background-image: url("{{.Params.bigimg}}");'>
<div class="container">
&nbsp;
</div>
</div>
{{ end }}
<main>
<a name="top"></a>
{{ partial "list-item" . }}
<br> <div class="text-justify">{{ .Content }}</div>
<!-- related posts with the same tags -->
{{ $related := first 3 (where (where (where .Site.Pages.ByDate.Reverse ".Type" "==" "post") ".Params.tags" "intersect" .Params.tags) "Permalink" "!=" .Permalink) }}
{{ if $related }}
<h4 class="page-header"><i class="fa fa-newspaper-o"></i>&nbsp;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"><i class="fa fa-comments-o"></i>&nbsp;
{{ 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>
{{- end }}
{{ end }}
<h4 class="page-header">&nbsp;</h4>
<i class='fa fa-arrow-circle-o-up'></i>&nbsp;<a href="#top">Top</a>
</main>
{{ partial "footer.html" . }}

View File

@ -1,54 +0,0 @@
{{ partial "header" . }}
<main>
<h2><i class='fa {{ .Params.icontag }}'></i>&nbsp;{{ .Title }}</h2>
<hr/>
{{ with .Content }}
<div class="text-justify">
{{ . }}
</div>
{{ end }}
<div class="list">
<!-- https://discourse.gohugo.io/t/lists-of-content-divided-by-posts-first-letter/8534/2 - create a list with all uppercase letters -->
{{ $letters := split "ABCDEFGHIJKLMNOPQRSTUVWXYZ" "" }}
<!-- range all pages sorted by their title -->
{{ range .Data.Pages.ByTitle }}
<!-- get the first character of each title. Assumes that the title is never empty! -->
{{ $firstChar := substr .Title 0 1 | upper }}
<!-- in case $firstChar is a letter -->
{{ if $firstChar | in $letters }}
<!-- get the current letter -->
{{ $curLetter := $.Scratch.Get "curLetter" }}
<!-- if $curLetter isn't set or the letter has changed -->
{{ if ne $firstChar $curLetter }}
<!-- update the current letter and print it -->
</ul>
<hr style="clear: both;"/>
{{ $.Scratch.Set "curLetter" $firstChar }}
<h4 style="float: left; color: grey;">
<i class='fa fa-tag'></i>&nbsp;{{ $firstChar }}
</h4>
<ul style="text-align: left; float: left; margin-left: 20px; width: 80%; list-style-type: none; border-left: #eee 1px solid;">
{{ end }}
<li>
<h4>
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
</h4>
</li>
{{ end }}
{{ end }}
</div>
</main>
{{ partial "footer" . }}

View File

@ -1,28 +0,0 @@
<style>
html body {
font-family: '{{ .Site.Params.font }}', sans-serif;
background-color: {{ .Site.Params.backgroundColor | default "white" }};
}
:root {
--accent: {{ if .Params.accent }}{{ .Params.accent }}{{ else }}{{ .Site.Params.accent }}{{ end }};
--border-width: {{ if .Site.Params.showBorder | default false }} 5px {{ else }} 0 {{ end }};
}
</style>
<!-- main -->
<link rel="stylesheet" href="{{ "css/main.css" | absURL }}">
<!-- custom -->
{{ range .Site.Params.css }} <link rel="stylesheet" href="{{ . | absURL }}"> {{ end }}
<!-- google fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family={{ .Site.Params.font }}">
<!-- bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- font awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

View File

@ -1,57 +0,0 @@
<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
<head>
{{ partial "head-open" . }}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ .Title }}</title>
{{ if .Site.Params.favicon }}
<link rel="icon" href="{{ .Site.Params.favicon | absURL }}">
{{ end }}
{{ partial "css" . }} {{ partial "js" . }} {{ hugo.Generator }}
{{ with .OutputFormats.Get "RSS" }}
<link href="{{ .RelPermalink }}" rel="alternate" type="application/rss+xml" title="Brain Baking" />
<link href="{{ .RelPermalink }}" rel="feed" type="application/rss+xml" title="Brain Baking" />
{{ end }}
</head>
<body>
{{ partial "body-open" . }}
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand visible-xs" href="#">{{ .Title }}</a>
<button class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
{{ if .Site.Menus.main }}
<ul class="nav navbar-nav">
{{ range sort .Site.Menus.main }}
<li><a href="{{ .URL }}">{{ .Pre }}&nbsp;{{ .Name }}</a></li>
{{ end }}
</ul>
{{ end }}
{{ if .Site.Menus.mainright }}
<ul class="nav navbar-nav navbar-right">
{{ range sort .Site.Menus.mainright }}
<li><a href="{{ .URL }}">{{ .Pre }}&nbsp;{{ .Name }}</a></li>
{{ end }}
</ul>
{{ end }}
</div>
</div>
</nav>

View File

@ -1,39 +0,0 @@
<div class="item">
{{ if .Title }}
<h3>
{{ with .Params.icontag }}
<i class='fa {{ . }}'></i>&nbsp;
{{ end }}
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
</h3>
{{ end }}
{{ .Date.Format (.Site.Params.dateFormat | default "2 January 2006") | $.Scratch.Set "subtitle" }}
{{ with .Description }} {{ $.Scratch.Set "subtitle" . }} {{ end }}
{{ if isset $.Params "subtitle" }}
<h4>{{ .Params.subtitle }}</h4>
<h5>
<span style="color: grey;">
<span title="Created Date">
<i class='fa fa-calendar'></i>&nbsp;{{ $.Scratch.Get "subtitle" }}
</span>&nbsp;|&nbsp;
<span title="Last Modified Date">
<i class='fa fa-calendar-check-o'></i>&nbsp;{{ .Lastmod.Format (.Site.Params.dateFormat | default "2 January 2006") }}
</span>&nbsp;|&nbsp;
<span title="Comments">
<i class="fa fa-comments-o"></i>&nbsp;<a href="{{ .Permalink }}#commento"></a>
</span>
</span>
</h5>
{{ end }}
{{ if isset $.Params "tags" }}
<i class='fa fa-tags' style='color: grey;'></i>&nbsp;
{{ end }}
{{ range .Params.tags }}
<a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}"><kbd class="item-tag">{{ . }}</kbd></a>
{{ end }}
</div>

View File

@ -1,390 +0,0 @@
.list {
text-align: left;
padding-left: 4rem;
}
.list h2 {
border-top: 1px solid #eee;
padding-top: 1rem;
}
.list h3 {
color: #999;
}
.list-ul {
list-style: none;
margin: 0;
padding: 0;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.list h3 {
float: left;
margin-top: 1.5rem;
}
.list-ul {
padding-left: 7rem;
}
}
.list-ul li {
padding: 1rem;
}
.list-ul .list-date {
font-weight: normal;
padding-left: 0.6rem;
padding-right: 0.6rem;
color: white;
background-color: var(--accent);
border-radius: 2rem;
margin-top: 1.5rem;
float: left;
}
.list-ul div {
margin-left: 60px;
}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
background-color: white !important;
border-color: var(--accent) !important;
}
/** commento specific **/
.commento-root .commento-round-check input[type=checkbox]:checked+label:before,
.commento-root .commento-round-check input[type=radio]:checked+label:before {
background: var(--accent) !important;
border: 1px solid var(--accent) !important;
}
.commento-root .commento-markdown-help tr td pre {
padding: 0 !important;
}
.commento-button {
color: white !important;
background: var(--accent) !important;
}
.commento-google-button:before {
content: "\f1a0";
font-family: FontAwesome;
display: inline-block;
padding-right: 3px;
vertical-align: middle;
}
.commento-github-button:before {
content: "\f09b";
font-family: FontAwesome;
display: inline-block;
padding-right: 3px;
vertical-align: middle;
}
.commento-twitter-button:before {
content: "\f099";
font-family: FontAwesome;
display: inline-block;
padding-right: 3px;
vertical-align: middle;
}
.commento-oauth-buttons button {
width: auto !important;
}
.commento-root a,
.commento-email-button {
color: var(--accent) !important;
}
.commento-name {
font-size: 14pt !important;
}
.commento-root .commento-card .commento-body p,
.commento-root textarea {
font-size: 12pt !important;
}
.commento-root *,
.commento-root-font * {
font-family: 'Source Serif Pro', sans-serif !important;
line-height: 1.7 !important;
color: #333;
text-align: left !important;
}
/** index.html **/
ul {
list-style: circle;
}
div.highlight {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.text-justify img {
display: block;
margin-left: auto;
margin-right: auto;
border: 1px solid #ccc !important;
border-radius: 4px;
margin-top: 1.5em;
margin-bottom: 1.5em;
}
figure img {
margin-bottom: 0;
}
figure {
margin-bottom: 1.5em !important;
}
figure figcaption {
margin-top: 1rem !important;
}
figure figcaption h4, figure figcaption p {
text-align: center;
margin-top: 0 !important;
font-size: 1.7rem !important;
font-style: italic;
font-weight: normal;
color: #aaa;
}
.avatar-container {
width: 50px;
margin-left: 45px;
}
.avatar-container .avatar-img-border {
width: 100%;
border-radius: 50%;
margin-left: -50%;
display: inline-block;
box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}
.avatar-container .avatar-img {
width: 100%;
border-radius: 50%;
display: block;
}
.intro .freshly-baked {
visibility: hidden;
}
.intro {
margin-top: -150px;
}
@media only screen and (min-width: 500px) {
.intro .freshly-baked {
visibility: visible;
}
}
@media only screen and (min-width: 768px) {
.intro {
margin-top: -40px;
}
.avatar-container {
width: 100px;
}
.avatar-container .avatar-img-border {
width: 100%;
box-shadow: 1px 1px 2px rgba(0, 0, 0, .8);
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .8);
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, .8);
}
.avatar-container .avatar-img {
width: 100%;
}
}
/** general **/
/* -- Typography overrides bootstrap.
-- default CSS included, can't override less settings from https://getbootstrap.com/docs/3.3/customize/ */
main, blockquote {
font-size: 14pt !important;
line-height: 1.7;
}
nav {
font-family: 'Open Sans', sans-serif !important;
font-size: 14px !important;
line-height: 1.4 !important;
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.8 !important;
font-weight: bold !important;
}
h2 {
font-size: 26pt !important;
}
h3 {
font-size: 22pt !important;
}
h4 {
font-size: 16pt !important;
}
h5 {
font-size: 14pt !important;
}
h4 a {
font-weight: normal;
}
pre {
font-size: 12pt !important;
}
@media (max-width: 767px) {
main, blockquote {
font-size: 12pt !important;
}
h2 {
font-size: 24pt !important;
}
h3 {
font-size: 20pt !important;
}
h4 {
font-size: 14pt !important;
}
h5 {
font-size: 13pt !important;
}
pre {
font-size: 10pt !important;
}
}
/* -- voor 20'+ breedbeeldschermen */
@media only screen and (min-width: 1600px) {
/* de main content verhogen */
main {
max-width: 930px !important;
}
.big-img .container {
height: 250px !important;
}
}
/* -- voor fatsoenlijke schermen */
@media only screen and (min-width: 768px) {
/* indien header image, hoogte vergroten */
.big-img .container {
height: 200px;
}
}
blockquote {
color: #888 !important;
border-left: 5px solid var(--accent) !important;
}
main {
padding-top: 0 !important;
}
main .text-justify p {
margin: 0 0 20px !important;
}
main .text-justify blockquote p {
margin: 0 !important;
}
a:link, a:visited {
color: var(--accent) !important;
}
.big-img {
background: no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
border-top: 2px solid lightgray;
border-bottom: 1px solid var(--accent);
}
.item-tag {
color: var(--accent);
background-color: white !important;
border: 1px solid var(--accent);
font-size: 1.3rem;
}
/* --- goodreads widget styles --- */
.goodreadswidget {
border-bottom: 3px solid var(--accent);
padding: 0px;
padding-bottom: 10px;
}
.goodreadswidget h2 {
visibility: hidden;
display: none;
}
.goodreadswidget .gr_grid_branding {
padding-right: 20px;
font-size: 14pt !important;
}
@media (min-width: 768px) {
.gr_grid_book_container {
height: 600px !important;
}
}
.gr_grid_book_container {
float: left;
width: 25%;
height: 300px;
padding: 5px;
overflow: hidden;
}
.gr_grid_book_container img {
width: 100%;
height: 100%;
}
.gr_grid_book_container:hover img {
opacity: 0.3;
}
.gr_grid_book_container img:hover {
background: rgba(100, 100, 100, 0.7);
}

View File

@ -0,0 +1,387 @@
html body
font-family: 'Source Serif Pro', sans-serif
.list
text-align: left
padding-left: 4rem
.list h2
border-top: 1px solid #eee
padding-top: 1rem
.list h3
color: #999
.list-ul
list-style: none
margin: 0
padding: 0
padding-bottom: 4rem
@media (min-width: 768px)
.list h3
float: left
margin-top: 1.5rem
.list-ul
padding-left: 7rem
.list-ul li
padding: 1rem
.list-ul .list-date
font-weight: normal
padding-left: 0.6rem
padding-right: 0.6rem
color: white
background-color: var(--accent)
border-radius: 2rem
margin-top: 1.5rem
float: left
.list-ul div
margin-left: 60px
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover
background-color: white !important
border-color: var(--accent) !important
/** commento specific **/
.commento-root .commento-round-check input[type=checkbox]:checked+label:before,
.commento-root .commento-round-check input[type=radio]:checked+label:before
background: var(--accent) !important
border: 1px solid var(--accent) !important
.commento-root .commento-markdown-help tr td pre
padding: 0 !important
.commento-button
color: white !important
background: var(--accent) !important
.commento-google-button:before
content: "\f1a0"
font-family: FontAwesome
display: inline-block
padding-right: 3px
vertical-align: middle
.commento-github-button:before
content: "\f09b"
font-family: FontAwesome
display: inline-block
padding-right: 3px
vertical-align: middle
.commento-twitter-button:before
content: "\f099"
font-family: FontAwesome
display: inline-block
padding-right: 3px
vertical-align: middle
.commento-oauth-buttons button
width: auto !important
.commento-root a,
.commento-email-button
color: var(--accent) !important
.commento-name
font-size: 14pt !important
.commento-root .commento-card .commento-body p,
.commento-root textarea
font-size: 12pt !important
.commento-root *,
.commento-root-font *
font-family: 'Source Serif Pro', sans-serif !important
line-height: 1.7 !important
color: #333
text-align: left !important
/** index.html **/
ul
list-style: circle
div.highlight
padding-top: 1.5rem
padding-bottom: 1.5rem
.text-justify img
display: block
margin-left: auto
margin-right: auto
border: 1px solid #ccc !important
border-radius: 4px
margin-top: 1.5em
margin-bottom: 1.5em
figure img
margin-bottom: 0
figure
margin-bottom: 1.5em !important
figure figcaption
margin-top: 1rem !important
figure figcaption h4, figure figcaption p
text-align: center
margin-top: 0 !important
font-size: 1.7rem !important
font-style: italic
font-weight: normal
color: #aaa
.avatar-container
width: 50px
margin-left: 45px
.avatar-container .avatar-img-border
width: 100%
border-radius: 50%
margin-left: -50%
display: inline-block
box-shadow: 0 0 8px rgba(0, 0, 0, .8)
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .8)
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8)
.avatar-container .avatar-img
width: 100%
border-radius: 50%
display: block
.intro .freshly-baked
visibility: hidden
.intro
margin-top: -150px
@media only screen and (min-width: 500px)
.intro .freshly-baked
visibility: visible
@media only screen and (min-width: 768px)
.intro
margin-top: -40px
.avatar-container
width: 100px
.avatar-container .avatar-img-border
width: 100%
box-shadow: 1px 1px 2px rgba(0, 0, 0, .8)
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .8)
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, .8)
.avatar-container .avatar-img
width: 100%
/** general **/
main, blockquote
font-size: 14pt !important
line-height: 1.7
nav
font-family: 'Open Sans', sans-serif !important
font-size: 14px !important
line-height: 1.4 !important
h1, h2, h3, h4, h5, h6
line-height: 1.8 !important
font-weight: bold !important
h2
font-size: 26pt !important
h3
font-size: 22pt !important
h4
font-size: 16pt !important
h5
font-size: 14pt !important
h4 a
font-weight: normal
pre
font-size: 12pt !important
@media (max-width: 767px)
main, blockquote
font-size: 12pt !important
h2
font-size: 24pt !important
h3
font-size: 20pt !important
h4
font-size: 14pt !important
h5
font-size: 13pt !important
pre
font-size: 10pt !important
/* -- voor 20'+ breedbeeldschermen */
@media only screen and (min-width: 1600px)
main
max-width: 930px !important
.big-img .container
height: 250px !important
/* -- voor fatsoenlijke schermen */
@media only screen and (min-width: 768px)
/* indien header image, hoogte vergroten */
.big-img .container
height: 200px
blockquote
color: #888 !important
border-left: 5px solid var(--accent) !important
main
padding-top: 0 !important
main .text-justify p
margin: 0 0 20px !important
main .text-justify blockquote p
margin: 0 !important
a:link, a:visited
color: var(--accent) !important
.big-img
background: no-repeat center center
-webkit-background-size: cover
-moz-background-size: cover
background-size: cover
-o-background-size: cover
border-top: 2px solid lightgray
border-bottom: 1px solid var(--accent)
.item-tag
color: var(--accent)
background-color: white !important
border: 1px solid var(--accent)
font-size: 1.3rem
/* --- goodreads widget styles --- */
.goodreadswidget
border-bottom: 3px solid var(--accent)
padding: 0px
padding-bottom: 10px
.goodreadswidget h2
visibility: hidden
display: none
.goodreadswidget .gr_grid_branding
padding-right: 20px
font-size: 14pt !important
@media (min-width: 768px)
.gr_grid_book_container
height: 600px !important
.gr_grid_book_container
float: left
width: 25%
height: 300px
padding: 5px
overflow: hidden
.gr_grid_book_container img
width: 100%
height: 100%
.gr_grid_book_container:hover img
opacity: 0.3
.gr_grid_book_container img:hover
background: rgba(100, 100, 100, 0.7)

View File

@ -0,0 +1,15 @@
/* latin-ext */
@font-face
font-family: 'Source Serif Pro'
font-style: normal
font-weight: 400
src: local('Source Serif Pro'), local('SourceSerifPro-Regular'), url(/css/sourceserifpro-latin-ext.woff2) format('woff2')
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
/* latin */
@font-face
font-family: 'Source Serif Pro'
font-style: normal
font-weight: 400
src: local('Source Serif Pro'), local('SourceSerifPro-Regular'), url(/css/sourceserifpro-latin.woff2) format('woff2')
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD

View File

@ -0,0 +1,100 @@
html, body
height: 100%
body
padding-top: 55px
display: flex
text-align: center
flex-direction: column
main
margin: auto
padding: 25px
flex: 1 0 auto
max-width: 750px
/*footer*/
.copyright
margin: 15px 0
/*home page*/
.intro
transform: translateY(22vh)
.intro > h1
color: #212121
font-size: 12vh
.intro > h2
color: #757575
font-size: 3vmin
.intro > .profile
width: 10vh
height: 10vh
border-radius: 50%
/*apply accent colour to links*/
a:link, a:visited
color: var(--accent)
a.icon:hover
text-decoration: none
a:hover
color: var(--accent) !important
/*paginator at bottom of list view*/
.pages
padding: 15px 0
.pages-icon
padding: 0 15px
/*list item for posts and projects*/
.item
padding: 10px 0
.item-tag
background-color: var(--accent)
/*navigation bar icons*/
.navbar-icon
font-size: 125%
display: inline-block !important
/*coloured borders at top and bottom of the page*/
.navbar.navbar-default
border-top: var(--border-width) solid var(--accent)
footer
border-bottom: var(--border-width) solid var(--accent)
img
max-width: 100%

View File

@ -0,0 +1,3 @@
@import 'fonts'
@import 'minimal'
@import 'brainbaking'

View File

@ -2,12 +2,57 @@
<main>
<h2>{{ .Title }}</h2>
{{ if .Title }}
<h1>
<i class='fa {{ .Params.icontag }}'></i>&nbsp;{{ .Title }}
</h1>
<hr/>
{{ end }}
{{ with .Content }}
<div class="text-justify">
{{ . }}
</div>
{{ end }}
{{ if (not .Params.disableList) }}
<div class="list">
{{ range .Paginator.Pages.GroupByDate "2006" "desc" }}
<h2>{{ .Key }}</h2>
{{ range .Pages.GroupByDate "Jan" }}
<h3>{{ .Key }}</h3>
<ul class="list-ul">
{{ range .Pages.ByDate.Reverse }}
<li>
<span class="list-date">{{ .Date.Format ("02") }}</span>
<div class="list-title">
<h4>
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
</h4>
{{ .Params.subtitle }}
</div>
{{ if isset .Params "tags" }}
<div class="list-tags">
<i class='fa fa-tags' style='color: grey;'></i>&nbsp;
{{ range .Params.tags }}
<a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}"><kbd class="item-tag">{{ . }}</kbd></a>
{{ end }}
</div>
{{ end }}
</li>
{{ end }}
</ul>
{{ end }}
{{ end }}
</div>
{{ end }}
{{ template "_internal/pagination.html" . }}
{{ range (.Paginator 5).Pages }} {{ partial "list-item" . }} {{ end }}
</main>
{{ partial "paginator" . }}
{{ partial "footer" . }}

View File

@ -1,7 +1,16 @@
{{ partial "header" . }}
{{ if .Params.bigimg }}
<div class="jumbotron big-img" style='background-image: url("{{.Params.bigimg}}");'>
<div class="container">
&nbsp;
</div>
</div>
{{ end }}
<main>
<a name="top"></a>
{{ partial "list-item" . }}
<br> <div class="text-justify">{{ .Content }}</div>
@ -11,19 +20,36 @@
{{ if $related }}
<h4 class="page-header">Related</h4>
<h4 class="page-header"><i class="fa fa-newspaper-o"></i>&nbsp;Related Articles</h4>
{{ range $related }} {{ partial "list-item" . }} {{ end }}
<div class="text-justify">
{{ range $related }} {{ partial "related-item" . }} {{ end }}
</div>
<hr/>
{{ end }}
{{ if and .Site.DisqusShortname (not .Params.disableComments) }}
<!-- commenting part -->
{{ if (not .Params.disableComments) }}
<h4 class="page-header"><i class="fa fa-comments-o"></i>&nbsp;
{{ if eq "essays" .Section }}
Discussieer mee
{{ else }}
Join the Discussion
{{ end }}
</h4>
<h4 class="page-header">Comments</h4>
{{ template "_internal/disqus.html" . }}
{{- 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>
{{- end }}
{{ end }}
<h4 class="page-header">&nbsp;</h4>
<i class='fa fa-arrow-circle-o-up'></i>&nbsp;<a href="#top">Top</a>
</main>

View File

@ -2,12 +2,53 @@
<main>
<h2>{{ .Title }}</h2>
{{ range (.Paginator 5).Pages }} {{ partial "list-item" . }} {{ end }}
<h2><i class='fa {{ .Params.icontag }}'></i>&nbsp;{{ .Title }}</h2>
<hr/>
{{ with .Content }}
<div class="text-justify">
{{ . }}
</div>
{{ end }}
<div class="list">
<!-- https://discourse.gohugo.io/t/lists-of-content-divided-by-posts-first-letter/8534/2 - create a list with all uppercase letters -->
{{ $letters := split "ABCDEFGHIJKLMNOPQRSTUVWXYZ" "" }}
<!-- range all pages sorted by their title -->
{{ range .Data.Pages.ByTitle }}
<!-- get the first character of each title. Assumes that the title is never empty! -->
{{ $firstChar := substr .Title 0 1 | upper }}
<!-- in case $firstChar is a letter -->
{{ if $firstChar | in $letters }}
<!-- get the current letter -->
{{ $curLetter := $.Scratch.Get "curLetter" }}
<!-- if $curLetter isn't set or the letter has changed -->
{{ if ne $firstChar $curLetter }}
<!-- update the current letter and print it -->
</ul>
<hr style="clear: both;"/>
{{ $.Scratch.Set "curLetter" $firstChar }}
<h4 style="float: left; color: grey;">
<i class='fa fa-tag'></i>&nbsp;{{ $firstChar }}
</h4>
<ul style="text-align: left; float: left; margin-left: 20px; width: 80%; list-style-type: none; border-left: #eee 1px solid;">
{{ end }}
<li>
<h4>
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
</h4>
</li>
{{ end }}
{{ end }}
</div>
</main>
{{ partial "paginator" . }}
{{ partial "footer" . }}

View File

@ -1,31 +1,18 @@
<style>
html body {
font-family: '{{ .Site.Params.font }}', sans-serif;
background-color: {{ .Site.Params.backgroundColor | default "white" }};
}
:root {
--accent: {{ .Site.Params.accent | default "#2196F3" }};
--border-width: {{ if .Site.Params.showBorder | default false }} 5px {{ else }} 0 {{ end }};
}
:root {
--accent: {{ if .Params.accent }}{{ .Params.accent }}{{ else }}{{ .Site.Params.accent }}{{ end }};
--border-width: {{ if .Site.Params.showBorder | default false }} 5px {{ else }} 0 {{ end }};
}
</style>
<!-- main -->
<link rel="stylesheet" href="{{ "css/main.css" | absURL }}">
<!-- custom -->
{{ range .Site.Params.css }} <link rel="stylesheet" href="{{ . | absURL }}"> {{ end }}
<!-- google fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family={{ .Site.Params.font }}">
<!-- highlight.js -->
{{ if .Site.Params.highlight | default false }} <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/{{ .Site.Params.highlightStyle | default "default" }}.min.css"> {{ end }}
{{- $options := (dict "targetPath" "css/styles.css" "outputStyle" "compressed" "enableSourceMap" "true") -}}
{{- $styles := resources.Get "sass/main.sass" | resources.ExecuteAsTemplate "main.sass" . | resources.ToCSS $options | resources.Fingerprint "sha512" }}
<link rel = 'stylesheet' href = '{{ $styles.Permalink }}' integrity = '{{ $styles.Data.Integrity }}'>
<!-- bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- font awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

View File

@ -1,4 +1,5 @@
<link rel="stylesheet" href="{{ "css/brainbaking.css" | absURL }}">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- meta data tags, open graph -->
{{ if .Params.subtitle }}
@ -92,20 +93,3 @@
}
</script>
{{- if (ne hugo.Environment "development") }}
<!-- Fathom - simple website analytics - https://github.com/usefathom/fathom -->
<script>
(function(f, a, t, h, o, m){
a[h]=a[h]||function(){
(a[h].q=a[h].q||[]).push(arguments)
};
o=f.createElement('script'),
m=f.getElementsByTagName('script')[0];
o.async=1; o.src=t; o.id='fathom-script';
m.parentNode.insertBefore(o,m)
})(document, window, 'https://fathom.brainbaking.com/tracker.js', 'fathom');
fathom('set', 'siteId', '{{ .Site.Params.fathomid }}');
fathom('trackPageview');
</script>
<!-- / Fathom -->
{{- end }}

View File

@ -1,2 +0,0 @@
<!-- Intentionally left empty. Override this partial in your website to insert code just after the
opening <head> tag. For example, to install Google Tag Manager. -->

View File

@ -1,39 +1,17 @@
<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
<head>
{{ partial "head-open" . }}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{{ partial "head-meta" . }}
<title>{{ .Title }}</title>
{{ if .Site.Params.favicon }}
<link rel="icon" href="{{ .Site.Params.favicon | absURL }}">
<link rel="icon" href="{{ .Site.Params.favicon | absURL }}">
{{ end }}
{{ partial "css" . }} {{ partial "js" . }} {{ .Hugo.Generator }}
{{ if .RSSLink }}
<link href="{{ .RSSLink }}" rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" />
<link href="{{ .RSSLink }}" rel="feed" type="application/rss+xml" title="{{ .Site.Title }}" />
{{ end }}
{{ if .Site.GoogleAnalytics }}
<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id={{ .Site.GoogleAnalytics }}"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments)};
gtag('js', new Date());
gtag('config', '{{ .Site.GoogleAnalytics }}');
</script>
{{ partial "css" . }} {{ partial "js" . }} {{ hugo.Generator }}
{{ with .OutputFormats.Get "RSS" }}
<link href="{{ .RelPermalink }}" rel="alternate" type="application/rss+xml" title="Brain Baking" />
<link href="{{ .RelPermalink }}" rel="feed" type="application/rss+xml" title="Brain Baking" />
{{ end }}
</head>
{{ if .Site.Params.MathJax | default true }}
<!-- adds MathJax support -->
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
{{ end }}
<body>
{{ partial "body-open" . }}
<nav class="navbar navbar-default navbar-fixed-top">
@ -57,15 +35,15 @@
{{ if .Site.Menus.main }}
<ul class="nav navbar-nav">
{{ range sort .Site.Menus.main }}
<li><a href="{{ .URL }}">{{ .Name }}</a></li>
<li><a href="{{ .URL }}">{{ .Pre }}&nbsp;{{ .Name }}</a></li>
{{ end }}
</ul>
{{ end }}
{{ if .Site.Menus.icon }}
{{ if .Site.Menus.mainright }}
<ul class="nav navbar-nav navbar-right">
{{ range sort .Site.Menus.icon }}
<li class="navbar-icon"><a href="{{ .URL }}"><i class="fa fa-{{ .Name }}"></i></a></li>
{{ range sort .Site.Menus.mainright }}
<li><a href="{{ .URL }}">{{ .Pre }}&nbsp;{{ .Name }}</a></li>
{{ end }}
</ul>
{{ end }}
@ -74,4 +52,4 @@
</div>
</nav>
</nav>

View File

@ -1,12 +1,24 @@
<!-- custom -->
{{ range .Site.Params.js }} <script src="{{ . | absURL }}"></script> {{ end }}
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- dismiss expanded navigation bar with click -->
<script>$(document).on('click', function() { $('.collapse').collapse('hide'); })</script>
{{- if (ne hugo.Environment "development") }}
<!-- Fathom - simple website analytics - https://github.com/usefathom/fathom -->
<script>
(function(f, a, t, h, o, m){
a[h]=a[h]||function(){
(a[h].q=a[h].q||[]).push(arguments)
};
o=f.createElement('script'),
m=f.getElementsByTagName('script')[0];
o.async=1; o.src=t; o.id='fathom-script';
m.parentNode.insertBefore(o,m)
})(document, window, 'https://fathom.brainbaking.com/tracker.js', 'fathom');
fathom('set', 'siteId', '{{ .Site.Params.fathomid }}');
fathom('trackPageview');
</script>
<!-- / Fathom -->
{{- end }}

View File

@ -1,25 +1,39 @@
<div class="item">
{{ $.Scratch.Set "link" .RelPermalink }}
{{ with .Params.repo }}
{{ $repoHost := default "github" $.Params.repoHost }}
{{ if eq "github" $repoHost }}
{{ printf "https://github.com/%s/%s/" $.Site.Params.githubUsername . | $.Scratch.Set "link" }}
{{ else if eq "gitlab" $repoHost }}
{{ printf "https://gitlab.com/%s/%s/" $.Site.Params.gitlabUsername . | $.Scratch.Set "link" }}
{{ else if eq "bitbucket" $repoHost }}
{{ printf "https://bitbucket.org/%s/%s/" $.Site.Params.bitbucketUsername . | $.Scratch.Set "link" }}
{{ if .Title }}
<h3>
{{ with .Params.icontag }}
<i class='fa {{ . }}'></i>&nbsp;
{{ end }}
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
</h3>
{{ end }}
{{ with .Params.link }} {{ $.Scratch.Set "link" . }} {{ end }}
{{ .Date.Format (.Site.Params.dateFormat | default "January 2, 2006") | $.Scratch.Set "subtitle" }}
{{ .Date.Format (.Site.Params.dateFormat | default "2 January 2006") | $.Scratch.Set "subtitle" }}
{{ with .Description }} {{ $.Scratch.Set "subtitle" . }} {{ end }}
{{ if isset $.Params "subtitle" }}
<h4>{{ .Params.subtitle }}</h4>
<h5>
<span style="color: grey;">
<span title="Created Date">
<i class='fa fa-calendar'></i>&nbsp;{{ $.Scratch.Get "subtitle" }}
</span>&nbsp;|&nbsp;
<span title="Last Modified Date">
<i class='fa fa-calendar-check-o'></i>&nbsp;{{ .Lastmod.Format (.Site.Params.dateFormat | default "2 January 2006") }}
</span>&nbsp;|&nbsp;
<span title="Comments">
<i class="fa fa-comments-o"></i>&nbsp;<a href="{{ .Permalink }}#commento"></a>
</span>
</span>
</h5>
{{ end }}
<h4><a href="{{ .Scratch.Get "link" }}">{{ .Title }}</a></h4>
<h5>{{ $.Scratch.Get "subtitle" }}</h5>
{{ if isset $.Params "tags" }}
<i class='fa fa-tags' style='color: grey;'></i>&nbsp;
{{ end }}
{{ range .Params.tags }}
<a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}"><kbd class="item-tag">{{ . }}</kbd></a>
<a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}"><kbd class="item-tag">{{ . }}</kbd></a>
{{ end }}
</div>

File diff suppressed because one or more lines are too long

View File

@ -1,97 +0,0 @@
html, body {
height: 100%;
}
body {
padding-top: 55px;
display: flex;
text-align: center;
flex-direction: column;
}
main {
margin: auto;
padding: 25px;
flex: 1 0 auto;
max-width: 750px;
}
/*footer*/
.copyright {
margin: 15px 0;
}
/*home page*/
.intro {
transform: translateY(22vh);
}
.intro > h1 {
color: #212121;
font-size: 12vh;
}
.intro > h2 {
color: #757575;
font-size: 3vmin;
}
.intro > .profile {
width: 10vh;
height: 10vh;
border-radius: 50%;
}
/*apply accent colour to links*/
a:link, a:visited {
color: var(--accent) !important;
}
a.icon:hover {
text-decoration: none;
}
a:hover {
color: var(--accent) !important;
}
/*paginator at bottom of list view*/
.pages {
padding: 15px 0;
}
.pages-icon {
padding: 0 15px;
}
/*list item for posts and projects*/
.item {
padding: 10px 0;
}
/*navigation bar icons*/
.navbar-icon {
font-size: 125%;
display: inline-block !important;
}
/*coloured borders at top and bottom of the page*/
.navbar.navbar-default {
border-top: var(--border-width) solid var(--accent);
}
footer {
border-bottom: var(--border-width) solid var(--accent);
}
img {
max-width: 100%;
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long