-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
base.njk
188 lines (171 loc) · 19 KB
/
base.njk
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!doctype html>
<html lang="{{ metadata.language }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="theme-color" content="#fff">
<title>{{ title or metadata.title }}</title>
<meta name="description" content="{{ description or metadata.description }}">
<meta property="og:image" content="{% shareimg hero or metadata.siteimage %}" />
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.png">
<link rel="icon" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="mask-icon" href="/mask-icon.svg" color="#000000">
{#- Atom and JSON feeds included by default #}
<link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}">
<link rel="alternate" href="/feed/feed.json" type="application/json" title="{{ metadata.title }}">
{#- Uncomment this if you’d like folks to know that you used Eleventy to build your site! #}
{#- <meta name="generator" content="{{ eleventy.generator }}"> #}
{#-
CSS bundles are provided via the `eleventy-plugin-bundle` plugin:
1. You can add to them using `{% css %}`
2. You can get from them using `{% getBundle "css" %}` or `{% getBundleFileUrl "css" %}`
3. You can do the same for JS: {% js %}{% endjs %} and <script>{% getBundle "js" %}</script>
4. Learn more: https://github.com/11ty/eleventy-plugin-bundle
#}
{#- Add an arbitrary string to the bundle #}
{%- css %}* { box-sizing: border-box; }{% endcss %}
{#- Add the contents of a file to the bundle #}
{%- css %}{% include "public/css/index.css" %}{% endcss %}
{%- if not metadata.mono %}
{%- css %}{% include "public/css/rainbow.css" %}{% endcss %}
{% endif %}
{#- Or add from node_modules #}
{# {%- css %}{% include "node_modules/prismjs/themes/prism-okaidia.css" %}{% endcss %} #}
{#- Render the CSS bundle using Inlined CSS (for the fastest site performance in production) #}
<style>{% getBundle "css" %}</style>
{#- Renders the CSS bundle using a separate file, if you can't set CSP directive style-src: 'unsafe-inline' #}
{#- <link rel="stylesheet" href="{% getBundleFileUrl "css" %}"> #}
</head>
<body>
<div class="pantalla">
<a href="#skip" class="visually-hidden">Skip to main content</a>
<header>
<a href="/" class="home-link">
<div style="width: 288px; height: 15px">
<svg id="spatialmovies" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2120 113"><defs><style>.cls-1{fill:currentColor;stroke-width:0px;}</style></defs><g id="Spatial_Movies_object"><path id="s1" class="cls-1" d="M145.96,80.19c0,6.4-1.28,11.62-3.84,15.65s-5.88,7.14-9.97,9.31c-4.09,2.18-8.72,3.65-13.9,4.42-5.18.77-10.39,1.15-15.63,1.15H7.71c-1.79,0-3.36-.67-4.7-2.02-1.34-1.34-2.01-2.91-2.01-4.7s.67-3.36,2.02-4.7c1.34-1.34,2.91-2.02,4.7-2.02h93.5c3.2,0,6.62-.1,10.27-.29s7.04-.8,10.18-1.82c3.14-1.02,5.73-2.72,7.78-5.09,2.05-2.37,3.07-5.66,3.07-9.89,0-1.54-.13-3.04-.38-4.51-.26-1.47-.77-2.91-1.54-4.32-1.28-2.05-3.14-3.65-5.57-4.8-2.43-1.15-5.06-1.98-7.87-2.5-2.82-.51-5.66-.83-8.54-.96-2.88-.13-5.35-.19-7.39-.19h-55.3c-5.25,0-10.56-.35-15.94-1.06-5.38-.7-10.21-2.11-14.5-4.22-4.29-2.11-7.78-5.18-10.46-9.22-2.69-4.03-4.03-9.38-4.03-16.03s1.28-11.62,3.83-15.65,5.88-7.17,9.97-9.41c4.09-2.24,8.72-3.74,13.9-4.51,5.18-.77,10.39-1.15,15.63-1.15h94.72c1.79,0,3.39.66,4.79,1.99,1.4,1.33,2.11,2.87,2.11,4.63s-.71,3.35-2.11,4.73c-1.41,1.39-3.01,2.08-4.79,2.08H45.88c-2.05,0-4.51.03-7.38.1-2.88.07-5.72.35-8.53.87-2.81.52-5.43,1.35-7.86,2.51-2.43,1.16-4.28,2.77-5.56,4.82-.77,1.42-1.31,2.87-1.63,4.35-.32,1.48-.48,2.99-.48,4.54,0,4.25,1.02,7.56,3.07,9.95s4.63,4.09,7.76,5.11c3.13,1.03,6.55,1.64,10.26,1.84,3.71.19,7.16.29,10.36.29h55.22c5.24,0,10.54.35,15.91,1.06,5.37.71,10.19,2.15,14.48,4.32,4.28,2.18,7.76,5.28,10.45,9.31,2.68,4.03,4.03,9.38,4.03,16.03Z"/><path id="p" class="cls-1" d="M310.31,32.38c0,6.66-1.34,12-4.03,16.03-2.69,4.03-6.17,7.1-10.45,9.22-4.28,2.11-9.11,3.52-14.48,4.22-5.37.71-10.67,1.06-15.91,1.06h-86.66v40.9c0,1.79-.67,3.36-2.02,4.7-1.34,1.34-2.91,2.02-4.7,2.02s-3.36-.67-4.7-2.02c-1.34-1.34-2.02-2.91-2.02-4.7V8.38c0-1.79.67-3.39,2.01-4.8,1.34-1.41,2.91-2.11,4.7-2.11,15.59,0,31.16.03,46.69.1,15.53.07,31.1.1,46.69.1,5.24,0,10.54.35,15.91,1.06,5.37.71,10.19,2.15,14.48,4.32,4.28,2.18,7.77,5.28,10.45,9.31,2.68,4.03,4.03,9.38,4.03,16.03ZM296.87,32.29c0-1.67-.13-3.31-.38-4.92-.26-1.61-.9-3.12-1.92-4.54-1.28-1.93-3.14-3.41-5.57-4.44-2.43-1.03-5.06-1.8-7.87-2.32-2.82-.52-5.6-.8-8.35-.87-2.75-.06-5.15-.1-7.2-.1h-86.78v34.37h86.78c3.2,0,6.62-.1,10.27-.29,3.65-.19,7.04-.8,10.18-1.84,3.14-1.03,5.73-2.73,7.78-5.11,2.05-2.38,3.07-5.7,3.07-9.95Z"/><path id="a1" class="cls-1" d="M469.48,103.81c0,1.79-.67,3.36-2.02,4.7-1.34,1.34-2.91,2.02-4.7,2.02s-3.36-.67-4.7-2.03c-1.34-1.35-2.02-2.93-2.02-4.73v-25.11h-112.9v25.11c0,1.81-.67,3.38-2.02,4.73-1.34,1.35-2.91,2.03-4.7,2.03s-3.36-.67-4.7-2.02c-1.34-1.34-2.02-2.91-2.02-4.7v-48.77c0-11.01,1.85-20,5.57-26.98,3.71-6.98,8.74-12.41,15.07-16.32,6.34-3.9,13.73-6.59,22.18-8.06,8.45-1.47,17.47-2.21,27.07-2.21s18.62.74,27.07,2.21c8.45,1.47,15.84,4.16,22.18,8.06,6.34,3.91,11.36,9.35,15.07,16.32,3.71,6.98,5.57,15.97,5.57,26.98v48.77ZM456.04,55c0-3.08-.16-6.17-.48-9.25-.32-3.08-1.06-6.1-2.21-9.06-1.92-5.01-4.96-8.99-9.12-11.95-4.16-2.96-8.8-5.14-13.92-6.55-5.12-1.41-10.37-2.31-15.74-2.7-5.38-.38-10.37-.58-14.98-.58s-9.38.2-14.69.58c-5.31.38-10.5,1.28-15.55,2.7-5.06,1.42-9.67,3.5-13.82,6.26-4.16,2.76-7.27,6.52-9.31,11.27-1.41,3.08-2.27,6.23-2.59,9.45-.32,3.21-.48,6.49-.48,9.83v10.21h112.9v-10.21Z"/><path id="t" class="cls-1" d="M606.95,8.29c0,1.77-.67,3.31-2.02,4.64-1.34,1.33-2.91,1.99-4.7,1.99h-53.38v88.88c0,1.8-.66,3.37-1.99,4.72-1.33,1.35-2.87,2.02-4.63,2.02s-3.35-.67-4.73-2.02c-1.39-1.35-2.08-2.92-2.08-4.72V14.91h-53.38c-1.79,0-3.36-.66-4.7-1.99-1.34-1.33-2.02-2.87-2.02-4.64s.67-3.34,2.02-4.73c1.34-1.39,2.91-2.08,4.7-2.08h120.19c1.79,0,3.36.7,4.7,2.08,1.34,1.39,2.02,2.97,2.02,4.73Z"/><path id="i1" class="cls-1" d="M712.35,103.81c0,1.79-.67,3.36-2.02,4.7-1.34,1.34-2.91,2.02-4.71,2.02h-72.58c-1.79,0-3.36-.67-4.7-2.02-1.34-1.34-2.02-2.91-2.02-4.7s.67-3.36,2.02-4.7c1.34-1.34,2.91-2.02,4.7-2.02h29.57V14.91h-29.57c-1.79,0-3.36-.66-4.7-1.99-1.34-1.33-2.02-2.87-2.02-4.64s.67-3.34,2.02-4.73c1.34-1.39,2.91-2.08,4.7-2.08h72.58c1.79,0,3.36.7,4.71,2.08,1.34,1.39,2.02,2.97,2.02,4.73s-.67,3.31-2.02,4.64-2.91,1.99-4.71,1.99h-29.57v82.18h29.57c1.79,0,3.36.67,4.71,2.02,1.34,1.34,2.02,2.91,2.02,4.7Z"/><path id="a2" class="cls-1" d="M871.52,103.81c0,1.79-.67,3.36-2.02,4.7-1.34,1.34-2.91,2.02-4.7,2.02s-3.36-.67-4.7-2.03c-1.34-1.35-2.02-2.93-2.02-4.73v-25.11h-112.9v25.11c0,1.81-.67,3.38-2.02,4.73-1.34,1.35-2.91,2.03-4.7,2.03s-3.36-.67-4.7-2.02c-1.34-1.34-2.02-2.91-2.02-4.7v-48.77c0-11.01,1.85-20,5.57-26.98,3.71-6.98,8.74-12.41,15.07-16.32,6.34-3.9,13.73-6.59,22.18-8.06,8.45-1.47,17.47-2.21,27.07-2.21s18.62.74,27.07,2.21c8.45,1.47,15.84,4.16,22.18,8.06,6.34,3.91,11.36,9.35,15.07,16.32,3.71,6.98,5.57,15.97,5.57,26.98v48.77ZM858.08,55c0-3.08-.16-6.17-.48-9.25-.32-3.08-1.06-6.1-2.21-9.06-1.92-5.01-4.96-8.99-9.12-11.95-4.16-2.96-8.8-5.14-13.92-6.55-5.12-1.41-10.37-2.31-15.74-2.7-5.38-.38-10.37-.58-14.98-.58s-9.38.2-14.69.58c-5.31.38-10.5,1.28-15.55,2.7-5.06,1.42-9.67,3.5-13.82,6.26-4.16,2.76-7.27,6.52-9.31,11.27-1.41,3.08-2.27,6.23-2.59,9.45-.32,3.21-.48,6.49-.48,9.83v10.21h112.9v-10.21Z"/><path id="l" class="cls-1" d="M1024.54,103.81c0,1.79-.67,3.36-2.02,4.7-1.34,1.34-2.91,2.02-4.7,2.02h-120.38c-1.79,0-3.36-.67-4.7-2.02-1.34-1.34-2.02-2.91-2.02-4.7V8.38c0-1.79.67-3.39,2.02-4.8,1.34-1.41,2.91-2.11,4.7-2.11s3.36.71,4.7,2.11c1.34,1.41,2.02,3.01,2.02,4.8v88.7h113.66c1.79,0,3.36.67,4.7,2.02,1.34,1.34,2.02,2.91,2.02,4.7Z"/><path id="m" class="cls-1" d="M1334.36,108.51c-1.33,1.34-2.87,2.02-4.63,2.02s-3.35-.67-4.73-2.02c-1.39-1.35-2.08-2.92-2.08-4.72v-48.86c0-6.28-.48-11.93-1.45-16.93-.96-5-2.7-9.2-5.2-12.6-2.5-3.4-5.97-5.99-10.4-7.79-4.43-1.79-10.17-2.69-17.23-2.69s-12.81.9-17.23,2.69c-4.43,1.8-7.9,4.4-10.4,7.79-2.5,3.4-4.24,7.6-5.2,12.6-.96,5-1.44,10.65-1.44,16.93v48.86c0,1.8-.7,3.37-2.08,4.72-1.39,1.35-2.97,2.02-4.73,2.02s-3.31-.67-4.64-2.02-1.99-2.92-1.99-4.72v-48.86c0-6.28-.48-11.93-1.44-16.93-.96-5-2.69-9.2-5.18-12.6-2.5-3.4-5.95-5.99-10.37-7.79-4.42-1.79-10.15-2.69-17.18-2.69s-12.77.9-17.18,2.69c-4.42,1.8-7.91,4.4-10.46,7.79-2.56,3.4-4.32,7.6-5.28,12.6-.96,5-1.44,10.65-1.44,16.93v48.86c0,1.8-.67,3.37-2.02,4.72s-2.91,2.02-4.7,2.02-3.36-.67-4.7-2.02c-1.34-1.34-2.02-2.91-2.02-4.7v-48.77c0-8.19.8-15.58,2.4-22.18,1.6-6.59,4.28-12.22,8.05-16.9,3.77-4.67,8.69-8.26,14.77-10.75,6.07-2.5,13.58-3.74,22.54-3.74,4.22,0,8.31.32,12.27.96,3.96.64,7.7,1.76,11.22,3.36,3.52,1.6,6.74,3.68,9.68,6.24,2.94,2.56,5.5,5.76,7.67,9.6,2.05-3.84,4.57-7.04,7.57-9.6,3.01-2.56,6.3-4.64,9.88-6.24,3.58-1.6,7.35-2.72,11.31-3.36,3.96-.64,8.06-.96,12.28-.96,8.95,0,16.46,1.25,22.54,3.74,6.07,2.5,11,6.08,14.77,10.75,3.77,4.67,6.46,10.31,8.05,16.9,1.6,6.59,2.4,13.99,2.4,22.18v48.77c0,1.79-.66,3.36-1.99,4.7Z"/><path id="o" class="cls-1" d="M1522.78,56.19c0,7.94-1.18,15.17-3.55,21.7-2.36,6.53-6.74,12.35-13.14,17.47-4.09,3.33-8.92,6.02-14.48,8.06-5.56,2.05-11.41,3.62-17.55,4.7-6.14,1.09-12.24,1.79-18.32,2.11-6.07.32-11.6.48-16.59.48s-10.52-.16-16.59-.48-12.15-1.02-18.22-2.11c-6.07-1.09-11.89-2.66-17.45-4.7-5.56-2.05-10.39-4.73-14.48-8.06-6.4-5.12-10.78-10.94-13.14-17.47-2.36-6.53-3.55-13.76-3.55-21.7s1.18-15.1,3.55-21.5c2.36-6.4,6.74-12.22,13.14-17.47,4.09-3.33,8.92-6.02,14.48-8.06,5.56-2.05,11.38-3.62,17.45-4.7,6.07-1.09,12.15-1.82,18.22-2.21,6.07-.38,11.6-.58,16.59-.58s10.52.19,16.59.58c6.07.38,12.18,1.12,18.32,2.21,6.14,1.09,11.99,2.66,17.55,4.7,5.56,2.05,10.39,4.74,14.48,8.06,6.39,5.25,10.77,11.07,13.14,17.47,2.36,6.4,3.55,13.57,3.55,21.5ZM1509.34,56.1c0-3.08-.16-6.16-.48-9.24-.32-3.08-1.19-6.09-2.59-9.04-2.56-5.39-6.56-9.59-12-12.61-5.44-3.02-11.39-5.29-17.86-6.83-6.46-1.54-13.03-2.47-19.68-2.79-6.66-.32-12.48-.48-17.47-.48s-10.56.16-17.09.48c-6.53.32-12.99,1.19-19.39,2.6-6.4,1.41-12.29,3.56-17.66,6.45s-9.41,6.9-12.1,12.03c-1.54,2.95-2.56,6.09-3.07,9.43-.51,3.34-.77,6.67-.77,10.01s.25,6.71.77,10.1c.51,3.4,1.54,6.58,3.07,9.52,2.69,5.13,6.72,9.14,12.1,12.03,5.38,2.89,11.26,5.04,17.66,6.45,6.4,1.41,12.86,2.28,19.39,2.6,6.53.32,12.22.48,17.09.48s10.82-.16,17.47-.48c6.65-.32,13.21-1.25,19.68-2.79,6.46-1.54,12.41-3.82,17.86-6.83,5.44-3.01,9.44-7.22,12-12.61,1.41-2.95,2.27-5.99,2.59-9.14.32-3.14.48-6.25.48-9.34Z"/><path id="v" class="cls-1" d="M1685.6,8.38c0,1.67-.45,3.01-1.34,4.03l-74.69,95.62c-1.41,1.67-3.14,2.5-5.18,2.5-2.18,0-3.97-.83-5.38-2.5l-74.69-95.62c-.9-1.02-1.34-2.37-1.34-4.03,0-1.79.67-3.39,2.02-4.8,1.34-1.41,2.91-2.11,4.7-2.11,2.05,0,3.84.9,5.38,2.69l69.31,88.7,69.12-88.7c1.41-1.79,3.2-2.69,5.38-2.69,1.79,0,3.36.71,4.7,2.11,1.34,1.41,2.02,3.01,2.02,4.8Z"/><path id="i2" class="cls-1" d="M1790.81,103.81c0,1.79-.67,3.36-2.02,4.7-1.34,1.34-2.91,2.02-4.7,2.02h-72.58c-1.79,0-3.36-.67-4.7-2.02-1.34-1.34-2.02-2.91-2.02-4.7s.67-3.36,2.02-4.7c1.34-1.34,2.91-2.02,4.7-2.02h29.57V14.91h-29.57c-1.79,0-3.36-.66-4.7-1.99-1.34-1.33-2.02-2.87-2.02-4.64s.67-3.34,2.02-4.73c1.34-1.39,2.91-2.08,4.7-2.08h72.58c1.79,0,3.36.7,4.7,2.08,1.34,1.39,2.02,2.97,2.02,4.73s-.67,3.31-2.02,4.64-2.91,1.99-4.7,1.99h-29.57v82.18h29.57c1.79,0,3.36.67,4.7,2.02,1.34,1.34,2.02,2.91,2.02,4.7Z"/><path id="e" class="cls-1" d="M1952.86,103.81c0,1.79-.67,3.36-2.02,4.7-1.34,1.34-2.91,2.02-4.7,2.02h-120.1c-1.77,0-3.35-.67-4.73-2.02-1.39-1.34-2.08-2.91-2.08-4.7v-24.96h-15.69c-1.81,0-3.39-.69-4.74-2.08-1.36-1.39-2.03-2.96-2.03-4.73s.68-3.31,2.03-4.63c1.36-1.33,2.94-1.99,4.74-1.99h15.69V8.4c0-1.8.69-3.4,2.08-4.81,1.39-1.41,2.96-2.12,4.73-2.12h120.1c1.79,0,3.36.7,4.7,2.08,1.34,1.39,2.02,2.97,2.02,4.73s-.67,3.31-2.02,4.64c-1.34,1.33-2.91,1.99-4.7,1.99h-113.47v50.5h91.2c1.79,0,3.36.66,4.7,1.99,1.34,1.33,2.02,2.87,2.02,4.63s-.67,3.35-2.02,4.73c-1.34,1.39-2.91,2.08-4.7,2.08h-91.2v18.24h113.47c1.79,0,3.36.67,4.7,2.02,1.34,1.34,2.02,2.91,2.02,4.7Z"/><path id="s2" class="cls-1" d="M2117.02,80.19c0,6.4-1.28,11.62-3.84,15.65s-5.88,7.14-9.97,9.31c-4.09,2.18-8.72,3.65-13.9,4.42s-10.39,1.15-15.63,1.15h-94.91c-1.79,0-3.36-.67-4.7-2.02-1.34-1.34-2.01-2.91-2.01-4.7s.67-3.36,2.02-4.7c1.34-1.34,2.91-2.02,4.7-2.02h93.5c3.2,0,6.62-.1,10.27-.29,3.65-.19,7.04-.8,10.18-1.82,3.13-1.02,5.73-2.72,7.78-5.09,2.05-2.37,3.07-5.66,3.07-9.89,0-1.54-.13-3.04-.38-4.51-.26-1.47-.77-2.91-1.54-4.32-1.28-2.05-3.14-3.65-5.57-4.8-2.43-1.15-5.06-1.98-7.87-2.5-2.82-.51-5.66-.83-8.54-.96-2.88-.13-5.35-.19-7.39-.19h-55.3c-5.25,0-10.56-.35-15.94-1.06-5.38-.7-10.21-2.11-14.5-4.22-4.29-2.11-7.78-5.18-10.46-9.22-2.69-4.03-4.03-9.38-4.03-16.03s1.28-11.62,3.83-15.65,5.88-7.17,9.97-9.41c4.09-2.24,8.72-3.74,13.9-4.51s10.39-1.15,15.63-1.15h94.72c1.79,0,3.39.66,4.79,1.99,1.4,1.33,2.11,2.87,2.11,4.63s-.71,3.35-2.11,4.73c-1.41,1.39-3.01,2.08-4.79,2.08h-93.17c-2.05,0-4.51.03-7.38.1-2.88.07-5.72.35-8.53.87-2.81.52-5.43,1.35-7.86,2.51-2.43,1.16-4.28,2.77-5.56,4.82-.77,1.42-1.31,2.87-1.63,4.35-.32,1.48-.48,2.99-.48,4.54,0,4.25,1.02,7.56,3.07,9.95s4.63,4.09,7.76,5.11c3.13,1.03,6.55,1.64,10.26,1.84,3.71.19,7.16.29,10.36.29h55.21c5.24,0,10.54.35,15.91,1.06,5.37.71,10.19,2.15,14.48,4.32,4.28,2.18,7.76,5.28,10.45,9.31,2.68,4.03,4.03,9.38,4.03,16.03Z"/></g></svg>
</div>
<span class="visually-hidden">{{ metadata.title }}</span>
</a>
{#- Read more about `eleventy-navigation` at https://www.11ty.dev/docs/plugins/navigation/ #}
<nav>
<h2 class="visually-hidden">Top level navigation menu</h2>
<ul class="nav">
{%- for entry in collections.all | eleventyNavigation %}
<li class="nav-item"><a href="{{ entry.url }}"{% if entry.url == page.url %} aria-current="page"{% endif %}>{{ entry.title }}</a></li>
{%- endfor %}
</ul>
</nav>
<a class="button" href="https://famebot.com">Visit Famebot <span role="img" aria-label="">🤖</span></a>
</header>
<main id="skip">
{{ content | safe }}
</main>
<footer>
{%- if not metadata.mono %}
{#- Rainbow Mode enabled, show 🌈 Rainbow button and readout #}
<div id="rainbutton"></div>
<aside id="chromagen"></aside>
{% endif %}
<aside>built with <a title="Eleventy {{ metadata.elevenv }} + eleventeen {{ metadata.eleventeen }}" href="https://eleventeen.blog/about/">eleventeen</a></aside>
</footer>
<!-- This page `{{ page.url | htmlBaseUrl }}` was built on {% currentBuildDate %} -->
{#
listen for and respond to prefers-color-scheme (light/dark)
changes in both mono and rainbow modes
#}
{% js %}
let huedark = '#000';
let huehsl = '#fff';
function activateColorScheme() {
const colorSchemeQueryList = window.matchMedia('(prefers-color-scheme: light)');
if ((colorSchemeQueryList.media === 'not all')
|| (colorSchemeQueryList.matches === true)) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', huehsl);
} else {
document.querySelector('meta[name="theme-color"]').setAttribute('content', huedark);
}
}
{# respond to prefers-color-scheme changes #}
const darkPreference = window.matchMedia("(prefers-color-scheme: dark)");
const lightPreference = window.matchMedia("(prefers-color-scheme: light)");
darkPreference.addEventListener("change", e => e.matches && activateColorScheme());
lightPreference.addEventListener("change", e => e.matches && activateColorScheme());
{% endjs %}
{# rainbow mode code lode #}
{%- if not metadata.mono %}
{% js %}
{% include "node_modules/@famebot/chromagen/dist/chromagen.umd.js" %}
{% endjs %}
{% js %}
{# connect Rainbow Me button #}
document.querySelector('#rainbutton').innerHTML = '<button title="wish upon a star" onclick="rainbow()">🌈 Rainbow Me</button>';
const rainbow = () => {
var colorScheme = chromagen();
{#- https://davidwalsh.name/css-variables-javascript #}
const docstyle = document.documentElement.style;
huedark = `hsl(${colorScheme.hue}, ${colorScheme.saturation}, ${colorScheme.darkness})`;
huehsl = `hsl(${colorScheme.hue}, ${colorScheme.saturation}, ${colorScheme.lightness})`;
docstyle.setProperty('--active-light', huedark);
docstyle.setProperty('--active-dark', huehsl);
docstyle.setProperty('--background-color-light', huehsl);
docstyle.setProperty('--background-color-dark', huedark);
docstyle.setProperty('--complement', `hsl(${colorScheme.analogous}, ${colorScheme.saturation}, ${colorScheme.lightness})`);
docstyle.setProperty('--complementdark', `hsl(${colorScheme.analogous}, ${colorScheme.saturation}, ${colorScheme.darkness})`);
docstyle.setProperty('--complementdarker', `hsl(${colorScheme.analogous}, ${colorScheme.saturation}, ${colorScheme.darker})`);
docstyle.setProperty('--primary', `hsl(${colorScheme.complement}, ${colorScheme.saturation}, ${colorScheme.lightness})`);
docstyle.setProperty('--primarydark', `hsl(${colorScheme.complement}, ${colorScheme.saturation}, ${colorScheme.darkness})`);
docstyle.setProperty('--primarydarker', `hsl(${colorScheme.complement}, ${colorScheme.saturation}, ${colorScheme.darker})`);
docstyle.setProperty('--text-color-dark', `hsl(${colorScheme.hue}, ${colorScheme.saturation}, ${colorScheme.lighter})`);
docstyle.setProperty('--text-color-light', `hsl(${colorScheme.hue}, ${colorScheme.saturation}, ${colorScheme.darker})`);
{#
activate theme-color. needs to happen here so theme-color updates even if
page already loaded, for example when Rainbow Me button is clicked.
#}
activateColorScheme();
{# update readout #}
document.querySelector('#chromagen').innerHTML = `<details>
<summary><span role="img" aria-label="palette">🎨</span>
<span title="hue"> H ${colorScheme.hue} </span>
<span title="complement">C ${colorScheme.complement} </span>
<span title="analogous">A ${colorScheme.analogous}</span>
</summary>
<span title="saturation">S ${colorScheme.saturation} </span>
<span title="xlight">XL ${colorScheme.xlight} </span>
<span title="lighter">LR ${colorScheme.lighter} </span>
<span title="lightness">L ${colorScheme.lightness} </span>
<span title="midrange">M ${colorScheme.midrange} </span>
<span title="lowmid">LM ${colorScheme.lowmid} </span>
<span title="darkness">D ${colorScheme.darkness} </span>
<span title="darker">DR ${colorScheme.darker} </span>
<a href="https://chromagen.io">Chromagen</a>
</details>`;
}
rainbow();
{% endjs %}
{# end rainbow mode code lode #}
{% else %}
{% js %}
{# activate theme-color in mono mode #}
activateColorScheme();
{% endjs %}
{% endif %}
{#
getBundleFileUrl Writes the bundle content to a content-hashed file location in your
output directory and returns the URL to the file for use.
https://github.com/11ty/eleventy-plugin-bundle/blob/main/README.md#write-a-bundle-to-a-file
Note that writing bundles to files will likely be slower for
empty-cache first time visitors but better cached in the browser
for repeat-views (and across multiple pages, too).
https://mathiasbynens.be/notes/inline-vs-separate-file
http://calendar.perfplanet.com/2011/why-inlining-everything-is-not-the-answer/
Choosing not to block render
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#blocking_rendering_till_a_script_is_fetched_and_executed
need bundle in both mono and rainbow modes to set and respond to
prefers-color-scheme initial preference and changes
#}
<script async src="{% getBundleFileUrl "js" %}"></script>
</div>
</body>
</html>