Tweak figures for brutstrap

brutaldon/static/css/brutstrap-tweaks.css

@@ -33,6 +33,7 @@ article + hr /* Now redundant */
     display: none;
 }
 
+
 /* Bulma styles re-implemented for compatibility */
 
 img.is-32x32 {
@@ -164,8 +165,23 @@ img.emoji
 .level {
   align-items: center;
   justify-content: space-between;
+  display:flex;
+  flex-wrap: wrap;
 }
 
+.level.is-mobile {
+    display: flex;
+}
+
+.level.is-mobile .level-left,
+.level.is-mobile .level-right {
+    display: flex;
+}
+.level.is-mobile .level-item {
+    margin-right: 0.75rem;
+}
+
+
 .level code {
   border-radius: 4px;
 }
@@ -175,27 +191,6 @@ img.emoji
   vertical-align: top;
 }
 
-.level.is-mobile {
-  display: flex;
-}
-
-.level.is-mobile .level-left,
-.level.is-mobile .level-right {
-  display: flex;
-}
-
-.level.is-mobile .level-left + .level-right {
-  margin-top: 0;
-}
-
-.level.is-mobile .level-item {
-  margin-right: 0.75rem;
-}
-
-.level.is-mobile .level-item:not(:last-child) {
-  margin-bottom: 0;
-}
-
 .level-item {
   align-items: center;
   display: flex;
@@ -284,3 +279,9 @@ img.fav-avatar {
 {
     height: 0;
 }
+
+.attachments figure {
+	  border: 0.2ex solid #444;
+	  max-width: 256px;
+	  padding: 1em;
+}

brutaldon/templates/main/toot_partial.html

@@ -83,8 +83,9 @@
                 <br>
                 <div class="level attachments">
                     {% for media in toot.media_attachments %}
-                        {% if media.type == "image" %}
-                            <a class="level-item attachment-image" href="{{ media.url }}">
+                    {% if media.type == "image" %}
+                        <figure class="level-item attachment-image">
+                            <a href="{{ media.url }}">
                                 {% if toot.sensitive %}
                                     <img src="{% static "images/sensitive.png" %}"
                                 {% else %}
@@ -102,9 +103,10 @@
                                          {% endif %}
                                          class="image is-max-256">
                             </a>
-
-                        {% else %}
-                            <video class="level-item is-max-256" controls loop
+                        </figure>
+                    {% else %}
+                        <figure class="level-item is-max-256">
+                            <video controls loop
                                    poster="{{ media.preview_url }}">
                                 <source src="{{ media.url }}" type="video/mp4">
                                 <a href="{{ media.url }}">
@@ -126,8 +128,9 @@
                                              class="image is-max-256">
                                 </a>
                             </video>
+                        </figure>
+                    {% endif %}
 
-                        {% endif %}
                     {% endfor %}
                 </div>
                 {% endif %}