_typography.scss (2402B)
1 body { 2 color: $base-font-color; 3 font-family: $base-font-family; 4 //font-feature-settings: "kern", "liga", "pnum"; 5 font-size: $base-font-size; 6 line-height: $base-line-height; 7 } 8 9 h1, 10 h2, 11 h3, 12 h4, 13 h5, 14 h6 { 15 font-family: $heading-font-family; 16 font-size: $base-font-size; 17 line-height: $heading-line-height; 18 margin: $small-spacing 0 $small-spacing 0; 19 font-weight: 700; 20 } 21 22 h1 { 23 font-size: rem(30); 24 } 25 26 h2 { 27 font-size: rem(26); 28 } 29 30 h3 { 31 font-size: rem(24); 32 } 33 34 h4 { 35 font-size: rem(20); 36 } 37 38 h5, 39 h6 { 40 font-size: rem(16); 41 } 42 43 p { 44 margin: 0 0 $small-spacing; 45 46 &.lead { 47 font-size: rem(17); 48 font-weight: 300; 49 } 50 @media(min-width: 500px){ 51 &.lead { 52 font-size: rem(22); 53 display: table-cell; 54 vertical-align: middle; 55 } 56 } 57 } 58 59 a { 60 color: $action-color; 61 text-decoration: none; 62 transition: color $base-duration $base-timing; 63 64 &:active, 65 &:focus, 66 &:hover { 67 color: shade($action-color, 25%); 68 } 69 } 70 71 hr { 72 border-bottom: $base-border; 73 border-left: 0; 74 border-right: 0; 75 border-top: 0; 76 margin: $base-spacing 0; 77 } 78 79 img, 80 picture { 81 margin: 0; 82 max-width: 100%; 83 &.mascot { 84 display: block; 85 width: 35%; 86 margin: 0 auto 8% auto; 87 } 88 @media(min-width: 500px){ 89 &.mascot { 90 width: 80%; 91 display: table-cell; 92 } 93 } 94 } 95 96 blockquote { 97 padding: $base-spacing 0 $base-spacing $base-spacing; 98 margin: $base-spacing 0; 99 color: $dark-gray-color; 100 line-height: 1.8; 101 border-left: $small-spacing solid $light-gray-color; 102 background-color: lighten($light-gray-color, 15%); 103 p { 104 margin: 0; 105 } 106 } 107 108 code { 109 background: none; 110 border-radius: 0; 111 border: none; 112 font-family: "SFMono-Regular",Menlo,Consolas,"Inconsolata",monospace; 113 font-size: 1em; 114 margin: 0; 115 padding: 0 5px; 116 background-color: lighten($light-gray-color, 13%); 117 } 118 119 pre { 120 -webkit-overflow-scrolling: touch; 121 font-family: "SFMono-Regular",Menlo,Consolas,"Inconsolata",monospace; 122 font-size: 1em; 123 margin: 0; 124 padding: 5px 10px !important; 125 overflow: auto; 126 max-height: 60em; 127 white-space: pre; 128 border: 1px solid $light-gray-color; 129 130 code { 131 line-height: 1.75em; 132 padding: 0 !important; 133 } 134 } 135 136 strong { 137 font-weight: bold; 138 } 139 140 em { 141 font-style: italic; 142 } 143 144 ul, 145 ol, 146 dl { 147 margin-top: 0; 148 margin-left: 1.2em; 149 margin-bottom: 1rem; 150 list-style-type: square; 151 list-style-position: outside; 152 list-style-image: none; 153 }