diff options
author | Alexander Neonxp Kiryukhin <i@neonxp.ru> | 2024-11-16 19:32:18 +0300 |
---|---|---|
committer | Alexander Neonxp Kiryukhin <i@neonxp.ru> | 2024-11-17 01:28:57 +0300 |
commit | 239d68f94c6250276850fbe95eaa6cdd5c38fb26 (patch) | |
tree | c576da169afc442f51eae6213ad0ff749ed86589 /themes/hugo-theme-stack/assets/scss/partials/sidebar.scss | |
parent | 8e79098193fd0a8b65305dd8054cf7c424c60bc5 (diff) |
Своя тема, полностью всё переделал
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, 0 insertions, 199 deletions
diff --git a/themes/hugo-theme-stack/assets/scss/partials/sidebar.scss b/themes/hugo-theme-stack/assets/scss/partials/sidebar.scss deleted file mode 100644 index a6a77c5..0000000 --- a/themes/hugo-theme-stack/assets/scss/partials/sidebar.scss +++ /dev/null @@ -1,199 +0,0 @@ -.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); - } - } -} |