From e58dcc41038b5c49bb129503bb28c1c0c5745b75 Mon Sep 17 00:00:00 2001 From: Gui Goncalves Date: Sat, 18 Sep 2021 19:15:48 +0100 Subject: [PATCH] Add color scheme, noscript partial --- layouts/_default/baseof.html | 35 +++++++------ layouts/_default/list.html | 24 ++++----- layouts/_default/summary.html | 24 ++++----- layouts/index.html | 15 +++--- layouts/partials/footer.html | 11 +++- layouts/partials/header.html | 20 +++---- layouts/partials/noscript.html | 21 ++++++++ layouts/partials/pagination.html | 16 +++--- layouts/partials/sidebar.html | 24 ++++----- static/css/style.css | 89 ++++++++++++++++++++++++++++++++ static/js/mystify.js | 82 +++++++++++++++++++++++++++++ 11 files changed, 281 insertions(+), 80 deletions(-) create mode 100644 layouts/partials/noscript.html create mode 100644 static/js/mystify.js diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 33e5cda..0ff21e5 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,20 +1,21 @@ - - - - - {{ .Title }} - {{ with .Site.Params.description }}{{ end }} - {{ with .Site.Params.author }}{{ end }} - - {{ with .OutputFormats.Get "RSS" -}} - {{ printf `` .Rel .MediaType.Type .RelPermalink $.Site.Title | safeHTML }} - {{- end }} - - - {{ partial "header" . }} - {{ block "main" . }}{{ end }} - {{ partial "footer" . }} - + + + + + {{ .Title }} + {{ with .Site.Params.description }}{{ end }} + {{ with .Site.Params.author }}{{ end }} + + {{ with .OutputFormats.Get "RSS" -}} + {{ printf `` .Rel .MediaType.Type .RelPermalink $.Site.Title | safeHTML }} + {{- end }} + + + {{ partial "header" . }} + {{ block "main" . }}{{ end }} + {{ partial "footer" . }} + + diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 68fb00c..d4e033a 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,16 +1,16 @@ {{ define "main" }} -
- {{ if or .Title .Content }} -
- {{ with .Title }}

{{ . }}

{{ end }} - {{ with .Content }}
{{ . }}
{{ end }} -
- {{ end }} +
+ {{ if or .Title .Content }} +
+ {{ with .Title }}

{{ . }}

{{ end }} + {{ with .Content }}
{{ . }}
{{ end }} +
+ {{ end }} - {{ range .Paginator.Pages }} - {{ .Render "summary" }} - {{ end }} - {{ partial "pagination.html" . }} -
+ {{ range .Paginator.Pages }} + {{ .Render "summary" }} + {{ end }} + {{ partial "pagination.html" . }} +
{{ partial "sidebar.html" . }} {{ end }} diff --git a/layouts/_default/summary.html b/layouts/_default/summary.html index 9acf434..6d638d1 100644 --- a/layouts/_default/summary.html +++ b/layouts/_default/summary.html @@ -1,13 +1,13 @@ -
-

{{ .Title }}

- - {{ range .Params.tags }} - {{ . }} - {{ end }} -
- {{ .Summary }} - {{ if .Truncated }} - Read more... - {{ end }} -
+
+

{{ .Title }}

+ + {{ range .Params.tags }} + {{ . }} + {{ end }} +
+ {{ .Summary }} + {{ if .Truncated }} + Read more... + {{ end }} +
diff --git a/layouts/index.html b/layouts/index.html index ab01f67..8a1bba5 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,10 +1,9 @@ {{ define "main" }} -
- {{ $paginator := .Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) }} - {{ range $paginator.Pages }} - {{ .Render "summary" }} - {{ end }} - {{ partial "pagination.html" . }} -
-{{ partial "sidebar.html" . }} +
+ {{ $paginator := .Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) }} + {{ range $paginator.Pages }} + {{ .Render "summary" }} + {{ end }} + {{ partial "pagination.html" . }} +
{{ end }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index a34c170..00e4318 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,3 +1,12 @@ diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 384d2bf..4cdd382 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,12 +1,12 @@
- {{ .Site.Title }} - {{ with .Site.Menus.main }} - - {{ end }} + {{ .Site.Title }} + {{ with .Site.Menus.main }} + + {{ end }}
diff --git a/layouts/partials/noscript.html b/layouts/partials/noscript.html new file mode 100644 index 0000000..bec4065 --- /dev/null +++ b/layouts/partials/noscript.html @@ -0,0 +1,21 @@ + + diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html index 79f8053..dd6cc26 100644 --- a/layouts/partials/pagination.html +++ b/layouts/partials/pagination.html @@ -1,9 +1,9 @@ -
-{{ if .Paginator.HasPrev }} - Previous Page -{{ end }} -{{ .Paginator.PageNumber }} of {{ .Paginator.TotalPages }} -{{ if .Paginator.HasNext }} - Next Page -{{ end }} +
+ {{ if .Paginator.HasPrev }} + Previous Page + {{ end }} + {{ .Paginator.PageNumber }} of {{ .Paginator.TotalPages }} + {{ if .Paginator.HasNext }} + Next Page + {{ end }}
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html index 92bbd80..0fd2370 100644 --- a/layouts/partials/sidebar.html +++ b/layouts/partials/sidebar.html @@ -1,14 +1,14 @@ diff --git a/static/css/style.css b/static/css/style.css index e69de29..db7171e 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -0,0 +1,89 @@ +:root { + --bg-color: #ffffea; + --fg-color: #000000; + --accent-color: blue; + --visited-link: initial; +} + +@media (prefers-color-scheme: dark) { + :root { + --bg-color: #01242e; + --fg-color: #dddddd; + --accent-color: #8cc2dd; + --visited-link: #fff; + } +} + +body { + font-size: 1.2em; + font-family: "Go", sans-serif; + background-color: var(--bg-color); + color: var(--fg-color); +} + +main, header, footer { + max-width: 80vh; + margin: 0 auto; +} + +main { + margin-top: 2em; + text-align: justify; +} + +article { + hyphens: auto; +} + +nav > ul { + list-style: none; +} + +nav > ul > li { + display: inline; + margin-right: 1em; +} + +a:link { + color: var(--accent-color); +} + +a:visited { + color: var(--visited-link); +} + +section.footnotes { + margin-top: 4em; +} + +footer { + text-align: center; +} + +.highlight, pre { + font-family: monospace; +} + +h1, h2 { + font-family: "Go Smallcaps", serif; +} + +.read-more { + display: inline-block; +} + +.paginator { + text-align: center; + margin-top: 3em; + font-size: 0.9em; +} + +.post-summary { + margin-top: 2em; +} + +.post-summary > time { + font-size: 0.9em; + text-align: right; + display: block; +} diff --git a/static/js/mystify.js b/static/js/mystify.js new file mode 100644 index 0000000..763c2fb --- /dev/null +++ b/static/js/mystify.js @@ -0,0 +1,82 @@ +ready(() => { + const canvas = document.createElement('canvas'); + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + document.body.appendChild(canvas); + const state = initializeState(canvas); + setInterval(() => update(state), 1000 / 30); +}); + +function update({ paused, ...state }) { + if (paused) { return; } + const { ctx, lines } = state; + + ctx.fillStyle = 'black'; + ctx.globalAlpha = 0.02; + ctx.fillRect(0, 0, state.width, state.height); + ctx.globalAlpha = 1; + + lines.forEach(line => { + let { x1, y1, vx1, vy1, x2, y2, vx2, vy2 } = line; + + line.x1 += vx1; + line.y1 += vy1; + line.x2 += vx2; + line.y2 += vy2; + + if (line.x1 < 0 || line.x1 > state.width) { + line.vx1 *= -1; + } + if (line.y1 < 0 || line.y1 > state.height) { + line.vy1 *= -1; + } + if (line.x2 < 0 || line.x2 > state.width) { + line.vx2 *= -1; + } + if (line.y2 < 0 || line.y2 > state.width) { + line.vy2 *= -1; + } + + ctx.strokeStyle = line.color; + ctx.beginPath(); + ctx.moveTo(x1, y1); + ctx.lineTo(x2, y2); + ctx.stroke(); + ctx.closePath(); + }); +} + +function initializeState(canvas) { + const { width, height } = canvas; + const ctx = canvas.getContext('2d'); + let paused = false; + + const colors = ['cyan', 'yellow', 'magenta']; + const state = { + ctx, + paused, + width, height, + lines: colors.map(color => makeLine(color, width, height)), + }; + + canvas.addEventListener('click', () => { + state.paused = !state.paused; + }, false); + ctx.fillRect(0, 0, width, height); + + return state; +} + +function makeLine(color, width, height) { + return { + color, + x1: randomTo(width), y1: randomTo(height), + vx1: 5 - randomTo(10), vy1: 5 - randomTo(10), + x2: randomTo(width), y2: randomTo(height), + vx2: 5 - randomTo(10), vy2: 5 - randomTo(10), + } +} + +function randomTo(max) { + return Math.random() * max; +} -- 2.34.2