4 files changed, 78 insertions, 5 deletions
diff --git a/static/form.css b/static/form.css
index 79509d7..00a4366 100644
--- a/static/form.css
+++ b/static/form.css
@@ -58,6 +58,10 @@ form {
     }
   }
 
+  &#writeNoteForm {
+    max-width: 100%;
+  }
+
   &.settings {
     padding: 0;
     gap: 0;
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;
+      }
+    }
+  }
+}
diff --git a/static/skeleton.css b/static/skeleton.css
index 12bc1e5..e9e39b2 100644
--- a/static/skeleton.css
+++ b/static/skeleton.css
@@ -125,9 +125,9 @@ ul.sideNavigation {
 }
 
 main {
-  width: min(1300px, 100%);
+  width: min(1500px, 100%);
   display: grid;
-  grid-template-columns: 1fr min(700px, 100%) 1fr;
+  grid-template-columns: 1fr min(100%, 700px) 1fr;
   height: 100%;
   #leftPane,
   #rightPane {
@@ -135,11 +135,10 @@ main {
     top: 56px;
     height: max-content;
   }
-  @media (width < 1300px) {
+  @media (width < 1200px) {
     #leftPane,
     #rightPane {
-      max-width: 0;
-      visibility: hidden;
+      display: none;
     }
   }
 }
diff --git a/static/style.css b/static/style.css
index d5078bb..0c2bf9d 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,5 +1,6 @@
 @import url(theme.css);
 @import url(skeleton.css);
+@import url(notifications.css);
 @import url(note.css);
 @import url(form.css);
 @import url(profile.css);