├── LICENSE ├── README.md └── css └── Harlowe.css /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Daniel Talsky 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Twine CSS Template 2 | 3 | ### A Simple CSS Template to Help Customize Twine2 Games 4 | 5 | Twine2 is a great tool for beginners to make games, but there aren't customization options out of the box, and the way to use CSS is not well documented. This template is a well-commented basic reset that allows you to make your game look unique without knowing too much about CSS. 6 | 7 | ## How to Use 8 | 9 | Cut and paste the CSS template into Twine2's CSS Section 10 | 11 | Modify fonts and colors to your liking following the instructions in the CSS, or just use as-is, an extremely readable basic template. 12 | 13 | ## Notes 14 | 15 | Right now, there is only a template for customizing Harlowe games. I'm 16 | working on a template for SugarCube, but until then, use the official 17 | basic template, called Bleached: http://www.motoslave.net/sugarcube/2/ 18 | 19 | ## MIT Licensed 20 | 21 | (This means there aren't any meaningful restrictions on how you can use it, you just can't sue me over it.) 22 | -------------------------------------------------------------------------------- /css/Harlowe.css: -------------------------------------------------------------------------------- 1 | /* 2 | Twine CSS Template 3 | 4 | Simple CSS Template to help Twine authors change 5 | the default appearance 6 | 7 | Most current version, and license information at: 8 | https://github.com/danieltalsky/twine-css-template 9 | 10 | Special thanks to furkle's Twine 2 Harlowe CSS Tutorial 11 | no longer up on the web but helped a lot with the basics. 12 | 13 | - Version: 1.0 14 | - Author: Daniel Talsky 15 | 16 | 17 | COLORS 18 | 19 | The default colors I picked are based on the Solarized Dark theme, 20 | optimized for readability and most often used in computer programming. 21 | Change them to make your game have whatever mood you want, just make 22 | sure it's readable! 23 | 24 | - background #002b36 25 | - sidebar background #073642 26 | 27 | - main text color #839496 28 | - main sidebar text color #93a1a1 29 | 30 | FONTS 31 | 32 | You can use a traditional HTML font stack, but having access to 33 | unique fonts keeps your game looking unique. I picked 34 | PT Sans Caption, but you can pick any combination of google fonts 35 | and they will generate this import line for you. 36 | 37 | Google Fonts: 38 | https://fonts.google.com/ 39 | */ 40 | @import url('https://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700'); 41 | 42 | /* These are the default options for the entire browser window */ 43 | tw-story { 44 | background-color: #002b36; 45 | /* Color is the foreground / font color */ 46 | color: #839496; 47 | /* Make sure the first font listed is one of the fonts you imported above */ 48 | font-family: 'PT Sans Caption', sans-serif; 49 | /* This makes the font size for normal letters just a little bit bigger than default */ 50 | font-size: 1.25em; 51 | } 52 | 53 | /* These are the default options for the each passage area */ 54 | tw-passage { 55 | /* 56 | This lets the story take up most of its width up to a maximum readable width 57 | an `em` is about the width of one of your letters. max-width lets the size 58 | get wider and wider with the size of the window but only to a sane point 59 | 60 | It's ok to experiment with making this smaller or larger 61 | */ 62 | max-width: 55em; 63 | /* This centers the main story column in the window */ 64 | margin: 0 auto 0 auto; 65 | } 66 | 67 | /* The sidebar with scoring and the back button */ 68 | tw-sidebar { 69 | background: #073642; 70 | color: #93a1a1; 71 | /* 72 | Gives the sidebar rounded corners. Remove for no corners or make the number 73 | higher for more rounded colors. 74 | 75 | */ 76 | border-radius: 10px; 77 | 78 | /* Uncomment to hide the sidebar completely */ 79 | /* display: none; */ 80 | } 81 | 82 | /* 83 | BASIC LINK STYLES 84 | 85 | This covers various different kinds of links in Harlowe 86 | */ 87 | .enchantment-link, tw-link, a { 88 | color: #cb4b16; 89 | font-weight: bold; 90 | /* Adds a glow to links. You can make it a seperate color from the text 91 | The numbers mean, in order: 92 | - How far to the right of the letter (0 means radiating from the letter) 93 | - How far below the letter 94 | - How much blur does the glow/shadow have 95 | - What color is the shadow 96 | */ 97 | text-shadow: 0 0 5px #cb4b16; 98 | } 99 | /* Links that have already been visited */ 100 | .enchantment-link:visited, tw-link:visited, .enchantment-link.visited, tw-link.visited, a:visited { 101 | color: #268bd2; 102 | font-weight: bold; 103 | text-shadow: 0 0 5px #268bd2; 104 | } 105 | /* Links when the mouse is over them */ 106 | .enchantment-link:hover, tw-link:hover, a:hover { 107 | color: #2aa198; 108 | font-weight: bold; 109 | text-shadow: 0 0 5px #2aa198; 110 | } 111 | 112 | 113 | /* 114 | EFFECTS 115 | 116 | The pulse-in effect is good for text that will appear based on a user 117 | action. In Twine2, text will just blink into being and the user might 118 | not notice. If you wrap your text in: 119 | Text that gets shown. 120 | 121 | It will appear with a bright colored pulse that makes it clear it just 122 | appeared. 123 | */ 124 | @keyframes pulsein { 125 | from { color: #00fbf7; text-shadow: 0 0 1em #00fbf7; } 126 | to { color: #ADC3D8; text-shadow: 0 0; } 127 | } 128 | .pulse-in { 129 | color: #ADC3D8; 130 | font-size: 1.1em; 131 | animation: pulsein 1.2s linear 3; 132 | } 133 | span.pulse-in { 134 | font-size: inherit; 135 | } 136 | 137 | /* IMAGE STYLES */ 138 | 139 | /* styles for all images by default */ 140 | img { 141 | /* for example */ 142 | /* border: 1px solid black; */ 143 | } 144 | /* 145 | images with will stretch 146 | to the full width of the story 147 | */ 148 | img.full-width { 149 | display:block; margin-right:auto; margin-left:auto; 150 | width: 100%; 151 | } 152 | 153 | 154 | 155 | 156 | 157 | /* 158 | TABLET-SPECIFIC RULES / SMALL WIDTH BROWSERS 159 | */ 160 | @media only screen and (min-width: 401px) and (max-width: 960px) { 161 | 162 | tw-story { 163 | font-size: 3em; 164 | width: 100%; 165 | max-width: 95%; 166 | margin: 0 auto 0 auto; 167 | padding: 20% 10%; 168 | } 169 | 170 | tw-passage { 171 | width: 100%; 172 | } 173 | 174 | } 175 | 176 | /* 177 | MOBILE-SPECIFIC RULES 178 | 179 | You often want to make fonts much larger. 180 | */ 181 | @media only screen and (max-device-width: 480px) { 182 | 183 | tw-story { 184 | font-size: 3.2em; 185 | width: 100%; 186 | max-width: 95%; 187 | margin: 0 auto 0 auto; 188 | padding: 20% 5%; 189 | } 190 | 191 | tw-passage { 192 | width: 100%; 193 | } 194 | 195 | } 196 | 197 | --------------------------------------------------------------------------------