mitlibraries-theme 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +10 -0
  3. data/.travis.yml +5 -0
  4. data/CODE_OF_CONDUCT.md +74 -0
  5. data/Gemfile +6 -0
  6. data/LICENSE.txt +21 -0
  7. data/README.md +76 -0
  8. data/Rakefile +10 -0
  9. data/app/helpers/link_helper.rb +22 -0
  10. data/app/views/layouts/_flash.html.erb +8 -0
  11. data/app/views/layouts/_global_alert.html.erb +9 -0
  12. data/app/views/layouts/_head.html.erb +46 -0
  13. data/app/views/layouts/_institute_footer.html.erb +17 -0
  14. data/app/views/layouts/_js_exception_handler.erb +4 -0
  15. data/app/views/layouts/_libraries_footer.html.erb +25 -0
  16. data/app/views/layouts/_site_footer.html.erb +1 -0
  17. data/app/views/layouts/_site_header.html.erb +17 -0
  18. data/app/views/layouts/_site_nav.html.erb +16 -0
  19. data/app/views/layouts/application.html.erb +39 -0
  20. data/bin/console +14 -0
  21. data/bin/setup +8 -0
  22. data/lib/mitlibraries/theme/version.rb +5 -0
  23. data/lib/mitlibraries/theme.rb +11 -0
  24. data/mitlibraries-theme.gemspec +29 -0
  25. data/vendor/assets/images/favicon.ico +0 -0
  26. data/vendor/assets/images/mitlib-wordmark.svg +1 -0
  27. data/vendor/assets/images/vi-shape7-tp.svg +1 -0
  28. data/vendor/assets/stylesheets/_core.scss +32 -0
  29. data/vendor/assets/stylesheets/elements/_content.scss +74 -0
  30. data/vendor/assets/stylesheets/elements/_controls.scss +156 -0
  31. data/vendor/assets/stylesheets/elements/_footer.scss +114 -0
  32. data/vendor/assets/stylesheets/elements/_forms.scss +151 -0
  33. data/vendor/assets/stylesheets/elements/_header.scss +92 -0
  34. data/vendor/assets/stylesheets/elements/_modules.scss +173 -0
  35. data/vendor/assets/stylesheets/elements/_tables.scss +112 -0
  36. data/vendor/assets/stylesheets/global/_base.scss +63 -0
  37. data/vendor/assets/stylesheets/global/_helpers.scss +161 -0
  38. data/vendor/assets/stylesheets/global/_layouts.scss +413 -0
  39. data/vendor/assets/stylesheets/global/_shame.scss +4 -0
  40. data/vendor/assets/stylesheets/global/_typography.scss +81 -0
  41. data/vendor/assets/stylesheets/global/_unsets.scss +29 -0
  42. data/vendor/assets/stylesheets/global/_variables.scss +117 -0
  43. data/vendor/assets/stylesheets/global/_vendor-overrides.scss +1 -0
  44. data/vendor/assets/stylesheets/js-elements/_expand-collapse.scss +35 -0
  45. data/vendor/assets/stylesheets/libraries-main.scss +17 -0
  46. metadata +172 -0
@@ -0,0 +1,413 @@
1
+ // layouts
2
+
3
+ // base layout styles for everyone!
4
+ .layout-band {
5
+ @include clearfix;
6
+ }
7
+
8
+ .wrap-gridband,
9
+ .wrap-notice,
10
+ .wrap-header,
11
+ .wrap-header-local,
12
+ .wrap-breadcrumb,
13
+ .wrap-content,
14
+ .wrap-footer,
15
+ .wrap-footer-institute {
16
+ @include clearfix;
17
+ max-width: 114rem;
18
+ margin: 0 auto;
19
+ padding: 10px 4%;
20
+ }
21
+
22
+ // generic grid options
23
+
24
+ .gridband {
25
+ @include clearfix;
26
+
27
+ .grid-item {
28
+ width: auto;
29
+ float: none;
30
+ }
31
+
32
+ // 2-col generic with overflow
33
+ &.layout-2c {
34
+
35
+ @media (min-width: $bp-screen-md) {
36
+ .grid-item {
37
+ float: left;
38
+ width: 48%;
39
+ margin-right: 3%;
40
+
41
+ &:nth-child(2n+0) {
42
+ float: right;
43
+ margin-right: 0;
44
+ }
45
+ }
46
+ }
47
+ }
48
+
49
+ // 3-col generic with overflow
50
+ &.layout-3c {
51
+
52
+ @media (min-width: $bp-screen-md) {
53
+ .grid-item {
54
+ float: left;
55
+ width: 32%;
56
+ margin-right: 2%;
57
+
58
+ &:nth-child(3n+3) {
59
+ float: right;
60
+ margin-right: 0;
61
+ }
62
+ }
63
+ }
64
+ }
65
+
66
+ // 4-col generic with overflow
67
+ &.layout-4c {
68
+
69
+ @media (min-width: $bp-screen-md) {
70
+ .grid-item {
71
+ float: left;
72
+ width: 23%;
73
+ margin-right: 2%;
74
+
75
+ &:nth-child(4n+4) {
76
+ float: right;
77
+ margin-right: 0;
78
+ }
79
+ }
80
+ }
81
+ }
82
+ }
83
+
84
+ // ----------------------------
85
+ // #HEADER - global, slim, local
86
+ // ----------------------------
87
+
88
+ // simplified slim header for light branding
89
+ .wrap-header {
90
+
91
+ .header-slim {
92
+
93
+ .logo-mit-lib img {
94
+ height: 35px;
95
+ }
96
+ }
97
+ }
98
+
99
+ .wrap-header-core,
100
+ .wrap-header-supp {
101
+ display: inline-block;
102
+ vertical-align: bottom;
103
+ }
104
+
105
+ .wrap-header-core {
106
+ width: 65%;
107
+ }
108
+
109
+ .wrap-header-supp {
110
+ width: 33%;
111
+
112
+ .link-logo-mit {
113
+ float: right;
114
+ }
115
+ }
116
+
117
+ // local header
118
+ .wrap-header-local {
119
+
120
+ .wrap-local-nav {
121
+ margin-top: 8px;
122
+
123
+ .nav-item {
124
+ @extend .button-subtle;
125
+ display: inline-block;
126
+ margin-right: 10px;
127
+ font-size: $fs-small;
128
+ text-decoration: none;
129
+
130
+ &.current {
131
+ border: 1px solid $brand-primary-accent;
132
+ }
133
+ }
134
+ }
135
+ }
136
+
137
+ // ----------------------------
138
+ // #CONTENT
139
+ // ----------------------------
140
+
141
+ .wrap-outer-content {
142
+ background-color: $white-t;
143
+ color: $black;
144
+ }
145
+
146
+ .wrap-content {
147
+ padding-top: 3rem;
148
+ padding-bottom: 2%;
149
+
150
+ .content-main {
151
+ padding-bottom: 3rem;
152
+ }
153
+ }
154
+
155
+ // 3/4 - 1/4 2-column layout
156
+ .layout-3q1q {
157
+
158
+ @media (min-width: $bp-screen-md) {
159
+
160
+ .col3q {
161
+ float: left;
162
+ width: 73%;
163
+ }
164
+
165
+ .col1q-r {
166
+ float: right;
167
+ width: 22%;
168
+ margin-left: 3%
169
+ }
170
+ }
171
+ }
172
+
173
+ // 1/4 - 3/4 2-column layout
174
+ .layout-1q3q {
175
+
176
+ @media (min-width: $bp-screen-md) {
177
+
178
+ .col1q {
179
+ float: left;
180
+ width: 22%;
181
+ margin-right: 3%
182
+ }
183
+
184
+ .col3q {
185
+ float: right;
186
+ width: 73%;
187
+ }
188
+ }
189
+ }
190
+
191
+ // 1/4 - 1/2 - 1/4 3-column layout
192
+ .layout-1q2q1q {
193
+
194
+ @media (min-width: $bp-screen-md) {
195
+
196
+ .col1q {
197
+ float: left;
198
+ width: 22%;
199
+ margin-right: 3%
200
+ }
201
+
202
+ .content-main {
203
+ float: left;
204
+ width: 48%;
205
+ margin-right: 3%
206
+ }
207
+
208
+ .col1q-r {
209
+ float: right;
210
+ width: 22%;
211
+ }
212
+ }
213
+ }
214
+
215
+ // 1/3 - 2/3 2-column layout
216
+ .layout-1t2t {
217
+
218
+ @media (min-width: $bp-screen-md) {
219
+ display: flex;
220
+
221
+ .col1t {
222
+ float: left;
223
+ width: 33%;
224
+ margin-right: 3%
225
+ }
226
+
227
+ .col2t {
228
+ float: right;
229
+ width: 63%;
230
+ }
231
+ }
232
+ }
233
+
234
+ // 2/3 - 1/3 2-column layout
235
+ .layout-2t1t {
236
+
237
+ @media (min-width: $bp-screen-md) {
238
+ display: flex;
239
+
240
+ .col2t {
241
+ float: left;
242
+ width: 63%;
243
+ margin-right: 3%
244
+ }
245
+
246
+ .col1t-r {
247
+ float: right;
248
+ width: 33%;
249
+ }
250
+ }
251
+ }
252
+
253
+
254
+
255
+ // ----------------------------
256
+ // #FOOTER - base and full
257
+ // ----------------------------
258
+
259
+ .wrap-footer {
260
+ padding: 3.5rem 4%;
261
+
262
+ .wrap-sitemap {
263
+
264
+ // hide the sub menu items on small screens
265
+ .menu-sub {
266
+ display: none;
267
+ }
268
+ }
269
+
270
+ .identity {
271
+ margin-top: 4rem;
272
+ margin-bottom: 2rem;
273
+ }
274
+
275
+ .wrap-logo-lib {
276
+ display: inline-block;
277
+ vertical-align: bottom;
278
+ margin: 0 20px 20px 0;
279
+ }
280
+
281
+ .wrap-social {
282
+ display: inline-block;
283
+ vertical-align: bottom;
284
+ margin-bottom: 20px;
285
+ }
286
+
287
+ .wrap-usergroups {
288
+ width: 100%;
289
+ border-top: 1px solid $gray;
290
+ padding-top: 2rem;
291
+
292
+ span {
293
+ display: inline-block;
294
+ margin: 1rem 1.5rem 1rem 0;
295
+
296
+ &:after {
297
+ content:'';
298
+ }
299
+ }
300
+ }
301
+
302
+ .wrap-social .text-find-us {
303
+ display: none;
304
+ }
305
+
306
+ // bigger than small mobile - able to handle columns ok
307
+ @media (min-width: $bp-screen-md) {
308
+
309
+ .wrap-sitemap {
310
+ display: flex;
311
+ flex-direction: row;
312
+
313
+ .col {
314
+ margin-right: 3%;
315
+
316
+ &:last-child {
317
+ margin-right: 0;
318
+ }
319
+ }
320
+
321
+ .menu-sub {
322
+ display: block;
323
+ }
324
+ }
325
+
326
+ .identity {
327
+ display: flex;
328
+ flex-wrap: wrap;
329
+ justify-content: space-between;
330
+ margin: 4% 0 0 0;
331
+ }
332
+
333
+ .wrap-logo-lib,
334
+ .wrap-usergroups,
335
+ .wrap-social {
336
+ align-self: flex-end;
337
+ margin-top: 0;
338
+ margin-bottom: 0;
339
+ }
340
+
341
+ .wrap-logo-lib {
342
+ order: 1;
343
+ margin-right: 4%;
344
+ }
345
+
346
+ .wrap-usergroups {
347
+ order: 3;
348
+ width: 100%;
349
+ margin: 1rem 4% 0 0;
350
+ border-top: none;
351
+
352
+ span {
353
+ margin-top: 0;
354
+ margin-bottom: 0;
355
+ }
356
+ }
357
+
358
+ .wrap-social {
359
+ order: 2;
360
+ margin-left: 4%;
361
+ }
362
+ }
363
+
364
+ // large screen - able to handle several inline items
365
+ @media (min-width: $bp-screen-lg) {
366
+
367
+ .wrap-usergroups {
368
+ order: 2;
369
+ width: auto;
370
+ }
371
+
372
+ .wrap-social {
373
+ order: 3;
374
+ }
375
+ }
376
+ }
377
+
378
+ // footer - adjustments for slim
379
+ .wrap-footer.footer-slim {
380
+ padding: 1.5rem 4%;
381
+
382
+ .footer-main {
383
+ display: flex;
384
+ align-items: center;
385
+ }
386
+
387
+ .wrap-sitemap {
388
+ margin-left: 2%;
389
+
390
+ .item {
391
+ display: block;
392
+ margin-right: 10px;
393
+ }
394
+ }
395
+
396
+ // larger screen - able to handle several inline items
397
+ @media (min-width: $bp-screen-md) {
398
+
399
+ .footer-main {
400
+ align-items: baseline;
401
+ }
402
+
403
+ .wrap-sitemap .item {
404
+ display: inline-block;
405
+ }
406
+ }
407
+ }
408
+
409
+ // mit institute footer
410
+ .wrap-footer-institute {
411
+ padding: 20px 4%;
412
+ }
413
+
@@ -0,0 +1,4 @@
1
+ // remove the forms required asterisk abbr underline
2
+ abbr.required {
3
+ text-decoration: none;
4
+ }
@@ -0,0 +1,81 @@
1
+ // general typography helpers
2
+
3
+ // headers
4
+ .hd-1 {
5
+ margin-bottom: .5em;
6
+ font-size: $fs-xxxlarge;
7
+ line-height: $lh-tight;
8
+ font-weight: $fw-bold;
9
+ }
10
+
11
+ .hd-2 {
12
+ margin-bottom: .5em;
13
+ font-size: $fs-xxlarge;
14
+ line-height: $lh-tight;
15
+ font-weight: $fw-bold;
16
+ }
17
+
18
+ .hd-3 {
19
+ margin-bottom: .5em;
20
+ font-size: $fs-xlarge;
21
+ line-height: $lh-tight;
22
+ font-weight: $fw-normal;
23
+ }
24
+
25
+ .hd-4 {
26
+ margin-bottom: .5em;
27
+ font-size: $fs-large;
28
+ line-height: $lh-tight;
29
+ font-weight: $fw-bold;
30
+ }
31
+
32
+ .hd-5 {
33
+ margin-bottom: .5em;
34
+ font-size: $fs-base;
35
+ line-height: $lh-tight;
36
+ font-weight: $fw-bold;
37
+ }
38
+
39
+ .hd-6 {
40
+ margin-bottom: .5em;
41
+ font-size: $fs-base;
42
+ line-height: $lh-tight;
43
+ font-weight: $fw-bold;
44
+ }
45
+
46
+ .hd-subtitle1 {
47
+ margin-bottom: .5em;
48
+ font-size: $fs-base;
49
+ text-transform: uppercase;
50
+ }
51
+
52
+ .hd-subtitle2 {
53
+ margin-bottom: .5em;
54
+ font-size: $fs-small;
55
+ text-transform: uppercase;
56
+ }
57
+
58
+ .hd-subtitle3 {
59
+ margin-bottom: .5em;
60
+ font-size: $fs-xsmall;
61
+ text-transform: uppercase;
62
+ }
63
+
64
+ // copy
65
+
66
+ .copy-lead {
67
+ font-size: $fs-xlarge;
68
+ }
69
+
70
+ .copy-base {
71
+ font-size: $fs-base;
72
+ }
73
+
74
+ .copy-sup {
75
+ font-size: $fs-xsmall;
76
+ }
77
+
78
+ .copy-micro {
79
+ font-size: $fs-xxsmall;
80
+ font-weight: $fw-normal;
81
+ }
@@ -0,0 +1,29 @@
1
+ // clear base browser styling
2
+
3
+ h1, h2, h3, h4, h5, h6 {
4
+ margin: 0;
5
+ font-weight: normal;
6
+ font-size: 1rem;
7
+ line-height: 1;
8
+ }
9
+
10
+ p,
11
+ ol,
12
+ ul,
13
+ dl {
14
+ margin: 0 0 1em 0;
15
+ }
16
+
17
+ img {
18
+ max-width: 100%;
19
+ vertical-align: middle;
20
+ }
21
+
22
+ a {
23
+ text-decoration: none;
24
+ }
25
+
26
+ input[type=checkbox],
27
+ input[type=radio] {
28
+ margin-right: .5rem;
29
+ }
@@ -0,0 +1,117 @@
1
+
2
+ // ----------------------------
3
+ // #SETTINGS
4
+ // ----------------------------
5
+ $image-path: '/dest/i' !default;
6
+
7
+ // ----------------------------
8
+ // #GRID
9
+ // ----------------------------
10
+
11
+ // grid - breakpoints
12
+ $bp-screen-sm: 480px;
13
+ $bp-screen-md: 768px;
14
+ $bp-screen-lg: 1024px;
15
+ $bp-screen-xl: 1280px;
16
+
17
+
18
+ // ----------------------------
19
+ // #COLORS
20
+ // ----------------------------
21
+
22
+ // colors - grayscale
23
+ $black: #000;
24
+ $black-t: #000; // true black
25
+ $white: #fff;
26
+ $white-warm: #ede8e2;
27
+ $white-t: #fff; // true white
28
+ $gray: #595959; // accessible on #f3f3f3
29
+ $gray-d1: #333;
30
+ $gray-d2: #222;
31
+ $gray-l1: #767676; // accessible on #fff
32
+ $gray-l2: #ccc;
33
+ $gray-l3: #dedede;
34
+ $gray-l4: #f3f3f3;
35
+ $gray-warm: #c6b6a3;
36
+ $transparent: rgba(0, 0, 0, 0); // transparent black
37
+ $transparent-w: rgba(255,255,255,0); // transparent white
38
+ $glare: rgba($white-t, .3);
39
+ $shadow: rgba($black-t, .5);
40
+ $smoke: rgba($gray, .3);
41
+ $wisp: rgba($gray, .1);
42
+
43
+ // pentagram colors - named
44
+ $magenta: #FF00FF;
45
+ $red: #FF0000;
46
+ $orange: #FF7700;
47
+ $yellow: #FFC800;
48
+ $green: #00C800;
49
+ $blue: #0000FF;
50
+ $blue-bright: #00C8FF;
51
+
52
+ // pentagram colors secondary
53
+ $magenta-muted: #C702C7;
54
+ $red-muted: #D50606;
55
+ $orange-muted: #E46212;
56
+ $yellow-muted: #FFC422;
57
+ $green-muted: #008700;
58
+ $blue-muted: #1A1A83;
59
+ $blue-bright-muted: #04A6CF;
60
+
61
+
62
+ // colors - brand
63
+ $brand-primary: $black;
64
+ $brand-primary-accent: $blue;
65
+ $brand-primary2: $blue-bright; // accessible on dark
66
+ $brand-secondary: $magenta-muted;
67
+
68
+ // colors - utilities
69
+ $success: $green-muted;
70
+ $warning: $yellow;
71
+ $error: $red-muted;
72
+ $informational: $gray;
73
+
74
+
75
+ // ----------------------------
76
+ // #TYPOGRAPHY
77
+ // ----------------------------
78
+
79
+ $base-font: 'Helvetica Neue', Helvetica, Arial, 'Open Sans', sans-serif;
80
+ $alt-fonts: 'Georgia', Cambria, 'Times New Roman', Times, serif;
81
+
82
+ // font-sizes and line-heights
83
+ $fs-xxxsmall: .9rem;
84
+ $fs-xxsmall: 1rem;
85
+ $fs-xsmall: 1.2rem;
86
+ $fs-smallish: 1.3rem;
87
+ $fs-small: 1.4rem;
88
+ $fs-base: 1.6rem;
89
+ $fs-large: 2.0rem;
90
+ $fs-xlarge: 2.8rem;
91
+ $fs-xxlarge: 3.6rem;
92
+ $fs-xxxlarge: 4.2rem;
93
+ $fs-xxxxlarge: 4.8rem;
94
+
95
+ $fw-bold: 600;
96
+ $fw-normal: 400;
97
+ $fw-light: 300;
98
+
99
+ $lh-xtight: .92;
100
+ $lh-tight: 1;
101
+ $lh-base: 1.2;
102
+ $lh-loose: 1.5;
103
+ $lh-xloose: 1.7;
104
+
105
+
106
+ // ----------------------------
107
+ // #DEPTH
108
+ // ----------------------------
109
+
110
+ $z-depth-way-back: -1000;
111
+ $z-depth-back: -100;
112
+ $z-depth-lil-back: -10;
113
+ $z-depth-base: 1;
114
+ $z-depth-lil-front: 10;
115
+ $z-depth-front: 100;
116
+ $z-depth-way-front: 1000;
117
+
@@ -0,0 +1 @@
1
+ // Styles needed to override vendor stuff
@@ -0,0 +1,35 @@
1
+ .no-js {
2
+ .expand-collapse-control {
3
+ display: none;
4
+ }
5
+ }
6
+
7
+ .js {
8
+ .expand-collapse-wrap {
9
+ position: relative;
10
+ overflow: hidden;
11
+ margin-bottom: 2rem;
12
+ padding-bottom: 2rem;
13
+ transition: height 200ms;
14
+ }
15
+
16
+ .expand-container {
17
+ margin-bottom: 4rem;
18
+ }
19
+
20
+ .expand-collapse-control {
21
+ position: absolute;
22
+ bottom: 0;
23
+ left: 0;
24
+ width: 100%;
25
+ margin: 0;
26
+ padding: 4rem .5rem .5rem .5rem;
27
+ background: #fff; // fallback
28
+ background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #f3f3f3 50%);
29
+
30
+ .button {
31
+ @extend %unbutton;
32
+ @extend .button-secondary;
33
+ }
34
+ }
35
+ }
@@ -0,0 +1,17 @@
1
+ // ------------------------------
2
+ // MIT Libraries Build Compile - LTR
3
+ // this compile makes a plain base css that includes everything for
4
+ // header, footer, and basic content styling across apps
5
+
6
+ // +Get the core styles
7
+ // ====================
8
+ @import 'core';
9
+
10
+ // +Select styles that need js
11
+ @import 'js-elements/expand-collapse';
12
+
13
+ // TODO - split this into a separate compile
14
+ // app specific styles
15
+ // ====================
16
+ //@import 'apps/ebooks';
17
+ //@import 'apps/quicksubmit';