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.
$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;

8
assets/sass/_zen.scss
View file

@ -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 {

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

@ -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.

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

@ -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;
}
}

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

@ -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;
}
}
}

12
assets/sass/mobile.scss
View file

@ -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);
}