fix: #19 make sidebar width fixed

Author: Lhcfl

src/scss/consts/consts.scss

@@ -3,3 +3,5 @@ $site-border: 1px solid var(--primary-100);
 $bp-mobile-view: 900px;
 
 $bp-small-width-view: 500px;
+
+$sidebar-width: 345px;

src/scss/raw-components/nav.scss

@@ -1,7 +1,7 @@
 @import '../consts/consts.scss';
 
 .page-top {
-  width: 70%;
+  width: calc(100% - $sidebar-width);
   position: fixed;
   right: 0;
   z-index: 3;

src/scss/raw-components/sidebar.scss

@@ -0,0 +1,108 @@
+@import '../consts/consts.scss';
+
+.sidebar {
+  width: $sidebar-width;
+  -webkit-background-size: cover;
+  background-size: cover;
+  background-color: var(--secondary);
+  height: 100%;
+  transition: all 0.8s;
+  top: 0;
+  left: 0;
+  position: fixed;
+  z-index: 4;
+  border-right: $site-border;
+
+  .logo-title {
+    text-align: center;
+    margin-top: -50px;
+
+    .description {
+      font-size: 14px;
+      color: var(--secondary-350);
+    }
+
+    .logo {
+      margin: 0 auto;
+    }
+
+    .title {
+      h3 {
+        text-transform: none;
+        font-size: 2rem;
+        font-weight: bold;
+        letter-spacing: 2px;
+        line-height: 1;
+        margin: 0;
+      }
+
+      a {
+        text-decoration: none;
+        color: var(--secondary-350);
+        font-size: 2rem;
+        font-weight: bold;
+      }
+    }
+  }
+
+  .social-links {
+    list-style: none;
+    padding: 0;
+    font-size: 14px;
+    text-align: center;
+
+    i {
+      margin-right: 3px;
+    }
+
+    li {
+      display: inline;
+      padding: 0 4px;
+      line-height: 0;
+    }
+
+    a {
+      color: var(--secondary-350);
+    }
+
+    a:hover {
+      color: #4786d6;
+    }
+  }
+
+  @media screen and (max-width: $bp-mobile-view) {
+    width: 100%;
+    height: auto;
+    position: relative;
+    border-right: none;
+    z-index: 1;
+    top: auto;
+
+    .logo-title {
+      padding-top: 120px;
+      margin-top: 0;
+
+      .title {
+        img {
+          width: 100px;
+        }
+
+        h3 {
+          font-size: 20px;
+        }
+      }
+    }
+  }
+}
+
+.sidebar-top {
+  margin: auto 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+
+  .ltr {
+    text-align: center;
+  }
+}

src/scss/style.scss

@@ -172,94 +172,12 @@
 .content {
   height: auto;
   float: right;
-  width: 70%;
+  width: calc(100% - $sidebar-width);
   margin-top: 60px;
 }
 
 @import 'raw-components/nav.scss';
-
-.sidebar {
-  width: 30%;
-  -webkit-background-size: cover;
-  background-size: cover;
-  background-color: var(--secondary);
-  height: 100%;
-  transition: all 0.8s;
-  top: 0;
-  left: 0;
-  position: fixed;
-  z-index: 4;
-  border-right: $site-border;
-
-  .logo-title {
-    text-align: center;
-    margin-top: -50px;
-
-    .description {
-      font-size: 14px;
-      color: var(--secondary-350);
-    }
-
-    .logo {
-      margin: 0 auto;
-    }
-
-    .title {
-      h3 {
-        text-transform: none;
-        font-size: 2rem;
-        font-weight: bold;
-        letter-spacing: 2px;
-        line-height: 1;
-        margin: 0;
-      }
-
-      a {
-        text-decoration: none;
-        color: var(--secondary-350);
-        font-size: 2rem;
-        font-weight: bold;
-      }
-    }
-  }
-
-  .social-links {
-    list-style: none;
-    padding: 0;
-    font-size: 14px;
-    text-align: center;
-
-    i {
-      margin-right: 3px;
-    }
-
-    li {
-      display: inline;
-      padding: 0 4px;
-      line-height: 0;
-    }
-
-    a {
-      color: var(--secondary-350);
-    }
-
-    a:hover {
-      color: #4786d6;
-    }
-  }
-}
-
-.sidebar-top {
-  margin: auto 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  height: 100%;
-
-  .ltr {
-    text-align: center;
-  }
-}
+@import 'raw-components/sidebar.scss';
 
 .card {
   margin-left: 5px;
@@ -855,30 +773,6 @@ a.btn {
 }
 
 @media screen and (max-width: $bp-mobile-view) {
-  .sidebar {
-    width: 100%;
-    height: auto;
-    position: relative;
-    border-right: none;
-    z-index: 1;
-    top: auto;
-
-    .logo-title {
-      padding-top: 120px;
-      margin-top: 0;
-
-      .title {
-        img {
-          width: 100px;
-        }
-
-        h3 {
-          font-size: 20px;
-        }
-      }
-    }
-  }
-
   .post-title h3 {
     line-height: 1.6;
   }