├── README.md └── writing.css /README.md: -------------------------------------------------------------------------------- 1 | # A distract-free Writing theme for Typora 2 | 3 | Typora CSS theme. Plain and simple. Aiming for the [Medium](http://medium.com)-like writing experience. 4 | 5 | **NB! I do not update this anymore!** Please check out [typora-novelist-theme](https://github.com/ronilaukkarinen/typora-novelist-theme). 6 | 7 | ![Screenshot 1](https://i.imgur.com/UOjVbYK.png "Screenshot") 8 | 9 | ![Screenshot 2](https://rolle.wtf/typora-writing-theme-1.png "Screenshot") 10 | 11 | ![Screenshot 3](https://rolle.wtf/typora-writing-theme-2.png "Screenshot") 12 | 13 | ### Installation 14 | 15 | 1. Download this repo and unpack CSS. 16 | 2. Open [Typora](http://typora.io). 17 | 3. Select Preferences > Open Theme Folder 18 | 4. Copy writing.css to the Theme folder 19 | 5. Purchase webfonts of your choice and place them to the `writing` subdirectory in Theme folder (create new folder if it doesn't exist). Fonts used in Medium.com between 2013 to 2015 are predefined in writing.css, note you will only need woff-files which are named accordingly. 20 | 21 | **Please note:** You can use any fonts with this theme. You will need to create `writing` subdirectory and place your downloaded or purchased fonts to that directory. By default this theme uses [Source Sans Pro](https://www.google.com/fonts/specimen/Source+Sans+Pro) in Headings and [Merriweather](https://www.google.com/fonts/specimen/Merriweather) in paragraphs which are pretty close free alternatives to Medium's fonts. 22 | 23 | All fonts are just regular, **bold**, *regular italic* and ***bold italic***. 24 | 25 | ### Recommended fonts 26 | 27 | ##### Paragraphs (preferred): [Charter](https://www.myfonts.com/fonts/itc/charter/) 28 | ![Screenshot](https://rolle.wtf/charter.png "Screenshot") 29 | 30 | ##### Paragraphs (alternative): [Freight Text](https://www.myfonts.com/fonts/garagefonts/freight-text/) 31 | ![Screenshot](https://rolle.wtf/freight.png "Screenshot") 32 | 33 | ##### Headings (preferred): [Kievit](http://www.myfonts.com/fonts/fontfont/kievit/) 34 | ![Screenshot](https://rolle.wtf/kievit.png "Screenshot") 35 | 36 | ##### Headings (alternative): [Proxima Nova](https://www.myfonts.com/fonts/marksimonson/proxima-nova/webfont_preview.html) 37 | ![Screenshot](https://rolle.wtf/proximanova.png "Screenshot") 38 | -------------------------------------------------------------------------------- /writing.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Circular"; 3 | src: url("./modern/f5437dcddb7d5641ae51a8109a31fa53.eot"); 4 | src: url("./modern/f5437dcddb7d5641ae51a8109a31fa53.eot?#iefix") format("embedded-opentype"), url("./modern/f5437dcddb7d5641ae51a8109a31fa53.woff") format("woff"), url("./modern/f5437dcddb7d5641ae51a8109a31fa53.woff2") format("woff2"), url("./modern/f5437dcddb7d5641ae51a8109a31fa53.ttf") format("truetype"), url("./modern/f5437dcddb7d5641ae51a8109a31fa53.svg#Circular") format("svg"); 5 | font-style: normal; 6 | font-weight: 400; 7 | } 8 | 9 | @font-face { 10 | font-family: "Circular"; 11 | src: url("./modern/d2eb57af9849479498a3aab358ef6c92.eot"); 12 | src: url("./modern/d2eb57af9849479498a3aab358ef6c92.eot?#iefix") format("embedded-opentype"), url("./modern/d2eb57af9849479498a3aab358ef6c92.woff") format("woff"), url("./modern/d2eb57af9849479498a3aab358ef6c92.woff2") format("woff2"), url("./modern/d2eb57af9849479498a3aab358ef6c92.ttf") format("truetype"), url("./modern/d2eb57af9849479498a3aab358ef6c92.svg#Circular") format("svg"); 13 | font-style: italic; 14 | font-weight: 400; 15 | } 16 | 17 | @font-face { 18 | font-family: "Circular"; 19 | src: url("./modern/86a7bec49ba4953ef59891e1597151d1.eot"); 20 | src: url("./modern/86a7bec49ba4953ef59891e1597151d1.eot?#iefix") format("embedded-opentype"), url("./modern/86a7bec49ba4953ef59891e1597151d1.woff") format("woff"), url("./modern/86a7bec49ba4953ef59891e1597151d1.woff2") format("woff2"), url("./modern/86a7bec49ba4953ef59891e1597151d1.ttf") format("truetype"), url("./modern/86a7bec49ba4953ef59891e1597151d1.svg#Circular") format("svg"); 21 | font-style: normal; 22 | font-weight: 500; 23 | } 24 | 25 | @font-face { 26 | font-family: "Circular"; 27 | src: url("./modern/469779bbfe42049602ae0c100c517e90.eot"); 28 | src: url("./modern/469779bbfe42049602ae0c100c517e90.eot?#iefix") format("embedded-opentype"), url("./modern/469779bbfe42049602ae0c100c517e90.woff") format("woff"), url("./modern/469779bbfe42049602ae0c100c517e90.woff2") format("woff2"), url("./modern/469779bbfe42049602ae0c100c517e90.ttf") format("truetype"), url("./modern/469779bbfe42049602ae0c100c517e90.svg#Circular") format("svg"); 29 | font-style: italic; 30 | font-weight: 500; 31 | } 32 | 33 | @font-face { 34 | font-family: "Circular"; 35 | src: url("./modern/0fe7d5a9ec1ccd7bf994e3bbe8cd4c10.eot"); 36 | src: url("./modern/0fe7d5a9ec1ccd7bf994e3bbe8cd4c10.eot?#iefix") format("embedded-opentype"), url("./modern/0fe7d5a9ec1ccd7bf994e3bbe8cd4c10.woff") format("woff"), url("./modern/0fe7d5a9ec1ccd7bf994e3bbe8cd4c10.woff2") format("woff2"), url("./modern/0fe7d5a9ec1ccd7bf994e3bbe8cd4c10.ttf") format("truetype"), url("./modern/0fe7d5a9ec1ccd7bf994e3bbe8cd4c10.svg#Circular") format("svg"); 37 | font-style: normal; 38 | font-weight: 700; 39 | } 40 | 41 | @font-face { 42 | font-family: "Circular"; 43 | src: url("./modern/e964570c740cb80bd168ac14fbd51b4f.eot"); 44 | src: url("./modern/e964570c740cb80bd168ac14fbd51b4f.eot?#iefix") format("embedded-opentype"), url("./modern/e964570c740cb80bd168ac14fbd51b4f.woff") format("woff"), url("./modern/e964570c740cb80bd168ac14fbd51b4f.woff2") format("woff2"), url("./modern/e964570c740cb80bd168ac14fbd51b4f.ttf") format("truetype"), url("./modern/e964570c740cb80bd168ac14fbd51b4f.svg#Circular") format("svg"); 45 | font-style: normal; 46 | font-weight: 900; 47 | } 48 | 49 | html { 50 | font-size: 100%; 51 | } 52 | 53 | html, 54 | body { 55 | margin: auto; 56 | background: #fff !important; 57 | } 58 | 59 | body { 60 | background: #fff !important; 61 | line-height: 1.555; 62 | padding: 2em; 63 | font-size: 1.3rem; 64 | text-rendering: optimizeLegibility; 65 | -webkit-font-smoothing: antialiased; 66 | -moz-osx-font-smoothing: grayscale; 67 | -moz-font-feature-settings: "liga" on; 68 | } 69 | 70 | #write { 71 | max-width: 870px; 72 | margin: 0 auto; 73 | margin-bottom: 2em; 74 | line-height: 1.53; 75 | } 76 | 77 | #write > h2:first-child, 78 | #write > h3:first-child, 79 | #write > h4:first-child, 80 | #write > p:first-child { 81 | margin-top: 1.2em; 82 | } 83 | 84 | /* Typography 85 | -------------------------------------------------------- */ 86 | body #write, 87 | #write p { 88 | font-family: "Circular", "Spectral", "Merriweather", "Freight Text", Palatino, Times !important; 89 | line-height: 1.58; 90 | letter-spacing: -0.003em; 91 | color: rgba(0, 0, 0, .9); 92 | } 93 | 94 | #write a, 95 | #write a:link, 96 | #write a:visited, 97 | #write a:active { 98 | color: #404247; 99 | text-decoration: none; 100 | text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff; 101 | box-shadow: inset 0 -1px 0 0 #fff, inset 0 -2px 0 0 #404247; 102 | } 103 | 104 | #write h1, 105 | #write h2, 106 | #write h3, 107 | #write h4, 108 | #write h5, 109 | #write h6 { 110 | font-family: "Circular", "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; 111 | font-weight: 700 !important; 112 | font-style: normal; 113 | line-height: 1.15; 114 | letter-spacing: -0.02em; 115 | } 116 | 117 | #write h4, 118 | #write h5, 119 | #write h6 { 120 | font-family: "Circular", "Times Modern", "Sofia Pro", "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; 121 | font-size: 21px; 122 | line-height: 32px; 123 | color: #a5a7ae; 124 | font-weight: 400; 125 | } 126 | 127 | /* https://grtcalculator.com/ */ 128 | #write p { 129 | margin-bottom: 1.3em; 130 | font-weight: 400; 131 | font-style: normal; 132 | font-size: 22px; 133 | line-height: 38px; 134 | overflow: visible; 135 | font-family: "Circular", "Spectral", "Merriweather", "Freight Text", Palatino, Times !important; 136 | } 137 | 138 | a:hover { 139 | text-decoration: none; 140 | } 141 | 142 | h1, 143 | h2, 144 | h3, 145 | h4 { 146 | margin: 1.414em 0 0.5em; 147 | font-weight: inherit; 148 | line-height: 1.2; 149 | } 150 | 151 | h1 { 152 | margin-top: 0; 153 | font-size: 58px; 154 | line-height: 48px; 155 | color: #101010; 156 | margin-top: 21px; 157 | } 158 | 159 | h1:first-child { 160 | margin-top: 80px; 161 | margin-bottom: 40px; 162 | } 163 | 164 | h2 { 165 | font-size: 58px; 166 | line-height: 40px; 167 | color: #202123; 168 | } 169 | 170 | h2:first-child { 171 | margin-top: 40px; 172 | } 173 | 174 | h3 { 175 | font-size: 36px; 176 | line-height: 32px; 177 | color: #202123; 178 | } 179 | 180 | small, 181 | .font_small { 182 | font-size: 0.707em; 183 | } 184 | 185 | p, 186 | .mathjax-block { 187 | margin-top: 0; 188 | -webkit-hypens: auto; 189 | -moz-hypens: auto; 190 | hyphens: auto; 191 | } 192 | 193 | ul { 194 | list-style: none; 195 | padding-left: 1.2em; 196 | font-weight: 400; 197 | font-style: normal; 198 | font-size: 21px; 199 | } 200 | 201 | ul > li:before { 202 | font-size: 16.8px; 203 | padding-top: 4px; 204 | padding-right: 15px; 205 | content: "•"; 206 | position: absolute; 207 | display: inline-block; 208 | box-sizing: border-box; 209 | width: 58px; 210 | margin-left: -58px; 211 | text-align: right; 212 | } 213 | 214 | ol { 215 | padding-left: 1.2em; 216 | } 217 | 218 | blockquote { 219 | margin-left: 1em; 220 | padding-left: 1em; 221 | border-left: 1px solid #ddd; 222 | font-style: normal; 223 | line-height: 1.15; 224 | letter-spacing: -0.02em; 225 | font-weight: 400; 226 | font-style: normal; 227 | font-size: 21px; 228 | } 229 | 230 | blockquote p { 231 | font-style: normal; 232 | margin-bottom: 0; 233 | } 234 | 235 | code, 236 | pre { 237 | font-family: "Consolas", "Menlo", "Monaco", monospace, serif; 238 | font-size: .9em; 239 | background: white; 240 | } 241 | 242 | pre.md-fences { 243 | margin-left: 1em; 244 | padding-left: 1em; 245 | border: 1px solid #ddd; 246 | padding-bottom: 8px; 247 | padding-top: 6px; 248 | margin-bottom: 1.5em; 249 | } 250 | 251 | a { 252 | color: #2484c1; 253 | text-decoration: none; 254 | } 255 | 256 | #write a img { 257 | border: none; 258 | } 259 | 260 | #write h1 a, 261 | #write h1 a:hover { 262 | color: #333; 263 | text-decoration: none; 264 | } 265 | 266 | #write hr { 267 | color: #ddd; 268 | height: 1px; 269 | margin: 2em 0; 270 | border-top: solid 1px #ddd; 271 | border-bottom: none; 272 | border-left: 0; 273 | border-right: 0; 274 | } 275 | 276 | #write table { 277 | margin-bottom: 1.333333rem; 278 | } 279 | 280 | #write table th, 281 | #write table td { 282 | padding: 8px; 283 | line-height: 1.333333rem; 284 | vertical-align: top; 285 | border-top: 1px solid #ddd; 286 | } 287 | 288 | #write table th { 289 | font-weight: bold; 290 | } 291 | 292 | #write table thead th { 293 | vertical-align: bottom; 294 | } 295 | 296 | #write table caption + thead tr:first-child th, 297 | #write table caption + thead tr:first-child td, 298 | #write table colgroup + thead tr:first-child th, 299 | #write table colgroup + thead tr:first-child td, 300 | #write table thead:first-child tr:first-child th, 301 | #write table thead:first-child tr:first-child td { 302 | border-top: 0; 303 | } 304 | 305 | #write table tbody + tbody { 306 | border-top: 2px solid #ddd; 307 | } 308 | 309 | #write .task-list { 310 | padding: 0; 311 | } 312 | 313 | #write .task-list-item { 314 | padding-left: 1.6rem; 315 | } 316 | 317 | #write .task-list-item input:before { 318 | content: '\221A'; 319 | display: inline-block; 320 | width: 1.33333333rem; 321 | height: 1.6rem; 322 | vertical-align: middle; 323 | text-align: center; 324 | color: #ddd; 325 | background-color: #fefefe; 326 | } 327 | 328 | #write .task-list-item input:checked:before, 329 | #write .task-list-item input[checked]:before { 330 | color: inherit; 331 | } 332 | 333 | #write .md-tag { 334 | color: inherit; 335 | font: inherit; 336 | } 337 | 338 | #write pre.md-meta-block { 339 | min-height: 35px; 340 | padding: 0.5em 1em; 341 | } 342 | 343 | #write pre.md-meta-block { 344 | white-space: pre; 345 | background: #f8f8f8; 346 | border: 0px; 347 | color: #999; 348 | border-left: 1000px #f8f8f8 solid; 349 | margin-left: -1000px; 350 | border-right: 1000px #f8f8f8 solid; 351 | margin-right: -1000px; 352 | margin-bottom: 2em; 353 | margin-top: -1.3333333333333rem; 354 | padding-top: 26px; 355 | padding-bottom: 10px; 356 | line-height: 1.8em; 357 | font-size: 0.9em; 358 | font-size: 0.76em; 359 | padding-left: 0; 360 | } 361 | 362 | .md-img-error.md-image > .md-meta { 363 | vertical-align: bottom; 364 | } 365 | 366 | #write > h5.md-focus:before { 367 | top: 2px; 368 | } 369 | 370 | .md-toc { 371 | margin-top: 40px; 372 | } 373 | 374 | .md-toc-content { 375 | padding-bottom: 20px; 376 | } 377 | 378 | .outline-expander:before { 379 | color: inherit; 380 | font-size: 14px; 381 | top: auto; 382 | content: "\f0da"; 383 | font-family: FontAwesome; 384 | } 385 | 386 | .outline-expander:hover:before, 387 | .outline-item-open > .outline-item > .outline-expander:before { 388 | content: "\f0d7"; 389 | } 390 | --------------------------------------------------------------------------------