Left sidebar

assets/scss/grid.scss

@@ -76,7 +76,9 @@ main.main {
     min-width: 0;
     max-width: 100%;
     flex-grow: 1;
+    @include respond(md) {
         padding-top: var(--main-top-padding);
+    }
 }
 
 .main-container {
@@ -84,6 +86,7 @@ main.main {
     align-items: flex-start;
     padding: 0 15px;
     gap: var(--section-separation);
+    padding-top: var(--main-top-padding);
     
     @include respond(md) {
         padding: 0 20px;

assets/scss/partials/menu.scss

@@ -135,13 +135,12 @@
     box-shadow: var(--shadow-l1);
     display: none;
 
-    margin: 0 -15px;
+    margin: 0 calc(var(--container-padding) * -1);
 
     &,
     .menu-bottom-section {
         gap: 15px;
         @include respond(xl) {
-            margin-top: 30px;
             gap: 20px;
         }
     }
@@ -157,11 +156,6 @@
         padding: 0;
         box-shadow: none;
         margin: 0;
-        margin-top: var(--sidebar-element-separation);
-    }
-
-    @include respond(xl) {
-        margin-top: 30px;
     }
 
     li {
@@ -176,7 +170,6 @@
 
         svg {
             stroke-width: 1.33;
-            margin-right: 40px;
 
             width: 20px;
             height: 20px;
@@ -187,6 +180,7 @@
             display: inline-flex;
             align-items: center;
             color: var(--body-text-color);
+            gap: var(--menu-icon-separation);
         }
 
         span {
@@ -211,7 +205,8 @@
 
 .social-menu {
     list-style: none;
-    padding: 0%;
+    padding: 0;
+    margin: 0;
     display: flex;
     flex-direction: row;
     gap: 10px;

assets/scss/partials/sidebar.scss

@@ -11,9 +11,9 @@
     flex-direction: column;
     flex-shrink: 0;
     align-self: stretch;
+    gap: var(--sidebar-element-separation);
 
     width: 100%;
-    padding: 30px 0 15px 0;
     max-width: none;
 
     --sidebar-avatar-size: 120px;
@@ -49,11 +49,12 @@
     }
 }
 
-.site-info {
+.sidebar header {
     z-index: 1;
     transition: box-shadow 0.5s ease;
-
+    display: flex;
-    padding: 15px;
+    flex-direction: column;
+    gap: var(--sidebar-element-separation);
 
     @include respond(md) {
         padding: 0;
@@ -65,8 +66,6 @@
         width: var(--sidebar-avatar-size);
         height: var(--sidebar-avatar-size);
 
-        margin-bottom: var(--sidebar-element-separation);
-
         .site-logo {
             width: 100%;
             height: 100%;
@@ -95,6 +94,12 @@
         }
     }
 
+    .site-meta {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
     .site-name {
         color: var(--accent-color);
         margin: 0;
@@ -108,7 +113,7 @@
     .site-description {
         color: var(--body-text-color);
         font-weight: normal;
-        margin: 10px 0;
+        margin: 0;
         font-size: 1.6rem;
 
         @include respond(2xl) {
@@ -153,6 +158,7 @@
     display: flex;
     align-items: center;
     cursor: pointer;
+    gap: var(--menu-icon-separation);
 
     .icon-tabler-toggle-right {
         display: none;
@@ -163,6 +169,7 @@
     color: var(--body-text-color);
     display: inline-flex;
     align-content: center;
+    gap: var(--menu-icon-separation);
 
     select {
         border: 0;

assets/scss/variables.scss

@@ -5,9 +5,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
 *   Global style
 */
 :root {
-    @include respond(md) {
     --main-top-padding: 35px;
-    }
 
     @include respond(xl) {
         --main-top-padding: 50px;
@@ -159,3 +157,8 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
     --pre-background-color: #272822;
     @import "partials/highlight/dark.scss";
 }
+
+:root {
+    --menu-icon-separation: 40px;
+    --container-padding: 15px;
+}

layouts/partials/sidebar/left.html

@@ -5,7 +5,7 @@
         </span>
     </button>
 
-    <header class="site-info">
+    <header>
         {{ with .Site.Params.sidebar.avatar }}
             {{ if (default true .enabled) }}
             <figure class="site-avatar">
@@ -31,8 +31,10 @@
             {{ end }}
         {{ end }}
         
+        <div class="site-meta">
             <h1 class="site-name"><a href="{{ .Site.BaseURL | relLangURL }}">{{ .Site.Title }}</a></h1>
             <h2 class="site-description">{{ .Site.Params.sidebar.subtitle }}</h2>
+        </div>
 
         {{- with .Site.Menus.social -}}
             <ol class="social-menu">