Witch of Git - web/be-the/blob - index.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4     <meta charset="utf8">
   5     <title>Witch of Light</title>
   6     <meta property="title" content="Witch of Light - Cassie Jones's Site">
   7     <meta property="og:title" content="Witch of Light - Cassie Jones's Site">
   8     <meta property="og:type" content="website">
   9     <meta property="og:url" content="https://www.witchoflight.com">
  10     <meta property="og:image" content="https://www.witchoflight.com/assets/light.png">
  11     <meta property="twitter:card" content="summary">
  12     <meta property="twitter:site" content="@porglezomp">
  13     <link rel="canonical" href="https://www.witchoflight.com">
  14     <style>
  15 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; }
  16 @media screen and (max-width: 1000px) { h1 { font-size: 7vw; } }
  17 body { background: #f78123; margin: 0; }
  18 svg { max-width: 100vw; max-height: 100vh; animation-name: fade-in; animation-duration: 2s; animation-delay: 4.5s; animation-fill-mode: both; }
  19 #container { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100vw; height: 100vh;  box-sizing: border-box; padding: 16px; }
  20 @keyframes fade-in {
  21   from { opacity: 0; }
  22   to { opacity: 1; }
  23 }
  24 @keyframes fade-out {
  25   from { opacity: 1; }
  26   to { opacity: 0; }
  27 }
  28     </style>
  29 </head>
  30 <body>
  31     <h1>Cassie Jones: Be&nbsp;the&nbsp;Witch&nbsp;of&nbsp;Light.</h1>
  32 <div id="container">
  33     <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;">
  34     <ellipse id="Core" cx="274.338" cy="272.392" rx="118.293" ry="118.632" style="fill:#fefa5a;"/>
  35     <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;"/>
  36     </svg>
  37 </div>
  38 </body>
  39 </html>