wiki/templates/layout.html
Peter Stuifzand 9e0d739162
All checks were successful
continuous-integration/drone/push Build is passing
Make search results nicer
2020-05-17 23:58:48 +02:00

226 lines
5.6 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="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.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>
#autocomplete {
z-index: 1;
width: 217px;
overflow-x: hidden;
overflow-y: auto;
height: 300px;
position: absolute;
background: white;
border: 1px solid #ccc;
padding: 16px;
}
#autocomplete li > a {
white-space: nowrap;
}
.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;
}
}
.list-item {
padding: 3px;
display: flex;
cursor: pointer;
margin-left: 32px;
flex-direction: column;
}
.line {
display: flex;
flex-direction: row;
align-items: center;
}
.marker {
border-radius: 50%;
background: black;
width: 6px;
height: 6px;
display: inline-block;
margin-right: 12px;
flex-shrink: 0;
align-self: baseline;
margin-top: 10px;
}
textarea {
border: none;
resize: none;
}
.selected {
background: lightblue;
}
.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="hidden"></div>
</div>
</div>
</div>
</div>
<section class="section">
{{ template "content" . }}
</section>
<div id="save-indicator" class="hidden"></div>
</div>
{{ block "footer_scripts" . }}
{{ end }}
<script src="/public/index.bundle.js"></script>
<div id="result-template" class="hidden">
<ul>
[[#results]]
<li><a href="/[[ref]]">[[title]]</a></li>
[[/results]]
</ul>
</div>
</body>
</html>