Replace the "be the" page with an index page
[web/www] / index.html
index 0ca8b4dfbd1defba12bc0c02b2052ca404224af2..26dc7f49dc4d550c5e4700a81dd30e5e872f95d4 100644 (file)
 <!DOCTYPE html>
 <html prefix="og: http://ogp.me/ns#" lang="en">
 <head>
-    <meta charset="utf-8">
-    <title>Witch of Light</title>
-    <meta name="title" property="og:title" content="Witch of Light"/>
-    <meta name="description" property="og:description" content="A collection of Cassie's harebrained schemes"/>
-    <link rel="canonical" property="og:url" href="https://www.witchoflight.com"/>
-    <meta property="og:type" content="website"/>
-    <meta property="og:site_name" content="Witch of Light"/>
-    <link property="og:image" href="https://www.witchoflight.com/assets/light.png"/>
-    <meta property="og:image:type" content="image/png"/>
-    <meta property="og:image:alt" content="The Homestuck light aspect icon"/>
-    <meta name="twitter:card" content="summary"/>
-    <meta name="twitter:site" content="@porglezomp"/>
-    <meta name="twitter:creator" content="@porglezomp"/>
-    <style>
-h1 { color: #22a4ff; position: absolute; margin: 50vh auto; text-align: center; width: 100vw; font-family: courier; font-size: 3.8vw; animation-name: fade-out; animation-duration: 2s; animation-delay: 3s; animation-fill-mode: both; }
-@media screen and (max-width: 1000px) { h1 { font-size: 7vw; } }
-body { background: #f78123; margin: 0; }
-svg { max-width: 100vw; max-height: 100vh; animation-name: fade-in; animation-duration: 2s; animation-delay: 4.5s; animation-fill-mode: both; }
-#container { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100vw; height: 100vh;  box-sizing: border-box; padding: 16px; }
-@keyframes fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-@keyframes fade-out {
-  from { opacity: 1; }
-  to { opacity: 0; }
-}
-    </style>
+  <meta charset="utf-8">
+  <title>Witch of Light</title>
+  <meta name="description" content="A collection of Cassie's harebrained schemes"/>
+  <meta property="og:type" content="website"/>
+  <meta property="og:title" content="Witch of Light"/>
+  <meta property="og:description" content="A collection of Cassie's harebrained schemes"/>
+  <meta property="og:url" content="https://www.witchoflight.com"/>
+  <meta property="og:site_name" content="Witch of Light"/>
+  <meta property="og:image" content="https://www.witchoflight.com/assets/light.jpg"/>
+  <meta property="og:image:type" content="image/png"/>
+  <meta property="og:image:width" content="900"/>
+  <meta property="og:image:height" content="900"/>
+  <meta property="og:image:alt" content="The Homestuck light aspect icon"/>
+  <meta name="twitter:card" content="summary"/>
+  <meta name="twitter:site" content="@porglezomp"/>
+  <meta name="twitter:creator" content="@porglezomp"/>
+  <meta name="twitter:image" content="https://www.witchoflight.com/assets/light.png"/>
+  <link rel="canonical" href="https://www.witchoflight.com"/>
+  <style>
+* { box-sizing: border-box; }
+html { font-family: sans-serif; }
+body { max-width: 700px; padding: 1em; margin: 0 auto; min-height: 100vh; }
+.col { display: flex; flex-direction: column; }
+.row { display: flex; flex-direction: row; }
+.baseline { align-items: baseline; }
+.spacer { flex-grow: 1; }
+nav * { font-size: 32px; }
+  </style>
 </head>
-<body>
-    <h1>Cassie Jones: Be&nbsp;the&nbsp;Witch&nbsp;of&nbsp;Light.</h1>
-<div id="container">
-    <svg width="100%" height="100%" viewBox="0 0 549 546" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
-    <ellipse id="Core" cx="274.338" cy="272.392" rx="118.293" ry="118.632" style="fill:#fefa5a;"/>
-    <path id="Halo" d="M297.145,401.666c3.494,6.989 7.45,16.651 7.02,29.629c-0.472,14.274 -0.889,21.016 -18.111,32.615c-13.693,9.223 -12.78,11.775 -12.853,16.393c-0.095,6.042 17.136,14.525 17.476,26.515c0.414,14.575 -23.414,30.849 -34.735,34.626c7.145,-10.939 12.427,-15.562 12.357,-22.697c-0.119,-12.046 -26.151,-19.485 -25.757,-42.484c0.439,-25.667 19.817,-27.553 19.241,-38.096c-0.612,-11.212 -13.9,-16.073 -10.904,-36.2c7.246,1.263 14.698,1.921 22.301,1.921c8.186,0 16.197,-0.763 23.965,-2.222Zm40.183,19.006l-22.972,-23.493c7.465,-2.51 14.628,-5.684 21.422,-9.45l1.55,32.943Zm-126.496,-32.804c6.593,3.636 13.531,6.713 20.753,9.169l-22.526,22.642l1.773,-31.811Zm202.094,24.543l-61.157,-35.155c10.087,-7.719 19.021,-16.885 26.497,-27.191l34.66,62.346Zm-244.532,-61.932c7.52,10.281 16.495,19.417 26.619,27.099l-61.654,34.833l35.035,-61.932Zm252.602,-13.882l-33.244,-1.678c3.721,-6.955 6.836,-14.286 9.272,-21.922l23.972,23.6Zm-271.63,-23.502c2.415,7.547 5.492,14.796 9.163,21.678l-32.79,1.824l23.627,-23.502Zm-4.402,-18.132c-21.573,4.03 -26.388,-9.985 -37.911,-10.614c-10.543,-0.576 -12.429,18.798 -38.097,19.238c-22.999,0.393 -30.438,-25.634 -42.483,-25.753c-7.135,-0.07 -11.759,5.21 -22.697,12.355c3.776,-11.32 20.051,-35.144 34.626,-34.73c11.99,0.341 20.473,17.568 26.515,17.473c4.617,-0.073 7.17,0.84 16.392,-12.85c11.6,-17.219 18.341,-17.636 32.616,-18.109c14.005,-0.463 24.147,4.18 31.238,7.838c-1.334,7.515 -2.031,15.252 -2.031,23.152c0,7.496 0.628,14.847 1.832,22Zm256.151,-45.606c7.042,-3.579 16.927,-7.839 30.37,-7.394c14.274,0.472 21.015,0.89 32.615,18.111c9.223,13.693 11.775,12.78 16.393,12.853c6.041,0.095 14.525,-17.135 26.515,-17.476c14.574,-0.414 30.849,23.414 34.626,34.736c-10.939,-7.146 -15.562,-12.428 -22.697,-12.357c-12.046,0.118 -19.485,26.15 -42.484,25.757c-25.667,-0.44 -27.554,-19.817 -38.097,-19.242c-11.356,0.621 -16.197,14.246 -36.988,10.78c1.222,-7.205 1.859,-14.609 1.859,-22.162c0,-8.059 -0.725,-15.948 -2.112,-23.606Zm-4.202,-16.775c-2.488,-7.723 -5.67,-15.132 -9.472,-22.153l33.555,-2.019l-24.083,24.172Zm-237.973,-22.193c-3.763,6.944 -6.92,14.267 -9.399,21.899l-23.802,-23.907l33.201,2.008Zm218.786,-15.268c-7.645,-10.386 -16.78,-19.594 -27.085,-27.305l62.51,-35.316l-35.425,62.621Zm-182.014,-27.3c-10.283,7.694 -19.4,16.881 -27.034,27.24l-35.319,-62.514l62.353,35.274Zm36.733,-19.222c-7.548,2.508 -14.791,5.693 -21.658,9.484l-1.728,-33.16l23.386,23.676Zm102.842,9.327c-6.882,-3.777 -14.14,-6.946 -21.702,-9.436l23.607,-23.641l-1.905,33.077Zm-85.499,-13.773c-3.576,-7.041 -7.829,-16.92 -7.385,-30.352c0.473,-14.274 0.89,-21.015 18.112,-32.615c13.693,-9.222 12.78,-11.775 12.852,-16.393c0.095,-6.041 -17.135,-14.524 -17.475,-26.515c-0.414,-14.574 23.413,-30.849 34.735,-34.626c-7.145,10.939 -12.427,15.562 -12.357,22.697c0.119,12.046 26.151,19.485 25.757,42.484c-0.439,25.668 -19.817,27.554 -19.241,38.097c0.621,11.366 14.269,16.206 10.77,37.042c-7.27,-1.272 -14.747,-1.935 -22.376,-1.935c-7.985,0 -15.803,0.726 -23.392,2.116Z" style="fill:#fefa5a;"/>
-    </svg>
+<body class="col">
+  <header>
+    <nav class="row baseline">
+      <h1><a href="https://www.witchoflight.com">Witch of Light</a></h1>
+      <div class="spacer"></div>
+      <a href="https://blog.witchoflight.com">Blog</a>
+    </nav>
+    <p>
+      <strong>Cassie Jones</strong> (they/them, she/her)<br>
+    </p>
+    <p>
+      <a href="https://be-the.witchoflight.com">Witch of Light.</a>
+      Maker of lotsa weird projects.
+      <a href="https://twitter.com/porglezomp">@porglezomp</a> on twitter.
+    </p>
+  </header>
+  <main>
+    <article>
+      <p>
+        <a href="https://blog.witchoflight.com">The Witch of Light Blog</a> -
+        My blog.
+      </p>
+    </article>
+    <article>
+      <p>
+        <a href="https://calibornstuck.witchoflight.com">Calibornstuck</a> -
+        A project which lets anyone submit redrawn Homestuck panels, working to slowly get the entire comic remade in Caliborn's style.
+        Anyone can contribute!
+      </p>
+    </article>
+    <article>
+      <p>
+        <a href="https://be-the.witchoflight.com">Be the Witch of Light</a> -
+        A goofy little art page that used to be the main page here.
+      </p>
+    </article>
+    <article>
+      <p>
+        <a href="https://checkers.witchoflight.com">Checkers</a> -
+        A page that gives you your own online multiplayer checkers board.
+        It doesn't enforce the rules.
+        Try using it to play <a href="https://hyperlibrary.itch.io/checkers2">Checkers 2!</a>
+      </p>
+    </article>
+    <article>
+      <p>
+        <a href="https://hs2upd8.witchoflight.com">HS<sup>2</sup> Upd8 Bot</a> -
+        Use it to get notified when Homestuck<sup>2</sup> upd8s!
+      </p>
+    </article>
+    <article>
+      <p>
+        <a href="https://seerofvoid.witchoflight.com">Seer of Void</a> -
+        a toy implementation of <a href="https://en.wikipedia.org/wiki/Shamir%27s_Secret_Sharing">Shamir's Secret Sharing</a>.
+      </p>
+    </article>
+    <article>
+      <p>
+        <a href="https://rose-8-tool.glitch.me">ROSE-8 Tools</a> -
+        An assembler and disassembler for Jordan Rose's <a href="https://belkadan.com/blog/2020/01/ROSE-8/">ROSE-8 ISA</a>.
+      </p>
+    </article>
+    <article>
+      <p>
+        <a href="https://bejewled-practice.glitch.me">Bewjewled Practice: A Horrible C Mangler</a> -
+        Takes a C program and turns it into a whole lot more files and includes.
+      </p>
+    </article>
+    <article>
+      <p>
+        <a href="https://cognitive-ball-torture.glitch.me">Cognitive Ball Torture</a> -
+        Made in response to <a href="https://twitter.com/whitneyarner/status/1160409145729830912">a tweet</a>, recombines parallel acronyms for you.
+      </p>
+    </article>
+  </main>
+  <div class="spacer"></div>
+  <footer>
+    By Cassie Jones.
+  </footer>
 </div>
 </body>
 </html>