simplify contain-svg css

app/templates/common/macros.html

@@ -65,10 +65,10 @@
       <button class="babycode-button" type=button id="post-editor-underline" title="Insert Underline"><u>U</u></button>
       <button class="babycode-button" type=button id="post-editor-url" title="Insert Link"><code>://</code></button>
       <button class="babycode-button" type=button id="post-editor-code" title="Insert Code block"><code>&lt;/&gt;</code></button>
-      <button class="babycode-button contain-svg full" type=button id="post-editor-img" title="Insert Image">{{ icn_image() }}</button>
+      <button class="babycode-button contain-svg" type=button id="post-editor-img" title="Insert Image">{{ icn_image() }}</button>
       <button class="babycode-button" type=button id="post-editor-ol" title="Insert Ordered list">1.</button>
       <button class="babycode-button" type=button id="post-editor-ul" title="Insert Unordered list">&bullet;</button>
-      <button class="babycode-button contain-svg full" type=button id="post-editor-spoiler" title="Insert spoiler">{{ icn_spoiler() }}</button>
+      <button class="babycode-button contain-svg" type=button id="post-editor-spoiler" title="Insert spoiler">{{ icn_spoiler() }}</button>
     </span>
     <textarea class="babycode-editor" name="{{ ta_name }}" id="babycode-content" placeholder="{{ ta_placeholder }}" {{ "required" if not optional else "" }}>{{ prefill }}</textarea>
     <a href="{{ url_for("app.babycode_guide") }}" target="_blank">babycode guide</a>

app/templates/topics/topic.html

@@ -34,12 +34,13 @@
     <div class="thread">
       <div class="thread-sticky-container contain-svg">
         {% if thread['is_stickied'] %}
-          {{ icn_sticky() }}
+          {{ icn_sticky(48) }}
           <i>Stickied</i>
         {% endif %}
       </div>
       <div class="thread-info-container">
         <span class="thread-info-header">
+          <span>
             <span class="thread-title"><a href="{{ url_for("threads.thread", slug=thread['slug']) }}">{{thread['title']}}</a>
             {% if thread['id'] in subscriptions %}
             ({{ subscriptions[thread['id']] }} unread)
@@ -49,10 +50,13 @@
             <span>
             Started by <a href="{{ url_for("users.page", username=thread['started_by']) }}">{{ thread['started_by'] }}</a> on {{ timestamp(thread['created_at']) }}
             </span>
+          </span>
+          <span>
             {% if active_user and not active_user.is_guest() -%}
             <button class="thread-info-bookmark-button contain-svg icon" type="button">{{ icn_bookmark() }}Bookmark</button>
             {%- endif %}
           </span>
+        </span>
         <span>
           Latest post by <a href="{{ url_for("users.page", username=thread['latest_post_username']) }}">{{ thread['latest_post_username'] }}</a>
           on <a href="{{ url_for("threads.thread", slug=thread['slug'], after=thread['latest_post_id']) }}">on {{ timestamp(thread['latest_post_created_at']) }}</a>:
@@ -63,7 +67,7 @@
       </div>
       <div class="thread-locked-container contain-svg">
         {% if thread['is_locked'] %}
-          {{ icn_lock() }}
+          {{ icn_lock(48) }}
           <i>Locked</i>
         {% endif %}
       </div>

app/templates/topics/topics.html

@@ -34,7 +34,7 @@
         </div>
         <div class="topic-locked-container contain-svg">
           {% if topic['is_locked'] %}
-            {{ icn_lock() }}
+            {{ icn_lock(48) }}
             <i>Locked</i>
           {% endif %}
         </div>

data/static/css/style.css

@@ -891,14 +891,6 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
   justify-content: center;
   flex-direction: column;
 }
-.contain-svg:not(.full) > svg, .contain-svg:not(.full) > img {
-  height: 50%;
-  width: 50%;
-}
-.contain-svg.full > svg, .contain-svg.full > img {
-  height: 100%;
-  width: 100%;
-}
 
 .post-img-container {
   display: flex;
@@ -933,11 +925,12 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
 .thread-info-header {
   display: flex;
   align-items: baseline;
+  justify-content: space-between;
   gap: 5px;
 }
 
 .thread-info-bookmark-button {
-  margin-left: auto;
+  margin-left: auto !important;
 }
 
 .thread-info-post-preview {

data/static/css/theme-otomotone.css

@@ -891,14 +891,6 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
   justify-content: center;
   flex-direction: column;
 }
-.contain-svg:not(.full) > svg, .contain-svg:not(.full) > img {
-  height: 50%;
-  width: 50%;
-}
-.contain-svg.full > svg, .contain-svg.full > img {
-  height: 100%;
-  width: 100%;
-}
 
 .post-img-container {
   display: flex;
@@ -933,11 +925,12 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
 .thread-info-header {
   display: flex;
   align-items: baseline;
+  justify-content: space-between;
   gap: 5px;
 }
 
 .thread-info-bookmark-button {
-  margin-left: auto;
+  margin-left: auto !important;
 }
 
 .thread-info-post-preview {

data/static/css/theme-peachy.css

@@ -891,14 +891,6 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
   justify-content: center;
   flex-direction: column;
 }
-.contain-svg:not(.full) > svg, .contain-svg:not(.full) > img {
-  height: 50%;
-  width: 50%;
-}
-.contain-svg.full > svg, .contain-svg.full > img {
-  height: 100%;
-  width: 100%;
-}
 
 .post-img-container {
   display: flex;
@@ -933,11 +925,12 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
 .thread-info-header {
   display: flex;
   align-items: baseline;
+  justify-content: space-between;
   gap: 3px;
 }
 
 .thread-info-bookmark-button {
-  margin-left: auto;
+  margin-left: auto !important;
 }
 
 .thread-info-post-preview {

sass/_default.scss

@@ -747,14 +747,6 @@ $thread_locked_background: none !default;
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  &:not(.full) > svg, &:not(.full) > img {
-    height: 50%;
-    width: 50%;
-  }
-  &.full > svg, &.full > img {
-    height: 100%;
-    width: 100%;
-  }
 }
 
 $post_img_container_gap: $SMALL_PADDING !default;
@@ -797,11 +789,12 @@ $thread_info_header_gap: $SMALL_PADDING !default;
 .thread-info-header {
   display: flex;
   align-items: baseline;
+  justify-content: space-between;
   gap: $thread_info_header_gap;
 }
 
 .thread-info-bookmark-button {
-  margin-left: auto;
+  margin-left: auto !important; // :(
 }
 
 $thread_info_post_preview_margin_right: $post_inner_padding_right !default;