From 26acceb37da928addd5f8967ae18c59918f36940 Mon Sep 17 00:00:00 2001 From: Jimmy Cai Date: Wed, 23 Sep 2020 13:20:18 +0200 Subject: [PATCH] feat(scss): improve 2 column style --- assets/scss/grid.scss | 119 ++++++++++++++++++++++++++++++ assets/scss/partials/sidebar.scss | 14 ---- assets/scss/style.scss | 75 +------------------ layouts/_default/baseof.html | 2 +- 4 files changed, 121 insertions(+), 89 deletions(-) create mode 100644 assets/scss/grid.scss diff --git a/assets/scss/grid.scss b/assets/scss/grid.scss new file mode 100644 index 0000000..1d19067 --- /dev/null +++ b/assets/scss/grid.scss @@ -0,0 +1,119 @@ +.container { + margin-left: auto; + margin-right: auto; + + &.extended { + @media (min-width: $on-phone) { + max-width: 800px; + + .left-sidebar { + width: 25%; + } + } + + @media (min-width: $on-tablet) { + max-width: 972px; + + .right-sidebar { + width: 25%; + } + } + + @media (min-width: $on-desktop) { + max-width: 1200px; + + .left-sidebar { + width: 20%; + } + + .right-sidebar { + width: 25%; + } + } + + @media (min-width: $on-desktop-large) { + max-width: 1536px; + + .left-sidebar { + width: 15%; + } + } + } + + &.compact { + @media (min-width: $on-phone) { + max-width: 800px; + + .left-sidebar { + width: 25%; + } + } + + @media (min-width: $on-tablet) { + max-width: 972px; + } + + @media (min-width: $on-desktop) { + max-width: 1200px; + + .left-sidebar { + width: 20%; + } + } + + @media (min-width: $on-desktop-large) { + max-width: 1300px; + } + } +} + +.flex { + display: flex; + flex-direction: row; + + &.column { + flex-direction: column; + } + + &.on-phone--column { + @media (max-width: $on-phone) { + flex-direction: column; + } + } + + &.align-items--flex-start { + align-items: flex-start; + } + + .grow { + flex-grow: 1; + } + + .do-not-shrink { + flex-shrink: 0; + } + + .do-not-overflow { + min-width: 0; + flex-shrink: 1; + max-width: 100%; + } + + .full-width { + width: 100%; + } +} + +main.main { + min-width: 0; + padding: 0 15px; + max-width: 100%; + flex-grow: 1; + padding-top: var(--main-top-padding); +} + +.main-grid { + @media (max-width: $on-phone) { + flex-direction: column; + } +} diff --git a/assets/scss/partials/sidebar.scss b/assets/scss/partials/sidebar.scss index 1166a58..ea955f2 100644 --- a/assets/scss/partials/sidebar.scss +++ b/assets/scss/partials/sidebar.scss @@ -23,19 +23,10 @@ } @media (min-width: $on-phone + 1) { - width: 25%; margin-right: 1%; padding: var(--main-top-padding) 15px; max-height: 100vh; } - - @media (min-width: $on-desktop) { - width: 20%; - } - - @media (min-width: $on-desktop-large) { - width: 15%; - } } .right-sidebar { @@ -50,14 +41,9 @@ } @media (min-width: $on-tablet) { - width: 25%; margin-left: 1%; padding-top: 50px; } - - @media (min-width: $on-desktop + 1) { - width: 25%; - } } .site-info { diff --git a/assets/scss/style.scss b/assets/scss/style.scss index 908be5e..a0ccbf6 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -8,6 +8,7 @@ @import "breakpoints.scss"; @import "variables.scss"; +@import "grid.scss"; @import "external/normalize.scss"; @@ -41,80 +42,6 @@ a { } } -.container { - margin-left: auto; - margin-right: auto; - - &.extended { - @media (min-width: $on-phone) { - max-width: 800px; - } - - @media (min-width: $on-tablet) { - max-width: 972px; - } - - @media (min-width: $on-desktop) { - max-width: 1200px; - } - - @media (min-width: $on-desktop-large) { - max-width: 1536px; - } - } -} - -main.main { - min-width: 0; - padding: 0 15px; - max-width: 100%; - flex-grow: 1; - padding-top: var(--main-top-padding); -} - -.main-grid { - @media (max-width: $on-phone) { - flex-direction: column; - } -} - -.flex { - display: flex; - flex-direction: row; - - &.column { - flex-direction: column; - } - - &.on-phone--column { - @media (max-width: $on-phone) { - flex-direction: column; - } - } - - &.align-items--flex-start { - align-items: flex-start; - } - - .grow { - flex-grow: 1; - } - - .do-not-shrink { - flex-shrink: 0; - } - - .do-not-overflow { - min-width: 0; - flex-shrink: 1; - max-width: 100%; - } - - .full-width { - width: 100%; - } -} - .alert { position: fixed; right: 20px; diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 1151e4e..fb6e871 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -2,7 +2,7 @@ {{- partial "head/head.html" . -}} -
+
{{ partial "sidebar/left.html" . }}
{{- block "main" . }}{{- end }}