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,15 +165,8 @@ img.emoji
 .level {
   align-items: center;
   justify-content: space-between;
-}
-
-.level code {
-  border-radius: 4px;
-}
-
-.level img {
-  display: inline-block;
-  vertical-align: top;
+  display:flex;
+  flex-wrap: wrap;
 }
 
 .level.is-mobile {
@@ -183,17 +177,18 @@ img.emoji
 .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 code {
+  border-radius: 4px;
+}
+
+.level img {
+  display: inline-block;
+  vertical-align: top;
 }
 
 .level-item {
@@ -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

@@ -84,7 +84,8 @@
                 <div class="level attachments">
                     {% for media in toot.media_attachments %}
                     {% if media.type == "image" %}
-                            <a class="level-item attachment-image" href="{{ media.url }}">
+                        <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>
-
+                        </figure>
                     {% else %}
-                            <video class="level-item is-max-256" controls loop
+                        <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 %}
+
                     {% endfor %}
                 </div>
                 {% endif %}