diff options
| author | Robert Kaussow <mail@thegeeklab.de> | 2022-07-11 16:09:48 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-07-11 16:09:48 +0300 |
| commit | bf9cf7578ae2dcec1ea638dfded538fc31d7fdab (patch) | |
| tree | 8376b52296f562e93ce8fea23db6f6573e2845d1 | |
| parent | 6a827d20f9c1919f8176304d0d4219a4102552db (diff) | |
fix: add column size attribute (#278)
| -rw-r--r-- | layouts/shortcodes/columns.html | 9 | ||||
| -rw-r--r-- | src/sass/_mobile.scss | 9 | ||||
| -rw-r--r-- | src/sass/_shortcodes.scss | 18 |
3 files changed, 32 insertions, 4 deletions
diff --git a/layouts/shortcodes/columns.html b/layouts/shortcodes/columns.html index bb226ed..1773205 100644 --- a/layouts/shortcodes/columns.html +++ b/layouts/shortcodes/columns.html @@ -1,4 +1,11 @@ -<div class="gblog-columns flex flex-wrap flex-mobile-column"> +{{- $size := default "regular" (.Get "size" | lower) }} + +{{- if not (in (slice "regular" "large" "small") $size) }} + {{- $size = "regular" }} +{{- end }} + + +<div class="gblog-columns gblog-columns--{{ $size }} flex flex-gap flex-mobile-column"> {{ range split .Inner "<--->" }} <div class="gblog-columns__content gblog-markdown--nested flex-even"> {{ . | $.Page.RenderString }} diff --git a/src/sass/_mobile.scss b/src/sass/_mobile.scss index f71cec0..a887d3e 100644 --- a/src/sass/_mobile.scss +++ b/src/sass/_mobile.scss @@ -79,6 +79,15 @@ .flex-mobile-column { flex-direction: column; + + &.gblog-columns { + margin: $padding-32 0; + } + + .gblog-columns__content { + min-width: auto; + margin: 0; + } } .gblog-footer { diff --git a/src/sass/_shortcodes.scss b/src/sass/_shortcodes.scss index 45c2bd6..5e5af5a 100644 --- a/src/sass/_shortcodes.scss +++ b/src/sass/_shortcodes.scss @@ -72,13 +72,25 @@ // {{< columns >}} .gblog-columns { - margin-left: -$padding-16; - margin-right: -$padding-16; + &--regular > :first-child { + flex: 1; + } + + &--small > :first-child { + flex: 0.35; + min-width: $body-min-width * 0.35; + } + + &--large > :first-child { + flex: 1.65; + min-width: $body-min-width * 1.65; + } &__content { + flex: 1 1; margin: $padding-16 0; min-width: $body-min-width * 0.66; - padding: 0 $padding-16; + padding: 0; } .gblog-post__anchor { |