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

Set unitless lineheight. Not bigger font for mobile.

Browse source
This commit is contained in:
Fredrik Jonsson 2022-01-14 14:54:16 +01:00
commit ef80ad8ef8
7 changed files with 29 additions and 109 deletions
Download patch file Download diff file Expand all files Collapse all files

31
assets/sass/_variables.scss
View file

@ -11,36 +11,19 @@
// homepage](https://github.com/jptaranto/typey).
// The font size set on the root html element.
$base-font-size: 22px;
$base-font-size-2: 18px;
$base-font-size: 18px;
// The base line height determines the basic unit of vertical rhythm.
$base-line-height: 31px;
$base-line-height-2: 25px;
$base-multiplier: $base-font-size / $base-font-size-2;
$xxl-2: 34px * $base-multiplier;
$xl-2: 28px * $base-multiplier;
$l-2: 22px * $base-multiplier;
$m-2: 18px * $base-multiplier;
$s-2: 16px * $base-multiplier;
$xs-2: 14px * $base-multiplier;
$base-line-height: 25px;
// The font sizes in our type hierarchy as tee shirt sizes.
$font-size: (
xxl: 28px,
xl: 26px,
l: 24px,
xxl: 34px,
xl: 28px,
l: 22px,
m: $base-font-size,
s: 18px,
xs: 16px,
xxl-2: $xxl-2,
xl-2: $xl-2,
l-2: $l-2,
m-2: $m-2,
s-2: $s-2,
xs-2: $xs-2
s: 16px,
xs: 14px,
);
// Typey allows you to alter font weights site-wide with this map.

20
assets/sass/_zen.scss
View file

@ -35,22 +35,14 @@ th,
label,
legend,
figcaption {
@include type-layout(s, 1);
@include respond-to(xxl) {
@include type-layout(s-2, 1);
}
@include font-size(s);
}
.language-selector,
article > header,
.content-dates,
.footer {
@include type-layout(xs, 1);
@include respond-to(xxl) {
@include type-layout(xs-2, 1);
}
@include font-size(xs);
}
// Apply heading font stack to heading, labels etc.
@ -119,12 +111,8 @@ article {
}
code {
@include type-layout(xs, 1);
@include font-size(xs);
overflow-wrap: break-word;
@include respond-to(xxl) {
@include type-layout(xs-2, 1);
}
}
pre {
@ -257,7 +245,7 @@ figure {
}
.search-text {
@include type-layout(l, 1);
@include font-size(l);
max-width: 80%;
}

2
assets/sass/components/button/_button.scss
View file

@ -44,7 +44,7 @@ button,
.button,
%button {
&--small {
@include type-layout(xs, 1);
@include font-size(xs);
@include margin-right(.3);
@include margin-bottom(.3);
@include padding(.1 .5);

2
assets/sass/components/cookieconsent/_cookieconsent.scss
View file

@ -1,7 +1,7 @@
// Cookieconsent
.cookieconsent {
@include type-layout(s, 1);
@include font-size(s);
position: sticky;
bottom: 0;
width: 100%;

8
assets/sass/components/list-straight-left/_list-straight-left.scss
View file

@ -13,10 +13,6 @@
@include padding-right(.5);
display: table-cell;
content: '\2022';
@include respond-to(xxl) {
@include font-size(s-2);
}
}
}
}
@ -36,10 +32,6 @@
display: table-cell;
content: counter(table-ol) '.';
text-align: right;
@include respond-to(xxl) {
@include font-size(s-2);
}
}
}
}

8
assets/sass/reset/document/_document.scss
View file

@ -6,8 +6,10 @@
html {
// Change the default font family in all browsers (opinionated).
@include typeface(body);
// Set base font size in percent.
font-size: $base-font-size / $browser-font-size * 100%;
// Correct the line height in all browsers.
@include define-type-sizing();
line-height: 1.5;
// Prevent adjustments of font size.
-webkit-text-size-adjust: none;
text-size-adjust: none;
@ -20,10 +22,6 @@ html {
scroll-behavior: smooth;
// Improve text rendering.
-webkit-font-smoothing: antialiased;
@include respond-to(xxl) {
@include define-type-sizing($base-font-size-2, $base-line-height-2);
}
}

67
assets/sass/reset/sections/_sections.scss
View file

@ -21,92 +21,51 @@ body {
// `article` contexts in Chrome, Firefox, and Safari.
h1,
%h1 {
// Set the font-size and line-height while keeping a proper vertical rhythm.
@include type-layout(xxl, 1.5);
// Set the font-size while keeping a proper vertical rhythm.
@include font-size(xxl);
// Set 1 unit of vertical rhythm on the top and bottom margins.
@include margin-top(1, xxl);
@include margin-bottom(1, xxl);
line-height: 1.3;
}
h2,
%h2 {
@include type-layout(xl, 1.5);
@include font-size(xl);
@include margin-top(1, xl);
@include margin-bottom(1, xl);
line-height: 1.3;
}
h3,
%h3 {
@include type-layout(l, 1.5);
@include font-size(l);
@include margin-top(1, l);
@include margin-bottom(1, l);
line-height: 1.3;
}
h4,
%h4 {
@include type-layout(m, 1);
@include font-size(m);
@include margin-top(1, m);
@include margin-bottom(1, m);
line-height: 1.3;
}
h5,
%h5 {
@include type-layout(s, 1);
@include font-size(s);
@include margin-top(1, s);
@include margin-bottom(1, s);
line-height: 1.3;
}
h6,
%h6 {
@include type-layout(xs, 1);
@include font-size(xs);
@include margin-top(1, xs);
@include margin-bottom(1, xs);
}
@include respond-to(s) {
h1,
%h1 {
// Set the font-size and line-height while keeping a proper vertical rhythm.
@include type-layout(xxl-2, 2);
// Set 1 unit of vertical rhythm on the top and bottom margins.
@include margin-top(1, xxl-2);
@include margin-bottom(1, xxl-2);
}
h2,
%h2 {
@include type-layout(xl-2, 1.5);
@include margin-top(1, xl-2);
@include margin-bottom(1, xl-2);
}
h3,
%h3 {
@include type-layout(l-2, 1.5);
@include margin-top(1, l-2);
@include margin-bottom(1, l-2);
}
h4,
%h4 {
@include type-layout(m-2, 1);
@include margin-top(1, m-2);
@include margin-bottom(1, m-2);
}
h5,
%h5 {
@include type-layout(s-2, 1);
@include margin-top(1, s-2);
@include margin-bottom(1, s-2);
}
h6,
%h6 {
@include type-layout(xs-2, 1);
@include margin-top(1, xs-2);
@include margin-bottom(1, xs-2);
}
line-height: 1.3;
}