wiki/templates/layout.html
Peter Stuifzand e9f9c59714
All checks were successful
continuous-integration/drone/push Build is passing
Split CSS and JS into two files with Webpack
2020-06-24 00:19:01 +02:00

318 lines
7.9 KiB
HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="redirect_uri" href="{{ .RedirectURI }}" />
<link rel="stylesheet" href="/public/index.css" />
<link rel="stylesheet" href="https://unpkg.com/prismjs@1.20.0/themes/prism-tomorrow.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<title>{{ .Title }} - Wiki</title>
{{ block "content_head" . }} {{ end }}
<style>
.content {
flex-grow: 1;
}
#autocomplete {
z-index: 1;
width: 217px;
overflow-x: hidden;
overflow-y: auto;
height: 300px;
position: absolute;
background: white;
border: 1px solid #ccc;
}
#autocomplete li > a {
white-space: nowrap;
}
#autocomplete li {
padding: 4px 16px;
}
#autocomplete li.selected {
background: lightblue;
}
#link-complete {
z-index: 1;
width: 217px;
overflow-x: hidden;
overflow-y: auto;
height: 300px;
position: absolute;
background: white;
border: 1px solid #ccc;
outline: none;
}
#link-complete li {
padding: 4px 16px;
}
#link-complete li.selected {
background: lightblue;
}
.monospace {
font-family: "Fira Code Retina", monospace;
white-space: pre-wrap;
}
.lighter {
color: #ccc;
}
del {
text-decoration: none;
}
ins {
text-decoration: none;
}
.checklist {
margin-bottom: 1em;
}
.checklist--item {
display: flex;
}
.checklist--item-text {
align-self: center;
}
</style>
<style>
@import url('https://rsms.me/inter/inter.css');
html {
font-family: 'Inter', sans-serif;
}
body {
font-family: 'Inter', sans-serif;
}
input.input-line {
font-family: 'Inter', sans-serif;
}
@supports (font-variation-settings: normal) {
html {
font-family: 'Inter var', sans-serif;
}
body {
font-family: 'Inter var', sans-serif;
}
input.input-line {
font-family: 'Inter var', sans-serif;
}
}
.root .list-item {
padding: 3px;
padding-left: 12px;
display: flex;
cursor: pointer;
margin-left: 32px;
flex-direction: column;
border: 1px solid white;
}
.root .list-item:not(:last-child) {
border: 1px solid white;
}
.line {
display: flex;
flex-direction: row;
align-items: center;
}
.marker {
border-radius: 50%;
background: black;
width: 16px;
height: 16px;
display: inline-block;
margin-right: 8px;
flex-shrink: 0;
align-self: baseline;
margin-top: 4px;
border: 5px solid white;
}
.marker:hover {
border-color: #ccc;
}
textarea {
border: none;
resize: none;
}
.list-item .content {
white-space: pre-wrap;
}
.root .list-item.selection {
border-left-color: #ccc;
border-right-color: #ccc;
border-left-style: dashed;
border-right-style: dashed;
}
.root .list-item.selection-first {
border-top-style: dashed;
border-top-color: #ccc;
}
.root .list-item.selection-last {
border-bottom-style: dashed;
border-bottom-color: #ccc;
}
.hide {
display: none;
}
.selected {
background: lightblue;
}
.selected .marker {
border-color: lightblue;
}
#editor {
width: 750px;
}
.editor.selected .marker {
/*border-color: white;*/
}
.editor.selected {
background: none;
}
.line {
min-height: 24px;
}
input.input-line, input.input-line:active {
border: none;
outline: none;
margin: 0;
padding: 0;
width: 100%;
font-size: 16px;
}
.gu-mirror {
position: fixed !important;
margin: 0 !important;
z-index: 9999 !important;
opacity: 0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
}
.gu-hide {
display: none !important;
}
.gu-unselectable {
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important;
}
.gu-transit {
opacity: 0.2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
}
.backrefs {
padding: 24px;
background: #deeeee;
border-top: 3px solid #acc;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="/">
Wiki
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"
data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
{{ block "navbar" . }}{{ end }}
</div>
</div>
</nav>
<div class="level">
<div class="level-left"></div>
<div class="level-right">
<div class="level-item">
<div class="field">
<p class="control">
<input class="search input" id="search-input" type="text" placeholder="Find a page">
</p>
<div id="autocomplete" class="hide keyboard-list" tabindex="0"></div>
</div>
</div>
</div>
</div>
<section class="section">
{{ template "content" . }}
</section>
<div class="h-app">
<a href="/" class="u-url p-name">Wiki</a>
&mdash; created by <a href="https://peterstuifzand.nl/">Peter Stuifzand</a>
</div>
<div id="save-indicator" class="hide"></div>
</div>
<div id="link-complete" class="hide keyboard-list" tabindex="0"></div>
{{ block "footer_scripts" . }}
{{ end }}
<div id="result-template" class="hide">
<ul>
[[#results]]
<li><a href="/[[ref]]">[[title]]</a></li>
[[/results]]
[[^results]]
<li>No results</li>
[[/results]]
<li><a href="/edit/[[page]]">Create a page</a></li>
</ul>
</div>
<div id="link-template" class="hide">
<ul>
[[#results]]
<li>[[item.title]]</li>
[[/results]]
[[^results]]
<li>No results</li>
[[/results]]
</ul>
</div>
<script async src="/public/index.bundle.js"></script>
</body>
</html>