Improvment to reset plus spelling fix.

This commit is contained in:
Fredrik Jonsson 2024-10-16 08:41:36 +02:00
commit 17bd5c22ba
5 changed files with 32 additions and 18 deletions

View file

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

View file

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

View file

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

View file

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

View file

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