Update layout UI

resources/base.scss

@@ -377,7 +377,7 @@ hr {
 }
 
 #content {
-    margin: 4.5em auto 1em auto;
+    margin: 3.2em auto 1em auto;
 
     // Header
     width: 90%;
@@ -390,6 +390,12 @@ hr {
     }
 }
 
+#content.wrapper {
+    background: white;
+    padding: 2em;
+    border-radius: 1em;
+}
+
 footer {
     text-align: center;
     height: 40px;
@@ -558,7 +564,7 @@ noscript #noscript {
     margin: 0 auto;
     border-right: 1px solid $border_gray;
     border-left: 1px solid $border_gray;
-    background: white;
+    background: #f1f2f2;
 }
 
 // border-bottom: 1px solid rgb(204, 204, 204)

resources/blog.scss

@@ -257,6 +257,12 @@
     }
 }
 
+.middle-right-content.wrapper {
+    padding: 1em 0;
+    background: white;
+    border-radius: 1em;
+}
+
 
 @media (max-width: 799px) {
     .actionbar-box {
@@ -332,14 +338,15 @@
 
     .left-sidebar {
         width: 11%;
+        max-width: 11%;
+        min-width: 11%;
         position: fixed;
         height: 100%;
         margin-top: -4em;
         padding-top: 4em;
-    }
-
-    .left-sidebar-item {
-        border-radius: 0 0.5em 0.5em 0;
+        border-right: 1px solid lightgray;
+        box-shadow: 0px -10px 2px 0px rgb(0 0 0 / 50%);
+        background: white;
     }
 
     .feed-table {

resources/chatbox.scss

@@ -1,3 +1,6 @@
+.chat {
+    background: white;
+}
 #chat-log p {
     margin: 0;
     padding-top: 0.1em;

resources/darkmode.css

@@ -1622,6 +1622,10 @@ hr {
 #content .title {
     color: rgb(199, 194, 187);
 }
+#content.wrapper {
+    background-image: initial;
+    background-color: rgb(24, 26, 27);
+}
 footer {
     border-top-color: rgb(62, 68, 70);
     background-image: initial;
@@ -1687,7 +1691,7 @@ noscript #noscript {
     border-right-color: rgb(62, 68, 70);
     border-left-color: rgb(62, 68, 70);
     background-image: initial;
-    background-color: rgb(24, 26, 27);
+    background-color: rgb(32, 34, 36);
 }
 .MathJax:focus {
     outline-color: initial;
@@ -1803,6 +1807,10 @@ noscript #noscript {
     background-image: initial;
     background-color: rgb(29, 31, 32);
 }
+.table.striped tr:nth-child(2n+1) {
+    background-image: initial;
+    background-color: rgb(24, 26, 27);
+}
 .table td:first-child {
     border-color: rgb(62, 68, 70);
 }
@@ -1919,6 +1927,9 @@ noscript #noscript {
     border-top-color: rgb(60, 65, 68);
     background-color: rgb(24, 26, 27);
 }
+.blog-box:hover {
+    border-color: rgb(81, 88, 91);
+}
 .problem-feed-name a {
     color: rgb(102, 177, 250);
 }
@@ -1939,11 +1950,22 @@ noscript #noscript {
     color: rgb(232, 230, 227);
 }
 .show-more {
-    color: white;
-    background: linear-gradient(rgba(0, 0, 0, 0), rgb(24, 26, 27));
+    color: rgb(232, 230, 227);
+    background-image: linear-gradient(rgba(0, 0, 0, 0),
+    rgb(24, 26, 27));
+    background-color: initial;
+}
+.middle-right-content.wrapper {
+    background-image: initial;
+    background-color: rgb(24, 26, 27);
 }
-
 @media (min-width: 800px) {
+    .left-sidebar {
+        border-right-color: rgb(60, 65, 68);
+        box-shadow: rgba(0, 0, 0, 0.5) 0px -10px 2px 0px;
+        background-image: initial;
+        background-color: rgb(24, 26, 27);
+    }
     .blog-box {
         border-left-color: rgb(60, 65, 68);
         border-right-color: rgb(60, 65, 68);
@@ -2570,6 +2592,8 @@ a.close:hover {
     border-bottom-color: rgb(62, 68, 70);
     border-left-color: rgb(62, 68, 70);
     border-top-color: initial;
+    background-image: initial;
+    background-color: rgb(24, 26, 27);
 }
 .sidebox-content.sidebox-table {
     border-color: initial;
@@ -2732,7 +2756,7 @@ a.voted {
 }
 #submissions-table {
     background-image: initial;
-    background-color: rgba(0, 0, 0, 0.01);
+    background-color: rgb(24, 26, 27);
 }
 .submission-row {
     border-left-color: rgb(62, 68, 70);
@@ -2971,6 +2995,10 @@ a.voted {
     background-color: rgba(204, 0, 0, 0.8);
     color: rgb(232, 230, 227);
 }
+.chat {
+    background-image: initial;
+    background-color: rgb(24, 26, 27);
+}
 #emoji-button {
     color: rgb(204, 200, 193);
 }

resources/submission.scss

@@ -5,7 +5,7 @@
 }
 
 #submissions-table {
-    background: rgba(0, 0, 0, .01);
+    background: white;
 }
 
 .submission-row {

resources/table.scss

@@ -12,6 +12,10 @@
         background: #f7f7f7;
     }
 
+    &.striped tr:nth-child(odd) {
+        background: white;
+    }
+
     td:first-child {
         border-color: $border_gray;
         border-width: 1px 1px 0 1px;

resources/widgets.scss

@@ -495,6 +495,7 @@ ul.select2-selection__rendered {
     border-top: none;
     margin: 0 -5px;
     padding: 1px 0.5em 3px;
+    background: white;
 
     &.sidebox-table {
         border: none;

templates/base.html

@@ -332,7 +332,7 @@
         <div id="noscript">{{ _('This site works best with JavaScript enabled.') }}</div>
       </noscript>
       <br>
-      <main id="content">
+      <main id="content" class="{{'wrapper' if layout != 'no_wrapper'}}">
         {% block title_row %}
           <h2 class="title-row">
             {% block content_title %}

templates/chat/chat.html

@@ -1,3 +1,4 @@
+{% set layout = "no_wrapper" %}
 {% extends "base.html" %}
 {% block title_row %}{% endblock %}
 {% block title_ruler %}{% endblock %}

templates/three-column-content.html

@@ -1,9 +1,10 @@
+{% set layout = 'no_wrapper' %}
 {% extends "base.html" %}
 {% block title_row %}{% endblock %}
 {% block title_ruler %}{% endblock %}
 
 {% block media %}
-<style>
+  <style>
     @media(min-width: 800px) {
       #content {
         width: 98%;
@@ -26,11 +27,11 @@
         display: block;
       }
     }
-</style>
+  </style>
 {% endblock %}
 
 {% block js_media %}
-<script type="text/javascript">
+  <script type="text/javascript">
     function activateBlogBoxOnClick() {
       $('.blog-box').on('click', function () {
         var $description = $(this).children('.blog-description');
@@ -73,6 +74,12 @@
         if (reload_content.length) {
           window.history.pushState("", "", url);
           $('.middle-right-content').html(reload_content.first().html());
+          if (reload_content.hasClass("wrapper")) {
+            $('.middle-right-content').addClass("wrapper");
+          }
+          else {
+            $('.middle-right-content').removeClass("wrapper");
+          }
           $(document).prop('title', $(data).filter('title').text());
           MathJax.typeset($('.middle-right-content')[0]);
           onWindowReady();
@@ -107,21 +114,21 @@
       });
       registerNavigation();
     });
-</script>
+  </script>
 {% endblock %}
 
 {% macro make_tab_item(name, fa, url, text) %}
-<div class="left-sidebar-item {% if page_type == name %}active{% endif %}" data-href="{{ url }}" id="{{ name }}-tab">
+  <div class="left-sidebar-item {% if page_type == name %}active{% endif %}" data-href="{{ url }}" id="{{ name }}-tab">
     <span class="sidebar-icon"><i class="{{ fa }}"></i></span>
     <span>{{ text }}</span>
-</div>
+  </div>
 {% endmacro %}
 
 {% block body %}
-{% block before_posts %}{% endblock %}
-<div id="three-col-container">
+  {% block before_posts %}{% endblock %}
+  <div id="three-col-container">
     {% block left_sidebar %}{% endblock %}
-  <div class="middle-right-content">
+    <div class="middle-right-content {{'wrapper' if is_two_column}}">
       {% block three_col_media %}{% endblock %}
       {% block three_col_js %}{% endblock %}
       <div class="middle-content">
@@ -130,14 +137,14 @@
       </div>
       {% block right_sidebar %}{% endblock %}
     </div>
-</div>
-{% block after_posts %}{% endblock %}
+  </div>
+  {% block after_posts %}{% endblock %}
 {% endblock %}
 
 {% block bodyend %}
-{{ super() }}
-{% if REQUIRE_JAX %}
-{% include "mathjax-load.html" %}
-{% endif %}
-{% include "comments/math.html" %}
+  {{ super() }}
+  {% if REQUIRE_JAX %}
+    {% include "mathjax-load.html" %}
+  {% endif %}
+  {% include "comments/math.html" %}
 {% endblock %}

templates/two-column-content.html

@@ -1,3 +1,4 @@
+{% set is_two_column = true %}
 {% extends "three-column-content.html" %}
 
 {% block three_col_js %}