From c2e8cfd70945255fc7df41e1bc0b95aa83dc880c Mon Sep 17 00:00:00 2001
From: Jonas Smedegaard <dr@jones.dk>
Date: Sun, 17 Sep 2017 14:08:20 +0200
Subject: Generalize and normalize font sizes.
---
css/main.scss | 43 +++++++++++++++++++++++++++++--------------
1 file changed, 29 insertions(+), 14 deletions(-)
(limited to 'css')
diff --git a/css/main.scss b/css/main.scss
index 9424be6..787cae0 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -11,6 +11,27 @@ $base-font-size: 11.2px;
$base-line-height: (1.2 * $base-font-size);
$base-font-family: "helvetica neue", arial, helvetica, sans-serif;
+/* size headings using classic scale of 16, 18, 24, 36, relative to 14px (original base font size) */
+
+$rel-12-font-size: 12/14 * $base-font-size;
+$rel-16-font-size: 16/14 * $base-font-size;
+$rel-18-font-size: 18/14 * $base-font-size;
+$rel-24-font-size: 24/14 * $base-font-size;
+$rel-36-font-size: 36/14 * $base-font-size;
+
+$h1-font-size: $rel-36-font-size;
+$h2-font-size: $rel-16-font-size;
+$h3-font-size: $rel-16-font-size;
+$h4-font-size: $base-font-size;
+$h5-font-size: $base-font-size;
+$h6-font-size: $base-font-size;
+
+$front-leadin-font-size: $rel-18-font-size;
+$caption-font-size: $rel-16-font-size;
+$meta-font-size: $rel-12-font-size;
+$ligature-font-size: 1.3 * $base-font-size;
+$compact-font-size: 0.7 * $base-font-size;
+
/* @group Reset */
@import "normalize";
@@ -27,31 +48,27 @@ pre, code, kbd, tt, samp, tt {
/* @group Font sizes & margins */
p, ul, ol, dl, address, table, pre, form, fieldset {
- font-size: 1em /* 14px */;
+ @include normalize-font-size($base-font-size);
margin-bottom: 0.5em;
}
-/* size headings using classic scale of 16, 18, 24, 36 */
-
/* @end */
/* @group Headings */
h1 {
- font-size: 2.571em /* 36px */;
line-height:1em /* 36px */;
margin-top:0.1667em /* 6px */;
margin-bottom:0.5833em /* 21px */;
}
h1 span {
- font-size: 0.5em;
+ @include normalize-font-size($front-leadin-font-size, $h1-font-size);
line-height: 1;
color: #999;
display: block;
margin-bottom: 0.3em;
}
h2, h3 {
- font-size:1.143em /* 16px */;
margin-top:0;
padding-bottom: 0.5em;
margin-bottom:0.5em /* 8px */;
@@ -60,11 +77,9 @@ h2, h3 {
}
h4 {
margin-top:1em /* 21px */;
- font-size:1em /* 14px */;
margin-bottom: 0.5em;
}
h5, h6 {
- font-size:1em /* 14px */;
margin-bottom: 0.5em;
}
@@ -101,9 +116,9 @@ table {
}
caption {
+ @include normalize-font-size($caption-font-size);
font-weight: bold;
padding-bottom: 0.4375em; /* 7px */
- font-size:1.144em; /* 16px */
}
thead th {
@@ -163,9 +178,9 @@ del {
}
pre {
+ @include normalize-font-size($compact-font-size);
white-space: pre;
width: 100%;
- font-size: 0.7em;
overflow: hidden;
border-top: 3px double #C7C7C7;
border-bottom: 3px double #C7C7C7;
@@ -245,10 +260,10 @@ label {
/* @group Meta */
form .help {
+ @include normalize-font-size($meta-font-size);
display: block;
color: #777;
font-style: normal;
- font-size: 0.857em; /* 12px */
}
/* @end */
@@ -256,8 +271,8 @@ form .help {
/* @group Form controls */
input, textarea, select, button {
+ @include normalize-font-size($base-font-size);
font-family: inherit;
- font-size: 1em;
line-height: inherit;
}
@@ -338,9 +353,9 @@ button.link {
/* @end */
.amp {
+ @include normalize-font-size($ligature-font-size);
font-family: "Bell MT", "Adobe Caslon Pro", "Goudy Old Style";
font-style: italic;
- font-size: 1.3em;
line-height: 0.7;
margin: 0 0.2em 0 0.1em;
}
@@ -426,7 +441,7 @@ h5.micro,
h6.micro,
p.micro,
span.micro {
- font-size: 0.7em;
+ @include normalize-font-size($compact-font-size);
line-height: 1.5em;
display: block;
}
--
cgit v1.2.3