summaryrefslogtreecommitdiff
path: root/templates/base.html
blob: 12e9803a051ba4c83d0fd59695d7c4bdde093168 (plain) (blame)
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
<!DOCTYPE html>
<html lang="en"
      prefix="og: https://ogp.me/ns# article: https://ogp.me/ns/article# profile: https://ogp.me/ns/profile#">
  <head>
    {% block head %}
      {% block meta %}
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="color-scheme" content="dark light">
        <meta name="generator" content="lektor">
        <meta name="description" content="{{ bag('blog.tagline') }}">
        <meta property="og:description"  content="{{ bag('blog.tagline') }}">
        <meta property="og:site_name" content="{{ bag('blog.name') }}">
        <meta property="og:title"
              content="{% if (this.title or title) %}{{ (this.title or title) | safe }}{% else %}{{ bag('blog.name') }}{% endif %}">
        <meta property="og:url"
              content="{{ this | url(absolute=True, external=True) }}">
        <meta property="og:locale" content="en_US">
        <meta property="og:image"
              content="{{ '/static/images/opengraph.png' | url(absolute=True, external=True) }}">
        <meta property="og:image:type" content="image/png">
        <meta property="og:image:width" content="1200">
        <meta property="og:image:height" content="630">
        <meta property="og:image:alt"
              content="Muted green Hilbert-curve logo beside the words “Still Thinking About It” on a dark blue background">
        <meta name="fediverse:creator" content="@me@dennisfink.me">
      {% endblock meta %}
      {% block styles %}
        <link rel="stylesheet"
              type="text/css"
              href="{{ '/static/css/modern_normalize.css' | asseturl }}">
        <link rel="stylesheet"
              type="text/css"
              href="{{ '/static/css/libre_baskerville.css' | asseturl }}">
        <link rel="stylesheet"
              type="text/css"
              href="{{ '/static/css/style.css' | asseturl }}">
      {% endblock styles %}
      {% block meta_links %}
        <link rel="canonical" href="{{ this|url(absolute=True, external=True) }}">
        <link rel="alternate"
              type="application/atom+xml"
              title="{{ bag('blog.name') }} — Latest posts"
              href="{{ '/blog@atom/latest'|url(absolute=True) }}">
        <link rel="alternate"
              type="application/atom+xml"
              title="{{ bag('blog.name') }} — All posts"
              href="{{ '/blog@atom/all'|url(absolute=True) }}">
        <link rel="shortcut icon"
              type="image/png"
              href="{{ '/static/images/favicon.png' | asseturl }}">
      {% endblock meta_links %}
      <title>
        {% block meta_title %}
          {%- if (this.title or title) -%}{{ (this.title or title) | safe }} —
          {% endif -%}
          {{ bag("blog.name") }} — dennisfink.me
        {% endblock meta_title %}
      </title>
    {% endblock head %}
  </head>
  <body>
    {% block body %}
      <a href="#main" class="skip-link">Skip to main content</a>
      <header>
        {% block site_header %}
          <div>
            <hgroup>
              <h1>
                <a href="/">{{ bag("blog.name") }}</a>
              </h1>
              <p>{{ bag("blog.tagline") }}</p>
            </hgroup>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">
              <path d="M89.4 0C40.1 0 0 40 0 89.4v621.2C0 759.9 40 800 89.4 800h621.2c49.3 0 89.4-40 89.4-89.4V89.4C800 40.1 760 0 710.6 0zm0 18.9h621.2A70 70 0 0 1 781 89.4v621.2a70 70 0 0 1-70.5 70.5H89.4A70 70 0 0 1 19 710.6V89.4A70 70 0 0 1 89.4 19m147.8 71c-11.9-.1-24.6 0-37.2 0-25.4.4-50.7 1.3-70.1 2.7-9.7.7-18 1.5-24 2.5q-4.5.7-7.5 1.7c-2 .6-3.5 1-4.6 3q-.6 1.4-.7 2.9-.3 1.6-.5 4.2l-.9 13.7c-.5 11.4-1 27-1.3 45.5a8909 8909 0 0 0-.2 267.8 1985 1985 0 0 0 2 59.2l.4 4.2q.1 1.5.7 2.8c1 2 2.5 2.4 4.3 3q2.7 1 6.9 1.8 8.4 1.6 22 2.7a1491 1491 0 0 0 64 3.6c23 1 46.2 1.7 63.8 2.5a614 614 0 0 1 28 2l1.4.2.3 1.2.7 5.6c.5 4.8.9 11.6 1.2 19.5a1632 1632 0 0 1 .1 115.5 390 390 0 0 1-1.8 25.3l-.3 1q-.4.3-1.3.4l-6 .6q-7.7.7-20.5 1.1c-16.8.7-38.9 1.1-60.9 1.4a7900 7900 0 0 1-103 .8l-2 .3c-.4 0-1 0-1.6 1.3q-.5.9-.3.8v1.1L88 700l.2 9.3.3.8c.6 1.4 1.2 1.2 1.5 1.3l.7.2 1.4.1 3.7.2h9.1c2.7 0 51.2 0 99.7-.6 24.3-.4 48.5-.9 67-1.7a485 485 0 0 0 30-2.2l2.2-.5c.7-.3 1.3-.3 2.1-1.2q1-1.1 1-2 .4-1.2.6-2.5.5-2.8.8-7.3.8-9.2 1.3-23.9a2277 2277 0 0 0 .1-140 547 547 0 0 0-2-31.2l-.5-2.4c-.2-.7-.2-1.2-1-2-.8-1-1.4-1-2-1.2q-1-.4-2.3-.6l-6.7-.9q-8.4-.7-21.8-1.5c-17.7-1-40.8-1.7-64-2.7-23-.9-46.2-2-63.8-3.4-8.7-.7-16.2-1.5-21.4-2.4q-4-.7-6.2-1.4-1.2-.4-1.5-.7l-.1-.8-.4-3.5q-.5-4.6-.8-12.3c-.4-8-.6-20.1-1-32.3a4578 4578 0 0 1 1.4-306l.5-4.4 1.3-.6q1.8-.8 5.4-1.4 7.4-1.3 19.4-2.3a1269 1269 0 0 1 115.5-1.8 355 355 0 0 1 25.1 1.8l1.2.3.3 1.4.6 6.3q.8 8.2 1.2 21.6c.7 17.7 1.3 40.8 2 64 .6 23 1.2 46.2 2 63.9a465 465 0 0 0 2.4 28.5q.2 1.3.6 2.3.1.9 1.1 2c1 1.1 1.4.8 2.1 1l2.4.5 7.3.8q9.2.7 23.9 1.2a2305 2305 0 0 0 163.9-1.2 101 101 0 0 0 9.7-1.3c.7-.2 1.2-.2 2-1 1-.8 1-1.4 1.2-2q.4-1 .6-2.3l.9-6.7q.8-8.4 1.4-21.8c.9-17.7 1.5-40.9 2.1-64s1.3-46.2 2-63.9a571 571 0 0 1 1.8-27.9l.3-1.4 1.2-.3 5.6-.7a355 355 0 0 1 19.5-1 1269 1269 0 0 1 115.5 1.7q12.1 1 19.4 2.3 3.5.7 5.4 1.4l1.3.6.2.9.3 3.5q.4 4.5.7 12.3a4578 4578 0 0 1-1 338.3l-.6 4.3q-.3.3-1.5.7-2.1.8-6.2 1.4c-5.2 1-12.7 1.7-21.4 2.4-17.6 1.4-40.7 2.5-63.9 3.4-23 1-46.2 1.8-63.9 2.7a493 493 0 0 0-28.5 2.4q-1.3.2-2.3.6c-.6.2-1.2.3-2 1.1s-.8 1.4-1 2.1l-.5 2.4-.8 7.3q-.7 9.2-1.2 23.9a2277 2277 0 0 0 1.4 163.9 97 97 0 0 0 1.3 9.7q.1 1 1 2.1c.9.9 1.5 1 2.2 1.2l2.3.5 7 .9q8.8.8 22.9 1.3c18.5.8 42.7 1.3 67 1.7 48.5.7 97 .6 99.7.6l14.2-.3.7-.2c.3 0 .9 0 1.5-1.3q.5-.9.3-.8v-1.1l.2-8.2-.2-9.3-.3-.8c-.6-1.4-1.2-1.2-1.5-1.3l-.7-.2-1.3-.1-3.7-.2h-8.7c-2.5 0-46.6 0-90.7-.6-22-.3-44-.7-60.9-1.4a483 483 0 0 1-26.5-1.7l-1.3-.3-.3-1.1-.7-5.7a390 390 0 0 1-1-19.5 1632 1632 0 0 1 1.2-135l1-6.9 1.4-.3 6.4-.6 21.6-1.3c17.6-.8 40.7-1.6 63.9-2.5 23-1 46.2-2 64-3.6q13.4-1.2 22-2.7 4-.7 6.8-1.7c1.8-.7 3.4-1.2 4.3-3.1q.6-1.3.7-2.8l.4-4.2q.5-5.1.8-13.7c.5-11.4.8-27 1.2-45.5a8229 8229 0 0 0-1.5-313.3 331 331 0 0 0-1.4-18q0-1.3-.7-2.7c-1-2-2.7-2.5-4.6-3q-3-1-7.5-1.8c-6-1-14.3-1.8-24-2.5a1786 1786 0 0 0-140-2.2 517 517 0 0 0-31.2 1.8l-2.4.5c-.7.2-1.2.2-2 1-1 .8-1 1.4-1.2 2q-.4 1-.6 2.3l-.9 6.7q-.8 8.4-1.4 21.8c-.9 17.7-1.5 40.9-2.1 64s-1.3 46.2-2 63.9a571 571 0 0 1-1.8 27.9l-.3 1.4-1.2.3-5.6.7c-4.8.5-11.6.9-19.5 1.2a1575 1575 0 0 1-135-1.2l-6.9-1-.3-1.4-.6-6.3q-.7-8.2-1.2-21.6c-.7-17.7-1.3-40.8-2-64-.6-23-1.2-46.2-2-63.9a465 465 0 0 0-2.4-28.5q-.2-1.3-.6-2.3-.1-.8-1.1-2c-1-1.2-1.4-.8-2.1-1l-2.4-.5-7.3-.8q-9.2-.7-23.9-1t-32.8-.6M96 147.4c-3.2 65-3.2 230.9-.4 300.6l-.4-14.3a8224 8224 0 0 1 .2-267.6zm608 0 .6 18.7a8887 8887 0 0 1 .2 267.6l-.4 14.3a5034 5034 0 0 0-.4-300.6m-380.2 157c36.4 2.6 116 2.6 152.4 0-2.3 0-3.7.2-6.3.3a2302 2302 0 0 1-139.8 0zm-19.4 218.7.4 7a2273 2273 0 0 1-.1 139.7c-.1 3.3-.3 5.2-.5 8 3-35.2 3-118.2.2-154.7m191.2 0c-2.8 36.5-2.8 119.5.2 154.8-.2-3-.4-4.8-.5-8.1a2274 2274 0 0 1-.1-139.7z" />
            </svg>
          </div>
          <div>
            <nav aria-label="Site navigation">
              {% block site_navigation %}
                <ul>
                  {% block site_navigation_items %}
                    <li>
                      <a href="{{ '/blog' | url(absolute=True) }}"
                         {% if "/blog@" in this.path %}aria-current="page"{% endif %}>Blog</a>
                    </li>
                    <li>
                      <a href="{{ '/categories' | url(absolute=True) }}"
                         {% if this.path == "/categories" %}aria-current="page"{% endif %}>Categories</a>
                    </li>
                    <li>
                      <a href="{{ '/about' | url(absolute=True) }}"
                         {% if this.path == "/about" %}aria-current="page"{% endif %}>About</a>
                    </li>
                  {% endblock site_navigation_items %}
                </ul>
              {% endblock site_navigation %}
            </nav>
            <fieldset class="theme-switcher">
              <legend class="visually-hidden">Color theme</legend>
              <label title="Light mode">
                <input type="radio"
                       name="theme-switcher"
                       value="light"
                       id="lightmode"
                       aria-label="Light Mode">
                <span aria-hidden="true"></span>
              </label>
              <label title="Auto mode">
                <input type="radio"
                       name="theme-switcher"
                       value="light dark"
                       id="automode"
                       aria-label="Auto Mode"
                       checked>
                <span aria-hidden="true"></span>
              </label>
              <label title="Dark mode">
                <input type="radio"
                       name="theme-switcher"
                       value="dark"
                       id="darkmode"
                       aria-label="Dark Mode">
                <span aria-hidden="true"></span>
              </label>
            </fieldset>
          </div>
        {% endblock site_header %}
      </header>
      <main>
        {% block content required %}
        {% endblock content %}
      </main>
      <footer>
        {% block site_footer %}
          <section aria-label="Follow me">
            <h2>Follow me:</h2>
            <div>
              <a href="{{ '/blog@atom/latest' | url(absolute=True) }}"
                 id="atom"
                 aria-label="Atom feed — Latest posts"></a>
              <a rel="nofollow"
                 href="/email/"
                 id="email"
                 aria-label="Mail address: me plus blog at dennisfink.me"></a>
              <a rel="me"
                 href="https://social.dennisfink.me/@me"
                 id="mastodon"
                 aria-label="Mastodon profile: me on social.dennisfink.me"></a>
              <a href="xmpp:me@dennisfink.me"
                 id="xmpp"
                 aria-label="XMPP address: me on dennisfink.me"></a>
            </div>
          </section>
          <section>
            <h2>Blogroll</h2>
            <ul>
              <li>
                <a href="https://blog.janguth.eu/">Broadsheet (Jan Guth)</a>
              </li>
            </ul>
          </section>
        {% endblock %}
      </footer>
    {% endblock body %}
  </body>
</html>