owl-blogs/render/templates/base.tmpl

170 lines
6.1 KiB
Cheetah
Raw Normal View History

2023-07-06 20:16:52 +00:00
{{define "base"}}
<!doctype html>
2023-07-22 18:34:17 +00:00
<html lang='en' data-theme="light">
2023-07-06 20:16:52 +00:00
<head>
<meta charset='utf-8'>
2023-07-16 19:48:39 +00:00
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{template "title" .Data}} - {{ .SiteConfig.Title }}</title>
<meta property="og:title" content="{{template "title" .Data}}" />
2024-02-24 20:21:48 +00:00
{{ template "head" .}}
2024-02-24 20:53:39 +00:00
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
2023-08-09 18:36:44 +00:00
<link rel="webmention" href="/webmention/" />
2023-09-04 18:23:02 +00:00
<link rel="alternate" type="application/rss+xml" title="RSS" href="/index.xml">
2024-01-24 21:04:15 +00:00
2024-02-23 11:57:43 +00:00
<link rel='stylesheet' href='/static/pico-2.min.css'>
2024-01-24 21:04:15 +00:00
<link rel='stylesheet' href='/static/style.css'>
2023-07-16 19:48:39 +00:00
<style>
2024-01-23 18:17:04 +00:00
:root {
2024-01-24 21:04:15 +00:00
--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%);
2024-02-23 11:57:43 +00:00
}
[data-theme="light"],
:root:not([data-theme="dark"]) {
2024-02-23 11:34:05 +00:00
--pico-primary: {{.SiteConfig.PrimaryColor}};
2024-02-23 11:57:43 +00:00
--pico-primary-background: {{.SiteConfig.PrimaryColor}};
2024-02-23 11:34:05 +00:00
--pico-primary-hover: color-mix(in srgb,var(--primary),#000 20%);
2024-02-23 11:57:43 +00:00
--pico-primary-hover-background: color-mix(in srgb,var(--primary),#000 20%);
2024-02-23 11:34:05 +00:00
--pico-primary-focus: color-mix(in srgb,var(--primary),#fff 40%);
2024-02-23 11:57:43 +00:00
--pico-primary-underline: color-mix(in srgb,var(--primary),#fff 40%);
2024-02-23 11:34:05 +00:00
--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%);
2024-01-24 21:04:15 +00:00
}
2023-07-16 19:48:39 +00:00
header {
2024-01-24 21:04:15 +00:00
background-color: var(--background);
2023-07-16 19:48:39 +00:00
padding-bottom: 1rem !important;
}
footer {
border-top: dashed 2px;
border-color: #ccc;
}
.avatar {
float: left;
margin-right: 1rem;
2023-07-17 18:44:59 +00:00
border-radius: 50%;
2023-07-16 19:48:39 +00:00
}
.header {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: flex-start;
}
.header-title {
order: 0;
}
.header-profile {
order: 1;
}
hgroup h2 a { color: inherit; }
.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;
}
2023-08-06 10:08:46 +00:00
main img {
max-height: 50vh;
margin: auto;
text-align: center;
display: block;
}
2023-07-16 19:48:39 +00:00
</style>
{{ .SiteConfig.HtmlHeadExtra }}
2023-07-06 20:16:52 +00:00
</head>
<body>
2023-07-16 19:48:39 +00:00
<header>
<div class="container header h-card">
<hgroup class="header-title">
<h2><a class="p-name u-url" href="/">{{ .SiteConfig.Title }}</a></h2>
<h3 class="p-note">{{ .SiteConfig.SubTitle }}</h3>
</hgroup>
<div class="header-profile">
{{ if .SiteConfig.AvatarUrl }}
<img class="u-photo u-logo avatar" src="{{ .SiteConfig.AvatarUrl }}" alt="{{ .SiteConfig.Title }}" width="100" height="100" />
{{ end }}
<div style="float: right; list-style: none;">
{{ range $me := .SiteConfig.Me }}
<li><a href="{{$me.Url}}" rel="me">{{$me.Name}}</a>
</li>
{{ end }}
</div>
</div>
</div>
<div class="container">
<nav>
<ul>
2023-07-18 19:03:33 +00:00
{{ 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 }}
2023-07-16 19:48:39 +00:00
</ul>
</nav>
</div>
2023-07-06 20:16:52 +00:00
</header>
2023-07-13 19:20:00 +00:00
<main class="container">
2023-07-16 19:48:39 +00:00
{{template "main" .Data}}
2023-07-06 20:16:52 +00:00
</main>
2023-07-13 19:20:00 +00:00
<footer class="container">
2023-07-18 19:03:33 +00:00
<nav>
<ul>
2023-09-04 18:23:02 +00:00
<li><a target="_blank" href="/index.xml">RSS Feed</a></li>
2023-07-18 19:03:33 +00:00
{{ 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}}
2023-08-05 19:45:16 +00:00
<small>
<nav>
<ul>
<li><a href="/admin/">Editor</a></li>
</ul>
</nav>
</small>
2023-07-13 19:20:00 +00:00
</footer>
2023-07-06 20:16:52 +00:00
</body>
</html>
{{end}}