fix: correct for small screen

src/_layouts/base.njk

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

src/assets/css/index.scss

@@ -58,50 +58,42 @@ body {
 }
 
 main {
-  max-width: 50rem;
+  max-width: 1200px;
   margin: 0 auto;
 
   display: flex;
-  position: relative;
 }
 .main-content {
   margin: auto;
-  width: 50rem;
+  width: 1200px;
 }
 
 .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;
 }
 
-.nav-right .title {
+.right-side .title {
   color: var(--text-color-secondary);
   font-weight: 700;
 }
 
-.nav-right .tags {
+.right-side .tags {
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
 }
 
-.nav-right .links {
+.right-side .links {
   padding: 0;
   list-style: none;
 }
 
-.nav-right .tags,
-.nav-right .links {
+.right-side .tags,
+.right-side .links {
   padding: 0;
   margin: 12px 0 23px 0;
   list-style: none;
@@ -398,7 +390,7 @@ pre[class*="language-diff-"] {
   color: inherit; /* override del, ins, mark defaults */
 }
 
-@media only screen and (max-width: 1550px) {
+@media only screen and (max-width: 1200px) {
   main {
     max-width: 100%;
     flex-direction: column;
@@ -408,16 +400,9 @@ pre[class*="language-diff-"] {
     max-width: 100%;
   }
   .right-side {
-    position: relative;
-    left: unset;
-    height: unset;
     width: 100%;
-    max-width: 50rem;
     padding-left: 0;
-    margin: 0 auto;
-  }
-  .nav-right {
-    width: 100%;
+    padding-top: 5rem;
   }
   .main-footer {
     flex-direction: column-reverse;