https://www.jaysitter.com/

1<!DOCTYPE html>
2<html lang="en">
3
4  <head>
5
6    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
8    

8<script src="https://use.typekit.com/wni7iwq.js"></script>

8
9    

9<script>try{Typekit.load();}catch(e){}</script>

9
10
11    <link rel="icon" type="image/png" href="/favicon.png">
12
13    <title>Jay Sitter</title>
14
15    <style>
16    <!--
17
18      :root {
19        --background: #f8f8f8;
20        --foreground: #444;
21      }
22
23      @media (prefers-color-scheme: dark) {
24        :root {
25          --background: #444;
26          --foreground: #f8f8f8;
27        }
28      }
29
30      * {
31        box-sizing: border-box;
32      }
33
34      html {
35        font-size: 100%;
36        font-size: calc(80% + 0.5vmin);
37        height: 100%;
38      }
39
40      body {
41        margin: 0;
42        display: flex;
43        align-items: flex-end;
44        font-family: 'franklin-gothic-urw', Verdana, sans-serif;
45        font-weight: 400;
46        line-height: 1.3;
47        color: var(--foreground);
48        background-color: var(--background);
49        padding-left: 5vh;
50        padding-bottom: 7vh;
51        height: 100%;
52      }
53
54      a {
55        color: inherit;
56        text-decoration: none;
57      }
58
59      a:focus-visible,
60      a:hover {
61        color: #e50067;
62      }
63
64      h1 {
65        font-size: 2rem;
66        font-size: calc(2 * (80% + 0.5vmin));
67        font-weight: 700;
68        margin-bottom: 0;
69      }
70
71      p,
72      ul{
73        margin: 1.3em 0 0 0;
74      }
75
76      ul {
77        list-style-type: none;
78        padding: 0;
79      }
80
81      .rainbow {
82        display: inline-block;
83        font-family: Comic Sans MS, Comic Sans, Marker Felt, cursive;
84        text-transform: uppercase;
85        font-weight: 900;
86        background: linear-gradient(to right, red, yellow, orange, green, blue, purple, red, yellow, orange, green, blue, purple, red);
87        background-size: 200% 400%;
88
89        -webkit-background-clip: text;
90        -webkit-text-fill-color: transparent;
91        background-clip: text;
92        text-fill-color: transparent;
93
94        animation: flow 2s linear infinite;
95      }
96
97      @keyframes flow {
98        0% {
99          background-position: 0% 50%;
100        }
101        50% {
102          background-position: 100% 50%;
103        }
104        100% {
105          background-position: 200% 50%;
106        }
107      }
108
109    -->
110    </style>
111
112  </head>
113
114  <body>
115
116    <main>
117
118      <h1>Jay Sitter</h1>
119
120      <p style="margin-top:0">
121        <strong>1980&ndash;</strong>
122      </p>
123
124      <p>
125        Developer &middot; Designer &middot; <span class="rainbow">Webmaster</span><br>
126        <a href="mailto:[email protected]">[email protected]</a>
127      </p>
128
129      <ul>
130        <li><a href="https://wmbr.org/cgi-bin/show?id=9573">The Willows &mdash; WMBR</a></li>
131        <li><a href="https://www.diameterstudios.com/">Diameter Studios</a></li>
132        <li><a href="https://www.kilobitspersecond.com/">kbps</a></li>
133        <li><a href="https://css-tricks.com/author/jaysitter/">CSS Tricks</a></li>
134        <li><a href="https://www.tinymixtapes.com/">Tiny Mix Tapes</a></li>
135      </ul>
136
137      <ul>
138        <li><a href="https://github.com/jsit/">GitHub</a></li>
139        <li><a href="https://www.linkedin.com/in/jaysitter">LinkedIn</a></li>
140        <li><a href="https://social.coop/@jsit">Mastodon</a></li>
141        <!-- <li><a href="https://twitter.com/verycoolhacker">Twitter</a></li> -->
142        <li><a href="https://www.last.fm/user/topdownjimmy">Last.fm</a></li>
143      </ul>
144
145    </main>
146
147  </body>
148
149</html>