63 lines
983 B
CSS
63 lines
983 B
CSS
|
:root{
|
||
|
|
/*
|
||
|
|
The average character is more narrow than 0 using these fonts.
|
||
|
|
I ended up picking 60ch based on testing different sizes and
|
||
|
|
finding the word count of the longest and shortest line.
|
||
|
|
*/
|
||
|
|
--articleWidth: 60ch
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: Georgia, Verdana;
|
||
|
|
background: lightgray;
|
||
|
|
color: #323232;
|
||
|
|
line-height: 1.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
article {
|
||
|
|
width: var(--articleWidth);
|
||
|
|
margin: auto;
|
||
|
|
font-size: 22px
|
||
|
|
}
|
||
|
|
|
||
|
|
#cover {
|
||
|
|
width: var(--articleWidth);
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
font-size: 3em;
|
||
|
|
margin-block-end: 0em;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* This will remove the space between the title and the byline entirely
|
||
|
|
header > p:first-of-type {
|
||
|
|
margin-block-start: 0em;
|
||
|
|
}
|
||
|
|
*/
|
||
|
|
|
||
|
|
header {
|
||
|
|
border-bottom: solid 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
h2 {
|
||
|
|
font-size: 1.8em;
|
||
|
|
}
|
||
|
|
|
||
|
|
p, blockquote, ul, ol {
|
||
|
|
font-size: 1em;
|
||
|
|
line-height: 1.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
#facts {
|
||
|
|
margin: 1em 0em 1em 1em;
|
||
|
|
width: 50%;
|
||
|
|
border: 1px dashed;
|
||
|
|
float: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
#facts > ul {
|
||
|
|
list-style-image: url('../img/cup-icon.svg');
|
||
|
|
line-height: 1.5em;
|
||
|
|
padding-left: 1.5em;
|
||
|
|
}
|