~gg/blog-theme

e58dcc41038b5c49bb129503bb28c1c0c5745b75 — Gui Goncalves 1 year, 8 months ago 4b83cd0
Add color scheme, noscript partial
M layouts/_default/baseof.html => layouts/_default/baseof.html +18 -17
@@ 1,20 1,21 @@
<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode | default "en-us" }}">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>{{ .Title }}</title>
	{{ with .Site.Params.description }}<meta name="description" content="{{ . }}">{{ end }}
	{{ with .Site.Params.author }}<meta name="author" content="{{ . }}">{{ end }}
	<link rel="stylesheet" href="{{ "css/style.css" | relURL }}">
	{{ with .OutputFormats.Get "RSS" -}}
		{{ printf `<link rel="%s" type="%s" href="%s" title="%s">` .Rel .MediaType.Type .RelPermalink $.Site.Title | safeHTML }}
	{{- end }}
</head>
<body>
	{{ partial "header" . }}
	{{ block "main" . }}{{ end }}
	{{ partial "footer" . }}
</body>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>{{ .Title }}</title>
    {{ with .Site.Params.description }}<meta name="description" content="{{ . }}">{{ end }}
    {{ with .Site.Params.author }}<meta name="author" content="{{ . }}">{{ end }}
    <link rel="stylesheet" href="{{ "css/style.css" | relURL }}">
    {{ with .OutputFormats.Get "RSS" -}}
    {{ printf `<link rel="%s" type="%s" href="%s" title="%s">` .Rel .MediaType.Type .RelPermalink $.Site.Title | safeHTML }}
    {{- end }}
  </head>
  <body>
    {{ partial "header" . }}
    {{ block "main" . }}{{ end }}
    {{ partial "footer" . }}
    <!-- {{ partial "noscript" . }} -->
  </body>
</html>

M layouts/_default/list.html => layouts/_default/list.html +12 -12
@@ 1,16 1,16 @@
{{ define "main" }}
	<main>
		{{ if or .Title .Content }}
		<div>
			{{ with .Title }}<h1>{{ . }}</h1>{{ end }}
			{{ with .Content }}<div>{{ . }}</div>{{ end }}
		</div>
		{{ end }}
<main>
  {{ if or .Title .Content }}
  <div>
    {{ with .Title }}<h1>{{ . }}</h1>{{ end }}
    {{ with .Content }}<div>{{ . }}</div>{{ end }}
  </div>
  {{ end }}

		{{ range .Paginator.Pages }}
			{{ .Render "summary" }}
		{{ end }}
		{{ partial "pagination.html" . }}
	</main>
  {{ range .Paginator.Pages }}
  {{ .Render "summary" }}
  {{ end }}
  {{ partial "pagination.html" . }}
</main>
{{ partial "sidebar.html" . }}
{{ end }}

M layouts/_default/summary.html => layouts/_default/summary.html +12 -12
@@ 1,13 1,13 @@
<article>
	<h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
	<time>{{ .Date.Format "02.01.2006 15:04" }}</time>
	{{ range .Params.tags }}
	<a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>
	{{ end }}
	<div>
		{{ .Summary }}
		{{ if .Truncated }}
			<a href="{{ .Permalink }}">Read more...</a>
		{{ end }}
	</div>
<article class="post-summary">
  <h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
  <time>{{ .Date.Format "02.01.2006" }}</time>
  {{ range .Params.tags }}
  <a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>
  {{ end }}
  <div class="summary">
    {{ .Summary }}
    {{ if .Truncated }}
    <a class="read-more" href="{{ .Permalink }}">Read more...</a>
    {{ end }}
  </div>
</article>

M layouts/index.html => layouts/index.html +7 -8
@@ 1,10 1,9 @@
{{ define "main" }}
	<main>
		{{ $paginator := .Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) }}
		{{ range $paginator.Pages }}
			{{ .Render "summary" }}
		{{ end }}
		{{ partial "pagination.html" . }}
	</main>
{{ partial "sidebar.html" . }}
<main>
  {{ $paginator := .Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) }}
  {{ range $paginator.Pages }}
  {{ .Render "summary" }}
  {{ end }}
  {{ partial "pagination.html" . }}
</main>
{{ end }}

M layouts/partials/footer.html => layouts/partials/footer.html +10 -1
@@ 1,3 1,12 @@
<footer>
	<p>&copy; {{ now.Year }} <a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></p>
  Public Domain | <a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
  {{ with .Site.Menus.footer }}
  <nav>
    <ul>
      {{ range . }}
      <li><a href="{{ .URL | relURL }}">{{ .Name }}</a></li>
      {{ end }}
    </ul>
  </nav>
  {{ end }}
</footer>

M layouts/partials/header.html => layouts/partials/header.html +10 -10
@@ 1,12 1,12 @@
<header>
	<a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
	{{ with .Site.Menus.main }}
	<nav>
		<ul>
			{{ range . }}
			<li><a href="{{ .URL | relURL }}">{{ .Name }}</a></li>
			{{ end }}
		</ul>
	</nav>
	{{ end }}
  <a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
  {{ with .Site.Menus.main }}
  <nav>
    <ul>
      {{ range . }}
      <li><a href="{{ .URL | relURL }}">{{ .Name }}</a></li>
      {{ end }}
    </ul>
  </nav>
  {{ end }}
</header>

A layouts/partials/noscript.html => layouts/partials/noscript.html +21 -0
@@ 0,0 1,21 @@
<script type="text/javascript">
 function ready(fn) {
   if (document.readyState != 'loading'){
     fn();
   } else {
     document.addEventListener('DOMContentLoaded', fn);
   }
 }

 ready(() => {
   const h1 = document.createElement('h1');
   h1.innerText = 'Please disable JavaScript';
   h1.style.color = 'white';
   h1.style.position = 'absolute';
   h1.style.width = '100%';
   h1.style.zIndex = 10;
   h1.style.textAlign = 'center';
   document.body.appendChild(h1);
 });
</script>
<script src="{{ .Site.BaseURL }}js/mystify.js"></script>

M layouts/partials/pagination.html => layouts/partials/pagination.html +8 -8
@@ 1,9 1,9 @@
<div>
{{ if .Paginator.HasPrev }}
	<a href="{{ .Paginator.Prev.URL }}">Previous Page</a>
{{ end }}
{{ .Paginator.PageNumber }} of {{ .Paginator.TotalPages }}
{{ if .Paginator.HasNext }}
	<a href="{{ .Paginator.Next.URL }}">Next Page</a>
{{ end }}
<div class="paginator">
  {{ if .Paginator.HasPrev }}
  <a href="{{ .Paginator.Prev.URL }}">Previous Page</a>
  {{ end }}
  {{ .Paginator.PageNumber }} of {{ .Paginator.TotalPages }}
  {{ if .Paginator.HasNext }}
  <a href="{{ .Paginator.Next.URL }}">Next Page</a>
  {{ end }}
</div>

M layouts/partials/sidebar.html => layouts/partials/sidebar.html +12 -12
@@ 1,14 1,14 @@
<aside>
	<div>
		<div>
			<h3>LATEST POSTS</h3>
		</div>
		<div>
			<ul>
				{{ range first 5 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) }}
				<li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
				{{ end }}
			</ul>
		</div>
	</div>
  <div>
    <div>
      <h3>LATEST POSTS</h3>
    </div>
    <div>
      <ul>
        {{ range first 5 (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) }}
        <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
        {{ end }}
      </ul>
    </div>
  </div>
</aside>

M static/css/style.css => static/css/style.css +89 -0
@@ 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;
}

A static/js/mystify.js => static/js/mystify.js +82 -0
@@ 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;
}