implement notifications

1 files changed, 69 insertions, 0 deletions

diff --git a/static/notifications.css b/static/notifications.css
new file mode 100644
index 0000000..98a8fbb
--- /dev/null
+++ b/static/notifications.css
@@ -0,0 +1,69 @@
+#notificationsPanel {
+  border: var(--border);
+  border-radius: var(--border-radius);
+  background: var(--clr-panel-background);
+  margin: var(--spacing-double);
+  height: calc(100vh - 64px - (2 * var(--spacing-double)));
+  display: grid;
+  grid-template-rows: max-content 1fr;
+
+  h2 {
+    margin: 0;
+    padding: var(--spacing-double);
+    font-size: var(--font-big-size);
+    font-weight: bold;
+    border-bottom: var(--border);
+  }
+
+  .items {
+    overflow-y: scroll;
+    height: 100%;
+    box-sizing: border-box;
+  }
+
+  .notification {
+    padding: var(--spacing-single);
+    border-bottom: var(--border);
+    display: grid;
+    grid-template-columns: max-content 1fr;
+    gap: var(--spacing-single);
+    background: var(--clr-note-background);
+    overflow: hidden;
+    filter: linear-gradient(
+      to bottom,
+      black 50%,
+      var(--clr-note-background) 100%
+    );
+
+    img {
+      width: var(--avatar-size);
+      border-radius: var(--border-radius);
+      aspect-ratio: 1;
+    }
+    .notifContent {
+      display: grid;
+      grid-template-rows: max-content 1fr;
+      align-content: start;
+    }
+    .title {
+      font-weight: bold;
+      a:has(&) {
+        color: inherit;
+        text-decoration: none;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+    .body {
+      overflow: hidden;
+      min-height: 100%;
+      max-height: 4lh;
+      mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
+      &:active {
+        max-height: unset;
+        mask-image: none;
+      }
+    }
+  }
+}