diff options
author | Fredrik Jonsson <frjo@xdeb.org> | 2022-06-01 14:51:18 +0300 |
---|---|---|
committer | Fredrik Jonsson <frjo@xdeb.org> | 2022-06-01 14:51:18 +0300 |
commit | 79167aed03e5ea675755a45aeff5824a3039934f (patch) | |
tree | d078a7422297f9d125453ad10b2e91235b8f8841 | |
parent | 3b5eea5cb950a3b14cd20485e5317b13315644cd (diff) |
Implement variable zen-gutters with calc() based on vm.
-rw-r--r-- | assets/sass/_variables.scss | 6 | ||||
-rw-r--r-- | assets/sass/_zen.scss | 8 | ||||
-rw-r--r-- | assets/sass/components/header/_header.scss | 1 | ||||
-rw-r--r-- | assets/sass/components/language-selector/_language-selector.scss | 5 | ||||
-rw-r--r-- | assets/sass/layouts/_layouts.scss | 6 | ||||
-rw-r--r-- | assets/sass/mobile.scss | 12 |
6 files changed, 15 insertions, 23 deletions
diff --git a/assets/sass/_variables.scss b/assets/sass/_variables.scss index 2df42b8..c74701e 100644 --- a/assets/sass/_variables.scss +++ b/assets/sass/_variables.scss @@ -19,7 +19,7 @@ $base-line-height: $base-font-size * 1.5; // The font sizes in our type hierarchy as tee shirt sizes. $font-size: ( - xxl: 34px, + xxl: 36px, xl: 28px, l: 22px, m: $base-font-size, @@ -121,13 +121,13 @@ $breakpoints: ( // Layout // The max content width. -$max-content-width: 960px; +$max-content-width: 1000px; // The max line width for redability. $max-line-width: 70ch; // The default left/right gutter/padding. -$zen-gutters: 20px; +$zen-gutters: calc(5px + 1.5625vw); // Border radius. $s-radius: 3px; diff --git a/assets/sass/_zen.scss b/assets/sass/_zen.scss index 039f425..4168321 100644 --- a/assets/sass/_zen.scss +++ b/assets/sass/_zen.scss @@ -11,11 +11,7 @@ body { } .header { - padding-top: $zen-gutters / 2; - - @include respond-to(s) { - padding-top: $zen-gutters; - } + padding-top: $zen-gutters; } .footer { @@ -142,7 +138,7 @@ article { } .title-submitted { - margin-bottom: 0; + margin-bottom: .2rem; } figure { diff --git a/assets/sass/components/header/_header.scss b/assets/sass/components/header/_header.scss index 0838007..1f2e1e8 100644 --- a/assets/sass/components/header/_header.scss +++ b/assets/sass/components/header/_header.scss @@ -25,7 +25,6 @@ // The name of the website. &__site-name { margin: 0; - line-height: 1.5; } // The link around the name of the website. diff --git a/assets/sass/components/language-selector/_language-selector.scss b/assets/sass/components/language-selector/_language-selector.scss index 5e47530..c6ff063 100644 --- a/assets/sass/components/language-selector/_language-selector.scss +++ b/assets/sass/components/language-selector/_language-selector.scss @@ -5,9 +5,10 @@ } .language-icon { - margin: 0 ($zen-gutters / 2) 0 0; + @include margin-right(.5); @include rtl() { - margin: 0 0 0 ($zen-gutters / 2); + @include margin-left(.5); + margin-right: 0; } } diff --git a/assets/sass/layouts/_layouts.scss b/assets/sass/layouts/_layouts.scss index 01c5969..24dd4c2 100644 --- a/assets/sass/layouts/_layouts.scss +++ b/assets/sass/layouts/_layouts.scss @@ -19,12 +19,8 @@ &__page-top, &__page-bottom, &__cookieconsent { - padding: 0 $zen-gutters / 2; + padding: 0 $zen-gutters; min-width: 0; // With display grid defaults to auto, making <pre> overflow. - - @include respond-to(s) { - padding: 0 $zen-gutters; - } } } diff --git a/assets/sass/mobile.scss b/assets/sass/mobile.scss index 7b25c16..d8226b9 100644 --- a/assets/sass/mobile.scss +++ b/assets/sass/mobile.scss @@ -47,9 +47,9 @@ &__toggle { display: block; position: absolute; - top: $zen-gutters / 2; - right: $zen-gutters / 2; - padding: 6px ($zen-gutters + $zen-gutters / 4 + 4px) 4px 4px; + top: $zen-gutters; + right: $zen-gutters; + padding: 6px 30px 6px 6px; z-index: 22; text-decoration: none; font-weight: bold; @@ -70,9 +70,9 @@ &::after { position: absolute; content: ''; - margin-left: $zen-gutters / 4; - width: $zen-gutters; - height: $zen-gutters; + margin-left: 4px; + width: 20px; + height: 20px; border-top: 12px double var(--color-text); border-bottom: 4px solid var(--color-text); } |