Optimized sidebar icons location.

screen width >= 1650px

_includes/sidebar.html

@@ -20,10 +20,10 @@
     </div>
 
     <div class="profile-text mt-3">
-      <div id="site-title">
+      <div class="site-title">
         <a href="{{ '/' | relative_url }}">{{- site.title -}}</a>
       </div>
-      <div id="site-subtitle" class="font-italic">{{- site.tagline -}}</div>
+      <div class="site-subtitle font-italic">{{- site.tagline -}}</div>
     </div>
   </div>
 

assets/css/_addon/main.scss

@@ -77,11 +77,34 @@ $sidebar-display: "sidebar-display";
   overflow-y: auto;
   width: $sidebar-width-medium;
   z-index: 99;
-  background: rgb(42, 30, 107);
   background: var(--sidebar-bg);
   a {
     @include sidebar-links;
   }
+
+  .site-title {
+    text-align: center;
+    a {
+      // color: var(--site-title-color);
+      font-weight: 900;
+      font-size: 1.5rem;
+      letter-spacing: .5px;
+      &:hover {
+        color: #fff;
+        text-decoration: none;
+      }
+    }
+  }
+
+  .site-subtitle {
+    font-size: 95%;
+    text-align: center;
+    color: #828282;
+    line-height: 1.2rem;
+    word-spacing: 1px;
+    margin: .5rem 1.5rem 2rem 1.5rem;
+  }
+
   .sidebar-bottom {
     .icon-border+a { // the icon behide mode-toggle
       margin-left: .1rem;
@@ -239,29 +262,6 @@ $sidebar-display: "sidebar-display";
   }
 } // #avatar
 
-#site-title {
-  text-align: center;
-  a {
-    // color: var(--site-title-color);
-    font-weight: 900;
-    font-size: 1.5rem;
-    letter-spacing: .5px;
-    &:hover {
-      color: #fff;
-      text-decoration: none;
-    }
-  }
-}
-
-#site-subtitle {
-  font-size: 95%;
-  text-align: center;
-  color: #828282;
-  line-height: 1.2rem;
-  word-spacing: 1px;
-  margin: .5rem 1.5rem 2rem 1.5rem;
-}
-
 #search-result-wrapper {
   display: none;
   position: fixed;
@@ -946,7 +946,7 @@ table {
     height: 5rem;
   }
 
-  #site-subtitle {
+  .site-subtitle {
     @include ml-mr(1.8rem);
   }
 
@@ -1188,12 +1188,12 @@ table {
     max-width: 700px;
   }
 
-  #site-title {
+  .site-title {
     font-size: 1.3rem;
     margin-left: 0!important;
   }
 
-  #site-subtitle {
+  .site-subtitle {
     font-size: 90%;
     @include ml-mr(1rem);
   }
@@ -1352,11 +1352,8 @@ table {
   }
 
   #profile-wrapper {
-    margin-top: 4rem;
-    margin-bottom: 3rem;
-    padding-left: 18%;
+    margin: 4rem 2rem 3rem 4rem;
     -ms-flex-direction: column!important;
-  }
 
     #avatar {
       -webkit-box-pack: normal !important;
@@ -1369,7 +1366,7 @@ table {
     }
 
     .profile-text {
-    padding-left: .5rem;
+      margin-left: .5rem;
       /* .d-flex */
       display: -webkit-box!important;
       display: -ms-flexbox!important;
@@ -1380,28 +1377,29 @@ table {
       /* .align-content-center */
       -ms-flex-line-pack: center!important;
       align-content: center!important;
-  }
-
-  #site-title a {
-    font-size: 1.7rem;
-    letter-spacing: 1px;
-  }
-
-  .profile-text>div {
+      >div {
         text-align: left !important;
         width: 100%;
       }
-
-  #site-subtitle {
-    word-spacing: 0;
-    padding-right: 3rem;
-    margin: .3rem 0 0 0;
+    }
   }
 
   #sidebar {
     width: $sidebar-width-large;
+
+    .site-title a {
+      font-size: 1.7rem;
+      letter-spacing: 1px;
+      margin: 0;
+    }
+
+    .site-subtitle {
+      word-spacing: 0;
+      margin: .3rem 0 0 0;
+    }
+
     ul {
-      margin-left: 5%;
+      margin-left: 3%;
       >li>a {
         padding-left: 2.5rem;
         -webkit-box-pack: start!important;
@@ -1457,10 +1455,8 @@ table {
           margin-left: 0;
         }
       }
-
     } // .sidebar-bottom
   } // #sidebar
-
   footer>div.d-flex {
     width: 87%;
     max-width: 1140px;
@@ -1475,6 +1471,7 @@ table {
 
 } // min-width: 1650px
 
+
 @media all and (min-width: 1700px) {
   #topbar-wrapper {
     padding-right: calc(100% - #{$sidebar-width-large}