Change problem page

resources/blog.scss

@@ -1,6 +1,6 @@
 @import "vars";
 
-.blog-content {
+.middle-content {
     padding-right: 0em;
     vertical-align: top;
     margin-right: 0;
@@ -32,11 +32,18 @@
     }
 }
 
-.blog-sidebar {
+.blog-sidebar, .right-sidebar {
     width: 100%;
     margin-left: auto;
 }
 
+.left-sidebar-item.active {
+    color: green;
+    .sidebar-icon {
+        color: green;
+    }
+}
+
 .blog-sidebox {
     h3 {
         padding-bottom: 0.25em;
@@ -95,19 +102,21 @@
     }
     .left-sidebar-item {
         display: inline-block;
+        margin-left: 2em;
     }
-    .blog-left-sidebar {
+    .left-sidebar {
         text-align: right;
         padding-right: 1em;
         margin-bottom: 1em;
+        border-radius: 7px;
     }
 }
 @media (min-width: 800px) {
-    .blog-content, .blog-sidebar {
+    .middle-content, .blog-sidebar, .right-sidebar {
         display: block !important;
     }
 
-    .blog-content {
+    .middle-content {
         margin-right: 1em !important;
     }
 
@@ -115,20 +124,20 @@
         display: none;
     }
 
-    #blog-container {
+    #three-col-container {
         display: flex;
     }
 
-    .blog-content {
+    .middle-content {
         max-width: 71.5%;
         margin-left: 10%;
     }
 
-    .blog-sidebar {
+    .blog-sidebar, .right-sidebar {
         width: 18%;
     }
 
-    .blog-left-sidebar {
+    .left-sidebar {
         width: 8%;
         margin-right: 1em;
         position: fixed;
@@ -203,7 +212,7 @@
     color: gray;
 }
 
-.blog-left-sidebar {
+.left-sidebar {
     background-color: #f0f1f3;
     color: #616161;
 }

resources/problem.scss

@@ -77,6 +77,7 @@
         flex: 26.5%;
         max-width: unset;
         padding-top: 0;
+        padding-left: 0;
     }
 }
 
@@ -293,3 +294,39 @@ ul.problem-list {
         font-size: 13px;
     }
 }
+
+.problem-feed-option {
+    width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 1em;
+    border-radius: 5px;
+    margin-bottom: 1em
+}
+
+.problem-feed-option-item {
+    padding: 10px 15px;
+    border-radius: 2em;
+    font-weight: bold;
+    background: lightgray;
+    margin-right: 1em;
+    color: gray;
+    cursor: pointer;
+}
+
+.pcodecell {
+    text-transform: uppercase;
+}
+
+.problem-feed-option-item.active {
+    background: goldenrod;
+    color: darkblue;
+}
+
+@media (max-width: 799px) {
+    .problem-middle-right {
+        display: flex;
+        flex-direction: column-reverse;
+    }
+}
+