fancytype-screen.css (2416B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 /* -------------------------------------------------------------- 6 7 fancy-type.css 8 * Lots of pretty advanced classes for manipulating text. 9 10 See the Readme file in this folder for additional instructions. 11 12 -------------------------------------------------------------- */ 13 14 /* Indentation instead of line shifts for sibling paragraphs. */ 15 p + p { text-indent:2em; margin-top:-1.5em; } 16 form p + p { text-indent: 0; } /* Don't want this in forms. */ 17 18 19 /* For great looking type, use this code instead of asdf: 20 <span class="alt">asdf</span> 21 Best used on prepositions and ampersands. */ 22 23 .alt { 24 color: #666; 25 font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", Georgia, serif; 26 font-style: italic; 27 font-weight: normal; 28 } 29 30 31 /* For great looking quote marks in titles, replace "asdf" with: 32 <span class="dquo">“</span>asdf” 33 (That is, when the title starts with a quote mark). 34 (You may have to change this value depending on your font size). */ 35 36 .dquo { margin-left: -.5em; } 37 38 39 /* Reduced size type with incremental leading 40 (http://www.markboulton.co.uk/journal/comments/incremental_leading/) 41 42 This could be used for side notes. For smaller type, you don't necessarily want to 43 follow the 1.5x vertical rhythm -- the line-height is too much. 44 45 Using this class, it reduces your font size and line-height so that for 46 every four lines of normal sized type, there is five lines of the sidenote. eg: 47 48 New type size in em's: 49 10px (wanted side note size) / 12px (existing base size) = 0.8333 (new type size in ems) 50 51 New line-height value: 52 12px x 1.5 = 18px (old line-height) 53 18px x 4 = 72px 54 72px / 5 = 14.4px (new line height) 55 14.4px / 10px = 1.44 (new line height in em's) */ 56 57 p.incr, .incr p { 58 font-size: 10px; 59 line-height: 1.44em; 60 margin-bottom: 1.5em; 61 } 62 63 64 /* Surround uppercase words and abbreviations with this class. 65 Based on work by Jørgen Arnor Gårdsø Lom [http://twistedintellect.com/] */ 66 67 .caps { 68 font-variant: small-caps; 69 letter-spacing: 1px; 70 text-transform: lowercase; 71 font-size:1.2em; 72 line-height:1%; 73 font-weight:bold; 74 padding:0 2px; 75 }