From 1f6f7056ea89383d7a9f189df99b7b83429b290e Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Wed, 19 Oct 2022 07:39:48 -0700
Subject: [PATCH] Work on a site logo with CSS and HTML

---
 logo.html | 57 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 logo.html
diff --git a/logo.html b/logo.html
new file mode 100644
index 0000000..5c82de5
--- /dev/null
+++ b/logo.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html>
+    <body>
+        <h1>Site Logo</h1>
+        <div id="logo">E</div>
+    </body>
+<style>
+@font-face {
+    font-family: "Museo_Slab";
+    src: url("static/fonts/Museo_Slab_500.woff2") format("woff2"),
+        url("static/fonts/Museo_Slab_500.woff") format("woff");
+    font-weight: normal;
+    font-style: normal;
+}
+:root {
+    --lt-blue: rgb(69, 212, 243);
+    --mid-blue: rgb(26, 169, 239);
+    --dk-blue: rgb(63, 46, 231);
+    --purple: rgb(161, 49, 232);
+    --lilac: rgb(187, 121, 245);
+}
+* { box-sizing: border-box; }
+body {
+    color: #222;
+    padding-block-start: 6vmin;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    font-family: "Museo_Slab";
+}
+#logo {
+    color: transparent;
+    border: 0.5rem solid #222;
+    border-radius: 6px;
+    padding-top: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 500px;
+    height: 500px;
+    background-color: blue;
+    background:
+        radial-gradient(circle at 20% 70%, var(--purple), transparent 40%),
+        radial-gradient(circle at 30% 30%, var(--lt-blue), var(--mid-blue) 20%, transparent 80%),
+        radial-gradient(ellipse at 95% 20%, var(--dk-blue), var(--mid-blue) 70%, transparent 80%),
+        radial-gradient(circle at 100% 100%, var(--purple), var(--lilac) 100%),
+        radial-gradient(circle at 45% 100%, var(--lilac), var(--purple) 60%),
+        radial-gradient(ellipse at 50% 50%, var(--dk-blue), transparent 80%);
+    background-clip: text;
+    font-size: 600px;
+    text-align: center;
+    line-height: 0.8;
+}
+</style>
+</html>
