refactor: set right side as absolute

src/_layouts/base.njk

@@ -25,10 +25,12 @@
     <div class="main-content">
       {{ content | safe }}
     </div>
-    <nav class="right-side">
+    <div class="right-side">
+      <nav class="nav-right">
         {% include "tagslist.njk" %}
         {% include "other_links.njk" %}
       </nav>
+    </div>
   </main>
 
   <footer class="main-footer">

src/assets/css/index.scss

@@ -57,42 +57,50 @@ body {
 }
 
 main {
-  max-width: 1200px;
+  max-width: 50rem;
   margin: 0 auto;
 
   display: flex;
+  position: relative;
 }
 .main-content {
   margin: auto;
-  width: 1200px;
+  width: 50rem;
 }
 
 .right-side {
+  position: absolute;
+  left: 110%;
+  height: 100%;
+  max-width: 300px;
+  margin-right: 30px;
+}
+
+.nav-right {
   position: sticky;
   top: 1rem;
   align-self: flex-start;
   width: 300px;
-  padding-left: 60px;
 }
 
-.right-side .title {
+.nav-right .title {
   color: var(--text-color-secondary);
   font-weight: 700;
 }
 
-.right-side .tags {
+.nav-right .tags {
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
 }
 
-.right-side .links {
+.nav-right .links {
   padding: 0;
   list-style: none;
 }
 
-.right-side .tags,
-.right-side .links {
+.nav-right .tags,
+.nav-right .links {
   padding: 0;
   margin: 12px 0 23px 0;
   list-style: none;
@@ -384,7 +392,7 @@ pre[class*="language-diff-"] {
   color: inherit; /* override del, ins, mark defaults */
 }
 
-@media only screen and (max-width: 1200px) {
+@media only screen and (max-width: 1550px) {
   main {
     max-width: 100%;
     flex-direction: column;
@@ -394,9 +402,15 @@ pre[class*="language-diff-"] {
     max-width: 100%;
   }
   .right-side {
+    position: relative;
+    left: unset;
+    height: unset;
     width: 100%;
+    max-width: unset;
     padding-left: 0;
-    padding-top: 5rem;
+  }
+  .nav-right {
+    width: 100%;
   }
   .main-footer {
     flex-direction: column-reverse;