141 lines
5.2 KiB
Cheetah
141 lines
5.2 KiB
Cheetah
{{define "base"}}
|
|
<!doctype html>
|
|
<html lang='en' data-theme="light">
|
|
<head>
|
|
<meta charset='utf-8'>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<title>{{template "title" .Data}} - {{ .SiteConfig.Title }}</title>
|
|
<meta property="og:title" content="{{template "title" .Data}}" />
|
|
{{ template "head" .}}
|
|
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
|
<link rel="webmention" href="/webmention/" />
|
|
<link rel="alternate" type="application/rss+xml" title="RSS" href="/index.xml">
|
|
|
|
<link rel='stylesheet' href='/static/style.css'>
|
|
<style>
|
|
:root {
|
|
--primary: {{.SiteConfig.PrimaryColor}};
|
|
--primary-hover: color-mix(in srgb,var(--primary),#000 20%);
|
|
--primary-focus: color-mix(in srgb,var(--primary),#fff 40%);
|
|
--primary-inverse: #FFF;
|
|
--background: {{.SiteConfig.HeaderColor}};
|
|
--background-dark: color-mix(in srgb,var(--background),#000 50%);
|
|
--background-light: color-mix(in srgb,var(--background),#fff 50%);
|
|
|
|
}
|
|
|
|
[data-theme="light"],
|
|
:root:not([data-theme="dark"]) {
|
|
--pico-primary: {{.SiteConfig.PrimaryColor}};
|
|
--pico-primary-background: {{.SiteConfig.PrimaryColor}};
|
|
--pico-primary-hover: color-mix(in srgb,var(--primary),#000 20%);
|
|
--pico-primary-hover-background: color-mix(in srgb,var(--primary),#000 20%);
|
|
--pico-primary-focus: color-mix(in srgb,var(--primary),#fff 40%);
|
|
--pico-primary-underline: color-mix(in srgb,var(--primary),#fff 40%);
|
|
--pico-primary-inverse: #FFF;
|
|
--pico-background: {{.SiteConfig.HeaderColor}};
|
|
--pico-background-dark: color-mix(in srgb,var(--background),#000 50%);
|
|
--pico-background-light: color-mix(in srgb,var(--background),#fff 50%);
|
|
}
|
|
|
|
|
|
footer {
|
|
border-top: dashed 2px;
|
|
border-color: #ccc;
|
|
}
|
|
|
|
.avatar {
|
|
float: left;
|
|
margin-right: 1rem;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.photo-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
.photo-grid-item {
|
|
flex: 1 0 25%;
|
|
padding: 4px;
|
|
}
|
|
|
|
.photo-grid-item img {
|
|
width: 100%;
|
|
height: 100%;
|
|
aspect-ratio: 1 / 1 ;
|
|
object-fit: cover;
|
|
}
|
|
|
|
main img {
|
|
max-width: 100%;
|
|
margin: auto;
|
|
text-align: center;
|
|
display: block;
|
|
}
|
|
|
|
</style>
|
|
{{ .SiteConfig.HtmlHeadExtra }}
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="header h-card">
|
|
{{ if .SiteConfig.AvatarUrl }}
|
|
<div class="header-profile">
|
|
<img class="u-photo u-logo avatar" src="{{ .SiteConfig.AvatarUrl }}" alt="{{ .SiteConfig.Title }}" width="100" height="100" />
|
|
</div>
|
|
{{ end }}
|
|
|
|
<div>
|
|
<h2><a class="p-name u-url" href="/">{{ .SiteConfig.Title }}</a></h2>
|
|
<h3 class="p-note">{{ .SiteConfig.SubTitle }}</h3>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<nav>
|
|
<ul>
|
|
{{ range $link := .SiteConfig.HeaderMenu }}
|
|
{{ if $link.List }}
|
|
<li><a href="/lists/{{ $link.List }}">{{ $link.Title }}</a></li>
|
|
{{ else if $link.Post }}
|
|
<li><a href="/posts/{{ $link.Post }}">{{ $link.Title }}</a></li>
|
|
{{ else }}
|
|
<li><a href="{{ $link.Url }}">{{ $link.Title }}</a></li>
|
|
{{ end }}
|
|
{{ end }}
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
<main>
|
|
{{template "main" .Data}}
|
|
</main>
|
|
<footer>
|
|
<nav>
|
|
<ul>
|
|
<li><a target="_blank" href="/index.xml">RSS Feed</a></li>
|
|
{{ range $link := .SiteConfig.FooterMenu }}
|
|
{{ if $link.List }}
|
|
<li><a href="/lists/{{ $link.List }}">{{ $link.Title }}</a></li>
|
|
{{ else if $link.Post }}
|
|
<li><a href="/posts/{{ $link.Post }}">{{ $link.Title }}</a></li>
|
|
{{ else }}
|
|
<li><a href="{{ $link.Url }}">{{ $link.Title }}</a></li>
|
|
{{ end }}
|
|
{{ end }}
|
|
</ul>
|
|
</nav>
|
|
{{ .SiteConfig.FooterExtra}}
|
|
<small>
|
|
<nav>
|
|
<ul>
|
|
<li><a href="/admin/">Editor</a></li>
|
|
</ul>
|
|
</nav>
|
|
</small>
|
|
</footer>
|
|
</body>
|
|
</html>
|
|
{{end}} |