ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implement variable zen-gutters with calc() based on vm.

Browse source
This commit is contained in:
Fredrik Jonsson 2022-06-01 13:51:18 +02:00
commit 79167aed03
6 changed files with 15 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

6
assets/sass/_variables.scss
View file

@ -19,7 +19,7 @@ $base-line-height: $base-font-size * 1.5;
// The font sizes in our type hierarchy as tee shirt sizes. // The font sizes in our type hierarchy as tee shirt sizes.
$font-size: ( $font-size: (
xxl: 34px, xxl: 36px,
xl: 28px, xl: 28px,
l: 22px, l: 22px,
m: $base-font-size, m: $base-font-size,
@ -121,13 +121,13 @@ $breakpoints: (
// Layout // Layout
// The max content width. // The max content width.
$max-content-width: 960px; $max-content-width: 1000px;
// The max line width for redability. // The max line width for redability.
$max-line-width: 70ch; $max-line-width: 70ch;
// The default left/right gutter/padding. // The default left/right gutter/padding.
$zen-gutters: 20px; $zen-gutters: calc(5px + 1.5625vw);
// Border radius. // Border radius.
$s-radius: 3px; $s-radius: 3px;

8
assets/sass/_zen.scss
View file

@ -11,11 +11,7 @@ body {
} }
.header { .header {
padding-top: $zen-gutters / 2; padding-top: $zen-gutters;
@include respond-to(s) {
padding-top: $zen-gutters;
}
} }
.footer { .footer {
@ -142,7 +138,7 @@ article {
} }
.title-submitted { .title-submitted {
margin-bottom: 0; margin-bottom: .2rem;
} }
figure { figure {

1
assets/sass/components/header/_header.scss
View file

@ -25,7 +25,6 @@
// The name of the website. // The name of the website.
&__site-name { &__site-name {
margin: 0; margin: 0;
line-height: 1.5;
} }
// The link around the name of the website. // The link around the name of the website.

5
assets/sass/components/language-selector/_language-selector.scss
View file

@ -5,9 +5,10 @@
} }
.language-icon { .language-icon {
margin: 0 ($zen-gutters / 2) 0 0; @include margin-right(.5);
@include rtl() { @include rtl() {
margin: 0 0 0 ($zen-gutters / 2); @include margin-left(.5);
margin-right: 0;
} }
} }

6
assets/sass/layouts/_layouts.scss
View file

@ -19,12 +19,8 @@
&__page-top, &__page-top,
&__page-bottom, &__page-bottom,
&__cookieconsent { &__cookieconsent {
padding: 0 $zen-gutters / 2; padding: 0 $zen-gutters;
min-width: 0; // With display grid defaults to auto, making <pre> overflow. min-width: 0; // With display grid defaults to auto, making <pre> overflow.
@include respond-to(s) {
padding: 0 $zen-gutters;
}
} }
} }

12
assets/sass/mobile.scss
View file

@ -47,9 +47,9 @@
&__toggle { &__toggle {
display: block; display: block;
position: absolute; position: absolute;
top: $zen-gutters / 2; top: $zen-gutters;
right: $zen-gutters / 2; right: $zen-gutters;
padding: 6px ($zen-gutters + $zen-gutters / 4 + 4px) 4px 4px; padding: 6px 30px 6px 6px;
z-index: 22; z-index: 22;
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
@ -70,9 +70,9 @@
&::after { &::after {
position: absolute; position: absolute;
content: ''; content: '';
margin-left: $zen-gutters / 4; margin-left: 4px;
width: $zen-gutters; width: 20px;
height: $zen-gutters; height: 20px;
border-top: 12px double var(--color-text); border-top: 12px double var(--color-text);
border-bottom: 4px solid var(--color-text); border-bottom: 4px solid var(--color-text);
} }