[CSS] Note attachments uses a grid layout now.

public/assets/css/base.css

@@ -21,7 +21,7 @@ html {
 :root {
     /* FONTS */
     --display-font: 'Poppins', sans-serif;
-    --main-font: 'Open Sans', sans-serif;
+    --main-font:    'Open Sans', sans-serif;
 
     /* UNITS
      * unit size      - every element should be a multiplier of this
@@ -29,16 +29,17 @@ html {
      * medium size    - same as above, except that the element in question is contained in something else
      * small size     - used in common text, borders
      */
-    --unit-size: 0.5rem;
-    --main-size: 1.5rem;
-    --medium-size: 1.2rem;
-    --small-size: 1rem;
+    --unit-size:    0.5rem;
+    --main-size:    1.5rem;
+    --medium-size:  1.2rem;
+    --small-size:   1rem;
+    --smaller-size: 0.8rem;
 
 
     /* transitions and animations */
     --cubic-transition: all 200ms cubic-bezier(0, 0.55, 0.45, 1);
-    --fade-in: fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1);
-    --fade-out: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1);
+    --fade-in:          fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1);
+    --fade-out:         fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1);
 }
 
 h1,h2,h3,h4,h5,h6 {
@@ -122,7 +123,7 @@ a:hover {
 }
 
 figcaption a:link {
-    font-size: var(--small-size);
+    font-size: var(--smaller-size);
     color: var(--white);
 }
 
@@ -402,38 +403,38 @@ hr {
 }
 
 .note-content {
+    display: flex;
+    flex-direction: column;
     border-radius: 0 0 var(--unit-size) var(--unit-size);
-
-    height: max-content;
     padding: var(--small-size);
 }
+.note-content * {
+    max-width: 100%;
+    max-height: 100%;
+}
 
 .note-text {
     margin-bottom: var(--unit-size);
 }
 
-.note-attachments * {
-    display: flex;
-    max-width: 100%;
-}
+figure { margin: unset; max-width: 100%; max-height: border-box;}
+.note-content > .note-attachments {
+    display: grid;
+    grid-template-columns: repeat(2, fit-content(100%));
+    grid-template-rows: repeat(2, fit-content(100%));
 
-.note-attachments > figure {
-    display: flex;
-    flex-direction: column;
-    margin: 0;
     border-radius: var(--unit-size);
     background-color: var(--translucent);
-    padding: var(--small-size);
-}
+    padding: var(--smaller-size);
 
-.note-attachments > figure * {
-    width: max-content;
-    height: auto;
+    align-self: flex-start;
+}
+.note-attachments:not(:only-child){
+    margin: 5px;
 }
 
 .note-attachments > figure figcaption {
     word-break: break-all;
-    padding-top: var(--small-size);
 }
 
 /* SECTIONS */

templates/note/view.html.twig

@@ -35,11 +35,13 @@
             </div>
 
             {% if hide_attachments is not defined %}
-                <div class="note-attachments" tabindex="0" title="{{ 'Note attachments.' | trans }}">
-                    {% for attachment in note.getAttachments() %}
-                        {% include '/attachments/view.html.twig' with {'attachment': attachment, 'note': note} only%}
-                    {% endfor %}
-                </div>
+                {% if note.getAttachments() is not empty %}
+                    <div class="note-attachments" tabindex="0" title="{{ 'Note attachments.' | trans }}">
+                        {% for attachment in note.getAttachments() %}
+                            {% include '/attachments/view.html.twig' with {'attachment': attachment, 'note': note} only%}
+                        {% endfor %}
+                    </div>
+                {% endif %}
             {% endif %}
 
             {% if note.getLinks() is not empty %}