diff --git a/assets/sass/header.scss b/assets/sass/header.scss new file mode 100644 index 0000000..47d199a --- /dev/null +++ b/assets/sass/header.scss @@ -0,0 +1,123 @@ +.header { + padding: 2rem; + + .header-container { + max-width: $maxwidth; + width: 100%; + margin: 0 auto; + + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + + .site-title { + font-size: 1.5rem; + + a { + text-decoration: none; + color: inherit; + } + } + + .nav { + ul { + display: flex; + gap: 2.5rem; + margin: 0; + padding: 0; + list-style: none; + + li a { + font-size: 0.85rem; + text-decoration: none; + color: inherit; + display: block; + } + } + } + + .nav-toggle { + display: none; + } + + .nav-toggle-label { + display: none; + } + } +} + +@media (max-width: $mobilewidth) { + .header { + padding: 1rem; + + .header-container { + .site-title { + z-index: 1; + } + + .nav { + position: fixed; + inset: 0; + display: flex; + flex-direction: column; + justify-content: center; + + opacity: 0; + background: $color-bg; + transition: opacity 0.3s ease; + + pointer-events: none; + + ul { + flex-direction: column; + align-items: center; + gap: 2rem; + + li a { + font-size: 1.25rem; + } + } + } + + .nav-toggle-label { + z-index: 1; + + display: flex; + flex-direction: column; + justify-content: space-between; + width: 1.5rem; + height: 0.75rem; + cursor: pointer; + + span { + display: block; + height: 0.125rem; + width: 100%; + border-radius: 1px; + background: currentColor; + transition: + transform 0.3s ease, + opacity 0.3s ease; + } + + span+span { + margin-top: 0.25rem; + } + } + + .nav-toggle:checked+.nav-toggle-label+.nav { + opacity: 1; + pointer-events: auto; + } + + .nav-toggle:checked+.nav-toggle-label span:nth-child(1) { + transform: translateY(0.3rem) rotate(45deg); + } + + .nav-toggle:checked+.nav-toggle-label span:nth-child(2) { + transform: translateY(-0.3rem) rotate(-45deg); + } + } + } +} diff --git a/assets/sass/main.scss b/assets/sass/main.scss new file mode 100644 index 0000000..c6f62c2 --- /dev/null +++ b/assets/sass/main.scss @@ -0,0 +1,11 @@ +@import "variables"; + +html { + font-size: 100%; + font-family: + system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + line-height: 1.5; +} + +@import "header"; diff --git a/assets/sass/variables.scss b/assets/sass/variables.scss new file mode 100644 index 0000000..4032509 --- /dev/null +++ b/assets/sass/variables.scss @@ -0,0 +1,5 @@ +$mobilewidth: 32rem; +$contentwidth: 48rem; +$maxwidth: 60rem; + +$color-bg: white; diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html new file mode 100644 index 0000000..5919377 --- /dev/null +++ b/layouts/_default/baseof.html @@ -0,0 +1,53 @@ + + + + + + + + {{- if .IsHome -}} + {{ .Site.Title }} + {{- else -}} + {{ .Site.Title }} · + {{ .Title }} + {{- end -}} + + + {{ with .Site.Params.description }} + + {{ end }} + + + + + + + {{ with resources.Get "sass/main.scss" }} + {{ with . | toCSS (dict "targetPath" "css/main.css") | fingerprint }} + + {{ end }} + {{ end }} + + {{ with .OutputFormats.Get "RSS" }} + {{ printf ` + ` .Permalink .Rel .MediaType.Type $.Site.Title | safeHTML + }} + {{ end }} + + {{ partial "opengraph.html" . }} + {{ partial "twitter.html" . }} + + + + {{ partial "header.html" . }} + + {{ block "main" . }} + {{ end }} + + {{ partial "footer.html" . }} + + diff --git a/layouts/index.html b/layouts/index.html new file mode 100644 index 0000000..e4e4a83 --- /dev/null +++ b/layouts/index.html @@ -0,0 +1,2 @@ +{{ define "main" }} +{{ end }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html new file mode 100644 index 0000000..e69de29 diff --git a/layouts/partials/header.html b/layouts/partials/header.html new file mode 100644 index 0000000..ef1fc29 --- /dev/null +++ b/layouts/partials/header.html @@ -0,0 +1,26 @@ +
+
+
+ {{ .Site.Title }} +
+ + + + + +
+
diff --git a/layouts/partials/opengraph.html b/layouts/partials/opengraph.html new file mode 100644 index 0000000..e77c4af --- /dev/null +++ b/layouts/partials/opengraph.html @@ -0,0 +1,80 @@ + + + + + +{{ with .Params.image }} + {{ $image := $.Resources.GetMatch . }} + {{ with $image }} + {{ $thumb := .Resize "400x" }} + + {{ end }} +{{ end }} + +{{ $iso8601 := "2000-01-01T00:00:00-01:00" }} +{{ if .IsPage }} + {{ if not .PublishDate.IsZero }} + + {{ else if not .Date.IsZero }} + + {{ end }} +{{ end }} +{{/* .IsPage */}} + +{{ with .Params.audio }} + +{{ end }} +{{ with .Params.locale }} + +{{ end }} +{{ with .Site.Params.title }} + +{{ end }} +{{ with .Params.videos }} + {{ range . }} + + {{ end }} +{{ end }} + +{{ $permalink := .Permalink }} +{{ $siteSeries := .Site.Taxonomies.series }}{{ with .Params.series }} + {{ range $name := . }} + {{ $series := index $siteSeries $name }} + {{ range $page := first 6 $series.Pages }} + {{ if ne $page.Permalink $permalink }} + + {{ end }} + {{ end }} + {{ end }} +{{ end }} + +{{ if .IsPage }} + + {{ with .Params.tags }} + {{ range . }} + + {{ end }} + {{ end }} +{{ end }} diff --git a/layouts/partials/twitter.html b/layouts/partials/twitter.html new file mode 100644 index 0000000..5bb148d --- /dev/null +++ b/layouts/partials/twitter.html @@ -0,0 +1,23 @@ +{{ with .Params.image }} + {{ $image := $.Resources.GetMatch . }} + {{ with $image }} + {{ $thumb := .Resize "400x" }} + + + {{ end }} +{{ end }} + + + +