ratchet_design 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (78) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE.txt +21 -0
  3. data/README.md +41 -0
  4. data/app/assets/images/ratchet/favicon.ico +0 -0
  5. data/app/assets/javascripts/ratchet/_svg.js +55 -0
  6. data/app/assets/javascripts/ratchet/base/form.js +220 -0
  7. data/app/assets/javascripts/ratchet/base/mobilemenu.js +62 -0
  8. data/app/assets/javascripts/ratchet/base/validation.js +230 -0
  9. data/app/assets/javascripts/ratchet/core.js +92 -0
  10. data/app/assets/javascripts/ratchet/enhancement/_collapse.js +96 -0
  11. data/app/assets/javascripts/ratchet/enhancement/_lightbox.js +93 -0
  12. data/app/assets/javascripts/ratchet/enhancement/_swap.js +120 -0
  13. data/app/assets/javascripts/ratchet/enhancement/_switcheroo.js +28 -0
  14. data/app/assets/javascripts/ratchet/enhancement/_textcounter.js +92 -0
  15. data/app/assets/javascripts/ratchet/enhancement/loader.js +77 -0
  16. data/app/assets/javascripts/ratchet/enhancement/notice.js +70 -0
  17. data/app/assets/javascripts/ratchet/enhancement/sticky.js +128 -0
  18. data/app/assets/javascripts/ratchet/enhancement/waypoints.js +328 -0
  19. data/app/assets/javascripts/ratchet/shim/classlist.js +234 -0
  20. data/app/assets/javascripts/ratchet/shim/object.assign.js +30 -0
  21. data/app/assets/javascripts/ratchet/utility/compile_data.js +32 -0
  22. data/app/assets/javascripts/ratchet/utility/from_top.js +14 -0
  23. data/app/assets/javascripts/ratchet/utility/full_stop.js +55 -0
  24. data/app/assets/javascripts/ratchet/utility/get_closest.js +20 -0
  25. data/app/assets/javascripts/ratchet/utility/get_next.js +17 -0
  26. data/app/assets/javascripts/ratchet/utility/load_font.js +72 -0
  27. data/app/assets/javascripts/ratchet/utility/load_script.js +34 -0
  28. data/app/assets/javascripts/ratchet/utility/matches.js +15 -0
  29. data/app/assets/javascripts/ratchet/utility/scroll_to.js +74 -0
  30. data/app/assets/javascripts/ratchet/utility/throttle.js +25 -0
  31. data/app/assets/javascripts/ratchet/utility/timeout.js +45 -0
  32. data/app/assets/javascripts/ratchet/utility/unhover.js +56 -0
  33. data/app/assets/javascripts/ratchet/utility/word_count.js +15 -0
  34. data/app/assets/stylesheets/ratchet/_core.scss +20 -0
  35. data/app/assets/stylesheets/ratchet/base/_button.scss +101 -0
  36. data/app/assets/stylesheets/ratchet/base/_document.scss +306 -0
  37. data/app/assets/stylesheets/ratchet/base/_form.scss +614 -0
  38. data/app/assets/stylesheets/ratchet/base/_list.scss +114 -0
  39. data/app/assets/stylesheets/ratchet/base/_media.scss +41 -0
  40. data/app/assets/stylesheets/ratchet/base/_table.scss +81 -0
  41. data/app/assets/stylesheets/ratchet/base/_text.scss +411 -0
  42. data/app/assets/stylesheets/ratchet/enhancement/_contrast-section.scss +22 -0
  43. data/app/assets/stylesheets/ratchet/enhancement/_feature.scss +49 -0
  44. data/app/assets/stylesheets/ratchet/enhancement/_hero.scss +44 -0
  45. data/app/assets/stylesheets/ratchet/enhancement/_loader.scss +109 -0
  46. data/app/assets/stylesheets/ratchet/enhancement/_notice.scss +74 -0
  47. data/app/assets/stylesheets/ratchet/enhancement/_signup.scss +206 -0
  48. data/app/assets/stylesheets/ratchet/enhancement/_sticky-sidebar.scss +36 -0
  49. data/app/assets/stylesheets/ratchet/fonts-woff.css +55 -0
  50. data/app/assets/stylesheets/ratchet/fonts-woff2.css +55 -0
  51. data/app/assets/stylesheets/ratchet/utility/_global.scss +255 -0
  52. data/app/assets/stylesheets/ratchet/utility/_grid.scss +102 -0
  53. data/app/assets/svgs/ratchet/facebook.svg +1 -0
  54. data/app/assets/svgs/ratchet/github.svg +1 -0
  55. data/app/assets/svgs/ratchet/google-plus.svg +1 -0
  56. data/app/assets/svgs/ratchet/ibm.svg +1 -0
  57. data/app/assets/svgs/ratchet/inbox.svg +1 -0
  58. data/app/assets/svgs/ratchet/linkedin.svg +1 -0
  59. data/app/assets/svgs/ratchet/ratchet.svg +1 -0
  60. data/app/assets/svgs/ratchet/search.svg +1 -0
  61. data/app/assets/svgs/ratchet/subscribe.svg +1 -0
  62. data/app/assets/svgs/ratchet/twitter.svg +1 -0
  63. data/app/assets/svgs/ratchet/y-combinator.svg +1 -0
  64. data/app/helpers/ratchet/application_helper.rb +51 -0
  65. data/app/views/layouts/ratchet/default.html.slim +61 -0
  66. data/app/views/shared/ratchet/_footer.html.slim +2 -0
  67. data/app/views/shared/ratchet/_header.html.slim +17 -0
  68. data/app/views/shared/ratchet/_icons.html.slim +89 -0
  69. data/lib/ratchet_design.rb +12 -0
  70. data/lib/ratchet_design/version.rb +3 -0
  71. data/public/assets/ratchet/core-0.1.0.js +103 -0
  72. data/public/assets/ratchet/core-0.1.0.js.gz +0 -0
  73. data/public/assets/ratchet/core-0.1.0.map.json +1 -0
  74. data/public/assets/ratchet/fonts-woff-0.1.0.css +55 -0
  75. data/public/assets/ratchet/fonts-woff-0.1.0.css.gz +0 -0
  76. data/public/assets/ratchet/fonts-woff2-0.1.0.css +55 -0
  77. data/public/assets/ratchet/fonts-woff2-0.1.0.css.gz +0 -0
  78. metadata +177 -0
@@ -0,0 +1,34 @@
1
+ /**
2
+ * LoadScript 0.0.1
3
+ * Load external JavaScript function
4
+ * @author Kyle Foster (@hkfoster)
5
+ * @license MIT
6
+ **/
7
+
8
+ // Public API function
9
+ var loadScript = function( url, callback ) {
10
+
11
+ // Create a <script> element
12
+ var script = document.createElement( 'script' );
13
+
14
+ // Make it async
15
+ script.async = true;
16
+
17
+ // Set source to passed URL
18
+ script.src = url;
19
+
20
+ // Append it to document head
21
+ document.head.appendChild( script );
22
+
23
+ // Add load event listener
24
+ script.addEventListener( 'load', function() {
25
+
26
+ // And if a callback is passed, run it
27
+ if ( callback ) callback();
28
+
29
+ }, false );
30
+
31
+ };
32
+
33
+ // Public API
34
+ module.exports = loadScript;
@@ -0,0 +1,15 @@
1
+ /**
2
+ * Matches 0.0.1
3
+ * Matches selector function
4
+ * @author Kyle Foster (@hkfoster)
5
+ * @reference https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
6
+ * @license MIT
7
+ **/
8
+
9
+ // Public API function
10
+ var matches = function ( el, selector ) {
11
+ return ( el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector ).call( el, selector );
12
+ };
13
+
14
+ // Public API
15
+ module.exports = matches;
@@ -0,0 +1,74 @@
1
+ /**
2
+ * ScrollTo 0.0.1
3
+ * Scroll to element function
4
+ * @author James Doyle (@james2doyle) & Kyle Foster (@hkfoster)
5
+ * @source https://goo.gl/CeY8fY
6
+ * @license MIT
7
+ **/
8
+
9
+ // Public API function
10
+ var scrollTo = function( to, callback, duration ) {
11
+
12
+ // Scoped variables
13
+ var start = position(),
14
+ change = to - start,
15
+ currTime = 0,
16
+ increment = 20;
17
+ duration = ( typeof( duration ) === 'undefined' ) ? 500 : duration;
18
+
19
+ // Kick off scroll animation
20
+ animateScroll();
21
+
22
+ // Easing function - http://goo.gl/5HLl8
23
+ function easeInOutQuad( t, b, c, d ) {
24
+ t /= d / 2;
25
+ if ( t < 1 ) {
26
+ return c / 2 * t * t + b;
27
+ }
28
+ t--;
29
+ return -c / 2 * ( t * ( t - 2 ) - 1 ) + b;
30
+ }
31
+
32
+ // Get current scroll position
33
+ function position() {
34
+ return document.documentElement.scrollTop ||
35
+ document.body.parentNode.scrollTop ||
36
+ document.body.scrollTop;
37
+ }
38
+
39
+ // Move scroll position
40
+ function move( amount ) {
41
+ document.documentElement.scrollTop = amount;
42
+ document.body.parentNode.scrollTop = amount;
43
+ document.body.scrollTop = amount;
44
+ }
45
+
46
+ // Scroll animation function
47
+ function animateScroll() {
48
+
49
+ // Increment the time
50
+ currTime += increment;
51
+
52
+ // Find the value with the quadratic in-out easing function
53
+ var val = easeInOutQuad( currTime, start, change, duration );
54
+
55
+ // Move the document.body
56
+ move( val );
57
+
58
+ // Do the animation unless its over
59
+ if ( currTime < duration ) {
60
+ requestAnimationFrame( animateScroll );
61
+ }
62
+
63
+ // The animation is done so let’s callback
64
+ else {
65
+ if ( callback && typeof( callback ) === 'function' ) {
66
+ callback();
67
+ }
68
+ }
69
+ }
70
+
71
+ };
72
+
73
+ // Public API
74
+ module.exports = scrollTo;
@@ -0,0 +1,25 @@
1
+ /**
2
+ * Throttle 0.0.1
3
+ * Event throttle function
4
+ * @author Kyle Foster (@hkfoster)
5
+ * @reference http://www.html5rocks.com/en/tutorials/speed/animations/
6
+ * @license MIT
7
+ **/
8
+
9
+ // Public API function
10
+ var throttle = function ( type, name, obj ) {
11
+ obj = obj || window;
12
+ var running = false;
13
+ var func = function () {
14
+ if ( running ) { return; }
15
+ running = true;
16
+ requestAnimationFrame( function () {
17
+ obj.dispatchEvent( new CustomEvent( name ) );
18
+ running = false;
19
+ });
20
+ };
21
+ obj.addEventListener( type, func );
22
+ };
23
+
24
+ // Public API
25
+ module.exports = throttle;
@@ -0,0 +1,45 @@
1
+ /**
2
+ * Timeout 0.0.1
3
+ * Just like setTimeout & clearTimeout, but with requestAnimationFrame()
4
+ * @author Joe Lambert (@joelambert) & Kyle Foster (@hkfoster)
5
+ * @source https://gist.github.com/joelambert/1002116#file-requesttimeout-js
6
+ * @license MIT
7
+ **/
8
+
9
+ // Public API object
10
+ var timeout = {
11
+
12
+ // Set timeout function
13
+ set : function( fn, delay, args ) {
14
+
15
+ var start = Date.now(),
16
+ handle = {};
17
+
18
+ function loop() {
19
+
20
+ var current = Date.now(),
21
+ delta = current - start;
22
+
23
+ if ( delta >= delay ) {
24
+ if ( args !== undefined ) {
25
+ fn.call( fn, args );
26
+ } else {
27
+ fn.call( fn );
28
+ }
29
+ } else {
30
+ handle.value = requestAnimationFrame( loop );
31
+ }
32
+ }
33
+
34
+ handle.value = requestAnimationFrame( loop );
35
+ return handle;
36
+ },
37
+
38
+ // Clear timeout function
39
+ clear : function( handle ) {
40
+ window.cancelAnimationFrame( handle.value );
41
+ }
42
+ };
43
+
44
+ // Public API
45
+ module.exports = timeout;
@@ -0,0 +1,56 @@
1
+ /**
2
+ * Unhover 0.0.1
3
+ * Disable hover events on scroll
4
+ * @author Kyle Foster (@hkfoster)
5
+ * @license MIT
6
+ **/
7
+
8
+ // Dependencies
9
+ var throttle = require( '../utility/throttle' ),
10
+ timeout = require( '../utility/timeout' );
11
+
12
+ // Public API function
13
+ var unhover = function( settings ) {
14
+
15
+ // Overridable defaults
16
+ var defaults = {
17
+ scrollDelay : 150
18
+ };
19
+
20
+ // Scoped variables
21
+ var options = Object.assign( {}, defaults, settings ),
22
+ docElem = document.documentElement,
23
+ scrollTimer;
24
+
25
+ // Scroll handler function
26
+ function scrollHandler() {
27
+
28
+ // Clear timer (if it exists)
29
+ if ( scrollTimer ) timeout.clear( scrollTimer );
30
+
31
+ // Turn off pointer events
32
+ if ( !docElem.style.pointerEvents ) {
33
+ docElem.style.pointerEvents = 'none';
34
+ }
35
+
36
+ // Check to see if scroll is over
37
+ scrollTimer = timeout.set( function() {
38
+
39
+ // And reset pointer events upon completion
40
+ docElem.style.pointerEvents = '';
41
+
42
+ // Delay firing function based on argument passed
43
+ }, options.scrollDelay );
44
+
45
+ }
46
+
47
+ // Scroll throttle function init
48
+ throttle( 'scroll', 'optimizedscroll' );
49
+
50
+ // Scroll function listener
51
+ window.addEventListener( 'optimizedscroll', scrollHandler, false );
52
+
53
+ };
54
+
55
+ // Public API
56
+ module.exports = unhover;
@@ -0,0 +1,15 @@
1
+ /**
2
+ * WordCount 0.0.1
3
+ * Word counter function
4
+ * @author Kyle Foster (@hkfoster)
5
+ * @license MIT
6
+ **/
7
+
8
+ // Public API function
9
+ var wordCount = function( str ) {
10
+ var matches = str.match( /\S+/g );
11
+ return matches ? matches.length : 0;
12
+ };
13
+
14
+ // Public API
15
+ module.exports = wordCount;
@@ -0,0 +1,20 @@
1
+ // Utility modules
2
+ @import 'utility/global';
3
+ @import 'utility/grid';
4
+
5
+ // Base modules
6
+ @import 'base/text';
7
+ @import 'base/list';
8
+ @import 'base/button';
9
+ @import 'base/media';
10
+ @import 'base/form';
11
+ @import 'base/table';
12
+ @import 'base/document';
13
+
14
+ // Enhancement modules
15
+ @import 'enhancement/loader';
16
+ @import 'enhancement/feature';
17
+ @import 'enhancement/sticky-sidebar';
18
+ @import 'enhancement/notice';
19
+ @import 'enhancement/hero';
20
+ @import 'enhancement/contrast-section';
@@ -0,0 +1,101 @@
1
+ /* ========================================================================== *
2
+ * c. Button module
3
+ * -------------------------------------------------------------------------- */
4
+
5
+ /* ===================================== *
6
+ * i. Utility
7
+ * ------------------------------------- */
8
+
9
+ // Resizable / colorable buttons
10
+ @mixin button($color: $cerulean, $size: normal, $fill: on, $bevel: off) {
11
+
12
+ // Define default variables
13
+ $font-size: 16px;
14
+ $color: $color;
15
+ $padding: 6px 20px;
16
+ $margin-top: 15px;
17
+ $margin-bottom: 31px;
18
+ $border-radius: if($bevel == on, 100px, $radius);
19
+
20
+ // Define color-based variables
21
+ @if $color == primary {
22
+ $color: $cerulean;
23
+ } @else if $color == secondary {
24
+ $color: $flush;
25
+ } @else if $color == success {
26
+ $color: $lima;
27
+ } @else if $color == failure {
28
+ $color: $punch;
29
+ }
30
+
31
+ // Define size-based variables
32
+ @if $size == small {
33
+ $font-size: 13px;
34
+ $padding: 3px 14px 0;
35
+ $margin-top: 15px;
36
+ $margin-bottom: 20px;
37
+ } @else if $size == large {
38
+ $padding: 10px 24px;
39
+ $margin-top: 15px;
40
+ $margin-bottom: 23px;
41
+ } @else if $size == x-large {
42
+ $font-size: 17px;
43
+ $padding: 14px 26px;
44
+ $margin-top: 15px;
45
+ $margin-bottom: 30px;
46
+ }
47
+
48
+ // Declarations
49
+ display: inline-flex;
50
+ width: auto;
51
+ text-align: center;
52
+ font-size: $font-size;
53
+ line-height: vr(2); // 30px
54
+ font-weight: 700;
55
+ cursor: pointer;
56
+ padding: $padding;
57
+ margin-top: $margin-top;
58
+ margin-bottom: $margin-bottom;
59
+ transition: $duration;
60
+ border-radius: $border-radius;
61
+
62
+ // Default
63
+ &,
64
+ &:visited {
65
+ @if $fill == on {
66
+ color: $white;
67
+ background: $color;
68
+ border: 1px solid darken($color, 3);
69
+ } @else {
70
+ color: $color;
71
+ background: transparent;
72
+ border: 1px solid $color;
73
+ }
74
+ }
75
+
76
+ // Active
77
+ &:hover,
78
+ &:focus,
79
+ &:active {
80
+ @if $fill == on {
81
+ color: $white;
82
+ background: darken($color, 3);
83
+ border: 1px solid darken($color, 3);
84
+ } @else if $fill == off and $color == $white {
85
+ color: $cerulean;
86
+ background: $color;
87
+ } @else {
88
+ color: $white;
89
+ background: $color;
90
+ }
91
+ }
92
+
93
+ // Disabled
94
+ &[disabled] {
95
+ color: $nobel;
96
+ background: $iron;
97
+ border-color: $alto;
98
+ text-shadow: none;
99
+ pointer-events: none;
100
+ }
101
+ }
@@ -0,0 +1,306 @@
1
+ /* ========================================================================== *
2
+ * g. Document module
3
+ * -------------------------------------------------------------------------- */
4
+
5
+ /* ===================================== *
6
+ * i. Utility
7
+ * ------------------------------------- */
8
+
9
+ // Point at which mobile menu is visible
10
+ $breakpoint: 800px;
11
+
12
+ // Transparent headers (for use with hero banners)
13
+ @mixin transparent-header {
14
+ margin-bottom: -$header-height;
15
+ z-index: 2;
16
+
17
+ &,
18
+ &:before {
19
+ background: transparent;
20
+ }
21
+
22
+ + main {
23
+ padding-top: 0;
24
+ }
25
+ }
26
+
27
+ // Transparent header extendable placeholder
28
+ %transparent-header {
29
+ @include transparent-header;
30
+ }
31
+
32
+ // Header link styles
33
+ %header-link {
34
+ cursor: pointer;
35
+ flex-shrink: 0;
36
+ font-size: 13px;
37
+ font-weight: 700;
38
+ text-transform: uppercase;
39
+ }
40
+
41
+ // Logo home link styles
42
+ %logo {
43
+ height: $header-height;
44
+ z-index: 4;
45
+
46
+ // SVG inherits structure & color
47
+ svg {
48
+ height: inherit;
49
+ fill: currentColor;
50
+ }
51
+ }
52
+
53
+ // Header button styles
54
+ %header-button {
55
+ @include button($size: small, $color: $white, $fill: off, $bevel: on);
56
+ margin-top: 0;
57
+ margin-bottom: 0;
58
+ }
59
+
60
+ // Mobile menu button styles
61
+ %mobile-menu-button {
62
+
63
+ // Hidden on larger screens
64
+ @extend %hidden;
65
+
66
+ // Shown on smaller screens
67
+ @media (max-width: $breakpoint) {
68
+ @include shown;
69
+ z-index: 4;
70
+ width: 36px;
71
+ height: 36px;
72
+ border-radius: 50%;
73
+ padding: 12px 10px;
74
+ box-shadow: 0 0 0 1px $white;
75
+ margin-left: auto;
76
+
77
+ span {
78
+ display: block;
79
+ width: 16px;
80
+ height: 2px;
81
+ background: $white;
82
+ transition: .5s opacity,
83
+ .5s transform;
84
+ }
85
+
86
+ span:nth-child(2) {
87
+ margin: 3px 0;
88
+ }
89
+
90
+ // Fancy animation when menu open
91
+ .menu-open & span {
92
+ &:nth-child(1) { transform: translateY(5px) rotate(-45deg); }
93
+ &:nth-child(2) { transform: rotate(-45deg); opacity: 0; }
94
+ &:nth-child(3) { transform: translateY(-5px) rotate(-135deg); }
95
+ }
96
+ }
97
+ }
98
+
99
+ /* ===================================== *
100
+ * ii. Common
101
+ * ------------------------------------- */
102
+
103
+ *,
104
+ *:after,
105
+ *:before {
106
+ margin: 0;
107
+ padding: 0;
108
+ outline: 0;
109
+ box-sizing: border-box;
110
+ }
111
+
112
+ /* ===================================== *
113
+ * iii. Document
114
+ * ------------------------------------- */
115
+
116
+ body {
117
+ display: flex;
118
+ min-height: 100vh;
119
+ flex-direction: column;
120
+ color: $capecod;
121
+ font-weight: 300;
122
+ font-size: $base-size;
123
+ line-height: $base-height;
124
+ }
125
+
126
+ /* ===================================== *
127
+ * iv. Header
128
+ * ------------------------------------- */
129
+
130
+ // Main site header
131
+ header[role=banner] {
132
+ display: flex;
133
+ align-items: center;
134
+ height: $header-height;
135
+ z-index: 12;
136
+ color: $white;
137
+ @include padded-module; // 1100px width & 30px padding
138
+ @include cover-background($cerulean linear-gradient(to bottom right, $cerulean, mix($orchid, $cerulean, 75%)) no-repeat fixed);
139
+
140
+ a {
141
+ @extend %header-link;
142
+
143
+ // Larger size on small screens
144
+ @media (max-width: $breakpoint) {
145
+ font-size: 16px;
146
+ }
147
+ }
148
+
149
+ // Logo home link
150
+ .logo {
151
+ @extend %logo;
152
+ }
153
+
154
+ // Registration button
155
+ .registration-button {
156
+ @extend %header-button;
157
+ }
158
+ }
159
+
160
+ /* ===================================== *
161
+ * v. Navigation
162
+ * ------------------------------------- */
163
+
164
+ // Main site navigation
165
+ header[role=banner] > nav[role=navigation] {
166
+ display: flex;
167
+ margin-left: auto;
168
+ align-items: baseline;
169
+ text-align: center;
170
+
171
+ // Give siblings space
172
+ a {
173
+ margin-left: 24px;
174
+ }
175
+ }
176
+
177
+ // Mobile menu button
178
+ .mobile-menu-button {
179
+ @extend %mobile-menu-button;
180
+ }
181
+
182
+ // Smaller screens
183
+ @media (max-width: $breakpoint) {
184
+
185
+ header[role=banner] a {
186
+ font-size: 16px;
187
+ }
188
+
189
+ // Main navigation
190
+ header[role=banner] > nav[role=navigation] {
191
+ position: fixed;
192
+ top: 0;
193
+ left: 0;
194
+ bottom: 0;
195
+ width: 100%;
196
+ opacity: 0;
197
+ z-index: 3;
198
+ flex-direction: column;
199
+ justify-content: center;
200
+ background: transparent;
201
+ transform: translateX(-9999px);
202
+ transition:
203
+ .5s opacity,
204
+ .5s background,
205
+ 0s .5s transform;
206
+
207
+ a {
208
+ line-height: 21px;
209
+ margin: 5px 0;
210
+ }
211
+ }
212
+
213
+ // Menu open
214
+ .menu-open {
215
+
216
+ // Prevent body from scrolling
217
+ overflow: hidden;
218
+
219
+ // Main navigation
220
+ header[role=banner] > nav[role=navigation] {
221
+ left: 0;
222
+ opacity: 1;
223
+ transform: translateX(0);
224
+ background: rgba($shark, .95);
225
+ transition:
226
+ .5s opacity,
227
+ .5s background;
228
+ }
229
+ }
230
+ }
231
+
232
+ /* ===================================== *
233
+ * vi. Main
234
+ * ------------------------------------- */
235
+
236
+ // Main content
237
+ main {
238
+ flex: 1;
239
+ padding-top: $header-height;
240
+ padding-bottom: $header-height;
241
+ }
242
+
243
+ /* ===================================== *
244
+ * vii. Footer
245
+ * ------------------------------------- */
246
+
247
+ // Main site footer
248
+ footer[role=contentinfo] {
249
+ color: $nobel;
250
+ @include padded-module; // 1100px width & 30px padding
251
+ @include cover-background($capecod);
252
+ }
253
+
254
+ // footer[role="contentinfo"] {
255
+ // width: 100%;
256
+ // color: $aluminum;
257
+ // font-size: .778em;
258
+
259
+ // .footer-nav {
260
+ // // @extend %column-container;
261
+ // }
262
+
263
+ // dl {
264
+ // // @include one-of-four(false);
265
+
266
+ // @media (max-width: 720px) {
267
+ // // @include one-of-two(false);
268
+ // }
269
+ // }
270
+
271
+ // dt {
272
+ // @extend %caps;
273
+ // color: $white;
274
+ // margin-bottom: .5rem;
275
+ // }
276
+
277
+ // dd > a {
278
+ // display: inline;
279
+ // font-weight: 700;
280
+ // @include underlined-link(inherit, $white);
281
+
282
+ // &:after {
283
+ // content: '\A';
284
+ // white-space: pre;
285
+ // }
286
+ // }
287
+
288
+ // // Social icons
289
+ // .social-nav {
290
+ // margin-top: 1.5rem;
291
+ // @extend %social-icons;
292
+
293
+ // a {
294
+ // margin-bottom: 5px;
295
+ // @include rounded-btn($aluminum, $cerulean, $white, 30px);
296
+ // }
297
+ // }
298
+
299
+ // // Copyright
300
+ // p {
301
+ // font-size: .857em;
302
+ // text-align: center;
303
+ // margin-top: 40px;
304
+ // margin-bottom: 40px;
305
+ // }
306
+ // }