add badges

sass/_default.scss

@@ -133,7 +133,7 @@ $icon_button_padding_left: $BIG_PADDING - 4px !default;
 @mixin button($color, $font_color) {
   @extend %button-base;
   background-color: $color;
-  color: $font_color !important; //!important because linkbutton is an <a>
+  color: $font_color;
   
   &:hover {
     background-color: color.scale($color, $lightness: 20%);
@@ -180,13 +180,11 @@ body {
 
 $link_color: #c11c1c !default;
 $link_color_visited: #730c0c !default;
-a{
-  &:link {
-    color: $link_color;
-  }
-  &:visited {
-    color: $link_color_visited;
-  }
+:where(a:link){
+  color: $link_color;
+}
+:where(a:visited) {
+  color: $link_color_visited;
 }
 
 .big {
@@ -233,7 +231,7 @@ $site_title_color: $DEFAULT_FONT_COLOR !default;
   font-size: $site_title_size;
   margin: $site_title_margin;
   text-decoration: none;
-  color: $site_title_color !important;
+  color: $site_title_color;
 }
 
 $thread_title_margin: $ZERO_PADDING !default;
@@ -251,7 +249,7 @@ $thread_actions_gap: $SMALL_PADDING !default;
   gap: $thread_actions_gap;
 }
 
-$post_usercard_width: 200px !default;
+$post_usercard_width: 230px !default;
 $post_border: 2px outset $DARK_2 !default;
 .post {
   display: grid;
@@ -836,10 +834,6 @@ $thread_info_header_gap: $SMALL_PADDING !default;
   gap: $thread_info_header_gap;
 }
 
-.thread-info-bookmark-button {
-  margin-left: auto !important; // :(
-}
-
 $thread_info_post_preview_margin_right: $post_inner_padding_right !default;
 .thread-info-post-preview {
   overflow: hidden;
@@ -1446,3 +1440,74 @@ $compact_h1_margin: $ZERO_PADDING !default;
 h1 {
   margin: $compact_h1_margin;
 }
+
+$settings_badge_container_gap: $SMALL_PADDING !default;
+$settings_badge_container_border: $DEFAULT_BORDER !default;
+$settings_badge_container_border_invalid: 2px dashed red !default;
+$settings_badge_container_border_radius: $DEFAULT_BORDER_RADIUS !default;
+$settings_badge_container_padding: $SMALL_PADDING $MEDIUM_PADDING !default;
+$settings_badge_container_margin: $MEDIUM_PADDING $ZERO_PADDING !default;
+.settings-badge-container {
+  display: flex;
+  align-items: baseline;
+  gap: $settings_badge_container_gap;
+  border: $settings_badge_container_border;
+  border-radius: $settings_badge_container_border_radius;
+  padding: $settings_badge_container_padding;
+  margin: $settings_badge_container_margin;
+
+  // the file picker's validity is managed by js
+  // so we got lucky here. when the file picker
+  // is hidden, its set to be valid. it's only invalid
+  // when, well, invalid.
+  &:has(input:invalid) {
+    border: $settings_badge_container_border_invalid;
+  }
+
+  input:invalid {
+    border: $settings_badge_container_border_invalid;
+  }
+}
+
+.settings-badge-file-picker {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  & input.hidden[type=file] {
+    width: 100%;
+
+    &::file-selector-button {
+      display: none;
+    }
+  }
+
+  &.hidden {
+    display: none;
+  }
+}
+
+$settings_badge_select_gap: $SMALL_PADDING !default;
+$settings_badge_select_min_width: 200px !default;
+.settings-badge-select {
+  display: flex;
+  flex-direction: column;
+  gap: $settings_badge_select_gap;
+  align-items: center;
+  min-width: $settings_badge_select_min_width;
+}
+
+img.badge-button {
+  min-width: 88px;
+  min-height: 31px;
+  max-width: 88px;
+  max-height: 31px;
+}
+
+$badges_container_gap: $SMALL_PADDING !default;
+.badges-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: $badges_container_gap;
+}

sass/otomotone.scss

@@ -82,6 +82,8 @@ $br: 8px;
   $bookmarks_dropdown_background_color: $lightish_accent,
 
   $mention_font_color: $fc,
+
+  // $settings_badge_container_border_invalid: 2px dashed $crit,
 );
 
 #topnav {

sass/peachy.scss

@@ -73,9 +73,6 @@ $br: 16px;
 }
 
 #bottomnav {
-  border-bottom-left-radius: $br;
-  border-bottom-right-radius: $br;
-
   color: white;
 }
 
@@ -83,9 +80,10 @@ textarea {
   padding: 12px 16px;
 }
 
-footer {
-  margin-top: 10px;
+#footer {
   border-radius: $br;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
   border: none;
   text-align: center;
 }