artwo.xyz
1<html lang="{{site.lang}}">
2 <head>
3 <meta name="viewport" content="width=device-width, initial-scale=1" />
4 <meta charset="utf-8" />
5 <!-- Fonts -->
6 <link rel="stylesheet" href="{{asset 'fonts/DraftingMono/DraftingMono.css'}}" />
7 <link rel="stylesheet" href="{{asset 'css/init.css'}}" />
8 <link rel="stylesheet" href="{{asset 'css/style.css'}}" />
9 <title>
10 {{#if entry}}{{displayName entry}} - {{site.title}}{{else}}{{site.title}}{{/if}}
11 </title>
12 {{{iconsHead}}}
13 </head>
14 <body>
15 <svg width="0" height="0" style="position: absolute;">
16 <filter id="noise-texture">
17 <feTurbulence
18 type="fractalNoise"
19 baseFrequency="0.85"
20 numOctaves="2"
21 seed="0"
22 stitchTiles="stitch"
23 />
24 <feColorMatrix type="saturate" values="0" />
25 <feComponentTransfer>
26 <feFuncA type="discrete" tableValues="0 0.35" />
27 </feComponentTransfer>
28 <feBlend mode="multiply" in="SourceGraphic" />
29 </filter>
30 </svg>
31
32 <div class="site-rail" aria-hidden="false">
33 <div class="corner-slot">
34 {{#unless (eq entry.route "/")}}
35 <a class="corner-logo" href="/" aria-label="Home">
36 <span class="corner-logo-icon" aria-hidden="true"></span>
37 </a>
38 {{/unless}}
39 </div>
40
41 <a class="side-wordmark" href="/" aria-label="Home">webette</a>
42 </div>
43
44 <div class="site-page">
45 <header class="site-frame">
46 <nav class="top-menu" aria-label="Site menu">
47 {{#menu}}
48 <input class="top-menu-radio" type="radio" name="top-menu" id="top-menu-none" checked />
49
50 {{#each collections}}
51 {{#unless hasSingleEntry}}
52 <input
53 class="top-menu-radio"
54 type="radio"
55 name="top-menu"
56 id="top-menu-{{slug}}"
57 />
58 {{/unless}}
59 {{/each}}
60
61 <div class="top-menu-tabs">
62 {{#each collections}}
63 <div class="top-menu-tabwrap">
64 {{#if hasSingleEntry}}
65 <a
66 class="top-menu-tab top-menu-tab--link {{#if isCurrent}}is-current{{/if}}"
67 href="{{singleEntry.route}}"
68 {{#if singleEntry.isActive}}aria-current="page"{{/if}}
69 >
70 {{displayName this}}
71 </a>
72 {{else}}
73 <label class="top-menu-tab top-menu-tab--open {{#if isCurrent}}is-current{{/if}}" for="top-menu-{{slug}}">
74 {{displayName this}}
75 </label>
76 <label class="top-menu-tab top-menu-tab--close" for="top-menu-none" data-close="{{slug}}">
77 {{displayName this}}
78 </label>
79 {{/if}}
80 </div>
81 {{/each}}
82 </div>
83
84 <div class="top-menu-panels">
85 {{#each collections}}
86 {{#unless hasSingleEntry}}
87 <div class="top-menu-panel" id="top-menu-panel-{{slug}}">
88 <ul class="top-menu-tree">
89 {{#each entries}}
90 <li class="top-menu-tree-item">
91 <span class="tree-line {{#if isActive}}is-active{{/if}} {{#if @last}}last-tree-line{{/if}}">   </span>
92 <a
93 class="top-menu-entry {{#if isActive}}is-active{{/if}}"
94 href="{{route}}"
95 {{#if isActive}}aria-current="page"{{/if}}
96 >
97 <span class="tree-ascii">└──</span> {{displayName this}}
98 </a>
99 {{#if isDraft}}
100 <span class="draft-pill">draft</span>
101 {{/if}}
102 </li>
103 {{/each}}
104 </ul>
105 </div>
106 {{/unless}}
107 {{/each}}
108 </div>
109
110 <style>
111 {{#each collections}}
112 {{#unless hasSingleEntry}}
113 #top-menu-{{slug}}:checked ~ .top-menu-tabs label[data-close="{{slug}}"] {
114 background: var(--accent);
115 color: color-mix(in lch shorter hue, var(--bg-box) 100%, white 50%);
116 }
117
118 #top-menu-{{slug}}:checked ~ .top-menu-tabs label[data-close="{{slug}}"] {
119 display: inline-block;
120 }
121
122 #top-menu-{{slug}}:checked ~ .top-menu-tabs label[for="top-menu-{{slug}}"] {
123 display: none;
124 }
125
126 #top-menu-{{slug}}:checked ~ .top-menu-panels #top-menu-panel-{{slug}} {
127 max-height: 70vh;
128 margin: var(--gutter) 0 0;
129 pointer-events: auto;
130 }
131 {{/unless}}
132 {{/each}}
133 </style>
134 {{/menu}}
135 </nav>
136 </header>
137
138 <div class="container">
139 {{{renderLayout layoutName}}}
140 </div>
141 </div>
142
143 <div class="noise"></div>
144
145 </body>
146</html>