diff options
Diffstat (limited to 'assets/scss/partials/sidebar.scss')
-rw-r--r-- | assets/scss/partials/sidebar.scss | 40 |
1 files changed, 18 insertions, 22 deletions
diff --git a/assets/scss/partials/sidebar.scss b/assets/scss/partials/sidebar.scss index 4d320a8..09bcc33 100644 --- a/assets/scss/partials/sidebar.scss +++ b/assets/scss/partials/sidebar.scss @@ -11,11 +11,13 @@ flex-direction: column; flex-shrink: 0; align-self: stretch; + gap: var(--sidebar-element-separation); width: 100%; - padding: 30px 0 15px 0; max-width: none; + position: relative; + --sidebar-avatar-size: 120px; --sidebar-element-separation: 20px; @@ -39,6 +41,8 @@ .right-sidebar { width: 100%; display: none; + flex-direction: column; + gap: var(--widget-separation); &.sticky { top: 0; @@ -49,11 +53,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 +70,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 +98,12 @@ } } + .site-meta { + display: flex; + flex-direction: column; + gap: 10px; + } + .site-name { color: var(--accent-color); margin: 0; @@ -108,7 +117,7 @@ .site-description { color: var(--body-text-color); font-weight: normal; - margin: 10px 0; + margin: 0; font-size: 1.6rem; @include respond(2xl) { @@ -117,21 +126,6 @@ } } -.sidebar { - .widget { - margin-bottom: var(--section-separation); - - &:not(:last-of-type):after { - content: ""; - width: 100px; - height: 2px; - background-color: var(--body-text-color); - display: block; - margin-top: var(--section-separation); - } - } -} - [data-scheme="dark"] { #dark-mode-toggle { color: var(--accent-color); @@ -153,6 +147,7 @@ display: flex; align-items: center; cursor: pointer; + gap: var(--menu-icon-separation); .icon-tabler-toggle-right { display: none; @@ -163,6 +158,7 @@ color: var(--body-text-color); display: inline-flex; align-content: center; + gap: var(--menu-icon-separation); select { border: 0; |