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