jrmann100.github.io/layout.html at main · jrmann100/jrmann100.github.io · GitHub

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
<!doctype html>
<html lang="en">
  <head>
    <!--{{debug}}-->
    <!--This content will be replaced by the renderer; use {{head}} instead.-->
    <!--{{/debug}}-->
    <meta charset="UTF-8" />
    <!-- <meta name="color-scheme" content="light dark" /> -->
    <meta name="theme-color" content="#111" />
    <link rel="stylesheet" href="/static/css/global.css" />
    <script src="/static/js/lib/events.js"></script>
    <script src="/static/js/lib/colors.js"></script>
    <script src="/static/components/components.js"></script>
    <link rel="shortcut icon" href="/static/img/icon.png" type="image/x-icon" />
    <meta name="author" content="Jordan" />
    <!-- <meta name="description" content=""> -->
    <meta name="generator" content="Jordan's tiny routing/SSR engine." />
    <meta name="keywords" content="jordan,personal website,blog,programming,web design" />
    <!-- <meta name="theme-color" content="#FFF" media="(prefers-color-scheme: light)" /> -->
    <!-- <meta name="theme-color" content="#111" media="(prefers-color-scheme: dark)" /> -->
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1" />
    <meta name="robots" content="index,follow" />
    <!--{{head}}-->
    <title>Jordan Mann</title>
    <!--{{/head}}-->
  </head>

  <body class="desktop">
    <header>
      <a
        data-needs-css
        hidden
        class="centering logo"
        href="/index.html"
        aria-label="Return to the home page"
      >
        <div
          class="face"
          role="img"
          aria-label="An expressive abstract logo with components representing an eye, nose, and outline of a face. It's reminiscent of Apple's Finder logo and Picasso's The Ladies of Avignon."
        >
          <svg viewBox="0 0 515 515" width="160" height="160" role="img">
            <!-- <title>A component of an abstract circular face.</title> -->
            <path
              d="m 18.51729,257.49997 v 0 c 0,-131.98648 106.99619,-238.982685 238.98268,-238.982685 v 0 c 63.38217,0 124.16835,25.178464 168.98631,69.996403 44.81796,44.817952 69.99643,105.604142 69.99643,168.986282 v 0 c 0,131.98652 -106.99621,238.98274 -238.98274,238.98274 v 0 C 125.51348,496.48272 18.51729,389.48649 18.51729,257.49997 Z"
            />
          </svg>
          <svg viewBox="0 0 515 515" width="160" height="160">
            <!-- <title>A component of an abstract circular face.</title> -->
            <path
              d="M 257.49997,18.517285 C 246.291,63.351791 194.00866,236.07343 195.20077,285.20076 c 1.19211,49.12733 80.22227,-4.58031 90.00001,30 9.77769,34.5803 -25.07747,150.99443 -27.70081,181.28195"
            />
          </svg>
          <svg viewBox="0 0 515 515" class="eye" width="160" height="160">
            <!-- <title>A component of an abstract circular face.</title> -->
            <path
              d="m 290.57699,165.20077 v 0 c 0,-30.16789 24.4559,-54.62378 54.62379,-54.62378 v 0 c 14.48712,0 28.3809,5.75499 38.62484,15.99893 10.24397,10.24394 15.99895,24.13771 15.99895,38.62485 v 0 c 0,30.16788 -24.4559,54.62377 -54.62379,54.62377 v 0 c -30.16789,0 -54.62379,-24.45589 -54.62379,-54.62377 z"
            />
          </svg>
        </div>
      </a>
      <nav>
        <!-- todo utilities should have its own menu -->
        <h1>
          <!--{{title}}-->
          Jordan Mann
          <!--{{/title}}-->
        </h1>
        <ul>
          <li class="home"><a href="/index.html">home</a></li>
          <li class="resume"><a href="/resume.html">résumé</a></li>
          <li class="utilities">
            <div class="fake-details" tabindex="0">
              <span class="fake-summary">utilities</span>
              <div class="nav-dropdown solid">
                <ul>
                  <li class="godango">
                    <a href="/utilities/godango.html">godango</a> - a password generator
                  </li>
                  <li class="dashboard">
                    <a href="/utilities/dashboard.html">dashboard</a> - various info widgets
                  </li>
                  <li class="clipboard">
                    <a href="/utilities/clipboard.html">clipboard</a> - inspect what you copy
                  </li>
                </ul>
              </div>
            </div>
          </li>
          <li class="options" hidden data-needs-js>
            <div class="fake-details" tabindex="0">
              <span class="fake-summary"><i>theme</i></span>
              <div class="centering nav-dropdown solid">
                <switcher-component data-layout data-cell-width="5rem" data-name="colors-switcher">
                  <style>
                    label[for='colors-switcher-lock']::before {
                      content: '🔓 ';
                    }

                    input#colors-switcher-lock:checked ~ label[for='colors-switcher-lock']::before {
                      content: '🔒 ';
                    }
                  </style>
                  <input data-label="☀️ light" title="Use light color scheme" value="light" />
                  <input data-label="☁️ auto" title="Match system color scheme" value="auto" />
                  <input data-label="🌙 dark" title="Use light color scheme" value="dark" />
                  <input data-label="lock" title="Lock current color scheme" value="lock" />
                </switcher-component>
                <button class="colors-shuffle">🔄 change</button>
              </div>
            </div>
          </li>
        </ul>
      </nav>
    </header>
    <main id="layout">
      <!--{{main}}-->
      <!--{{/main}}-->
    </main>
    <footer>
      <small>
        <script data-value="`Copyright ${new Date().getUTCFullYear()}.`">
          document.currentScript.outerHTML = eval(document.currentScript.dataset.value);
        </script>
        <noscript> &nbsp;Copyright 2022. </noscript>
        Made entirely by Jordan.<sup
          ><span data-only-screen
            >[<a
              href="https://github.com/jrmann100/jrmann100.github.io"
              style="text-decoration: inherit"
              >source</a
            >]</span
          ></sup
        >
      </small>
    </footer>
    <script async type="module" src="/static/js/layout.js"></script>
  </body>
</html>