Improvment to reset plus spelling fix.
This commit is contained in:
parent
7585387985
commit
17bd5c22ba
5 changed files with 32 additions and 18 deletions
|
|
@ -3,25 +3,22 @@
|
||||||
|
|
||||||
// Document
|
// Document
|
||||||
|
|
||||||
html {
|
|
||||||
// Prevent adjustments of font size.
|
|
||||||
-webkit-text-size-adjust: none;
|
|
||||||
text-size-adjust: none;
|
|
||||||
// On short pages, we want any background gradients to fill the entire height
|
|
||||||
// of the browser.
|
|
||||||
min-height: 100%;
|
|
||||||
// Use the saner border-box model.
|
|
||||||
box-sizing: border-box;
|
|
||||||
// Improve text rendering.
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Use the saner border-box model for all elements.
|
// Use the saner border-box model for all elements.
|
||||||
*,
|
*,
|
||||||
*::before,
|
*::before,
|
||||||
*::after {
|
*::after {
|
||||||
box-sizing: inherit;
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
// Prevent adjustments of font size.
|
||||||
|
-webkit-text-size-adjust: none;
|
||||||
|
text-size-adjust: none;
|
||||||
|
// Improve text rendering.
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
// Activate transition to intrinsic sizes like auto and fit-content.
|
||||||
|
interpolate-size: allow-keywords;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Sections
|
// Sections
|
||||||
|
|
@ -30,6 +27,9 @@ body {
|
||||||
// Remove the margin in all browsers.
|
// Remove the margin in all browsers.
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
// On short pages, we want the body to fill the entire height
|
||||||
|
// of the browser.
|
||||||
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Embedded content
|
// Embedded content
|
||||||
|
|
@ -82,3 +82,11 @@ kbd,
|
||||||
samp {
|
samp {
|
||||||
font-family: var(--ff-monospace);
|
font-family: var(--ff-monospace);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Numbers
|
||||||
|
|
||||||
|
td,
|
||||||
|
math,
|
||||||
|
time[datetime*=":"] {
|
||||||
|
font-variant-numeric: tabular-nums lining-nums;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,13 +5,13 @@ html {
|
||||||
font-family: var(--ff-body);
|
font-family: var(--ff-body);
|
||||||
// Set base font size in percent.
|
// Set base font size in percent.
|
||||||
font-size: calc(#{$base-font-size} / 16 * 100%);
|
font-size: calc(#{$base-font-size} / 16 * 100%);
|
||||||
// Correct the line height in all browsers.
|
|
||||||
line-height: $base-line-height;
|
|
||||||
// Set text colour.
|
// Set text colour.
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
// Correct the line height in all browsers.
|
||||||
|
line-height: $base-line-height;
|
||||||
// Output a horizontal grid to help with debugging typography. The
|
// Output a horizontal grid to help with debugging typography. The
|
||||||
// $debug variable will toggle its output.
|
// $debug variable will toggle its output.
|
||||||
@include debug-grid();
|
@include debug-grid();
|
||||||
|
|
|
||||||
|
|
@ -51,6 +51,12 @@ textarea {
|
||||||
width: Min(30em, 100%);
|
width: Min(30em, 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Make sure textareas without a rows attribute are not tiny.
|
||||||
|
textarea:not([rows]) {
|
||||||
|
min-height: 10em
|
||||||
|
}
|
||||||
|
|
||||||
// For forms with multibple fields show submit button below the form.
|
// For forms with multibple fields show submit button below the form.
|
||||||
input:not(:only-of-type),
|
input:not(:only-of-type),
|
||||||
textarea {
|
textarea {
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@
|
||||||
blockquote {
|
blockquote {
|
||||||
// Add vertical rhythm margins.
|
// Add vertical rhythm margins.
|
||||||
@include margin-block(0 1);
|
@include margin-block(0 1);
|
||||||
// Nicer text wrap, e.g. no lone work on last line.
|
// Nicer text wrap, e.g. no lone word on last line.
|
||||||
text-wrap: pretty;
|
text-wrap: pretty;
|
||||||
// Also indent the quote on both sides.
|
// Also indent the quote on both sides.
|
||||||
margin-inline: var(--indent-amount);
|
margin-inline: var(--indent-amount);
|
||||||
|
|
@ -51,7 +51,7 @@ menu {
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
// Nicer text wrap, e.g. no lone work on last line.
|
// Nicer text wrap, e.g. no lone word on last line.
|
||||||
text-wrap: pretty;
|
text-wrap: pretty;
|
||||||
// Set max text line width in main for readability.
|
// Set max text line width in main for readability.
|
||||||
.main & {
|
.main & {
|
||||||
|
|
@ -78,7 +78,7 @@ hr {
|
||||||
p {
|
p {
|
||||||
// Add vertical rhythm margins.
|
// Add vertical rhythm margins.
|
||||||
@include margin-block(0 1);
|
@include margin-block(0 1);
|
||||||
// Nicer text wrap, e.g. no lone work on last line.
|
// Nicer text wrap, e.g. no lone word on last line.
|
||||||
text-wrap: pretty;
|
text-wrap: pretty;
|
||||||
|
|
||||||
// Set max text line width in main for readability.
|
// Set max text line width in main for readability.
|
||||||
|
|
|
||||||
|
|
@ -38,7 +38,7 @@ figure {
|
||||||
padding-block-start: var(--image-padding);
|
padding-block-start: var(--image-padding);
|
||||||
// Set max text line width in main for readability.
|
// Set max text line width in main for readability.
|
||||||
max-width: var(--max-line-width);
|
max-width: var(--max-line-width);
|
||||||
// Nicer text wrap, e.g. no lone work on last line.
|
// Nicer text wrap, e.g. no lone word on last line.
|
||||||
text-wrap: pretty;
|
text-wrap: pretty;
|
||||||
|
|
||||||
@include respond-to(s) {
|
@include respond-to(s) {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue