display attachments on notes

1 files changed, 63 insertions, 0 deletions

diff --git a/static/note.css b/static/note.css
index 9b9eb65..0400b21 100644
--- a/static/note.css
+++ b/static/note.css
@@ -128,6 +128,69 @@ article.note {
     }
   }
 
+  .attachments {
+    padding: var(--spacing-single) 0;
+    display: grid;
+    grid-template-columns: auto;
+    grid-template-rows: auto;
+    grid-auto-flow: row;
+    width: 100%;
+    box-sizing: border-box;
+    gap: var(--spacing-single);
+
+    &:has(:nth-child(2)) {
+      grid-template-columns: auto auto;
+    }
+    &:has(:nth-child(3)) {
+      grid-template-columns: auto auto auto;
+    }
+    &:has(:nth-child(4)) {
+      grid-template-columns: auto auto;
+      grid-template-rows: auto auto;
+    }
+    &:has(:nth-child(5)) {
+      grid-template-columns: unset;
+      grid-template-rows: auto;
+      grid-auto-flow: column;
+    }
+
+    > * {
+      border-radius: var(--border-radius);
+      overflow: hidden;
+      display: flex;
+      &:has(img) {
+        background: black;
+      }
+    }
+
+    img {
+      width: 100%;
+      max-height: 16lh;
+      object-fit: contain;
+      object-position: center;
+    }
+
+    a.file {
+      border: var(--border);
+      border-radius: var(--border-radius);
+      background: var(--clr-panel-background);
+      color: var(--clr-foreground);
+      text-decoration: none;
+      padding: var(--spacing-single);
+      display: grid;
+      width: 100%;
+      box-sizing: border-box;
+      grid-auto-flow: column;
+      align-items: center;
+      justify-content: start;
+      gap: var(--spacing-half);
+      span {
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+    }
+  }
+
   .buttons {
     margin-top: var(--spacing-single);
     padding: 0;