123
assets/sass/header.scss
Normal file
123
assets/sass/header.scss
Normal file
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
11
assets/sass/main.scss
Normal file
11
assets/sass/main.scss
Normal file
@@ -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";
|
||||
5
assets/sass/variables.scss
Normal file
5
assets/sass/variables.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
$mobilewidth: 32rem;
|
||||
$contentwidth: 48rem;
|
||||
$maxwidth: 60rem;
|
||||
|
||||
$color-bg: white;
|
||||
53
layouts/_default/baseof.html
Normal file
53
layouts/_default/baseof.html
Normal file
@@ -0,0 +1,53 @@
|
||||
<!doctype html>
|
||||
<html lang="{{- .Site.LanguageCode -}}">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
||||
<title>
|
||||
{{- if .IsHome -}}
|
||||
{{ .Site.Title }}
|
||||
{{- else -}}
|
||||
{{ .Site.Title }} ·
|
||||
{{ .Title }}
|
||||
{{- end -}}
|
||||
</title>
|
||||
|
||||
{{ with .Site.Params.description }}
|
||||
<meta name="description" content="{{- . -}}" />
|
||||
{{ end }}
|
||||
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="robots" content="all,follow" />
|
||||
<meta name="googlebot" content="index,follow,snippet,archive" />
|
||||
|
||||
{{ with resources.Get "sass/main.scss" }}
|
||||
{{ with . | toCSS (dict "targetPath" "css/main.css") | fingerprint }}
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="{{- .RelPermalink -}}"
|
||||
integrity="{{- .Data.Integrity -}}"
|
||||
/>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ with .OutputFormats.Get "RSS" }}
|
||||
{{ printf `
|
||||
<link href="%s" rel="%s" type="%s" title="%s" />` .Permalink .Rel .MediaType.Type $.Site.Title | safeHTML
|
||||
}}
|
||||
{{ end }}
|
||||
|
||||
{{ partial "opengraph.html" . }}
|
||||
{{ partial "twitter.html" . }}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{{ partial "header.html" . }}
|
||||
|
||||
{{ block "main" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ partial "footer.html" . }}
|
||||
</body>
|
||||
</html>
|
||||
2
layouts/index.html
Normal file
2
layouts/index.html
Normal file
@@ -0,0 +1,2 @@
|
||||
{{ define "main" }}
|
||||
{{ end }}
|
||||
0
layouts/partials/footer.html
Normal file
0
layouts/partials/footer.html
Normal file
26
layouts/partials/header.html
Normal file
26
layouts/partials/header.html
Normal file
@@ -0,0 +1,26 @@
|
||||
<header class="header">
|
||||
<div class="header-container">
|
||||
<div class="site-title">
|
||||
<a href="{{- "/" | relURL -}}">{{ .Site.Title }}</a>
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="checkbox"
|
||||
id="nav-toggle"
|
||||
class="nav-toggle"
|
||||
aria-label="Toggle navigation"
|
||||
/>
|
||||
<label for="nav-toggle" class="nav-toggle-label">
|
||||
<span></span>
|
||||
<span></span>
|
||||
</label>
|
||||
|
||||
<nav class="nav">
|
||||
<ul>
|
||||
{{ range .Site.Params.navigation }}
|
||||
<li><a href="{{- .url -}}">{{ .name }}</a></li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
80
layouts/partials/opengraph.html
Normal file
80
layouts/partials/opengraph.html
Normal file
@@ -0,0 +1,80 @@
|
||||
<meta property="og:title" content="{{ .Title }}" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="{{- with .Description -}}
|
||||
{{- . -}}
|
||||
{{- else -}}
|
||||
{{- if .IsPage -}}
|
||||
{{- with .Site.Params.description -}}{{- . -}}{{- end -}}
|
||||
{{- end -}}
|
||||
{{- end -}}"
|
||||
/>
|
||||
<meta
|
||||
property="og:type"
|
||||
content="{{- if .IsPage -}}
|
||||
article
|
||||
{{- else -}}
|
||||
website
|
||||
{{- end -}}"
|
||||
/>
|
||||
<meta property="og:url" content="{{- .Permalink -}}" />
|
||||
|
||||
{{ with .Params.image }}
|
||||
{{ $image := $.Resources.GetMatch . }}
|
||||
{{ with $image }}
|
||||
{{ $thumb := .Resize "400x" }}
|
||||
<meta property="og:image" content="{{- $thumb.Permalink -}}" />
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ $iso8601 := "2000-01-01T00:00:00-01:00" }}
|
||||
{{ if .IsPage }}
|
||||
{{ if not .PublishDate.IsZero }}
|
||||
<meta
|
||||
property="article:published_time"
|
||||
{{ .PublishDate.Format $iso8601 | printf "content=%q" | safeHTMLAttr }}
|
||||
/>
|
||||
{{ else if not .Date.IsZero }}
|
||||
<meta
|
||||
property="article:published_time"
|
||||
{{ .Date.Format $iso8601 | printf "content=%q" | safeHTMLAttr }}
|
||||
/>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{/* .IsPage */}}
|
||||
|
||||
{{ with .Params.audio }}
|
||||
<meta property="og:audio" content="{{- . -}}" />
|
||||
{{ end }}
|
||||
{{ with .Params.locale }}
|
||||
<meta property="og:locale" content="{{- . -}}" />
|
||||
{{ end }}
|
||||
{{ with .Site.Params.title }}
|
||||
<meta property="og:site_name" content="{{- . -}}" />
|
||||
{{ end }}
|
||||
{{ with .Params.videos }}
|
||||
{{ range . }}
|
||||
<meta property="og:video" content="{{- . | absURL -}}" />
|
||||
{{ 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 }}
|
||||
<meta property="og:see_also" content="{{- $page.Permalink -}}" />
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ if .IsPage }}
|
||||
<meta property="article:section" content="{{- .Section -}}" />
|
||||
{{ with .Params.tags }}
|
||||
{{ range . }}
|
||||
<meta property="article:tag" content="{{- . -}}" />
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
23
layouts/partials/twitter.html
Normal file
23
layouts/partials/twitter.html
Normal file
@@ -0,0 +1,23 @@
|
||||
{{ with .Params.image }}
|
||||
{{ $image := $.Resources.GetMatch . }}
|
||||
{{ with $image }}
|
||||
{{ $thumb := .Resize "400x" }}
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:image" content="{{- $thumb.Permalink -}}" />
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
|
||||
<meta name="twitter:title" content="{{- .Title -}}" />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="{{- with .Description -}}
|
||||
{{- . -}}
|
||||
{{- else -}}
|
||||
{{- if .IsPage -}}
|
||||
{{- .Summary -}}
|
||||
{{- else -}}
|
||||
{{- with .Site.Params.description -}}{{- . -}}{{- end -}}
|
||||
{{- end -}}
|
||||
{{- end -}}"
|
||||
/>
|
||||
Reference in New Issue
Block a user