diff options
Diffstat (limited to 'themes/hugo-theme-stack/assets/scss/partials/sidebar.scss')
-rw-r--r-- | themes/hugo-theme-stack/assets/scss/partials/sidebar.scss | 199 |
1 files changed, 199 insertions, 0 deletions
diff --git a/themes/hugo-theme-stack/assets/scss/partials/sidebar.scss b/themes/hugo-theme-stack/assets/scss/partials/sidebar.scss new file mode 100644 index 0000000..a6a77c5 --- /dev/null +++ b/themes/hugo-theme-stack/assets/scss/partials/sidebar.scss @@ -0,0 +1,199 @@ +.sidebar { + &.sticky { + @include respond(md) { + position: sticky; + } + } +} + +.left-sidebar { + display: flex; + flex-direction: column; + flex-shrink: 0; + align-self: stretch; + gap: var(--sidebar-element-separation); + max-width: none; + width: 100%; + position: relative; + + --sidebar-avatar-size: 100px; + --sidebar-element-separation: 20px; + --emoji-size: 40px; + --emoji-font-size: 20px; + + @include respond(md) { + width: auto; + padding-top: var(--main-top-padding); + padding-bottom: var(--main-top-padding); + max-height: 100vh; + } + + @include respond(2xl) { + --sidebar-avatar-size: 120px; + --sidebar-element-separation: 25px; + --emoji-size: 40px; + } + + &.sticky { + top: 0; + } + + &.compact { + --sidebar-avatar-size: 80px; + --emoji-size: 30px; + --emoji-font-size: 15px; + + header { + @include respond(lg) { + flex-direction: row; + } + + .site-meta { + gap: 5px; + } + + .site-name { + font-size: 1.4rem; + + @include respond(2xl) { + font-size: 1.75rem; + } + } + + .site-description { + font-size: 1.4rem; + } + } + } +} + +.right-sidebar { + width: 100%; + display: none; + flex-direction: column; + gap: var(--widget-separation); + + &.sticky { + top: 0; + } + + @include respond(lg) { + padding-top: var(--main-top-padding); + padding-bottom: var(--main-top-padding); + } +} + +.sidebar header { + z-index: 1; + transition: box-shadow 0.5s ease; + display: flex; + flex-direction: column; + gap: var(--sidebar-element-separation); + + @include respond(md) { + padding: 0; + } + + .site-avatar { + position: relative; + margin: 0; + width: var(--sidebar-avatar-size); + height: var(--sidebar-avatar-size); + flex-shrink: 0; + + .site-logo { + width: 100%; + height: 100%; + border-radius: 100%; + box-shadow: var(--shadow-l1); + } + + .emoji { + position: absolute; + width: var(--emoji-size); + height: var(--emoji-size); + line-height: var(--emoji-size); + border-radius: 100%; + bottom: 0; + right: 0; + text-align: center; + font-size: var(--emoji-font-size); + background-color: var(--card-background); + box-shadow: var(--shadow-l2); + } + } + + .site-meta { + display: flex; + flex-direction: column; + gap: 10px; + justify-content: center; + } + + .site-name { + color: var(--accent-color); + margin: 0; + font-size: 1.6rem; + + @include respond(2xl) { + font-size: 1.8rem; + } + } + + .site-description { + color: var(--body-text-color); + font-weight: normal; + margin: 0; + font-size: 1.4rem; + + @include respond(2xl) { + font-size: 1.6rem; + } + } +} + +[data-scheme="dark"] { + #dark-mode-toggle { + color: var(--accent-color); + font-weight: 700; + + .icon-tabler-toggle-left { + display: none; + } + + .icon-tabler-toggle-right { + display: unset; + } + } +} + +#dark-mode-toggle { + margin-top: auto; + color: var(--body-text-color); + display: flex; + align-items: center; + cursor: pointer; + gap: var(--menu-icon-separation); + + .icon-tabler-toggle-right { + display: none; + } +} + +#i18n-switch { + color: var(--body-text-color); + display: inline-flex; + align-content: center; + gap: var(--menu-icon-separation); + + select { + border: 0; + background-color: transparent; + color: var(--body-text-color); + + option { + color: var(--card-text-color-main); + background-color: var(--card-background); + } + } +} |