From 055f7fe6810a67f57a22263ba4517775ba67e0c2 Mon Sep 17 00:00:00 2001 From: Gavin Lazar Suntop Date: Tue, 14 Feb 2017 17:05:46 -0800 Subject: [PATCH] organizing scss into multiple files --- source/sass/buttons.scss | 29 ++++ source/sass/global.scss | 25 ++++ source/sass/main.scss | 308 ++------------------------------------- source/sass/resets.scss | 18 +++ source/sass/type.scss | 206 ++++++++++++++++++++++++++ 5 files changed, 289 insertions(+), 297 deletions(-) create mode 100644 source/sass/buttons.scss create mode 100644 source/sass/global.scss create mode 100644 source/sass/resets.scss create mode 100644 source/sass/type.scss diff --git a/source/sass/buttons.scss b/source/sass/buttons.scss new file mode 100644 index 00000000000..35c0b90ad33 --- /dev/null +++ b/source/sass/buttons.scss @@ -0,0 +1,29 @@ +.btn { + font-family: "Nunito Sans"; + font-weight: 900; + text-transform: uppercase; + + &::after { + content: " →"; + } + + &:hover { + cursor: pointer; + } +} + +.btn-ghost { + color: $black; + background: $white; + border: 1px solid #3bb7ef; + + &:hover { + color: $black; + background-color: #3bb7ef; + } +} + +.btn-normal { + color: $black; + background: #ffed00; +} diff --git a/source/sass/global.scss b/source/sass/global.scss new file mode 100644 index 00000000000..0ec325c1b6f --- /dev/null +++ b/source/sass/global.scss @@ -0,0 +1,25 @@ +body > .wrapper { + background: $white; +} + +#hero { + background: #b6d806; + + .center-nav-title p { + text-transform: uppercase; + margin: 0; + padding: 0; + color: #91ac04; + letter-spacing: 1px; + line-height: 24px; + } +} + +.mofo-footer { + background: $black; + letter-spacing: 0.02rem; + + p { + color: rgba(255, 255, 255, 0.5); + } +} diff --git a/source/sass/main.scss b/source/sass/main.scss index 6a4a2d1a5dd..a0118c09d1a 100755 --- a/source/sass/main.scss +++ b/source/sass/main.scss @@ -1,11 +1,14 @@ +// Bootstrap + @import '../../node_modules/mofo-bootstrap/dest/css/mofo-bootstrap'; @import '../../node_modules/mofo-bootstrap/src/scss/custom/_colors'; -@import '../../node_modules/bootstrap/scss/_variables.scss'; +@import '../../node_modules/bootstrap/scss/_variables'; // React Components -@import '../js/components/people/people.scss'; -@import '../js/components/nav/nav.scss'; -@import '../js/components/join/join.scss'; + +@import '../js/components/people/people'; +@import '../js/components/nav/nav'; +@import '../js/components/join/join'; // Breakpoints (imported from Bootstrap) @@ -15,296 +18,7 @@ $bp-md: #{map-get($grid-breakpoints, md)}; // >= 768px $bp-lg: #{map-get($grid-breakpoints, lg)}; // >= 992px $bp-xl: #{map-get($grid-breakpoints, xl)}; // >= 1200px -// Resets & Primitives - -html { - background: $black; -} - -html, -body { - margin: 0; - padding: 0; - font-family: "Nunito Sans", Helvetica, Arial, sans-serif; -} - -img { - max-width: 100%; -} - -ul { - list-style: none; -} - -// Type - -p, -h1, -h2, -h3, -h4, -h5, -h6 { - color: $black; -} - -a { - color: #3bb7ef; -} - -@mixin black-box-white-text { - background: $black; - color: $white; - display: inline; - padding: 0.1em 30px 0.1em 0; - line-height: 1.6em; - box-shadow: 15px 0 0 $black, -15px 0 0 $black; - position: relative; - left: 15px; -} - -.h1-home-white { - font-family: Arvo; - font-weight: 900; - font-size: 64px; - - @include black-box-white-text; -} - -.h1-white { - font-family: Arvo; - font-weight: 100; - font-size: 48px; - letter-spacing: 0; - - @include black-box-white-text; -} - -.h2-headings-white { - font-size: 24px; - letter-spacing: 1px; - text-transform: uppercase; - - @include black-box-white-text; -} - -.h2-typeaccents-gray { - font-family: Arvo; - font-weight: 400; - font-size: 72px; - color: #ccc; - line-height: 80px; -} - -.h3-black { - font-family: Arvo; - font-weight: 100; - font-size: 40px; - letter-spacing: 0; - line-height: 48px; -} - -.h3-cta-black { - font-size: 32px; - letter-spacing: 0; - line-height: 40px; - font-weight: 900; -} - -.h4-medium-black { - font-family: Arvo; - font-size: 28px; - letter-spacing: 0.5px; - line-height: 32px; -} - -.h4-medium-white { - font-family: Arvo; - font-weight: 400; - font-size: 28px; - letter-spacing: 0.5px; - - @include black-box-white-text; -} - -.h4-light-black { - font-family: Arvo; - font-weight: 100; - font-size: 28px; - color: #231f20; - letter-spacing: 0; - line-height: 32px; -} - -.h4-headingcontract-black { - font-size: 28px; - font-weight: 400; - color: #231f20; - letter-spacing: 0; - line-height: 32px; -} - -.h5-black { - font-family: Arvo; - font-weight: 400; - font-size: 20px; - color: #231f20; - letter-spacing: 0.25px; - line-height: 32px; -} - -.h6-gray { - font-size: 12px; - font-weight: 400; - color: #909090; - letter-spacing: 0.5px; - line-height: 16px; - text-transform: uppercase; -} - -.h6-white { - font-size: 12px; - letter-spacing: 0.5px; - text-transform: uppercase; - - @include black-box-white-text; -} - -.lead-black { - font-size: 20px; - font-weight: 100; - letter-spacing: 0; - line-height: 32px; -} - -.blockquote-gray { - font-size: 24px; - font-weight: 100; - font-style: italic; - color: #909090; - line-height: 32px; -} - -.body-black { - font-size: 16px; - color: $black; - letter-spacing: 0; - line-height: 24px; -} - -.body-white { - font-size: 16px; - font-weight: 100; - - @include black-box-white-text; -} - -.italic-black { - font-size: 16px; - letter-spacing: 0; - line-height: 24px; - font-style: italic; -} - -.small-gray { - font-size: 12px; - color: #909090; - letter-spacing: 0; - line-height: 16px; -} - -.small-white { - font-size: 12px; - letter-spacing: 0; - - @include black-box-white-text; -} - -.body-link { - font-size: 16px; - letter-spacing: 0; - line-height: 24px; -} - -.link-small { - font-size: 12px; - letter-spacing: 0; - line-height: 16px; -} - -.cta-link { - font-size: 16px; - display: inline-block; - letter-spacing: 0.5px; - line-height: 24px; - text-transform: uppercase; - text-decoration: underline; - - &::after { - content: " →"; - } -} - -// Buttons - -.btn { - font-family: "Nunito Sans"; - font-weight: 900; - text-transform: uppercase; - - &::after { - content: " →"; - } - - &:hover { - cursor: pointer; - } -} - -.btn-ghost { - color: $black; - background: $white; - border: 1px solid #3bb7ef; - - &:hover { - color: $black; - background-color: #3bb7ef; - } -} - -.btn-normal { - color: $black; - background: #ffed00; -} - -// Utility Classes - -// Custom Components - -body > .wrapper { - background: $white; -} - -#hero { - background: #b6d806; - - .center-nav-title p { - text-transform: uppercase; - margin: 0; - padding: 0; - color: #91ac04; - letter-spacing: 1px; - line-height: 24px; - } -} - -.mofo-footer { - background: $black; - letter-spacing: 0.02rem; - - p { - color: rgba(255, 255, 255, 0.5); - } -} - -// Pages +@import './resets'; +@import './type'; +@import './buttons'; +@import './global'; diff --git a/source/sass/resets.scss b/source/sass/resets.scss new file mode 100644 index 00000000000..10de4053052 --- /dev/null +++ b/source/sass/resets.scss @@ -0,0 +1,18 @@ +html { + background: $black; +} + +html, +body { + margin: 0; + padding: 0; + font-family: "Nunito Sans", Helvetica, Arial, sans-serif; +} + +img { + max-width: 100%; +} + +ul { + list-style: none; +} diff --git a/source/sass/type.scss b/source/sass/type.scss new file mode 100644 index 00000000000..8cbed87e389 --- /dev/null +++ b/source/sass/type.scss @@ -0,0 +1,206 @@ +p, +h1, +h2, +h3, +h4, +h5, +h6 { + color: $black; +} + +a { + color: #3bb7ef; +} + +@mixin black-box-white-text { + background: $black; + color: $white; + display: inline; + padding: 0.1em 30px 0.1em 0; + line-height: 1.6em; + box-shadow: 15px 0 0 $black, -15px 0 0 $black; + position: relative; + left: 15px; +} + +.h1-home-white { + font-family: Arvo; + font-weight: 900; + font-size: 64px; + + @include black-box-white-text; +} + +.h1-white { + font-family: Arvo; + font-weight: 100; + font-size: 48px; + letter-spacing: 0; + + @include black-box-white-text; +} + +.h2-headings-white { + font-size: 24px; + letter-spacing: 1px; + text-transform: uppercase; + + @include black-box-white-text; +} + +.h2-typeaccents-gray { + font-family: Arvo; + font-weight: 400; + font-size: 72px; + color: #ccc; + line-height: 80px; +} + +.h3-black { + font-family: Arvo; + font-weight: 100; + font-size: 40px; + letter-spacing: 0; + line-height: 48px; +} + +.h3-cta-black { + font-size: 32px; + letter-spacing: 0; + line-height: 40px; + font-weight: 900; +} + +.h4-medium-black { + font-family: Arvo; + font-size: 28px; + letter-spacing: 0.5px; + line-height: 32px; +} + +.h4-medium-white { + font-family: Arvo; + font-weight: 400; + font-size: 28px; + letter-spacing: 0.5px; + + @include black-box-white-text; +} + +.h4-light-black { + font-family: Arvo; + font-weight: 100; + font-size: 28px; + color: #231f20; + letter-spacing: 0; + line-height: 32px; +} + +.h4-headingcontract-black { + font-size: 28px; + font-weight: 400; + color: #231f20; + letter-spacing: 0; + line-height: 32px; +} + +.h5-black { + font-family: Arvo; + font-weight: 400; + font-size: 20px; + color: #231f20; + letter-spacing: 0.25px; + line-height: 32px; +} + +.h6-gray { + font-size: 12px; + font-weight: 400; + color: #909090; + letter-spacing: 0.5px; + line-height: 16px; + text-transform: uppercase; +} + +.h6-white { + font-size: 12px; + letter-spacing: 0.5px; + text-transform: uppercase; + + @include black-box-white-text; +} + +.lead-black { + font-size: 20px; + font-weight: 100; + letter-spacing: 0; + line-height: 32px; +} + +.blockquote-gray { + font-size: 24px; + font-weight: 100; + font-style: italic; + color: #909090; + line-height: 32px; +} + +.body-black { + font-size: 16px; + color: $black; + letter-spacing: 0; + line-height: 24px; +} + +.body-white { + font-size: 16px; + font-weight: 100; + + @include black-box-white-text; +} + +.italic-black { + font-size: 16px; + letter-spacing: 0; + line-height: 24px; + font-style: italic; +} + +.small-gray { + font-size: 12px; + color: #909090; + letter-spacing: 0; + line-height: 16px; +} + +.small-white { + font-size: 12px; + letter-spacing: 0; + + @include black-box-white-text; +} + +.body-link { + font-size: 16px; + letter-spacing: 0; + line-height: 24px; +} + +.link-small { + font-size: 12px; + letter-spacing: 0; + line-height: 16px; +} + +.cta-link { + font-size: 16px; + display: inline-block; + letter-spacing: 0.5px; + line-height: 24px; + text-transform: uppercase; + text-decoration: underline; + + &::after { + content: " →"; + } +}