├── demo.png ├── README.md ├── LICENSE ├── testpage.html └── oldbook.css /demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UtilityHotbar/oldbook-css/HEAD/demo.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Oldbook.css 2 | This is oldbook.css. It's a single drag and drop css file that applies a clean, old-school parchment style to your sites. Here's how it looks: 3 | 4 | ![Demo image](https://github.com/UtilityHotbar/oldbook-css/blob/main/demo.png) 5 | 6 | ## Installation 7 | 1. Download `oldbook.css`. Add it to the folder containing your project. 8 | 2. Add the following line to your `index.html`: `` 9 | 3. If you want to add drop caps, add the `has-dropcap` class to your element. 10 | 4. Done. 11 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 UtilityHotbar 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /testpage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Testing page 7 | 8 | 9 | 10 |

Oldbook.css

11 |

Introduction

12 | This is oldbook.css. It's a single drag and drop css file that applies a clean, old-school parchment style to your sites. Here's bold text, here's italic text. 13 | 16 |
    17 |
  1. Ordered list item
  2. 18 |
19 |

Use the class "has-dropcap" to add dropcaps to the start of paragraphs. Testing testing testing, how does this even work as a drop cap thing anyways. Testing testing testing, how does this even work as a drop cap thing anyways. Testing testing testing, how does this even work as a drop cap thing anyways. Testing testing testing, how does this even work as a drop cap thing anyways.

20 |
Blockquote
21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |
FirstnameLastname
AB
CD
35 |
36 | 37 | 38 | -------------------------------------------------------------------------------- /oldbook.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Cinzel&family=Cinzel+Decorative&family=IM+Fell+DW+Pica+SC&family=IM+Fell+DW+Pica:ital@0;1&display=swap'); 2 | 3 | html { 4 | background-color: #fff3c9; 5 | } 6 | 7 | body { 8 | margin: auto; 9 | max-width: 600px; 10 | font-family: 'IM Fell DW Pica', serif; 11 | } 12 | 13 | 14 | h1 { 15 | font-family: "IM Fell DW Pica SC", serif; 16 | color: #8b0000; 17 | font-size: 3.5rem; 18 | margin: auto; 19 | text-align: center; 20 | font-weight: normal; 21 | 22 | } 23 | 24 | h2 { 25 | font-family: "IM Fell DW Pica SC", serif; 26 | font-weight: normal; 27 | color: #8b0000; 28 | font-size: 3rem; 29 | border-bottom: 3px solid #8b0000; 30 | margin-bottom: 0px; 31 | } 32 | 33 | h3 { 34 | font-family: "IM Fell DW Pica SC", serif; 35 | font-weight: normal; 36 | font-size: 2.5rem; 37 | color: #8b0000; 38 | margin-bottom: 10px; 39 | } 40 | 41 | h4 { 42 | font-family: "IM Fell DW Pica", serif; 43 | font-weight: normal; 44 | font-style: italic; 45 | font-size: 2rem; 46 | color: #8b0000; 47 | } 48 | 49 | h5 { 50 | font-family: "IM Fell DW Pica", serif; 51 | font-weight: normal; 52 | font-style: italic; 53 | font-size: 1.5rem; 54 | color: #8b0000; 55 | } 56 | 57 | h6 { 58 | font-family: "IM Fell DW Pica", serif; 59 | font-weight: normal; 60 | font-style: italic; 61 | font-size: 1.35rem; 62 | color: #8b0000; 63 | } 64 | 65 | b, th { 66 | color: #8b0000; 67 | font-family: "IM Fell DW Pica SC", serif; 68 | font-weight: normal; 69 | } 70 | 71 | blockquote { 72 | border-left: 3px solid #8b0000; 73 | border-right: 3px solid #8b0000; 74 | background-color: #facf7f; 75 | margin: 1em 10px; 76 | padding: 0.5em 10px; 77 | 78 | } 79 | 80 | table { 81 | border: 3px solid #8b0000; 82 | border-collapse: collapse; 83 | 84 | } 85 | 86 | th, td { 87 | border: 0.5px solid #8b0000; 88 | padding: 5px; 89 | } 90 | 91 | code { 92 | font-family: "Syne Mono", monospace; 93 | } 94 | 95 | .has-dropcap:first-letter { 96 | font-family: "IM Fell DW Pica SC", serif; 97 | float: left; 98 | font-size: 4rem; 99 | line-height: 0.65; 100 | margin: 0.1em 0.1em 0.2em 0; 101 | color: #8b0000; 102 | } 103 | --------------------------------------------------------------------------------