summaryrefslogtreecommitdiff
path: root/media/sass/base.sass
blob: 4b8a8816886c8c94b063959919bad1b930d438f0 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
@import _reset.sass
@import _mixins.sass

// grid = 988 with 9 cols at 92px plus 20px gutters (via http://gridulator.com/)
// font-sizes:
// base: 16px = 1em
// 10px = .625em
// 12px = .75em
// 14px = .875em
// 16px = 1em
// 17px = 1.0625em (body text in articles)
// 18px = 1.125em
// 24px = 1.5em
// 30px = 1.875em
// 32px = 2em


html
    height: 100%

body
    font: normal 100% unquote("Hoefler Text"), Georgia, unquote("Times New Roman"), Times, serif 
    color: $brown
    margin: 0 1.125em
    min-height: 100%
    position: relative
    padding: 0
    //max-width: 61.75em      /* 988px / 16px = 61.75em */
    max-width = 20.9375em /* 3 cols @ 92px + 20px gutter  -- 335px / 16px = */
    background: white /* url('../img/988px-9col-92w-20gut.png') 217px 0 repeat-y */
    

/* ###################Typography############# */    
p
    font-size: 1.0625em /* 17px / 16px */
    line-height: 1.5em /* 24px / 16px */
footer p
    font-size: .625em
    text-align: center
a
    text-decoration: none
    color: $brown
    &:hover
        color: $orange
        
ul li 
    display: inline
    margin: 0 .125em

.dateline, nav li, .breadcrumbs li, .meta p
    text-transform: uppercase
    font-size: .75em
    letter-spacing: .0625em
.meta p
    text-align: center
img 
    border: 10px $brown solid


#featured-image img
    width = 95% /* 315 /  520 */
    
h1
    font: normal 1.875em Helvetica, Verdana, sans-serif
    letter-spacing: 0.5px
    text-align: center
#archive article h1
    font: normal 1.5em Helvetica, Verdana, sans-serif
    letter-spacing: 0.5px
    text-align: center
    text-transform: none
    margin: 1.875em 0 .875em 0
#archive h1
    font-weight: 700
    font-size: .75em
    text-transform: uppercase
    text-align: left
.footnote
    font-size: .875em
#post-metadata 
    margin-top: 0
    border-top: 1px $brown dotted
    p
        font-size: .875em
        text-align: left
/* ######### layout small  ################*/

header
    margin: 0 auto 1em auto
    text-align: center
    #logo h1
        background: url('../img/tree.png') 0 0 no-repeat
        text-indent: -9999px
        width: 151px
        height: 84px
        margin: 0 auto
    #logo h2
        background: url('../img/text.png') 0 0 no-repeat
        text-indent: -9999px
        width: 184px
        height: 54px
        margin: 0 auto
nav
    margin: 1em auto 2em auto
    text-align: center
    border-top: 1px $brown dotted
    border-bottom: 1px $brown dotted
    width: 100%
    padding: .25em 0
nav:after, footer:before
    content: "."
    display: block
    height: 0
    clear: both
    visibility: hidden

footer
    margin-top: 2em
    

.dateline
    text-align: center
    time
        display: block

.postpic, .post-image
    float: left
    margin: 0 .625em .625em 0
    
.postpic, .postpicright
    width: auto
article img
    width: 95%
article object, article embed
    width: 100%
/* misc classes */
.hide
    display: none
    
//.formatted
//    column-count: 3
//    column-gap: 1.125em
//    -moz-column-count: 3
//    -moz-column-gap: 18px
//    -webkit-column-count: 3
//    -webkit-column-gap: 1.125em