diff options
author | Alexander Neonxp Kiryukhin <i@neonxp.ru> | 2024-11-03 20:08:36 +0300 |
---|---|---|
committer | Alexander Neonxp Kiryukhin <i@neonxp.ru> | 2024-11-03 20:08:36 +0300 |
commit | 59c7d4567380d1a9c80e96eb958fdbdd512ce006 (patch) | |
tree | 65410cfc10dbc7d060ec23be110662d9b7f6b0e9 /themes/hugo-theme-stack/assets/scss/grid.scss |
новая жизнь блога
Diffstat (limited to 'themes/hugo-theme-stack/assets/scss/grid.scss')
-rw-r--r-- | themes/hugo-theme-stack/assets/scss/grid.scss | 101 |
1 files changed, 101 insertions, 0 deletions
diff --git a/themes/hugo-theme-stack/assets/scss/grid.scss b/themes/hugo-theme-stack/assets/scss/grid.scss new file mode 100644 index 0000000..9284da9 --- /dev/null +++ b/themes/hugo-theme-stack/assets/scss/grid.scss @@ -0,0 +1,101 @@ +.container { + margin-left: auto; + margin-right: auto; + + .left-sidebar { + order: -3; + max-width: var(--left-sidebar-max-width); + } + + .right-sidebar { + order: -1; + max-width: var(--right-sidebar-max-width); + + /// Display right sidebar when min-width: lg + @include respond(lg) { + display: flex; + } + } + + &.extended { + @include respond(md) { + max-width: 1024px; + --left-sidebar-max-width: 25%; + --right-sidebar-max-width: 30%; + } + + @include respond(lg) { + max-width: 1280px; + --left-sidebar-max-width: 20%; + --right-sidebar-max-width: 30%; + } + + @include respond(xl) { + max-width: 1536px; + --left-sidebar-max-width: 15%; + --right-sidebar-max-width: 25%; + } + } + + &.compact { + @include respond(md) { + --left-sidebar-max-width: 25%; + max-width: 768px; + } + + @include respond(lg) { + max-width: 1024px; + --left-sidebar-max-width: 20%; + } + + @include respond(xl) { + max-width: 1280px; + } + } +} + +.flex { + display: flex; + flex-direction: row; + + &.column { + flex-direction: column; + } + + &.on-phone--column { + flex-direction: column; + @include respond(md) { + flex-direction: unset; + } + } + + .full-width { + width: 100%; + } +} + +main.main { + order: -2; + min-width: 0; + max-width: 100%; + flex-grow: 1; + display: flex; + flex-direction: column; + gap: var(--section-separation); + + @include respond(md) { + padding-top: var(--main-top-padding); + } +} + +.main-container { + min-height: 100vh; + align-items: flex-start; + padding: 0 15px; + gap: var(--section-separation); + padding-top: var(--main-top-padding); + + @include respond(md) { + padding: 0 20px; + } +} |