Improve fonts and readability

This commit is contained in:
Ariejan de Vroom 2017-03-20 22:59:12 +01:00
parent bae0611961
commit bc188df14f
3 changed files with 63 additions and 21 deletions

View File

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

View File

@ -49,18 +49,12 @@
<h1><a href="/">ariejan <span>de vroom</span></a></h1>
<div id='stack'>
|> Software Engineer
<br>
|> Father
<br>
|> Electronics Tinkerer
<br>
|> Audiophile and Music Lover
Father, software engineer, electronics tinkerer, audiophile and music lover.
</div>
<nav>
<ul>
<li><a href="/2017/02/08/bitcoin-mining-anno-2017">Bitcoin Mining Anno 2017</a> <span class="recommended">tip</span></li>
<li><a href="/2017/02/08/bitcoin-mining-anno-2017">Bitcoin Mining Anno 2017</a> <span class="recommended">latest</span></li>
</ul>
</nav>
@ -80,7 +74,5 @@
</div>
<div class="content">
<div class="alert">
<strong>Welcome to my new home on the interwebs!</strong>
<br>
Ariejan.net is now available at <a href="https://www.devroom.io">https://www.devroom.io</a>
Ariejan.net has moved and is now available at <a href="https://www.devroom.io">https://www.devroom.io</a>
</div>

View File

@ -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,6 +53,7 @@ pre, code {
/*** Sidebar **/
.sidebar {
padding: 2rem 1rem;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.sidebar h1 {
@ -61,7 +62,6 @@ pre, code {
}
.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);
}