Skip to content

Commit 7e03a24

Browse files
atuttleatuttle
committed
improve fonts
1 parent 8ec28c5 commit 7e03a24

File tree

2 files changed

+104
-77
lines changed

2 files changed

+104
-77
lines changed

‎assets/style.css‎

Lines changed: 100 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,151 +1,175 @@
11
:root {
2-
--accent: #2D9CDB;
3-
--grey: #444;
2+
--accent: #2d9cdb;
3+
--grey: #444;
44
}
55

66
html {
7-
font-size: 100%;
8-
scroll-behavior: smooth;
7+
font-size: 100%;
8+
scroll-behavior: smooth;
99
}
1010

1111
body {
12-
font-family: Inter, sans-serif;
13-
line-height: 1.65;
14-
15-
display: flex;
16-
flex-direction: column;
17-
min-height: 100vh;
12+
font-family: 'Source Sans Pro', sans-serif;
13+
font-size: 1.3rem;
14+
line-height: 1.55;
1815

19-
margin: 0 24px;
16+
display: flex;
17+
flex-direction: column;
18+
min-height: 100vh;
19+
20+
margin: 0 24px;
2021
}
2122

2223
@media only screen and (max-width: 468px) {
23-
.page-header {
24-
flex-direction: column;
25-
}
24+
.page-header {
25+
flex-direction: column;
26+
}
2627
}
2728

2829
.page-header {
29-
display: flex;
30-
flex-wrap: wrap;
31-
justify-content: space-between;
32-
align-items: center;
33-
margin-top: 8px;
30+
display: flex;
31+
flex-wrap: wrap;
32+
justify-content: space-between;
33+
align-items: center;
34+
margin-top: 8px;
3435
}
3536

3637
.page-header nav a:not(:hover):not(:focus) {
37-
color: currentColor;
38-
text-decoration: none;
38+
color: currentColor;
39+
text-decoration: none;
3940
}
4041

4142
nav a {
42-
margin: 0 12px;
43-
font-size: 1.25em;
43+
margin: 0 12px;
44+
font-size: 1.25em;
4445
}
4546

4647
main {
47-
flex-grow: 1;
48-
max-width: 60ch;
49-
width: 100%;
50-
margin: 0 auto;
48+
flex-grow: 1;
49+
max-width: 60ch;
50+
width: 100%;
51+
margin: 0 auto;
5152
}
5253

5354
.page-footer {
54-
text-align: center;
55-
margin-bottom: 8px;
55+
text-align: center;
56+
margin-bottom: 8px;
5657
}
5758

5859
a[href] {
59-
color: var(--accent);
60+
color: var(--accent);
61+
text-decoration: none;
62+
font-weight: bold;
6063
}
6164

6265
a[href]:hover {
63-
text-decoration: none;
66+
background-color: var(--accent);
67+
color: var(--grey);
6468
}
6569

6670
a[href]:focus {
67-
outline: 2px solid var(--accent);
68-
outline-offset: 4px;
71+
outline: 2px solid var(--accent);
72+
outline-offset: 4px;
6973
}
7074

7175
.footnotes {
72-
font-size: 0.8em;
76+
font-size: 0.8em;
7377
}
7478

7579
/* Typography */
76-
p {margin-bottom: 1.15rem;}
80+
p {
81+
margin-bottom: 1.15rem;
82+
}
7783

78-
h1, h2, h3, h4, h5 {
79-
margin: 2.75rem 0 1.05rem;
80-
font-weight: 400;
81-
line-height: 1.15;
84+
h1,
85+
h2,
86+
h3,
87+
h4,
88+
h5 {
89+
font-family: 'Roboto', sans-serif;
90+
margin: 2.75rem 0 1.05rem;
91+
font-weight: 900;
92+
line-height: 1.15;
8293
}
8394

84-
h1 {font-size: 3.052em;}
95+
h1 {
96+
font-size: 3.052em;
97+
}
8598

86-
h2 {font-size: 2.441em;}
99+
h2 {
100+
font-size: 2.441em;
101+
}
87102

88-
h3 {font-size: 1.953em;}
103+
h3 {
104+
font-size: 1.953em;
105+
}
89106

90-
h4 {font-size: 1.563em;}
107+
h4 {
108+
font-size: 1.563em;
109+
}
91110

92-
h5, .larger {font-size: 1.25em;}
111+
h5,
112+
.larger {
113+
font-size: 1.25em;
114+
}
93115

94-
small {font-size: 0.8em;}
116+
small {
117+
font-size: 0.8em;
118+
}
95119

96120
/* backlinks */
97121
.backlinks-title {
98-
margin-bottom: 0;
122+
margin-bottom: 0;
99123
}
100124

101125
.backlinks-container {
102-
margin-top: 0;
126+
margin-top: 0;
103127
}
104128

105129
.backlinks-default {
106-
margin-top: 0;
107-
margin-left: 16px;
108-
color: var(--grey);
130+
margin-top: 0;
131+
margin-left: 16px;
132+
color: var(--grey);
109133
}
110134

111135
.backlink__preview {
112-
display: none;
113-
114-
position: absolute;
115-
bottom: 8px;
116-
left: 100%;
117-
background-color: #fff;
118-
border-radius: 4px;
119-
padding: 4px;
120-
box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.25);
121-
width: 348px;
122-
max-height: 148px;
123-
overflow: hidden;
136+
display: none;
137+
138+
position: absolute;
139+
bottom: 8px;
140+
left: 100%;
141+
background-color: #fff;
142+
border-radius: 4px;
143+
padding: 4px;
144+
box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.25);
145+
width: 348px;
146+
max-height: 148px;
147+
overflow: hidden;
124148
}
125149
.backlink__preview::after {
126-
content: "";
127-
position: absolute;
128-
bottom: 0;
129-
background: linear-gradient(transparent, white);
130-
width: 100%;
131-
height: 24px;
150+
content: '';
151+
position: absolute;
152+
bottom: 0;
153+
background: linear-gradient(transparent, white);
154+
width: 100%;
155+
height: 24px;
132156
}
133157

134158
.backlink__preview h1 {
135-
font-size: 1.2rem;
136-
margin-top: 8px;
137-
font-weight: bold;
159+
font-size: 1.2rem;
160+
margin-top: 8px;
161+
font-weight: bold;
138162
}
139163

140164
.backlink {
141-
width: fit-content;
142-
position: relative;
165+
width: fit-content;
166+
position: relative;
143167
}
144168

145169
.backlink:hover {
146-
padding-right: 4px; /* Allow mouse to travel between link and modal */
170+
padding-right: 4px; /* Allow mouse to travel between link and modal */
147171
}
148172

149173
.backlink:hover .backlink__preview {
150-
display: block;
151-
}
174+
display: block;
175+
}

‎includes/head.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,10 @@
2727
<link rel="icon" href="https://fav.farm/🌱" />
2828
<link rel="canonical" href="{{ page.url | prepend: site.baseurl }}" />
2929
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
30-
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" />
30+
<link
31+
href="https://fonts.googleapis.com/css2?family=Roboto:wght@900&family=Source+Sans+Pro:ital,wght@0,300;0,600;1,300;1,600&display=swap"
32+
rel="stylesheet"
33+
/>
3134
<link rel="preconnect" href="https://cdnjs.cloudflare.com/" crossorigin />
3235
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
3336
<link rel="stylesheet" href="/assets/prism-material-dark.css" />

0 commit comments

Comments
 (0)