Add animation, refactor

2025-10-23 13:53:27 +02:00
parent e26ef576ee
commit 4e6170f3d7
3 changed files with 91 additions and 23 deletions
--- a/styles.css
+++ b/styles.css
@@ -12,6 +12,7 @@
    --base-content-background-color: #ffffff20;
    --content-wrap-padding: 16px;
    --header-margin-bottom: 20px;
+    --content-container-height: calc(100dvh - (2 * var(--card-gap)));

    font-family: "BBH Sans Bogle", sans-serif;
    font-weight: 400;
@@ -28,6 +29,20 @@ html, body {
    height: 100dvh;
 }

+.card-listener {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: var(--content-container-height);
+    top: calc(-1 * (100dvh - (2 * var(--card-gap))) - var(--label-height) - var(--content-container-height));
+    z-index: 9999;
+}
+
+.active > .card-listener {
+    top: calc(-1 * (100dvh - (2 * var(--card-gap))) - var(--label-height) + 20px);
+}
+
+
 #container {
    display: flex;
    justify-content: space-around;