Redo typography: fonts and font sizes

src/fonts/century-supra/stylesheet.css.pp

@@ -1,55 +0,0 @@
-#lang pollen
-
-@font-face {
-    font-family: 'Century Supra';
-    src: url('Century Supra T3 Regular.otf') format('opentype'),
-	 url('Century Supra T3 Regular.ttf') format('truetype'),
-         url('century_supra_t3_regular.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Century Supra';
-    src: url('Century Supra T3 Bold.otf') format('opentype'),
-	 url('Century Supra T3 Bold.ttf') format('truetype'),
-         url('century_supra_t3_bold.woff') format('woff');
-    font-weight: bold;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Century Supra';
-    src: url('Century Supra T3 Italic.otf') format('opentype'),
-	 url('Century Supra T3 Italic.ttf') format('truetype'),
-         url('century_supra_t3_italic.woff') format('woff');
-    font-weight: normal;
-    font-style: italic;
-}
-
-@font-face {
-    font-family: 'Century Supra';
-    src: url('Century Supra T3 Bold Italic.otf') format('opentype'),
-	 url('Century Supra T3 Bold Italic.ttf') format('truetype'),
-         url('century_supra_t3_bold_italic.woff') format('woff');
-    font-weight: bold;
-    font-style: italic;
-}
-
-@font-face {
-    font-family: 'Century Supra (Small Caps)';
-    src: url('Century Supra C3 Regular.otf') format('opentype'),
-	 url('Century Supra C3 Regular.ttf') format('truetype'),
-         url('century_supra_c3_regular.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Century Supra (Small Caps)';
-    src: url('Century Supra C3 Bold.otf') format('opentype'),
-	 url('Century Supra C3 Bold.ttf') format('truetype'),
-         url('century_supra_c3_bold.woff') format('woff');
-    font-weight: bold;
-    font-style: normal;
-}

src/fonts/charter/stylesheet.css.pp

@@ -0,0 +1,37 @@
+#lang pollen
+
+@font-face {
+    font-family: 'Charter';
+    src: url('Charter Regular.otf') format('opentype'),
+	 url('Charter Regular.ttf') format('truetype'),
+         url('charter_regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Charter';
+    src: url('Charter Bold.otf') format('opentype'),
+	 url('Charter Bold.ttf') format('truetype'),
+         url('charter_bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Charter';
+    src: url('Charter Italic.otf') format('opentype'),
+	 url('Charter Italic.ttf') format('truetype'),
+         url('charter_italic.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Charter';
+    src: url('Charter Bold Italic.otf') format('opentype'),
+	 url('Charter Bold Italic.ttf') format('truetype'),
+         url('charter_bold_italic.woff') format('woff');
+    font-weight: bold;
+    font-style: italic;
+}

src/fonts/cooper-hewitt/stylesheet.css.pp

@@ -0,0 +1,37 @@
+#lang pollen
+
+@font-face {
+    font-family: 'Cooper Hewitt';
+    src: url('CooperHewitt-Medium.eot'),
+	 url('CooperHewitt-Medium.woff') format('woff'),
+         url('CooperHewitt-Medium.svg') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Cooper Hewitt';
+    src: url('CooperHewitt-Bold.eot'),
+	 url('CooperHewitt-Bold.woff') format('woff'),
+         url('CooperHewitt-Bold.svg') format('svg');
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Cooper Hewitt';
+    src: url('CooperHewitt-Italic.eot'),
+	 url('CooperHewitt-Italic.woff') format('woff'),
+         url('CooperHewitt-Italic.svg') format('svg');
+    font-weight: normal;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Cooper Hewitt';
+    src: url('CooperHewitt-BoldItalic.eot'),
+	 url('CooperHewitt-BoldItalic.woff') format('woff'),
+         url('CooperHewitt-BoldItalic.svg') format('svg');
+    font-weight: bold;
+    font-style: italic;
+}

src/fonts/triplicate/stylesheet.css.pp

@@ -1,37 +0,0 @@
-#lang pollen
-
-@font-face {
-    font-family: 'Triplicate Code';
-    src: url('Triplicate T4 Code Regular.otf') format('opentype'),
-	 url('Triplicate T4 Code Regular.ttf') format('truetype'),
-         url('triplicate_t4_code_regular.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Triplicate Code';
-    src: url('Triplicate T4 Code Bold.otf') format('opentype'),
-	 url('Triplicate T4 Code Bold.ttf') format('truetype'),
-         url('triplicate_t4_code_bold.woff') format('woff');
-    font-weight: bold;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Triplicate Code';
-    src: url('Triplicate T4 Code Italic.otf') format('opentype'),
-	 url('Triplicate T4 Code Italic.ttf') format('truetype'),
-         url('triplicate_t4_code_italic.woff') format('woff');
-    font-weight: normal;
-    font-style: italic;
-}
-
-@font-face {
-    font-family: 'Triplicate Code';
-    src: url('Triplicate T4 Code Bold Italic.otf') format('opentype'),
-	 url('Triplicate T4 Code Bold Italic.ttf') format('truetype'),
-         url('triplicate_t4_code_bold_italic.woff') format('woff');
-    font-weight: bold;
-    font-style: italic;
-}

src/pollen.rkt

@@ -77,8 +77,9 @@
 
 (define (published-date date-str)
   (let ((publish-date (iso8601->date date-str)))
-    (txexpr
-     'p '((class "published-date")) `("Posted on " ,(~t publish-date "MMMM d, y")))))
+    `(p '((class "published-date"))
+        (small "Posted on "
+               ,(~t publish-date "MMMM d, y")))))
 
 (define (make-excerpt doc)
   (let ((elts (get-elements doc)))

src/stylesheet.css.pp

@@ -1,9 +1,10 @@
 #lang pollen
 
 ◊(define navbar-height 60)
-◊(define serif-font-stack "'Century Supra', 'Palatino Linotype', Palatino, Palladio, 'URW Palladio L', 'Book Antiqua', Baskerville, 'Bookman Old Style', 'Bitstream Charter', 'Nimbus Roman No9 L', Garamond, 'Apple Garamond', 'ITC Garamond Narrow', 'New Century Schoolbook', 'Century Schoolbook', 'Century Schoolbook L', Georgia, serif")
-◊(define small-caps-font-stack "'Century Supra (Small Caps)', 'Palatino Linotype', Palatino, Palladio, 'URW Palladio L', 'Book Antiqua', Baskerville, 'Bookman Old Style', 'Bitstream Charter', 'Nimbus Roman No9 L', Garamond, 'Apple Garamond', 'ITC Garamond Narrow', 'New Century Schoolbook', 'Century Schoolbook', 'Century Schoolbook L', Georgia, serif")
-◊(define monospace-font-stack "'Triplicate Code', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace")
+◊(define serif-font-stack "Charter, 'Palatino Linotype', Palatino, Palladio, 'URW Palladio L', 'Book Antiqua', Baskerville, 'Bookman Old Style', 'Bitstream Charter', 'Nimbus Roman No9 L', Garamond, 'Apple Garamond', 'ITC Garamond Narrow', 'New Century Schoolbook', 'Century Schoolbook', 'Century Schoolbook L', Georgia, serif")
+◊(define small-caps-font-stack "Charter, 'Palatino Linotype', Palatino, Palladio, 'URW Palladio L', 'Book Antiqua', Baskerville, 'Bookman Old Style', 'Bitstream Charter', 'Nimbus Roman No9 L', Garamond, 'Apple Garamond', 'ITC Garamond Narrow', 'New Century Schoolbook', 'Century Schoolbook', 'Century Schoolbook L', Georgia, serif")
+◊(define sans-serif-font-stack "'Cooper Hewitt', Frutiger, 'Frutiger Linotype', Univers, Calibri, 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', Myriad, 'DejaVu Sans Condensed', 'Liberation Sans', 'Nimbus Sans L', Tahoma, Geneva, 'Helvetica Neue', Helvetica, Arial, sans-serif;")
+◊(define monospace-font-stack "Menlo, Consolas, Monaco, 'Liberation Mono', 'Lucida Console', monospace")
 ◊(define body-color "#404040")
 ◊(define link-color "royalblue")
 ◊(define link-hover-color "midnightblue")
@@ -13,10 +14,14 @@
 ◊(define blockquote-border-color "#CCC")
 ◊(define blockquote-background-color "#F9F9F9")
 
+html {
+    font-size: 20px;
+}
+
 body {
     height: 100%;
     max-width: 1920px;
-    font-size: 21px;
+    font-size: 1rem;
     font-family: ◊|serif-font-stack|;
     color: ◊|body-color|;
     line-height: 1.5;
@@ -27,17 +32,37 @@ body {
 
 header {
     height: ◊|navbar-height|px;
-    margin-top: 1em;
+    margin-top: 1rem;
 }
 
 footer {
     text-align: center;
-    padding: 1em 0 1em 0;
+    padding: 1rem 0 1rem 0;
 }
 
 h1, h2, h3, h4, h5 {
-    font-size: 21px;
     font-weight: bold;
+    font-family: ◊|sans-serif-font-stack|
+}
+
+h4, h5 {
+    font-size: 1rem;
+}
+
+h3 {
+    font-size: 1.25rem;
+}
+
+h2 {
+    font-size: 1.563rem;
+}
+
+h1 {
+    font-size: 1.953rem;
+}
+
+small {
+    font-size: 0.8rem;
 }
 
 a {
@@ -60,26 +85,26 @@ a:hover {
 
 code, pre {
     font-family: ◊|monospace-font-stack|;
-    font-size: 20px;
+    font-size: 0.9rem;
 }
 
 ul, ol {
-    margin: 0 0 1.5em 3em;
+    margin: 0 0 1.5rem 3rem;
 }
 
 li {
-    margin-top: 1em;
+    margin-top: 1rem;
 }
 
 blockquote {
-	margin: 1em 1.5em;
+	margin: 1rem 1.5rem;
 	border-left: 10px solid ◊|blockquote-border-color|;
 	background: ◊|blockquote-background-color|;
-	padding: 1.3em 0.5em;
+	padding: 1.3rem 0.5rem;
 }
 
 pre > code.hljs {
-    padding: 1.5em;
+    padding: 1.5rem;
 }
 
 .site {
@@ -93,7 +118,7 @@ pre > code.hljs {
     display: grid;
     grid-template-columns: repeat(12, 1fr);
     grid-auto-rows: auto;
-    grid-gap: 1rem;
+    grid-gap: 1rrem;
     flex: 3;
 }
 
@@ -115,16 +140,15 @@ ul.navigation {
 
 ul.navigation > li {
     display: inline;
-    margin-left: 2em;
+    margin-left: 2rem;
     margin-top: 0;
-    font-family: ◊|small-caps-font-stack|;
-    font-size: 25px;
+    font-family: ◊|sans-serif-font-stack|;
     letter-spacing: 0.05rem;
 }
 
 ul.navigation > li.rss {
     margin-left: auto;
-    margin-right: 2em;
+    margin-right: 2rem;
 }
 
 ul.navigation > li > a {
@@ -137,16 +161,16 @@ ul.navigation > li > a:hover {
 
 .float-left {
     float: left;
-    margin-right: 1em;
+    margin-right: 1rem;
 }
 
 .section-header {
-    margin-top: 2em;
+    margin-top: 2rem;
 }
 
 div.divider {
-    margin-top: 2em;
-    margin-bottom: 2em;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
     border-top: 1px solid ◊|divider-color|;
 }
 
@@ -161,6 +185,6 @@ div.divider {
     }
 
     ul, ol {
-	margin: 0 0 1.5em 1em;
+	margin: 0 0 1.5rem 1rem;
     }
 }

src/template.html.p

@@ -11,8 +11,8 @@
 	<link rel="alternate"  type="application/rss+xml" href="/blog/feed.xml"
 	<link rel="stylesheet" type="text/css" href="/normalize.css" />
 	<link rel="stylesheet" type="text/css" href="/js/highlight/styles/default.css" />
-	<link rel="stylesheet" type="text/css" href="/fonts/century-supra/stylesheet.css" />
-	<link rel="stylesheet" type="text/css" href="/fonts/triplicate/stylesheet.css" />
+        <link rel="stylesheet" type="text/css" href="/fonts/cooper-hewitt/stylesheet.css" />
+        <link rel="stylesheet" type="text/css" href="/fonts/charter/stylesheet.css" />
 	<link rel="stylesheet" type="text/css" href="/stylesheet.css" />
     </head>
     <body>