My personal blog hauleth.dev
blog
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

chore: use system monospace font for content

+321
+314
sass/_main.scss
··· 1 + @import "../themes/zerm/sass/variables"; 2 + 3 + html { 4 + box-sizing: border-box; 5 + } 6 + 7 + *, 8 + *:before, 9 + *:after { 10 + box-sizing: inherit; 11 + } 12 + 13 + body { 14 + margin: 0; 15 + padding: 0; 16 + font-family: ui-monospace, monospace; 17 + font-size: 12pt; 18 + line-height: 1.54; 19 + background-color: var(--background); 20 + color: var(--color); 21 + text-rendering: optimizeLegibility; 22 + -webkit-font-smoothing: antialiased; 23 + -webkit-overflow-scrolling: touch; 24 + -webkit-text-size-adjust: 100%; 25 + 26 + @media (max-width: $phone-max-width) { 27 + font-size: 1rem; 28 + } 29 + } 30 + 31 + h1, h2, h3, h4, h5, h6 { 32 + line-height: 1.3; 33 + 34 + &:not(first-child) { 35 + margin-top: 40px; 36 + } 37 + 38 + .zola-anchor { 39 + font-size: 1.5rem; 40 + visibility: hidden; 41 + margin-left: 0.5rem; 42 + vertical-align: 1%; 43 + text-decoration: none; 44 + border-bottom-color: transparent; 45 + cursor: pointer; 46 + 47 + @media(max-width: $phone-max-width){ 48 + visibility: visible; 49 + } 50 + } 51 + 52 + &:hover { 53 + .zola-anchor { 54 + visibility: visible; 55 + } 56 + } 57 + } 58 + 59 + // Actually keeping Pawroman's stylings here for font-size over h1-h6. 60 + // I prefer differentiated header height. 61 + 62 + // OLD 63 + // --------------------- 64 + // h1, h2, h3 { 65 + // font-size: 1.4rem; 66 + // } 67 + 68 + // h4, h5, h6 { 69 + // font-size: 1.2rem; 70 + // } 71 + 72 + // Pawroman's 73 + // --------------------- 74 + h1 { 75 + font-size: 1.4rem; 76 + } 77 + 78 + h2 { 79 + font-size: 1.3rem; 80 + } 81 + 82 + h3 { 83 + font-size: 1.2rem; 84 + } 85 + 86 + h4, h5, h6 { 87 + font-size: 1.15rem; 88 + } 89 + 90 + 91 + a { 92 + color: inherit; 93 + } 94 + 95 + img { 96 + display: block; 97 + max-width: 100%; 98 + 99 + &.left { 100 + margin-right: auto; 101 + } 102 + 103 + &.center { 104 + margin-left: auto; 105 + margin-right: auto; 106 + } 107 + 108 + &.right { 109 + margin-left: auto; 110 + } 111 + } 112 + 113 + p { 114 + margin-bottom: 20px; 115 + } 116 + 117 + figure { 118 + display: table; 119 + max-width: 100%; 120 + margin: 25px 0; 121 + 122 + &.left { 123 + // img { 124 + margin-right: auto; 125 + // } 126 + } 127 + 128 + &.center { 129 + // img { 130 + margin-left: auto; 131 + margin-right: auto; 132 + // } 133 + } 134 + 135 + &.right { 136 + // img { 137 + margin-left: auto; 138 + // } 139 + } 140 + 141 + figcaption { 142 + font-size: 14px; 143 + padding: 5px 10px; 144 + margin-top: 5px; 145 + background: var(--accent); 146 + color: var(--background); 147 + 148 + &.left { 149 + text-align: left; 150 + } 151 + 152 + &.center { 153 + text-align: center; 154 + } 155 + 156 + &.right { 157 + text-align: right; 158 + } 159 + } 160 + } 161 + 162 + code { 163 + font-family: ui-monospace, monospace; 164 + background: var(--accent-alpha-20); 165 + color: var(--accent); 166 + padding: 1px 6px; 167 + margin: 0 2px; 168 + font-size: .95rem; 169 + } 170 + 171 + pre { 172 + font-family: ui-monospace, monospace; 173 + padding: 20px 10px; 174 + font-size: .95rem; 175 + overflow: auto; 176 + border-top: 1px solid rgba(255, 255, 255, .1); 177 + border-bottom: 1px solid rgba(255, 255, 255, .1); 178 + 179 + + pre { 180 + border-top: 0; 181 + margin-top: -40px; 182 + } 183 + 184 + @media (max-width: $phone-max-width) { 185 + white-space: pre-wrap; 186 + word-wrap: break-word; 187 + } 188 + 189 + code { 190 + background: none !important; 191 + margin: 0; 192 + padding: 0; 193 + font-size: inherit; 194 + border: none; 195 + } 196 + } 197 + 198 + blockquote { 199 + border-top: 1px solid var(--accent); 200 + border-bottom: 1px solid var(--accent); 201 + margin: 40px 0; 202 + padding: 25px; 203 + 204 + @media (max-width: $phone-max-width) { 205 + padding-right: 0; 206 + } 207 + 208 + &:before { 209 + content: '”'; 210 + font-family: Georgia, serif; 211 + font-size: 3.875rem; 212 + position: absolute; 213 + left: -40px; 214 + top: -20px; 215 + } 216 + 217 + p:first-of-type { 218 + margin-top: 0; 219 + } 220 + 221 + p:last-of-type { 222 + margin-bottom: 0; 223 + } 224 + 225 + p { 226 + position: relative; 227 + } 228 + 229 + p:before { 230 + content: '>'; 231 + display: block; 232 + position: absolute; 233 + left: -25px; 234 + color: var(--accent); 235 + } 236 + } 237 + 238 + table { 239 + table-layout: fixed; 240 + border-collapse: collapse; 241 + width: 100%; 242 + margin: 40px 0; 243 + } 244 + 245 + table, th, td { 246 + border: 1px dashed var(--accent); 247 + padding: 10px; 248 + } 249 + 250 + th { 251 + color: var(--accent); 252 + } 253 + 254 + ul, ol { 255 + margin-left: 30px; 256 + padding: 0; 257 + 258 + li { 259 + position: relative; 260 + margin-top: 5px; 261 + margin-bottom: 5px; 262 + } 263 + 264 + @media (max-width: $phone-max-width) { 265 + margin-left: 20px; 266 + } 267 + 268 + ul, ol { 269 + margin-top: 10px; 270 + margin-bottom: 10px; 271 + } 272 + } 273 + 274 + ol ol { 275 + list-style-type: lower-alpha; 276 + } 277 + 278 + .container { 279 + display: flex; 280 + flex-direction: column; 281 + padding: 40px; 282 + max-width: 864px; 283 + min-height: 100vh; 284 + border-right: 1px solid rgba(255, 255, 255, 0.1); 285 + 286 + &.full, 287 + &.center { 288 + border: none; 289 + margin: 0 auto; 290 + } 291 + 292 + &.full { 293 + max-width: 100%; 294 + } 295 + 296 + @media (max-width: $phone-max-width) { 297 + padding: 20px; 298 + } 299 + } 300 + 301 + .content { 302 + display: flex; 303 + } 304 + 305 + hr { 306 + width: 100%; 307 + border: none; 308 + background: var(--border-color); 309 + height: 1px; 310 + } 311 + 312 + .hidden { 313 + display: none; 314 + }
+7
sass/style.scss
··· 1 + @import '../themes/zerm/sass/buttons'; 2 + @import '../themes/zerm/sass/header'; 3 + @import '../themes/zerm/sass/logo'; 4 + @import 'main'; 5 + @import '../themes/zerm/sass/post'; 6 + @import '../themes/zerm/sass/pagination'; 7 + @import '../themes/zerm/sass/footer';