organizing scss into multiple files

MozillaFoundation · Feb 15, 2017 · 055f7fe · 055f7fe
1 parent 4e353c7
commit 055f7fe
Show file tree

Hide file tree

Showing 5 changed files with 289 additions and 297 deletions.
diff --git a/source/sass/buttons.scss 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
@@ -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
@@ -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
@@ -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;
+}