feat: add some entities

katlyn · Jun 28, 2024 · 77f3690 · 77f3690
1 parent 91f5af7
commit 77f3690
Show file tree

Hide file tree

Showing 7 changed files with 266 additions and 92 deletions.
diff --git a/public/style.css b/public/style.css
diff --git a/public/style.css.map b/public/style.css.map
diff --git a/public/style.scss b/public/style.scss
@@ -11,16 +11,18 @@
   --water: #80bbdb;
   --ube: #a99dbd;
   --tapioca: #c1c1c1;
-  --dark: #111;
+  --dark: #282828;
   --light: #EEE;
   --accent: var(--watermelon);
-  color: var(--dark);
-  background-color: var(--light);
+  --foreground: var(--dark);
+  --background: var(--light);
   font-family: "Lexend", sans-serif;
 }
 
 body {
   min-height: 100vh;
+  color: var(--foreground);
+  background-color: var(--background);
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -63,21 +65,21 @@ nav {
   text-align: right;
 }
 
-nav ul {
+ul {
   list-style: none;
 }
 
-nav ul li {
+ul li {
   margin-bottom: 0.25em;
 }
 
-nav ul li a {
+a {
   color: inherit;
   text-decoration: var(--accent) underline 2px;
   transition: text-decoration 0.2s ease-in-out;
 }
 
-nav ul li a:hover {
+ul li a:hover {
   text-decoration: currentColor underline 2px;
 }
 
@@ -88,63 +90,49 @@ nav ul li a:hover {
   margin: 2em;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    color: var(--light);
-    background-color: var(--dark);
-  }
-}
+#entities {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  margin: 2em;
 
-@media screen and (max-width: 700px) {
-  :root {
-    font-size: 1.2em;
+  .sparkle {
+    background: var(--accent);
+    margin-bottom: 0.5em;
+    height: 20px;
+    width: 20px;
+    mask: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Esparkles_fill%3C/title%3E%3Cg id='页面-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Weather' transform='translate(-816.000000, -48.000000)' fill-rule='nonzero'%3E%3Cg id='sparkles_fill' transform='translate(816.000000, 48.000000)'%3E%3Cpath d='M24,0 L24,24 L0,24 L0,0 L24,0 Z M12.5934901,23.257841 L12.5819402,23.2595131 L12.5108777,23.2950439 L12.4918791,23.2987469 L12.4918791,23.2987469 L12.4767152,23.2950439 L12.4056548,23.2595131 C12.3958229,23.2563662 12.3870493,23.2590235 12.3821421,23.2649074 L12.3780323,23.275831 L12.360941,23.7031097 L12.3658947,23.7234994 L12.3769048,23.7357139 L12.4804777,23.8096931 L12.4953491,23.8136134 L12.4953491,23.8136134 L12.5071152,23.8096931 L12.6106902,23.7357139 L12.6232938,23.7196733 L12.6232938,23.7196733 L12.6266527,23.7031097 L12.609561,23.275831 C12.6075724,23.2657013 12.6010112,23.2592993 12.5934901,23.257841 L12.5934901,23.257841 Z M12.8583906,23.1452862 L12.8445485,23.1473072 L12.6598443,23.2396597 L12.6498822,23.2499052 L12.6498822,23.2499052 L12.6471943,23.2611114 L12.6650943,23.6906389 L12.6699349,23.7034178 L12.6699349,23.7034178 L12.678386,23.7104931 L12.8793402,23.8032389 C12.8914285,23.8068999 12.9022333,23.8029875 12.9078286,23.7952264 L12.9118235,23.7811639 L12.8776777,23.1665331 C12.8752882,23.1545897 12.8674102,23.1470016 12.8583906,23.1452862 L12.8583906,23.1452862 Z M12.1430473,23.1473072 C12.1332178,23.1423925 12.1221763,23.1452606 12.1156365,23.1525954 L12.1099173,23.1665331 L12.0757714,23.7811639 C12.0751323,23.7926639 12.0828099,23.8018602 12.0926481,23.8045676 L12.108256,23.8032389 L12.3092106,23.7104931 L12.3186497,23.7024347 L12.3186497,23.7024347 L12.3225043,23.6906389 L12.340401,23.2611114 L12.337245,23.2485176 L12.337245,23.2485176 L12.3277531,23.2396597 L12.1430473,23.1473072 Z' id='MingCute' fill-rule='nonzero'%3E%3C/path%3E%3Cpath d='M6.17296,13.0036 L6.34297,13.3752 L6.34297,13.3752 C7.07036,14.88 8.21624,16.1431 9.6428,17.0133 L9.90768,17.1685 L9.90768,17.1685 C10.0308,17.2377 10.0308,17.4149 9.90768,17.4842 C9.81836,17.5344 9.73005,17.5862 9.6428,17.6394 C8.21624,18.5095 7.07036,19.7727 6.34297,21.2775 L6.17296,21.649 L6.17296,21.649 C6.10635,21.7989 5.89365,21.7989 5.82704,21.649 L5.65703,21.2775 L5.65703,21.2775 C4.92964,19.7727 3.78376,18.5095 2.3572,17.6394 C2.26995,17.5862 2.18164,17.5344 2.09232,17.4842 C1.96923,17.4149 1.96923,17.2377 2.09232,17.1685 L2.3572,17.0133 L2.3572,17.0133 C3.78376,16.1431 4.92964,14.88 5.65703,13.3752 L5.82704,13.0036 L5.82704,13.0036 C5.89365,12.8538 6.10635,12.8538 6.17296,13.0036 Z M15.0779,2.72991 C15.1747,2.94774 15.2716,3.16544 15.3754,3.38009 C16.6483,6.01348 18.6536,8.22403 21.1501,9.74673 C21.3028,9.83987 21.4573,9.93043 21.6137,10.0184 C21.8291,10.1395 21.8291,10.4497 21.6137,10.5708 C21.4573,10.6588 21.3028,10.7493 21.1501,10.8425 C18.6536,12.3651 16.6483,14.5757 15.3754,17.2091 C15.2716,17.4237 15.1747,17.6414 15.0779,17.8593 C14.9613,18.1215 14.5891,18.1215 14.4725,17.8593 C14.3757,17.6414 14.2788,17.4237 14.175,17.2091 C12.9021,14.5757 10.8968,12.3651 8.40031,10.8425 C8.24761,10.7493 8.09308,10.6588 7.93676,10.5708 C7.72136,10.4497 7.72136,10.1395 7.93676,10.0184 C8.09308,9.93043 8.24761,9.83987 8.40031,9.74673 C10.8968,8.22403 12.9021,6.01348 14.175,3.38009 C14.2786,3.16578 14.3757,2.94781 14.4725,2.72991 C14.5891,2.46764 14.9613,2.46764 15.0779,2.72991 Z' id='形状' fill='%2309244B'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
   }
 
-  header {
-    margin: 4em auto;
-    position: relative;
-  }
-  header h1 {
-    font-size: 2em;
-  }
+  ul {
+    text-transform: lowercase;
 
-  nav {
-    position: relative;
-    text-align: center;
-  }
-  nav ul li {
-    margin-bottom: 0.4em;
-  }
-
-  #now-playing {
-    left: 0;
+    li {
+      margin: 0.25em 0 0 0;
+    }
   }
 }
 
 #now-playing {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
+  text-transform: lowercase;
 }
 
 #now-playing > div {
   margin-top: 0.25em;
 }
 
-#now-playing .smol {
+.smol {
   font-size: 0.8em;
 }
 
-@media screen and (max-width: 700px) {
-  #now-playing {
-    align-items: center;
-  }
-}
-
 .bars {
   display: flex;
   align-items: flex-end;
   height: 20px;
+  margin-bottom: 0.5em;
 }
 
 .bars > div {
@@ -170,3 +158,68 @@ nav ul li a:hover {
     height: 3px;
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground: var(--light);
+    --background: var(--dark);
+  }
+}
+
+@media (max-width: 700px) {
+  :root {
+    font-size: 1.2em;
+  }
+
+  header {
+    margin: 4em auto;
+    position: relative;
+  }
+  header h1 {
+    font-size: 2em;
+  }
+
+  header img {
+    height: 5em
+  }
+
+  nav {
+    position: relative;
+    text-align: center;
+  }
+
+  ul li {
+    margin-bottom: 0.4em;
+  }
+
+  #now-playing {
+    position: relative;
+    align-items: center;
+  }
+
+  #entities {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    ul {
+      display: flex;
+      gap: 0.5em;
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+  }
+}
+
+@media (forced-colors: active) {
+  .bars > div {
+    forced-color-adjust: none;
+    background-color: var(--foreground);
+  }
+
+  #entities .sparkle {
+    forced-color-adjust: none;
+    background-color: var(--foreground);
+  }
+}