custom.scss 4.59 KB
Newer Older
Jonathan McGlone's avatar
Jonathan McGlone committed
1
// colors and theming
2
$theme-colors: (
Jonathan McGlone's avatar
Jonathan McGlone committed
3
4
5
  "primary": #40658f,
  "secondary": #003352,
  "muted": #EAEAEA
6
7
);

Jonathan McGlone's avatar
Jonathan McGlone committed
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

@import "../bootstrap/scss/bootstrap";

// typography
@mixin meta-serif {
  font-family: "ff-meta-serif-web-pro", Georgia, "Times New Roman", serif;
}

.meta-serif {
  @include meta-serif;
}

@mixin scala-sans {
  font-family: "ff-scala-sans-pro", Helvetica, Arial, sans-serif;
}

.scala-sans {
  @include scala-sans;
}

body {
  @include meta-serif;
}

h1,
h2,
h3,
h4,
h5 {
    @include scala-sans;
    font-weight: 700;
Seth A Johnson's avatar
Seth A Johnson committed
39
40
}

41
42
43
44
45
46
47
48
49
50
h2 {
  margin-top: 2rem;
}

h3, 
h4,
h5 {
  margin-top: 1.5rem;
}

Jonathan McGlone's avatar
Jonathan McGlone committed
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
// colors
$lever-brand-color: #003352;
$lever-accent-color: #78B3E0;
$lever-black-80: #342f2e;

// links
p {
  a {
  text-decoration: underline;
  }
}

// buttons
.btn {
  @include scala-sans;
}


// navigation
70
.navbar {
Jonathan McGlone's avatar
Jonathan McGlone committed
71
72
  @include scala-sans;

73
  min-height: 6rem;
Jonathan McGlone's avatar
Jonathan McGlone committed
74

75
76
77
78
79
80
81
  .navbar-brand h1 {
    font-size: 1.6rem;
    margin: initial;
    display: inline;
    font-weight: 400;
  }

Jonathan McGlone's avatar
Jonathan McGlone committed
82
83
84
85
  .navbar-brand-logo {
    vertical-align: middle;
  }

Seth A Johnson's avatar
Seth A Johnson committed
86
87
}

88
89
// page
.page-container {
90
91
  padding-top: 5rem;
  padding-bottom: 5rem;
Seth A Johnson's avatar
Seth A Johnson committed
92
93
}

Jonathan McGlone's avatar
Jonathan McGlone committed
94
95
96
97
98
99
100
101
102
103
104
// cards

.card {
  border-radius: 0;

  picture,
  source {
    line-height: 0;
  };
}

Seth A Johnson's avatar
Seth A Johnson committed
105

106
107
108
// home
.books-container {
  padding: 3rem 0;
Seth A Johnson's avatar
Seth A Johnson committed
109

110
  .book-card-list {
111
112
    justify-content: space-evenly;
  }
113
114
115
116

  .book-card-covers-only-list {
    
  }
117
  
118
  // home - books
119
  .book-card {
120
    max-width: 540px;
Seth A Johnson's avatar
Seth A Johnson committed
121

122
123
124
125
126
    h3 {
      font-size: 1.25rem;
      margin-top: 0;
    }

127
128
    .card-img {
      border-radius: 0;
129
      max-height: 300px;
130
    }
Seth A Johnson's avatar
Seth A Johnson committed
131

132
133
134
135
    .card-text {
      font-size: .9rem;
    }

Seth A Johnson's avatar
Seth A Johnson committed
136
137
138
    .cover-only-img {
      min-width: 200px;
    }
Seth A Johnson's avatar
Seth A Johnson committed
139
  }
Seth A Johnson's avatar
Seth A Johnson committed
140
141
}

142
// home - tagline and newsletter button
143
.tagline-catalog-container {
Jonathan McGlone's avatar
Jonathan McGlone committed
144
  background-color: $lever-brand-color;
145
146
  padding: 4rem 0;
  border-top: 1px solid rgba(0,0,0,.125);
Seth A Johnson's avatar
Seth A Johnson committed
147

148
149
  .tagline {
    font-weight: bold;
Jonathan McGlone's avatar
Jonathan McGlone committed
150
    font-size: 1.6rem;
151
    margin-left: 1.5em;
Seth A Johnson's avatar
Seth A Johnson committed
152
  }
Seth A Johnson's avatar
Seth A Johnson committed
153
154
}

155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
// home - catalog
.catalog-wrapper {
  display: flex;
  flex-direction: column;
  text-align: center;

  figure {
    display: flex;
    justify-content: center;
  }

}
.catalog-image {
  width: 95px;
}

171
// home - for authors/for libraries, impact report
172
.author-library-container {
173
  padding: 1.5rem 0;
174
175
  border-bottom: 1px solid rgba(0,0,0,.125);
  border-top: 1px solid rgba(0,0,0,.125);
176
177
178
179

  .author-container, .newsletter-container, .library-container {
    margin: 15px 0;
  }
180
}
Seth A Johnson's avatar
Seth A Johnson committed
181

182
183
.video-impact-container {
  border-bottom: 1px solid rgba(0,0,0,.125);
184
  background-color: #f8f9fa;
185
186
}

187
.news-events-container, .video-impact-container {
188
189
  padding-top: 3rem;
  padding-bottom: 3rem;
190
191
  h2 {
    margin-bottom: 1rem;
Seth A Johnson's avatar
Seth A Johnson committed
192
  }
Seth A Johnson's avatar
Seth A Johnson committed
193
194
}

195
196
197
198
199
// video
.video-embed {
  margin-bottom: 1rem;
}

200
// news and events on homepage and individual pages
201
202
203
.post-image {
  max-height: 500px;
  overflow: hidden;
204
205
206
207
  margin-bottom: 2em;
  margin-top: 2em;
}

208
209
210
211
212
213
.news {
  p {
    line-height: 1.7;
  }
}

214
215
216
.summary {

    p {
217
      font-size: 1.3rem;
218
      margin-bottom: 0;
219
220
      @include scala-sans;
      line-height: 1.5;
221
222
223
224
225
226
    }

    h4 {
      font-size: .9em;
      margin-top: .2em !important;
    }
227
228
229
}

.blog-card-container {
230
231
232
233
234
235
236
237
238

  a:hover {
    text-decoration: none;
  }

  .card:hover {
    border: 1px solid $lever-brand-color;
  }

239
240
241
242
243
244
  .card-image {
    max-height: 300px;
    overflow: hidden;
  }
}

245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
// join

.join-us {
  padding-top: 0;

  img {
    margin-bottom: 2rem;
  }

}

.join-us h2 {
  margin-top: 1rem;
}

.jumbotron {
  background-color: $lever-brand-color;
  margin-bottom: 4rem;
}

.featurette-divider {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.join-jumbo {
  h1, p {
    color: #f8f9fa;
  }
  p.join-tag {
    color: $lever-accent-color;
    font-size: 1.5rem;
    margin-bottom: 0;
  }
}

.intro {
  text-transform: uppercase;
  font-size: 1.4rem;
}

thead {
  background-color: $lever-brand-color;
  color: #f8f9fa;
}

.join-h3 {
  text-transform: uppercase;
  font-size: 1.4rem;
}

ol.join {
  font-size: 1.25rem;
}

300
301
302
303
.cta-bottom {
  padding-top: 4em;
}

304
305
306
307
308
// impact
.map {
  height: 60%;
}

309
310
311
312
313
314
315
316
.map-container a:hover {
  text-decoration: none;
  img {
    filter: grayscale(80%);
    filter: contrast(50%);
  }
}

317
318
319
320
321
322
323
324
325
326
327
328
p.social {
  padding-top: .4em;
  a {
    padding-right: 0.75em;
    svg {
      display: inline-block;
      vertical-align: middle;
      fill: $lever-brand-color;
    }
  }
}

Seth A Johnson's avatar
Seth A Johnson committed
329
// footer
330
.footer {
Jonathan McGlone's avatar
Jonathan McGlone committed
331
  background-color: $lever-brand-color;
332
333
  border-top: 1px solid rgba(0,0,0,.125);
  padding: 3rem 0;
334

Jonathan McGlone's avatar
Jonathan McGlone committed
335
336
337
  .fulcrum {
    vertical-align: baseline;
  }
338

339
340
341
342
343
344
345
346
347
348
349
  .block {
    display: block;
  }

  p.social {
    padding-top: .4em;
    a {
      padding-right: 0.75em;
      svg {
        display: inline-block;
        vertical-align: middle;
Jonathan McGlone's avatar
Jonathan McGlone committed
350
        fill: $lever-accent-color;
351
352
353
354
      }
    }
  }

Seth A Johnson's avatar
Seth A Johnson committed
355
}
356

Jonathan McGlone's avatar
Jonathan McGlone committed
357