Deploying to gh-pages from @ f4c871f 🚀

voodoos · Apr 27, 2024 · 9fba007 · 9fba007
1 parent b6c9ae4
commit 9fba007
Show file tree

Hide file tree

Showing 3 changed files with 2,592 additions and 2,554 deletions.
diff --git a/app.css b/app.css
@@ -1,17 +1,29 @@
+:root {
+    --dark-bg-color: #2c2f32;
+    --light-bg-color: #3c4146;
+    --border-radius: 0.5rem;
+}
+
 html,
 body {
     height: 100%;
     margin: 0;
     padding: 0;
 }
 
+.box {
+    border-radius: var(--border-radius);
+    background-color: var(--light-bg-color);
+    padding: 0.5rem;
+}
+
 #main-layout {
     display: grid;
 
     box-sizing: border-box;
 
     grid-template-columns: 2fr 1fr;
-    grid-template-rows: 5rem 1fr 2rem;
+    grid-template-rows: 5rem 1fr 5rem;
 
     gap: 1.5rem;
     padding: 1.5rem;
@@ -36,11 +48,34 @@ body {
 
     & .player-wrapper {
         display: flex;
+        align-items: stretch;
+        gap: 0.5rem;
         width: 100%;
+        height: 100%;
+
+        & .now-playing-display.box {
+            display: flex;
+            flex-direction: row;
+            padding: 0;
+            overflow: hidden;
+            gap: 0.5rem;
+            background-color: var(--dark-bg-color);
+            width: 30rem;
+        }
+
+        & .now-playing-display .now-playing-cover {
+            height: 100%;
+            aspect-ratio: 1 / 1;
+            border-top-left-radius: var(--border-radius);
+            border-bottom-left-radius: var(--border-radius);
+            box-shadow: 0px 0px 0px 2px var(--dark-bg-color)inset;
+            background-size: cover;
+            background-color: var(--light-bg-color);
+        }
     }
 
 
     & .player-wrapper audio {
         border-radius: 0.5rem;
     }
-}
+}