diff --git a/assets/scss/grid.scss b/assets/scss/grid.scss index 4b0491b..b2db9cb 100644 --- a/assets/scss/grid.scss +++ b/assets/scss/grid.scss @@ -76,7 +76,9 @@ main.main { min-width: 0; max-width: 100%; flex-grow: 1; - padding-top: var(--main-top-padding); + @include respond(md) { + padding-top: var(--main-top-padding); + } } .main-container { @@ -84,7 +86,8 @@ 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; } diff --git a/assets/scss/partials/menu.scss b/assets/scss/partials/menu.scss index 257eedb..68701c9 100644 --- a/assets/scss/partials/menu.scss +++ b/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; diff --git a/assets/scss/partials/sidebar.scss b/assets/scss/partials/sidebar.scss index 4d320a8..bed2140 100644 --- a/assets/scss/partials/sidebar.scss +++ b/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; - - padding: 15px; + display: flex; + 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; diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss index f7d45b4..24780ec 100644 --- a/assets/scss/variables.scss +++ b/assets/scss/variables.scss @@ -5,9 +5,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff; * Global style */ :root { - @include respond(md) { - --main-top-padding: 35px; - } + --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; +} diff --git a/layouts/partials/sidebar/left.html b/layouts/partials/sidebar/left.html index 35d1c11..44d5307 100644 --- a/layouts/partials/sidebar/left.html +++ b/layouts/partials/sidebar/left.html @@ -5,7 +5,7 @@ -
+
{{ with .Site.Params.sidebar.avatar }} {{ if (default true .enabled) }}
@@ -31,8 +31,10 @@ {{ end }} {{ end }} -

{{ .Site.Title }}

-

{{ .Site.Params.sidebar.subtitle }}

+
+

{{ .Site.Title }}

+

{{ .Site.Params.sidebar.subtitle }}

+
{{- with .Site.Menus.social -}}