From bc188df14f682ce0c88df7b7ea3eb6b4e96d283f Mon Sep 17 00:00:00 2001 From: Ariejan de Vroom Date: Mon, 20 Mar 2017 22:59:12 +0100 Subject: [PATCH] Improve fonts and readability --- content/typography-test.md | 38 ++++++++++++++++++++++++++++++++++++ layouts/partials/header.html | 14 +++---------- static/css/outerspace.css | 32 ++++++++++++++++++++---------- 3 files changed, 63 insertions(+), 21 deletions(-) create mode 100644 content/typography-test.md diff --git a/content/typography-test.md b/content/typography-test.md new file mode 100644 index 0000000..490e10e --- /dev/null +++ b/content/typography-test.md @@ -0,0 +1,38 @@ ++++ +type = "page" +title = "Typography Test" ++++ + +This pages tests the typography of this website.. + +> the quick brown fox jumps over the lazy dog + +# Header 1 + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non nisi lectus. Vestibulum ipsum tellus, accumsan venenatis dapibus et, euismod eu magna. Nulla consectetur erat felis, quis facilisis justo congue volutpat. Sed quis interdum eros. Nam lacinia varius ligula at lacinia. Nunc sodales enim et auctor rhoncus. Integer vitae dolor at turpis eleifend scelerisque. Fusce faucibus, tortor ac laoreet vulputate, libero ligula auctor sem, eu faucibus eros risus nec tortor. Quisque commodo tempor nulla ut lobortis. Sed interdum eu neque vestibulum posuere. + +## Header 2 + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non nisi lectus. Vestibulum ipsum tellus, accumsan venenatis dapibus et, euismod eu magna. Nulla consectetur erat felis, quis facilisis justo congue volutpat. Sed quis interdum eros. Nam lacinia varius ligula at lacinia. Nunc sodales enim et auctor rhoncus. Integer vitae dolor at turpis eleifend scelerisque. Fusce faucibus, tortor ac laoreet vulputate, libero ligula auctor sem, eu faucibus eros risus nec tortor. Quisque commodo tempor nulla ut lobortis. Sed interdum eu neque vestibulum posuere. + +### Header 3 + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non nisi lectus. Vestibulum ipsum tellus, accumsan venenatis dapibus et, euismod eu magna. Nulla consectetur erat felis, quis facilisis justo congue volutpat. Sed quis interdum eros. Nam lacinia varius ligula at lacinia. Nunc sodales enim et auctor rhoncus. Integer vitae dolor at turpis eleifend scelerisque. Fusce faucibus, tortor ac laoreet vulputate, libero ligula auctor sem, eu faucibus eros risus nec tortor. Quisque commodo tempor nulla ut lobortis. Sed interdum eu neque vestibulum posuere. + +#### Header 4 + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non nisi lectus. Vestibulum ipsum tellus, accumsan venenatis dapibus et, euismod eu magna. Nulla consectetur erat felis, quis facilisis justo congue volutpat. Sed quis interdum eros. Nam lacinia varius ligula at lacinia. Nunc sodales enim et auctor rhoncus. Integer vitae dolor at turpis eleifend scelerisque. Fusce faucibus, tortor ac laoreet vulputate, libero ligula auctor sem, eu faucibus eros risus nec tortor. Quisque commodo tempor nulla ut lobortis. Sed interdum eu neque vestibulum posuere. + +##### Header 5 + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non nisi lectus. Vestibulum ipsum tellus, accumsan venenatis dapibus et, euismod eu magna. Nulla consectetur erat felis, quis facilisis justo congue volutpat. Sed quis interdum eros. Nam lacinia varius ligula at lacinia. Nunc sodales enim et auctor rhoncus. Integer vitae dolor at turpis eleifend scelerisque. Fusce faucibus, tortor ac laoreet vulputate, libero ligula auctor sem, eu faucibus eros risus nec tortor. Quisque commodo tempor nulla ut lobortis. Sed interdum eu neque vestibulum posuere. + +* This is a +* bulleted +* list + +Instead: + +1. This is a +2. Numbered +3. List diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 8e7ae02..8e2f165 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -49,18 +49,12 @@

ariejan de vroom

- |> Software Engineer -
- |> Father -
- |> Electronics Tinkerer -
- |> Audiophile and Music Lover + Father, software engineer, electronics tinkerer, audiophile and music lover.
@@ -80,7 +74,5 @@
- Welcome to my new home on the interwebs! -
- Ariejan.net is now available at https://www.devroom.io + Ariejan.net has moved and is now available at https://www.devroom.io
diff --git a/static/css/outerspace.css b/static/css/outerspace.css index 4008a1b..6ce4b30 100644 --- a/static/css/outerspace.css +++ b/static/css/outerspace.css @@ -21,7 +21,7 @@ h1 a, h2 a, h3 a { .sidebar { color: rgba(255,255,255,0.66); background:url('/img/bg.png') repeat; - box-shadow: 2px 0px 27px #666 + box-shadow: 2px 0px 27px #666; } .sidebar a { @@ -38,7 +38,7 @@ h1 a, h2 a, h3 a { /*** Layout ***/ html, body { - font-family: Tahoma,Verdana,Segoe,sans-serif; + font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, “Times New Roman”, serif; font-size: 17px; line-height: 27px; } @@ -53,15 +53,15 @@ pre, code { /*** Sidebar **/ .sidebar { padding: 2rem 1rem; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .sidebar h1 { - font-size: 32px; - line-height: 1.5em; + font-size: 32px; + line-height: 1.5em; } .sidebar #stack { - font-family: monaco,Consolas,Lucida Console,monospace; font-size: 13px; line-height: 17px; margin-bottom: 27px; @@ -144,24 +144,34 @@ small { font-size: 12px; } +h1, h2, h3, h4, h5 { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + line-height: 1.5; +} + h1 { - font: bold 36px/1.5 Tahoma,Verdana,Segoe,sans-serif; + font-size: 36px; + font-weight: 400; } h2 { - font: bold 24px/1.5 Tahoma,Verdana,Segoe,sans-serif; + font-size: 24px; + font-weight: 400; } h3 { - font: bold 20px/1.5 Tahoma,Verdana,Segoe,sans-serif; + font-size: 20px; + font-weight: 400; } h4 { - font: bold 18px/1.5 Tahoma,Verdana,Segoe,sans-serif; + font-size: 18px; + font-weight: 400; } h5 { - font: bold 18px/1.5 Tahoma,Verdana,Segoe,sans-serif; + font-size: 17px; + font-weight: 400; } a { @@ -288,4 +298,6 @@ img.img-right { background-color: #ffc; padding: 13px; margin-bottom: 27px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + box-shadow: 0px 0px 2px 0px rgba(171,171,171,0.55); }