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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
|
@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, .legend h3
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
#writing-archive article
border-bottom: 1px $brown dotted
//Photos
.figure
position: relative
margin: 0
.legend
display: block
+transparent_class
position: absolute
bottom: 0
left: 0
font-size: 13px
padding: 8px 0 8px 8px
width: auto
background: $brown
color: #999999
#photo-galleries
li
margin: 8px
position: relative
display: block
height: 350px
width: 100%
margin-bottom: 30px
.figure
height: 362px
width: 100%
margin: 0
.legend
padding: 10px
color: #888888
width: 85%
+transparent_class
line-height: 18px
text-align: left
h3
color: white
padding: 0
margin: 3px 0
font-size: .875em
p
margin: 0
// Maps
#map-canvas
border: 10px $brown solid
width: 95%
height: 300px
//.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
|
