From 3ad64419aff8d61864050927096626e8393cab68 Mon Sep 17 00:00:00 2001 From: Joshua Seigler Date: Sun, 4 Sep 2016 11:21:40 -0400 Subject: [PATCH] chore: SASS whitespace consistency --- _sass/_1024.scss | 8 +- _sass/_colors.scss | 34 +- _sass/_directives.scss | 10 +- _sass/_footer.scss | 70 +- _sass/_grid.scss | 1374 +++++++++++++++++++------------------- _sass/_junk-drawer.scss | 10 +- _sass/_overlay-menu.scss | 346 +++++----- _sass/_styleguide.scss | 34 +- _sass/_typography.scss | 2 +- 9 files changed, 944 insertions(+), 944 deletions(-) diff --git a/_sass/_1024.scss b/_sass/_1024.scss index 87662fd..d8f7398 100644 --- a/_sass/_1024.scss +++ b/_sass/_1024.scss @@ -6,13 +6,13 @@ h1 { font-size: 34px; } - + h2 { font-size: 20px; } #background-video { - top: -40px; - max-height: 600px; + top: -40px; + max-height: 600px; } #key-features { padding: 0 30px 0 30px; @@ -37,4 +37,4 @@ height: auto; } } -} \ No newline at end of file +} diff --git a/_sass/_colors.scss b/_sass/_colors.scss index 73bc7ad..023e904 100644 --- a/_sass/_colors.scss +++ b/_sass/_colors.scss @@ -12,28 +12,28 @@ $dark-blue: #0b3b5a; // for the style guide: @function contrast-color($color, $dark, $light, $threshold: 50) { - @if (lightness(scale-color($color, $green: 30%, $blue: -6%, $red: 4%)) > $threshold) { // perceptual luminance http://www.workwithcolor.com/color-luminance-2233.htm - @return $dark; // Lighter background, return dark color - } @else { - @return $light; // Darker background, return light color - } + @if (lightness(scale-color($color, $green: 30%, $blue: -6%, $red: 4%)) > $threshold) { // perceptual luminance http://www.workwithcolor.com/color-luminance-2233.htm + @return $dark; // Lighter background, return dark color + } @else { + @return $light; // Darker background, return light color + } } $color: - ('black', $black), - ('white', $white), + ('black', $black), + ('white', $white), - ('blue', $blue), - ('red', $red), - ('green', $green), + ('blue', $blue), + ('red', $red), + ('green', $green), - ('gray', $gray), - ('dark-blue', $dark-blue); + ('gray', $gray), + ('dark-blue', $dark-blue); @each $name, $bgcolor in $color { - .color__tile--#{$name}-bg { - background-color: $bgcolor; - color: contrast-color($bgcolor, #000, #fff); - box-shadow: 0 0 10px -4px contrast-color($bgcolor, black, transparent, 80) inset; - } + .color__tile--#{$name}-bg { + background-color: $bgcolor; + color: contrast-color($bgcolor, #000, #fff); + box-shadow: 0 0 10px -4px contrast-color($bgcolor, black, transparent, 80) inset; + } } diff --git a/_sass/_directives.scss b/_sass/_directives.scss index 51e43a0..57b5f2c 100644 --- a/_sass/_directives.scss +++ b/_sass/_directives.scss @@ -3,9 +3,9 @@ This is for time-saving base classes that get @extend -ed */ %clearfix { - &:after { - content: ""; - display: table; - clear: both; - } + &:after { + content: ""; + display: table; + clear: both; + } } diff --git a/_sass/_footer.scss b/_sass/_footer.scss index 43febab..f4b194f 100644 --- a/_sass/_footer.scss +++ b/_sass/_footer.scss @@ -1,46 +1,46 @@ /* footer - nav.content - section x5 - - ul - li - .footer--menu.content - .footer--languagePicker - a x3 - .footer--legal - .content - .footer--copyright - a + nav.content + section x5 + + ul + li + .footer--menu.content + .footer--languagePicker + a x3 + .footer--legal + .content + .footer--copyright + a */ footer { - background-color: #333333; - color: #717171; - padding-top: 4em; + background-color: #333333; + color: #717171; + padding-top: 4em; - a { - color: $white; - } + a { + color: $white; + } - > nav { - display: table; - table-layout: fixed; - > section { - display: table-cell; - > ul { - margin: 1em 0 0; - padding: 0; - > li { - list-style: none; - } - } - } - } + > nav { + display: table; + table-layout: fixed; + > section { + display: table-cell; + > ul { + margin: 1em 0 0; + padding: 0; + > li { + list-style: none; + } + } + } + } } .footer--social { - -moz-column-count: 2; - -webkit-column-count: 2; - column-count: 2; + -moz-column-count: 2; + -webkit-column-count: 2; + column-count: 2; } diff --git a/_sass/_grid.scss b/_sass/_grid.scss index 340b90a..c4aa32b 100644 --- a/_sass/_grid.scss +++ b/_sass/_grid.scss @@ -1,11 +1,11 @@ @-ms-viewport { - width: device-width; + width: device-width; } .visible-xs, .visible-sm, .visible-md, .visible-lg { - display: none !important; + display: none !important; } .visible-xs-block, .visible-xs-inline, @@ -19,861 +19,861 @@ .visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { - display: none !important; + display: none !important; } @media (max-width: 767px) { - .visible-xs { - display: block !important; - } - table.visible-xs { - display: table; - } - tr.visible-xs { - display: table-row !important; - } - th.visible-xs, - td.visible-xs { - display: table-cell !important; - } + .visible-xs { + display: block !important; + } + table.visible-xs { + display: table; + } + tr.visible-xs { + display: table-row !important; + } + th.visible-xs, + td.visible-xs { + display: table-cell !important; + } } @media (max-width: 767px) { - .visible-xs-block { - display: block !important; - } + .visible-xs-block { + display: block !important; + } } @media (max-width: 767px) { - .visible-xs-inline { - display: inline !important; - } + .visible-xs-inline { + display: inline !important; + } } @media (max-width: 767px) { - .visible-xs-inline-block { - display: inline-block !important; - } + .visible-xs-inline-block { + display: inline-block !important; + } } @media (min-width: 768px) and (max-width: 991px) { - .visible-sm { - display: block !important; - } - table.visible-sm { - display: table; - } - tr.visible-sm { - display: table-row !important; - } - th.visible-sm, - td.visible-sm { - display: table-cell !important; - } + .visible-sm { + display: block !important; + } + table.visible-sm { + display: table; + } + tr.visible-sm { + display: table-row !important; + } + th.visible-sm, + td.visible-sm { + display: table-cell !important; + } } @media (min-width: 768px) and (max-width: 991px) { - .visible-sm-block { - display: block !important; - } + .visible-sm-block { + display: block !important; + } } @media (min-width: 768px) and (max-width: 991px) { - .visible-sm-inline { - display: inline !important; - } + .visible-sm-inline { + display: inline !important; + } } @media (min-width: 768px) and (max-width: 991px) { - .visible-sm-inline-block { - display: inline-block !important; - } + .visible-sm-inline-block { + display: inline-block !important; + } } @media (min-width: 992px) and (max-width: 1199px) { - .visible-md { - display: block !important; - } - table.visible-md { - display: table; - } - tr.visible-md { - display: table-row !important; - } - th.visible-md, - td.visible-md { - display: table-cell !important; - } + .visible-md { + display: block !important; + } + table.visible-md { + display: table; + } + tr.visible-md { + display: table-row !important; + } + th.visible-md, + td.visible-md { + display: table-cell !important; + } } @media (min-width: 992px) and (max-width: 1199px) { - .visible-md-block { - display: block !important; - } + .visible-md-block { + display: block !important; + } } @media (min-width: 992px) and (max-width: 1199px) { - .visible-md-inline { - display: inline !important; - } + .visible-md-inline { + display: inline !important; + } } @media (min-width: 992px) and (max-width: 1199px) { - .visible-md-inline-block { - display: inline-block !important; - } + .visible-md-inline-block { + display: inline-block !important; + } } @media (min-width: 1200px) { - .visible-lg { - display: block !important; - } - table.visible-lg { - display: table; - } - tr.visible-lg { - display: table-row !important; - } - th.visible-lg, - td.visible-lg { - display: table-cell !important; - } + .visible-lg { + display: block !important; + } + table.visible-lg { + display: table; + } + tr.visible-lg { + display: table-row !important; + } + th.visible-lg, + td.visible-lg { + display: table-cell !important; + } } @media (min-width: 1200px) { - .visible-lg-block { - display: block !important; - } + .visible-lg-block { + display: block !important; + } } @media (min-width: 1200px) { - .visible-lg-inline { - display: inline !important; - } + .visible-lg-inline { + display: inline !important; + } } @media (min-width: 1200px) { - .visible-lg-inline-block { - display: inline-block !important; - } + .visible-lg-inline-block { + display: inline-block !important; + } } @media (max-width: 767px) { - .hidden-xs { - display: none !important; - } + .hidden-xs { + display: none !important; + } } @media (min-width: 768px) and (max-width: 991px) { - .hidden-sm { - display: none !important; - } + .hidden-sm { + display: none !important; + } } @media (min-width: 992px) and (max-width: 1199px) { - .hidden-md { - display: none !important; - } + .hidden-md { + display: none !important; + } } @media (min-width: 1200px) { - .hidden-lg { - display: none !important; - } + .hidden-lg { + display: none !important; + } } .visible-print { - display: none !important; + display: none !important; } @media print { - .visible-print { - display: block !important; - } - table.visible-print { - display: table; - } - tr.visible-print { - display: table-row !important; - } - th.visible-print, - td.visible-print { - display: table-cell !important; - } + .visible-print { + display: block !important; + } + table.visible-print { + display: table; + } + tr.visible-print { + display: table-row !important; + } + th.visible-print, + td.visible-print { + display: table-cell !important; + } } .visible-print-block { - display: none !important; + display: none !important; } @media print { - .visible-print-block { - display: block !important; - } + .visible-print-block { + display: block !important; + } } .visible-print-inline { - display: none !important; + display: none !important; } @media print { - .visible-print-inline { - display: inline !important; - } + .visible-print-inline { + display: inline !important; + } } .visible-print-inline-block { - display: none !important; + display: none !important; } @media print { - .visible-print-inline-block { - display: inline-block !important; - } + .visible-print-inline-block { + display: inline-block !important; + } } @media print { - .hidden-print { - display: none !important; - } + .hidden-print { + display: none !important; + } } .container { - margin-right: auto; - margin-left: auto; - padding-left: 15px; - padding-right: 15px; + margin-right: auto; + margin-left: auto; + padding-left: 15px; + padding-right: 15px; } @media (min-width: 768px) { - .container { - width: 750px; - } + .container { + width: 750px; + } } @media (min-width: 992px) { - .container { - width: 970px; - } + .container { + width: 970px; + } } @media (min-width: 1200px) { - .container { - width: 1170px; - } + .container { + width: 1170px; + } } .container-fluid { - margin-right: auto; - margin-left: auto; - padding-left: 15px; - padding-right: 15px; + margin-right: auto; + margin-left: auto; + padding-left: 15px; + padding-right: 15px; } .row { - margin-left: -15px; - margin-right: -15px; + margin-left: -15px; + margin-right: -15px; } .col, .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { - position: relative; - min-height: 1px; - padding-left: 15px; - padding-right: 15px; + position: relative; + min-height: 1px; + padding-left: 15px; + padding-right: 15px; } .col, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { - float: left; + float: left; } .col-xs-12 { - width: 100%; + width: 100%; } .col-xs-11 { - width: 91.66666667%; + width: 91.66666667%; } .col-xs-10 { - width: 83.33333333%; + width: 83.33333333%; } .col-xs-9 { - width: 75%; + width: 75%; } .col-xs-8 { - width: 66.66666667%; + width: 66.66666667%; } .col-xs-7 { - width: 58.33333333%; + width: 58.33333333%; } .col-xs-6 { - width: 50%; + width: 50%; } .col-xs-5 { - width: 41.66666667%; + width: 41.66666667%; } .col-xs-4 { - width: 33.33333333%; + width: 33.33333333%; } .col-xs-3 { - width: 25%; + width: 25%; } .col-xs-2 { - width: 16.66666667%; + width: 16.66666667%; } .col-xs-1 { - width: 8.33333333%; + width: 8.33333333%; } .col-xs-pull-12 { - right: 100%; + right: 100%; } .col-xs-pull-11 { - right: 91.66666667%; + right: 91.66666667%; } .col-xs-pull-10 { - right: 83.33333333%; + right: 83.33333333%; } .col-xs-pull-9 { - right: 75%; + right: 75%; } .col-xs-pull-8 { - right: 66.66666667%; + right: 66.66666667%; } .col-xs-pull-7 { - right: 58.33333333%; + right: 58.33333333%; } .col-xs-pull-6 { - right: 50%; + right: 50%; } .col-xs-pull-5 { - right: 41.66666667%; + right: 41.66666667%; } .col-xs-pull-4 { - right: 33.33333333%; + right: 33.33333333%; } .col-xs-pull-3 { - right: 25%; + right: 25%; } .col-xs-pull-2 { - right: 16.66666667%; + right: 16.66666667%; } .col-xs-pull-1 { - right: 8.33333333%; + right: 8.33333333%; } .col-xs-pull-0 { - right: auto; + right: auto; } .col-xs-push-12 { - left: 100%; + left: 100%; } .col-xs-push-11 { - left: 91.66666667%; + left: 91.66666667%; } .col-xs-push-10 { - left: 83.33333333%; + left: 83.33333333%; } .col-xs-push-9 { - left: 75%; + left: 75%; } .col-xs-push-8 { - left: 66.66666667%; + left: 66.66666667%; } .col-xs-push-7 { - left: 58.33333333%; + left: 58.33333333%; } .col-xs-push-6 { - left: 50%; + left: 50%; } .col-xs-push-5 { - left: 41.66666667%; + left: 41.66666667%; } .col-xs-push-4 { - left: 33.33333333%; + left: 33.33333333%; } .col-xs-push-3 { - left: 25%; + left: 25%; } .col-xs-push-2 { - left: 16.66666667%; + left: 16.66666667%; } .col-xs-push-1 { - left: 8.33333333%; + left: 8.33333333%; } .col-xs-push-0 { - left: auto; + left: auto; } .col-xs-offset-12 { - margin-left: 100%; + margin-left: 100%; } .col-xs-offset-11 { - margin-left: 91.66666667%; + margin-left: 91.66666667%; } .col-xs-offset-10 { - margin-left: 83.33333333%; + margin-left: 83.33333333%; } .col-xs-offset-9 { - margin-left: 75%; + margin-left: 75%; } .col-xs-offset-8 { - margin-left: 66.66666667%; + margin-left: 66.66666667%; } .col-xs-offset-7 { - margin-left: 58.33333333%; + margin-left: 58.33333333%; } .col-xs-offset-6 { - margin-left: 50%; + margin-left: 50%; } .col-xs-offset-5 { - margin-left: 41.66666667%; + margin-left: 41.66666667%; } .col-xs-offset-4 { - margin-left: 33.33333333%; + margin-left: 33.33333333%; } .col-xs-offset-3 { - margin-left: 25%; + margin-left: 25%; } .col-xs-offset-2 { - margin-left: 16.66666667%; + margin-left: 16.66666667%; } .col-xs-offset-1 { - margin-left: 8.33333333%; + margin-left: 8.33333333%; } .col-xs-offset-0 { - margin-left: 0%; + margin-left: 0%; } @media (min-width: 768px) { - .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { - float: left; - } - .col-sm-12 { - width: 100%; - } - .col-sm-11 { - width: 91.66666667%; - } - .col-sm-10 { - width: 83.33333333%; - } - .col-sm-9 { - width: 75%; - } - .col-sm-8 { - width: 66.66666667%; - } - .col-sm-7 { - width: 58.33333333%; - } - .col-sm-6 { - width: 50%; - } - .col-sm-5 { - width: 41.66666667%; - } - .col-sm-4 { - width: 33.33333333%; - } - .col-sm-3 { - width: 25%; - } - .col-sm-2 { - width: 16.66666667%; - } - .col-sm-1 { - width: 8.33333333%; - } - .col-sm-pull-12 { - right: 100%; - } - .col-sm-pull-11 { - right: 91.66666667%; - } - .col-sm-pull-10 { - right: 83.33333333%; - } - .col-sm-pull-9 { - right: 75%; - } - .col-sm-pull-8 { - right: 66.66666667%; - } - .col-sm-pull-7 { - right: 58.33333333%; - } - .col-sm-pull-6 { - right: 50%; - } - .col-sm-pull-5 { - right: 41.66666667%; - } - .col-sm-pull-4 { - right: 33.33333333%; - } - .col-sm-pull-3 { - right: 25%; - } - .col-sm-pull-2 { - right: 16.66666667%; - } - .col-sm-pull-1 { - right: 8.33333333%; - } - .col-sm-pull-0 { - right: auto; - } - .col-sm-push-12 { - left: 100%; - } - .col-sm-push-11 { - left: 91.66666667%; - } - .col-sm-push-10 { - left: 83.33333333%; - } - .col-sm-push-9 { - left: 75%; - } - .col-sm-push-8 { - left: 66.66666667%; - } - .col-sm-push-7 { - left: 58.33333333%; - } - .col-sm-push-6 { - left: 50%; - } - .col-sm-push-5 { - left: 41.66666667%; - } - .col-sm-push-4 { - left: 33.33333333%; - } - .col-sm-push-3 { - left: 25%; - } - .col-sm-push-2 { - left: 16.66666667%; - } - .col-sm-push-1 { - left: 8.33333333%; - } - .col-sm-push-0 { - left: auto; - } - .col-sm-offset-12 { - margin-left: 100%; - } - .col-sm-offset-11 { - margin-left: 91.66666667%; - } - .col-sm-offset-10 { - margin-left: 83.33333333%; - } - .col-sm-offset-9 { - margin-left: 75%; - } - .col-sm-offset-8 { - margin-left: 66.66666667%; - } - .col-sm-offset-7 { - margin-left: 58.33333333%; - } - .col-sm-offset-6 { - margin-left: 50%; - } - .col-sm-offset-5 { - margin-left: 41.66666667%; - } - .col-sm-offset-4 { - margin-left: 33.33333333%; - } - .col-sm-offset-3 { - margin-left: 25%; - } - .col-sm-offset-2 { - margin-left: 16.66666667%; - } - .col-sm-offset-1 { - margin-left: 8.33333333%; - } - .col-sm-offset-0 { - margin-left: 0%; - } + .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { + float: left; + } + .col-sm-12 { + width: 100%; + } + .col-sm-11 { + width: 91.66666667%; + } + .col-sm-10 { + width: 83.33333333%; + } + .col-sm-9 { + width: 75%; + } + .col-sm-8 { + width: 66.66666667%; + } + .col-sm-7 { + width: 58.33333333%; + } + .col-sm-6 { + width: 50%; + } + .col-sm-5 { + width: 41.66666667%; + } + .col-sm-4 { + width: 33.33333333%; + } + .col-sm-3 { + width: 25%; + } + .col-sm-2 { + width: 16.66666667%; + } + .col-sm-1 { + width: 8.33333333%; + } + .col-sm-pull-12 { + right: 100%; + } + .col-sm-pull-11 { + right: 91.66666667%; + } + .col-sm-pull-10 { + right: 83.33333333%; + } + .col-sm-pull-9 { + right: 75%; + } + .col-sm-pull-8 { + right: 66.66666667%; + } + .col-sm-pull-7 { + right: 58.33333333%; + } + .col-sm-pull-6 { + right: 50%; + } + .col-sm-pull-5 { + right: 41.66666667%; + } + .col-sm-pull-4 { + right: 33.33333333%; + } + .col-sm-pull-3 { + right: 25%; + } + .col-sm-pull-2 { + right: 16.66666667%; + } + .col-sm-pull-1 { + right: 8.33333333%; + } + .col-sm-pull-0 { + right: auto; + } + .col-sm-push-12 { + left: 100%; + } + .col-sm-push-11 { + left: 91.66666667%; + } + .col-sm-push-10 { + left: 83.33333333%; + } + .col-sm-push-9 { + left: 75%; + } + .col-sm-push-8 { + left: 66.66666667%; + } + .col-sm-push-7 { + left: 58.33333333%; + } + .col-sm-push-6 { + left: 50%; + } + .col-sm-push-5 { + left: 41.66666667%; + } + .col-sm-push-4 { + left: 33.33333333%; + } + .col-sm-push-3 { + left: 25%; + } + .col-sm-push-2 { + left: 16.66666667%; + } + .col-sm-push-1 { + left: 8.33333333%; + } + .col-sm-push-0 { + left: auto; + } + .col-sm-offset-12 { + margin-left: 100%; + } + .col-sm-offset-11 { + margin-left: 91.66666667%; + } + .col-sm-offset-10 { + margin-left: 83.33333333%; + } + .col-sm-offset-9 { + margin-left: 75%; + } + .col-sm-offset-8 { + margin-left: 66.66666667%; + } + .col-sm-offset-7 { + margin-left: 58.33333333%; + } + .col-sm-offset-6 { + margin-left: 50%; + } + .col-sm-offset-5 { + margin-left: 41.66666667%; + } + .col-sm-offset-4 { + margin-left: 33.33333333%; + } + .col-sm-offset-3 { + margin-left: 25%; + } + .col-sm-offset-2 { + margin-left: 16.66666667%; + } + .col-sm-offset-1 { + margin-left: 8.33333333%; + } + .col-sm-offset-0 { + margin-left: 0%; + } } @media (min-width: 992px) { - .col, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { - float: left; - } - .col-md-12 { - width: 100%; - } - .col-md-11 { - width: 91.66666667%; - } - .col-md-10 { - width: 83.33333333%; - } - .col-md-9 { - width: 75%; - } - .col-md-8 { - width: 66.66666667%; - } - .col-md-7 { - width: 58.33333333%; - } - .col-md-6 { - width: 50%; - } - .col-md-5 { - width: 41.66666667%; - } - .col-md-4 { - width: 33.33333333%; - } - .col-md-3 { - width: 25%; - } - .col-md-2 { - width: 16.66666667%; - } - .col-md-1 { - width: 8.33333333%; - } - .col-md-pull-12 { - right: 100%; - } - .col-md-pull-11 { - right: 91.66666667%; - } - .col-md-pull-10 { - right: 83.33333333%; - } - .col-md-pull-9 { - right: 75%; - } - .col-md-pull-8 { - right: 66.66666667%; - } - .col-md-pull-7 { - right: 58.33333333%; - } - .col-md-pull-6 { - right: 50%; - } - .col-md-pull-5 { - right: 41.66666667%; - } - .col-md-pull-4 { - right: 33.33333333%; - } - .col-md-pull-3 { - right: 25%; - } - .col-md-pull-2 { - right: 16.66666667%; - } - .col-md-pull-1 { - right: 8.33333333%; - } - .col-md-pull-0 { - right: auto; - } - .col-md-push-12 { - left: 100%; - } - .col-md-push-11 { - left: 91.66666667%; - } - .col-md-push-10 { - left: 83.33333333%; - } - .col-md-push-9 { - left: 75%; - } - .col-md-push-8 { - left: 66.66666667%; - } - .col-md-push-7 { - left: 58.33333333%; - } - .col-md-push-6 { - left: 50%; - } - .col-md-push-5 { - left: 41.66666667%; - } - .col-md-push-4 { - left: 33.33333333%; - } - .col-md-push-3 { - left: 25%; - } - .col-md-push-2 { - left: 16.66666667%; - } - .col-md-push-1 { - left: 8.33333333%; - } - .col-md-push-0 { - left: auto; - } - .col-md-offset-12 { - margin-left: 100%; - } - .col-md-offset-11 { - margin-left: 91.66666667%; - } - .col-md-offset-10 { - margin-left: 83.33333333%; - } - .col-md-offset-9 { - margin-left: 75%; - } - .col-md-offset-8 { - margin-left: 66.66666667%; - } - .col-md-offset-7 { - margin-left: 58.33333333%; - } - .col-md-offset-6 { - margin-left: 50%; - } - .col-md-offset-5 { - margin-left: 41.66666667%; - } - .col-md-offset-4 { - margin-left: 33.33333333%; - } - .col-md-offset-3 { - margin-left: 25%; - } - .col-md-offset-2 { - margin-left: 16.66666667%; - } - .col-md-offset-1 { - margin-left: 8.33333333%; - } - .col-md-offset-0 { - margin-left: 0%; - } + .col, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { + float: left; + } + .col-md-12 { + width: 100%; + } + .col-md-11 { + width: 91.66666667%; + } + .col-md-10 { + width: 83.33333333%; + } + .col-md-9 { + width: 75%; + } + .col-md-8 { + width: 66.66666667%; + } + .col-md-7 { + width: 58.33333333%; + } + .col-md-6 { + width: 50%; + } + .col-md-5 { + width: 41.66666667%; + } + .col-md-4 { + width: 33.33333333%; + } + .col-md-3 { + width: 25%; + } + .col-md-2 { + width: 16.66666667%; + } + .col-md-1 { + width: 8.33333333%; + } + .col-md-pull-12 { + right: 100%; + } + .col-md-pull-11 { + right: 91.66666667%; + } + .col-md-pull-10 { + right: 83.33333333%; + } + .col-md-pull-9 { + right: 75%; + } + .col-md-pull-8 { + right: 66.66666667%; + } + .col-md-pull-7 { + right: 58.33333333%; + } + .col-md-pull-6 { + right: 50%; + } + .col-md-pull-5 { + right: 41.66666667%; + } + .col-md-pull-4 { + right: 33.33333333%; + } + .col-md-pull-3 { + right: 25%; + } + .col-md-pull-2 { + right: 16.66666667%; + } + .col-md-pull-1 { + right: 8.33333333%; + } + .col-md-pull-0 { + right: auto; + } + .col-md-push-12 { + left: 100%; + } + .col-md-push-11 { + left: 91.66666667%; + } + .col-md-push-10 { + left: 83.33333333%; + } + .col-md-push-9 { + left: 75%; + } + .col-md-push-8 { + left: 66.66666667%; + } + .col-md-push-7 { + left: 58.33333333%; + } + .col-md-push-6 { + left: 50%; + } + .col-md-push-5 { + left: 41.66666667%; + } + .col-md-push-4 { + left: 33.33333333%; + } + .col-md-push-3 { + left: 25%; + } + .col-md-push-2 { + left: 16.66666667%; + } + .col-md-push-1 { + left: 8.33333333%; + } + .col-md-push-0 { + left: auto; + } + .col-md-offset-12 { + margin-left: 100%; + } + .col-md-offset-11 { + margin-left: 91.66666667%; + } + .col-md-offset-10 { + margin-left: 83.33333333%; + } + .col-md-offset-9 { + margin-left: 75%; + } + .col-md-offset-8 { + margin-left: 66.66666667%; + } + .col-md-offset-7 { + margin-left: 58.33333333%; + } + .col-md-offset-6 { + margin-left: 50%; + } + .col-md-offset-5 { + margin-left: 41.66666667%; + } + .col-md-offset-4 { + margin-left: 33.33333333%; + } + .col-md-offset-3 { + margin-left: 25%; + } + .col-md-offset-2 { + margin-left: 16.66666667%; + } + .col-md-offset-1 { + margin-left: 8.33333333%; + } + .col-md-offset-0 { + margin-left: 0%; + } } @media (min-width: 1200px) { - .col, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { - float: left; - } - .col-lg-12 { - width: 100%; - } - .col-lg-11 { - width: 91.66666667%; - } - .col-lg-10 { - width: 83.33333333%; - } - .col-lg-9 { - width: 75%; - } - .col-lg-8 { - width: 66.66666667%; - } - .col-lg-7 { - width: 58.33333333%; - } - .col-lg-6 { - width: 50%; - } - .col-lg-5 { - width: 41.66666667%; - } - .col-lg-4 { - width: 33.33333333%; - } - .col-lg-3 { - width: 25%; - } - .col-lg-2 { - width: 16.66666667%; - } - .col-lg-1 { - width: 8.33333333%; - } - .col-lg-pull-12 { - right: 100%; - } - .col-lg-pull-11 { - right: 91.66666667%; - } - .col-lg-pull-10 { - right: 83.33333333%; - } - .col-lg-pull-9 { - right: 75%; - } - .col-lg-pull-8 { - right: 66.66666667%; - } - .col-lg-pull-7 { - right: 58.33333333%; - } - .col-lg-pull-6 { - right: 50%; - } - .col-lg-pull-5 { - right: 41.66666667%; - } - .col-lg-pull-4 { - right: 33.33333333%; - } - .col-lg-pull-3 { - right: 25%; - } - .col-lg-pull-2 { - right: 16.66666667%; - } - .col-lg-pull-1 { - right: 8.33333333%; - } - .col-lg-pull-0 { - right: auto; - } - .col-lg-push-12 { - left: 100%; - } - .col-lg-push-11 { - left: 91.66666667%; - } - .col-lg-push-10 { - left: 83.33333333%; - } - .col-lg-push-9 { - left: 75%; - } - .col-lg-push-8 { - left: 66.66666667%; - } - .col-lg-push-7 { - left: 58.33333333%; - } - .col-lg-push-6 { - left: 50%; - } - .col-lg-push-5 { - left: 41.66666667%; - } - .col-lg-push-4 { - left: 33.33333333%; - } - .col-lg-push-3 { - left: 25%; - } - .col-lg-push-2 { - left: 16.66666667%; - } - .col-lg-push-1 { - left: 8.33333333%; - } - .col-lg-push-0 { - left: auto; - } - .col-lg-offset-12 { - margin-left: 100%; - } - .col-lg-offset-11 { - margin-left: 91.66666667%; - } - .col-lg-offset-10 { - margin-left: 83.33333333%; - } - .col-lg-offset-9 { - margin-left: 75%; - } - .col-lg-offset-8 { - margin-left: 66.66666667%; - } - .col-lg-offset-7 { - margin-left: 58.33333333%; - } - .col-lg-offset-6 { - margin-left: 50%; - } - .col-lg-offset-5 { - margin-left: 41.66666667%; - } - .col-lg-offset-4 { - margin-left: 33.33333333%; - } - .col-lg-offset-3 { - margin-left: 25%; - } - .col-lg-offset-2 { - margin-left: 16.66666667%; - } - .col-lg-offset-1 { - margin-left: 8.33333333%; - } - .col-lg-offset-0 { - margin-left: 0%; - } + .col, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { + float: left; + } + .col-lg-12 { + width: 100%; + } + .col-lg-11 { + width: 91.66666667%; + } + .col-lg-10 { + width: 83.33333333%; + } + .col-lg-9 { + width: 75%; + } + .col-lg-8 { + width: 66.66666667%; + } + .col-lg-7 { + width: 58.33333333%; + } + .col-lg-6 { + width: 50%; + } + .col-lg-5 { + width: 41.66666667%; + } + .col-lg-4 { + width: 33.33333333%; + } + .col-lg-3 { + width: 25%; + } + .col-lg-2 { + width: 16.66666667%; + } + .col-lg-1 { + width: 8.33333333%; + } + .col-lg-pull-12 { + right: 100%; + } + .col-lg-pull-11 { + right: 91.66666667%; + } + .col-lg-pull-10 { + right: 83.33333333%; + } + .col-lg-pull-9 { + right: 75%; + } + .col-lg-pull-8 { + right: 66.66666667%; + } + .col-lg-pull-7 { + right: 58.33333333%; + } + .col-lg-pull-6 { + right: 50%; + } + .col-lg-pull-5 { + right: 41.66666667%; + } + .col-lg-pull-4 { + right: 33.33333333%; + } + .col-lg-pull-3 { + right: 25%; + } + .col-lg-pull-2 { + right: 16.66666667%; + } + .col-lg-pull-1 { + right: 8.33333333%; + } + .col-lg-pull-0 { + right: auto; + } + .col-lg-push-12 { + left: 100%; + } + .col-lg-push-11 { + left: 91.66666667%; + } + .col-lg-push-10 { + left: 83.33333333%; + } + .col-lg-push-9 { + left: 75%; + } + .col-lg-push-8 { + left: 66.66666667%; + } + .col-lg-push-7 { + left: 58.33333333%; + } + .col-lg-push-6 { + left: 50%; + } + .col-lg-push-5 { + left: 41.66666667%; + } + .col-lg-push-4 { + left: 33.33333333%; + } + .col-lg-push-3 { + left: 25%; + } + .col-lg-push-2 { + left: 16.66666667%; + } + .col-lg-push-1 { + left: 8.33333333%; + } + .col-lg-push-0 { + left: auto; + } + .col-lg-offset-12 { + margin-left: 100%; + } + .col-lg-offset-11 { + margin-left: 91.66666667%; + } + .col-lg-offset-10 { + margin-left: 83.33333333%; + } + .col-lg-offset-9 { + margin-left: 75%; + } + .col-lg-offset-8 { + margin-left: 66.66666667%; + } + .col-lg-offset-7 { + margin-left: 58.33333333%; + } + .col-lg-offset-6 { + margin-left: 50%; + } + .col-lg-offset-5 { + margin-left: 41.66666667%; + } + .col-lg-offset-4 { + margin-left: 33.33333333%; + } + .col-lg-offset-3 { + margin-left: 25%; + } + .col-lg-offset-2 { + margin-left: 16.66666667%; + } + .col-lg-offset-1 { + margin-left: 8.33333333%; + } + .col-lg-offset-0 { + margin-left: 0%; + } } .clearfix, .clearfix:before, @@ -884,30 +884,30 @@ .container-fluid:after, .row:before, .row:after { - content: " "; - display: table; + content: " "; + display: table; } .clearfix:after, .container:after, .container-fluid:after, .row:after { - clear: both; + clear: both; } .center-block { - display: block; - margin-left: auto; - margin-right: auto; + display: block; + margin-left: auto; + margin-right: auto; } .pull-right { - float: right !important; + float: right !important; } .pull-left { - float: left !important; + float: left !important; } *, *:before, *:after { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} \ No newline at end of file + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} diff --git a/_sass/_junk-drawer.scss b/_sass/_junk-drawer.scss index cab345a..61b1d60 100644 --- a/_sass/_junk-drawer.scss +++ b/_sass/_junk-drawer.scss @@ -16,11 +16,11 @@ a.blog_link { } .img-circle { - margin: 1px; - border:1px solid #dddddd; - border-radius: 50%; - -webkit-border-radius: 50%; - -moz-border-radius: 50%; + margin: 1px; + border:1px solid #dddddd; + border-radius: 50%; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; } .background-title { diff --git a/_sass/_overlay-menu.scss b/_sass/_overlay-menu.scss index 2d4e53f..b0a3a00 100644 --- a/_sass/_overlay-menu.scss +++ b/_sass/_overlay-menu.scss @@ -1,210 +1,210 @@ .container { - position: absolute; - width: 100%; - height: 100%; - text-align: center; - top: 40%; - left: 0; - margin: 0 auto; + position: absolute; + width: 100%; + height: 100%; + text-align: center; + top: 40%; + left: 0; + margin: 0 auto; p { - font-size: 18px; + font-size: 18px; } a { - display: inline-block; - position: relative; - text-align: center; - color: #FF5252; - text-decoration: none; - font-size: 18px; - overflow: hidden; - top: 5px; + display: inline-block; + position: relative; + text-align: center; + color: #FF5252; + text-decoration: none; + font-size: 18px; + overflow: hidden; + top: 5px; } a:after { - content: ''; - position: absolute; - background: #FF5252; - height: 2px; - width: 0%; - -webkit-transform: translateX(-50%); - -ms-transform: translateX(-50%); - transform: translateX(-50%); - left: 50%; - bottom: 0; - -webkit-transition: .35s ease; - transition: .35s ease; + content: ''; + position: absolute; + background: #FF5252; + height: 2px; + width: 0%; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); + left: 50%; + bottom: 0; + -webkit-transition: .35s ease; + transition: .35s ease; } .a:hover:after, a:focus:after, a:active:after { - width: 100%; + width: 100%; } } #hero{ .button_container { - position: absolute; - top: 40px; - right: 30px; - height: 23px; - width: 32px; - cursor: pointer; - z-index: 100; - -webkit-transition: opacity .25s ease; - transition: opacity .25s ease; - &:hover { + position: absolute; + top: 40px; + right: 30px; + height: 23px; + width: 32px; + cursor: pointer; + z-index: 100; + -webkit-transition: opacity .25s ease; + transition: opacity .25s ease; + &:hover { opacity: .7; - } + } span { - background: $white; - border: none; - height: 4px; - width: 100%; - position: absolute; - top: 0; - left: 0; - -webkit-transition: all .35s ease; - transition: all .35s ease; - cursor: pointer; + background: $white; + border: none; + height: 4px; + width: 100%; + position: absolute; + top: 0; + left: 0; + -webkit-transition: all .35s ease; + transition: all .35s ease; + cursor: pointer; } span:nth-of-type(2) { - top: 8px; + top: 8px; } span:nth-of-type(3) { - top: 16px; + top: 16px; } - + } - + .button_container.active .top { - -webkit-transform: translateY(8px) translateX(0) rotate(45deg); - -ms-transform: translateY(8px) translateX(0) rotate(45deg); - transform: translateY(8px) translateX(0) rotate(45deg); - background: $white; + -webkit-transform: translateY(8px) translateX(0) rotate(45deg); + -ms-transform: translateY(8px) translateX(0) rotate(45deg); + transform: translateY(8px) translateX(0) rotate(45deg); + background: $white; } .button_container.active .middle { - opacity: 0; - background: $white; + opacity: 0; + background: $white; } .button_container.active .bottom { - -webkit-transform: translateY(-8px) translateX(0) rotate(-45deg); - -ms-transform: translateY(-8px) translateX(0) rotate(-45deg); - transform: translateY(-8px) translateX(0) rotate(-45deg); - background: $white; + -webkit-transform: translateY(-8px) translateX(0) rotate(-45deg); + -ms-transform: translateY(-8px) translateX(0) rotate(-45deg); + transform: translateY(-8px) translateX(0) rotate(-45deg); + background: $white; } } .button_container { - position: absolute; - top: 30px; - right: 30px; - height: 23px; - width: 32px; - cursor: pointer; - z-index: 100; - -webkit-transition: opacity .25s ease; - transition: opacity .25s ease; - &:hover { + position: absolute; + top: 30px; + right: 30px; + height: 23px; + width: 32px; + cursor: pointer; + z-index: 100; + -webkit-transition: opacity .25s ease; + transition: opacity .25s ease; + &:hover { opacity: .7; - } + } span { - background: $blue; - border: none; - height: 4px; - width: 100%; - position: absolute; - top: 0; - left: 0; - -webkit-transition: all .35s ease; - transition: all .35s ease; - cursor: pointer; + background: $blue; + border: none; + height: 4px; + width: 100%; + position: absolute; + top: 0; + left: 0; + -webkit-transition: all .35s ease; + transition: all .35s ease; + cursor: pointer; } span:nth-of-type(2) { - top: 8px; + top: 8px; } span:nth-of-type(3) { - top: 16px; + top: 16px; } } .button_container.active .top { - -webkit-transform: translateY(8px) translateX(0) rotate(45deg); - -ms-transform: translateY(8px) translateX(0) rotate(45deg); - transform: translateY(8px) translateX(0) rotate(45deg); - background: $blue; + -webkit-transform: translateY(8px) translateX(0) rotate(45deg); + -ms-transform: translateY(8px) translateX(0) rotate(45deg); + transform: translateY(8px) translateX(0) rotate(45deg); + background: $blue; } .button_container.active .middle { - opacity: 0; - background: $blue; + opacity: 0; + background: $blue; } .button_container.active .bottom { - -webkit-transform: translateY(-8px) translateX(0) rotate(-45deg); - -ms-transform: translateY(-8px) translateX(0) rotate(-45deg); - transform: translateY(-8px) translateX(0) rotate(-45deg); - background: $blue; + -webkit-transform: translateY(-8px) translateX(0) rotate(-45deg); + -ms-transform: translateY(-8px) translateX(0) rotate(-45deg); + transform: translateY(-8px) translateX(0) rotate(-45deg); + background: $blue; } .overlay { - position: fixed; - background: $black; - top: 0; - left: 0; - width: 100%; - height: 0%; - opacity: 0; - visibility: hidden; - -webkit-transition: opacity .35s, visibility .35s, height .35s; - transition: opacity .35s, visibility .35s, height .35s; - overflow: hidden; - - .logo { + position: fixed; + background: $black; + top: 0; + left: 0; + width: 100%; + height: 0%; + opacity: 0; + visibility: hidden; + -webkit-transition: opacity .35s, visibility .35s, height .35s; + transition: opacity .35s, visibility .35s, height .35s; + overflow: hidden; + + .logo { width: 180px; height: auto; top: 30px; left: 30px; position: absolute; } - - nav { - position: relative; - height: 70%; - top: 50%; - -webkit-transform: translateY(-50%); - -ms-transform: translateY(-50%); - transform: translateY(-50%); - font-size: 36px; - font-weight: 200; - text-align: center; + + nav { + position: relative; + height: 70%; + top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); + font-size: 36px; + font-weight: 200; + text-align: center; } - + ul { - list-style: none; - padding: 0; - margin: 0 auto; - margin-top: 0px; - display: inline-block; - position: relative; - height: 50%; + list-style: none; + padding: 0; + margin: 0 auto; + margin-top: 0px; + display: inline-block; + position: relative; + height: 50%; li { - display: block; - height: 16%; - height: calc(100% / 6); - min-height: 50px; - position: relative; - opacity: 0; + display: block; + height: 16%; + height: calc(100% / 6); + min-height: 50px; + position: relative; + opacity: 0; } a { - display: block; - position: relative; - color: $white; - text-decoration: none; - overflow: hidden; - padding-bottom: 15px; - padding-top: 5px; + display: block; + position: relative; + color: $white; + text-decoration: none; + overflow: hidden; + padding-bottom: 15px; + padding-top: 5px; } a:hover:after, a:focus:after, a:active:after { width: 100%; } } - + .sign-up-btn { border: none; padding: 30px; @@ -216,47 +216,47 @@ } } .overlay.open { - opacity: 1; - visibility: visible; - height: 100%; - li { - -webkit-animation: fadeInRight .5s ease forwards; - animation: fadeInRight .5s ease forwards; - -webkit-animation-delay: .35s; - animation-delay: .35s; + opacity: 1; + visibility: visible; + height: 100%; + li { + -webkit-animation: fadeInRight .5s ease forwards; + animation: fadeInRight .5s ease forwards; + -webkit-animation-delay: .35s; + animation-delay: .35s; } li:nth-of-type(2) { - -webkit-animation-delay: .4s; - animation-delay: .4s; + -webkit-animation-delay: .4s; + animation-delay: .4s; } li:nth-of-type(3) { - -webkit-animation-delay: .45s; - animation-delay: .45s; + -webkit-animation-delay: .45s; + animation-delay: .45s; } li:nth-of-type(4) { - -webkit-animation-delay: .50s; - animation-delay: .50s; + -webkit-animation-delay: .50s; + animation-delay: .50s; } } @-webkit-keyframes fadeInRight { - 0% { - opacity: 0; - left: 20%; - } - 100% { - opacity: 1; - left: 0; - } + 0% { + opacity: 0; + left: 20%; + } + 100% { + opacity: 1; + left: 0; + } } @keyframes fadeInRight { - 0% { - opacity: 0; - left: 20%; - } - 100% { - opacity: 1; - left: 0; - } + 0% { + opacity: 0; + left: 20%; + } + 100% { + opacity: 1; + left: 0; + } } diff --git a/_sass/_styleguide.scss b/_sass/_styleguide.scss index acd4a6c..ed967b3 100644 --- a/_sass/_styleguide.scss +++ b/_sass/_styleguide.scss @@ -1,20 +1,20 @@ #styleguide { - .component { - &:after { // TODO clearfix mixin - content: ''; - display: table; - clear: both; - } - } - .component + .component { - margin-top: 10px; - } + .component { + &:after { // TODO clearfix mixin + content: ''; + display: table; + clear: both; + } + } + .component + .component { + margin-top: 10px; + } - .color__tile { - display: inline-block; - padding: 20px; - text-align: center; - width: 10em; - border-radius: 10px; - } + .color__tile { + display: inline-block; + padding: 20px; + text-align: center; + width: 10em; + border-radius: 10px; + } } diff --git a/_sass/_typography.scss b/_sass/_typography.scss index b3fd7c3..78d2e1b 100644 --- a/_sass/_typography.scss +++ b/_sass/_typography.scss @@ -34,7 +34,7 @@ h1 { } h2 { - font-size: 22px; + font-size: 28px; color: $blue; }