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