Optimize pngs
[web/be-the] / index.html
index 582c04a3aa82fbc8a806ec35adf829d9e072c0c5..005aaf1eaf28ead6274d156b30bfe8e725f5957a 100644 (file)
@@ -1,14 +1,44 @@
 <!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf8">
+<html prefix="og: http://ogp.me/ns#" lang="en"> <head>
+    <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="CASSIE: Be the Witch of Light."/>
+    <meta property="og:url" content="https://be-the.witchoflight.com"/>
+    <meta property="og:site_name" content="Witch of Light"/>
+    <meta property="og:image" content="https://be-the.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://be-the.witchoflight.com/assets/light.png"/>
+    <link rel="canonical" href="https://be-the.witchoflight.com"/>
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#f78123">
+    <meta name="msapplication-TileColor" content="#da532c">
+    <meta name="theme-color" content="#ffffff">
     <style>
-h1 { color: #22a4ff; position: absolute; margin: 50vh auto; text-align: center; width: 100vw; font-family: courier; font-size: 3.8vw; }
-@media screen and (max-width: 600px) { h1 { font-size: 7vw; } }
+h1 { color: #fefa5a; position: absolute; margin: 50vh auto; text-align: center; width: 100vw; font-family: courier, monospace; 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; }
-#container { display: flex; }
+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>
 </head>
 <body>