render motds in topic and topics views

sass/_default.scss

@@ -1335,3 +1335,37 @@ $bookmark_dropdown_items_container_max_height: 300px !default;
   max-height: $bookmark_dropdown_items_container_max_height;
   overflow: scroll;
 }
+
+$motd_background_color: $ACCENT_COLOR !default;
+$motd_border: 2px outset $LIGHT !default;
+$motd_padding: $MEDIUM_PADDING $MEDIUM_BIG_PADDING !default;
+$motd_margin: $MEDIUM_PADDING 0 !default;
+.motd {
+  display: flex;
+  background-color: $motd_background_color;
+  border: $motd_border;
+  padding: $motd_padding;
+  margin: $motd_margin;
+}
+
+$motd_icon_min_width: 80px !default;
+$motd_icon_padding_right: $MEDIUM_BIG_PADDING !default;
+.motd-icon-container {
+  display: flex;
+  min-width: $motd_icon_min_width;
+  padding-right: $motd_icon_padding_right;
+}
+
+$motd_content_padding_right: 25% !default;
+.motd-content-container {
+  display: flex;
+  flex-direction: column;
+  align-self: center;
+  flex-grow: 1;
+  padding-right: $motd_content_padding_right;
+}
+
+.motd-title {
+  font-weight: bold;
+  font-size: larger;
+}

sass/otomotone.scss

@@ -49,6 +49,7 @@ $crit: #d53232;
   $post_content_background: $dark_accent,
 
   $thread_info_background_color: $dark_accent,
+  $motd_background_color: $lightish_accent,
 
   $post_reactions_background: $lightish_accent,
 

sass/peachy.scss

@@ -15,6 +15,7 @@ $br: 16px;
   $usercard_border: none,
   $usercard_border_right: none,
   $thread_locked_border: 1px solid black,
+  $motd_border: 1px solid black,
 
   $SETTINGS_WIDTH: 60%,
   $PAGE_SIDE_MARGIN: 50px,