Browse Source

Typography: new fonts, larger sizes, better spacing (#1)

restyle-spring-2019
Annika Backstrom 1 year ago
parent
commit
2941c895c4

+ 1
- 2
assets/css/_archive.scss View File

@@ -5,9 +5,8 @@ body.archive {
5 5
   }
6 6
 
7 7
   h2 {
8
-    text-shadow: none;
9
-    background: none;
10 8
     font-weight: bold;
9
+    border-bottom: none;
11 10
   }
12 11
 
13 12
 

+ 4
- 10
assets/css/_content.scss View File

@@ -1,14 +1,4 @@
1 1
 .content {
2
-  h1,
3
-  h2,
4
-  h3,
5
-  h4,
6
-  h5,
7
-  h6 {
8
-    font-family: $heading-font;
9
-    line-height: 125%;
10
-  }
11
-
12 2
   h1 {
13 3
     margin: 0 0 0.7em;
14 4
 
@@ -18,6 +8,10 @@
18 8
     }
19 9
   }
20 10
 
11
+  h2 {
12
+    border-bottom: 1px solid #bbb;
13
+  }
14
+
21 15
   p.right {
22 16
     margin-left: 1ex;
23 17
   }

+ 7
- 3
assets/css/_elements.scss View File

@@ -16,7 +16,7 @@ body {
16 16
 
17 17
   font: {
18 18
     family: $body-font;
19
-    size: 100%/1.4;
19
+    size: $font-size-base;
20 20
   }
21 21
 }
22 22
 
@@ -43,6 +43,8 @@ h3,
43 43
 h4,
44 44
 h5 {
45 45
   font-weight: normal;
46
+  font-family: $heading-font;
47
+  line-height: 125%;
46 48
 }
47 49
 
48 50
 h1 {
@@ -53,7 +55,6 @@ h2 {
53 55
   font-size: $font-size-base * 1.4;
54 56
   margin: 1em 0 0.5em;
55 57
   font-weight: 500;
56
-  @include smart-underline(#fff, #444);
57 58
 }
58 59
 
59 60
 h3 {
@@ -79,12 +80,15 @@ a {
79 80
 
80 81
 code {
81 82
   background-color: $well-bg;
83
+  font: {
84
+    family: $code-font;
85
+    style: normal;
86
+  }
82 87
 }
83 88
 
84 89
 pre {
85 90
   font: {
86 91
     family: $code-font;
87
-    size: 0.9em;
88 92
     style: normal;
89 93
   }
90 94
 

+ 4
- 1
assets/css/_footer.scss View File

@@ -1,6 +1,9 @@
1 1
 footer {
2 2
   border-top: 1px dotted #D6D6D6;
3
-  padding: 1ex 0;
3
+
4
+  margin-top: 1rem;
5
+  padding: 1rem 0;
6
+
4 7
   font-size: 0.8em;
5 8
 
6 9
   > p {

+ 4
- 5
assets/css/_header.scss View File

@@ -1,18 +1,18 @@
1 1
 header {
2 2
   display: flex;
3 3
 
4
-  font-size: 85%;
5
-  line-height: 50px;
4
+  line-height: 2em;
6 5
   text-transform: lowercase;
7 6
 
8
-  margin-bottom: 3rem;
7
+  margin-bottom: 3em;
9 8
 
10 9
   h1 {
11 10
     margin: 0;
12 11
     padding: 0;
13
-    font-size: 100%;
14 12
     color: default;
15 13
     flex: 1;
14
+    font-size: 1em;
15
+    line-height: inherit;
16 16
 
17 17
     @include media("<tablet") {
18 18
       display: none;
@@ -21,7 +21,6 @@ header {
21 21
 
22 22
   a {
23 23
     text-decoration: none;
24
-    font-size: 1rem;
25 24
   }
26 25
 
27 26
   nav {

+ 1
- 1
assets/css/_normalize.scss View File

@@ -9,7 +9,7 @@
9 9
  */
10 10
 
11 11
 html {
12
-  line-height: 1.15; /* 1 */
12
+  line-height: 1.5; /* 1 */
13 13
   -webkit-text-size-adjust: 100%; /* 2 */
14 14
 }
15 15
 

+ 4
- 4
assets/css/main.scss View File

@@ -10,10 +10,10 @@ $green: #40c517;
10 10
 $link-color: hsl(205, 75%, 52%);
11 11
 $link-color-alt: $text-color;
12 12
 
13
-$body-font: Helvetica, sans-serif;
14
-$heading-font: Baskerville, serif;
15
-$code-font: Monaco, monospace;
16
-$font-size-base: 16px;
13
+$body-font: Palatino, serif;
14
+$heading-font: Palatino, serif;
15
+$code-font: "Ubuntu Mono", Monaco, monospace;
16
+$font-size-base: 1.2em;
17 17
 
18 18
 /* Libraries */
19 19
 @import "include-media";

Loading…
Cancel
Save