[styles] Fixed sidebar border and imrpoved small screen looks

1 files changed, 8 insertions, 6 deletions

diff --git a/src/styles.css b/src/styles.css
index 88db27a..5857b46 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -270,14 +270,14 @@ dt { font-size: 1.2em; }
 #content-wrapper, .sidebar {
     border-right: 3px solid var(--accent-line-color);
     display: flex;
+    flex-direction: row;
+    min-height: calc(100vh - 16px);
   }
-  #content-wrapper {
-      flex-direction: row;
-      min-height: calc(100vh - 16px);
-    }
   .sidebar {
+      border: 3px solid var(--accent-line-color);
       border-top: none;
       border-right: none;
+      display: flex;
       flex-direction: column;
       font-size: 1.2em;
       max-width: 11.2em;
@@ -378,7 +378,10 @@ dt { font-size: 1.2em; }
 /* Small screen support */
 
 @media screen and (max-width: 610px) {
-  article            { max-width: calc(100vw - 16px - 3px); }
+  article {
+      border-top: none;
+      max-width: calc(100vw - 16px - 3px);
+    }
   table td, table th { word-break: break-all; }
 
   #content-wrapper { flex-direction: column; }
@@ -389,7 +392,6 @@ dt { font-size: 1.2em; }
     #index-contents-img { max-width: 4.38em; }
 
   .sidebar {
-      margin-right: 8px;
       max-width: initial;
       padding-right: 1em;
     }