feat: show all announcements on hover (#19)

hbstack · Aug 25, 2023 · d9dc9b2 · d9dc9b2
1 parent 088719e
commit d9dc9b2
Showing 1 changed file with 31 additions and 11 deletions.
diff --git a/assets/hb/modules/announcement-bar/scss/index.scss b/assets/hb/modules/announcement-bar/scss/index.scss
@@ -3,28 +3,48 @@
     flex-direction: column;
 }
 
+.hb-announcement {
+    display: none;
+
+    &.active {
+        display: block;
+        animation: hb-announcement-in .5s ease;
+    }
+
+    &.inactivating {
+        animation: hb-announcement-out .5s ease;
+    }
+}
+
 .hb-announcement-bar {
     --#{$prefix}border-opacity: 0.125;
 
     color: var(--#{$prefix}navbar-color);
     margin-bottom: var(--#{$prefix}navbar-padding-y);
     padding-bottom: var(--#{$prefix}navbar-padding-y);
+    transition: .25s ease-in-out;
 
     a {
         color: var(--#{$prefix}navbar-active-color);
     }
-}
-
-.hb-announcement {
-    display: none;
-
-    &.active {
-        display: block;
-        animation: hb-announcement-in .5s ease;
-    }
 
-    &.inactivating {
-        animation: hb-announcement-out .5s ease;
+    &:hover {
+        background: var(--#{$prefix}body-bg);
+        color: var(--#{$prefix}body-color);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        height: 30vh;
+        overflow: auto!important;
+        padding-top: var(--#{$prefix}navbar-padding-y);
+        position: fixed;
+        top: 0;
+        z-index: 1031;
+
+        .hb-announcement {
+            display: block!important;
+            margin-bottom: .25rem;
+        }
     }
 }