Merge pull request #41 from qwell/happiness

Dark mode(!) and other minor cleanups/prettiness.
samwho · Apr 20, 2024 · 98c5b67 · 98c5b67
2 parents 68dce16 + 93c3522
commit 98c5b67
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 30 deletions.
diff --git a/index.html b/index.html
@@ -1,14 +1,19 @@
 <!DOCTYPE html>
 
 <head>
-  <meta name="twitter:card" content="summary" />
-  <meta name="twitter:description" content="A dumb website for copying symbols." />
-  <meta name="twitter:title" content="‽" />
-  <meta name="twitter:image" content="https://symbol.wtf/summary.png" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta http-equiv="content-type" content="text/html">
   <meta charset="utf-8">
+  <link rel="canonical" href="https://symbol.wtf/" />
+
+  <meta name="twitter:card" content="summary">
+  <meta name="twitter:description" content="A dumb website for copying symbols.">
+  <meta name="twitter:title" content="‽">
+  <meta name="twitter:image" content="https://symbol.wtf/summary.png">
+
   <link rel="stylesheet" type="text/css" href="symbols.css" />
   <link rel="shortcut icon" type="image/png" href="favicon.png" />
-  <script src="symbols.js"></script>
+  <script type="text/javascript" src="symbols.js"></script>
 </head>
 
 <body>

diff --git a/symbols.css b/symbols.css
@@ -1,6 +1,15 @@
-html {
-  box-sizing: border-box;
-  font-size: 16px;
+@media (prefers-color-scheme: dark) {
+  * {
+    --main-bg-color: #1F1F1FFF;
+    --main-fg-color: #F0F0F0FF;
+  }
+}
+
+@media (not (prefers-color-scheme: dark)) {
+  * {
+    --main-bg-color: #F0F0F0FF;
+    --main-fg-color: #1F1F1FFF;
+  }
 }
 
 *,
@@ -9,6 +18,10 @@ html {
   box-sizing: inherit;
 }
 
+::placeholder {
+  color: #7F7F7FFF
+}
+
 body,
 h1,
 h2,
@@ -35,14 +48,24 @@ img {
 }
 
 body {
-  font-size: 24px;
+  color: var(--main-fg-color);
+  background-color: var(--main-bg-color);
+  box-sizing: border-box;
+  font-size: 16px;
   padding: 1rem;
 }
 
 .search {
   display: flex;
   justify-content: center;
-  margin-bottom: 1rem;
+  margin: 0 1rem 1rem 1rem;
+}
+
+.search > input {
+  width: 100%;
+  font-size: 3rem;
+  color: var(--main-fg-color);
+  background-color: var(--main-bg-color);
 }
 
 .symbols {
@@ -53,42 +76,31 @@ body {
   grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
 }
 
-.symbol {
-  color: black;
-  border: 1px dashed #555;
+.symbols > * {
+  border: 1px dashed var(--main-fg-color);
   border-radius: 10%;
   padding: 1rem;
   aspect-ratio: 1;
-  font-size: 6rem;
   text-align: center;
   line-height: 100%;
   min-height: 125px;
-  max-height: 80vh;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
+  max-height: 80vh;
   transition: background 200ms linear;
 }
 
+.symbol {
+  font-size: 6rem;
+}
+
 .symbol:hover {
-  background: #f7b73322;
+  background-color: #F7B73322;
 }
 
 .symbol-clicked {
   font-size: 2rem;
-  background-color: #B1E8B6;
-  color: black;
-  border: 1px dashed #555;
-  border-radius: 10%;
-  padding: 1rem;
-  aspect-ratio: 1;
-  text-align: center;
-  line-height: 100%;
-  min-height: 125px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  transition: background 200ms linear;
+  background-color: #B1E8B6FF;
 }