#18 — more refactoring.

morganfeeney · Mar 31, 2017 · 52805cd · 52805cd
1 parent cb2ea45
commit 52805cd
Show file tree

Hide file tree

Showing 5 changed files with 129 additions and 31 deletions.
diff --git a/src/scss/partials/_image.scss b/src/scss/partials/_image.scss
@@ -12,13 +12,21 @@ img {
 }
 .container > img {
   align-self: center;
-  @include baseline($font-base, $no-text: true, $margin: 2);
+  @include baseline(
+    $font-size: $font-base,
+    $no-text: true,
+    $margin: 2
+  );
 }
 
 .item > img {
   align-self: center;
 }
 
 p + img {
-  @include baseline($no-text: true, $above: .4, $below: .4);
+  @include baseline(
+    $no-text: true,
+    $above: .4,
+    $below: .4
+  );
 }
diff --git a/src/scss/theme-interior/mixins/_body.scss b/src/scss/theme-interior/mixins/_body.scss
@@ -1,5 +1,9 @@
 // Opting for @include over @extend here.
 
 @mixin body-1() {
-  @include baseline($english, $line-height: 2, $above: .5);
+  @include baseline(
+    $font-size: $english,
+    $line-height: 2,
+    $above: .5
+  );
 }
diff --git a/src/scss/theme-interior/mixins/_headings.scss b/src/scss/theme-interior/mixins/_headings.scss
@@ -2,7 +2,7 @@
 
 @mixin heading-1() {
   @include baseline(
-    $double-english, 
+    $font-size: $double-english,
     $line-height: 1.18,
     $above: 1.3,
     $below: 2
@@ -12,7 +12,7 @@
 
 @mixin heading-2() {
   @include baseline(
-    $two-line-pica,
+    $font-size: $two-line-pica,
     $line-height: 1.28,
     $above: .33,
     $below: 1
@@ -22,7 +22,7 @@
 
 @mixin heading-3() {
   @include baseline(
-    $double-pica,
+    $font-size: $double-pica,
     $line-height: 1.15,
     $above: .1,
     $below: 1
@@ -32,7 +32,7 @@
 
 @mixin heading-4() {
   @include baseline(
-    $paragon,
+    $font-size: $paragon,
     $line-height: .96,
     $below: 0
   );
@@ -41,7 +41,7 @@
 
 @mixin heading-5() {
   @include baseline(
-    $great-primer,
+    $font-size: $great-primer,
     $line-height: 1.25,
     $above: .2,
     $below: .1
@@ -51,7 +51,7 @@
 
 @mixin heading-6() {
   @include baseline(
-    $english,
+    $font-size: $english,
     $line-height: 2,
     $above: .5,
     $below: -1
@@ -61,7 +61,7 @@
 
 @mixin heading-whopper() {
   @include baseline(
-    $two-line-pica,
+    $font-size: $two-line-pica,
     $line-height: 1.28,
     $margin: 8,
     $above: .45,

diff --git a/src/scss/theme-interior/mixins/_typography.scss b/src/scss/theme-interior/mixins/_typography.scss
@@ -9,11 +9,11 @@
   position: relative;
   &:before {
     @include baseline(
-      $pica,
+      $font-size: $pica,
       $above: .1,
       $below: 0,
       $padding-bottom: .4rem,
-      $margin-bottom: 0, 
+      $margin-bottom: 0,
       $margin-top: -1px
     );
     border-bottom: $light-border;

diff --git a/src/scss/theme-interior/partials/_docs-layout.scss b/src/scss/theme-interior/partials/_docs-layout.scss
@@ -5,55 +5,136 @@
   .home-link {
     display: block;
   }
+
   header {
     .home-link svg {
-      @include baseline($no-text: true, $margin: 2, $below: -.15);
+      @include baseline(
+        $no-text: true,
+        $margin: 2,
+        $below: -.15
+      );
       max-width: 8rem;
       @media(min-width: $screen-small) {
-        @include baseline($no-text: true, $margin: 2, $below: -.15);
+        @include baseline(
+          $no-text: true,
+          $margin: 2,
+          $below: -.15
+        );
       }
       @media(min-width: $screen-large) {
-        @include baseline($no-text: true, $margin: 2, $below: .15);
+        @include baseline(
+          $no-text: true,
+          $margin: 2,
+          $below: .15
+        );
       }
     }
+
     nav {
       a {
         @include baseline();
         display: block;
       }
     }
+
     nav,
     .home-link {
       @media(max-width: $screen-smaller) {
-        @include column(6, $gutter: $gutter-smaller, $margin-left: auto);
+        @include column(
+          $columns: 6,
+          $gutter: $gutter-smaller,
+          $margin-left: auto
+        );
         text-align: right;
       }
-      @include column(4, $gutter: $gutter-smaller, $margin-left: auto);
-      @include column(2, $gutter: $gutter-medium, $margin-left: auto, $breakpoint: $screen-medium);
+      @include column(
+        $columns: 4,
+        $gutter: $gutter-smaller,
+        $margin-left: auto
+      );
+      @media(min-width: $screen-medium) {
+        @include column(
+          $columns: 2,
+          $gutter: $gutter-medium,
+          $margin-left: auto
+        );
+      }
     }
   }
   h1 {
-    @include column(10, $gutter: $gutter-smaller);
-    @include column(10, $gutter: $gutter-medium, $breakpoint: $screen-medium);
-    @include column(10, $gutter: $gutter-medium, $breakpoint: $screen-large, $offset-left: true, $offset: 2);
+    @include column(
+      $columns: 10,
+      $gutter: $gutter-smaller
+    );
+    @media(min-width: $screen-medium) {
+      @include column(
+        $columns: 10,
+        $gutter: $gutter-medium
+      );
+    }
+    @media(min-width: $screen-large) {
+      @include column(
+        $columns: 10,
+        $gutter: $gutter-medium,
+        $offset-left: true,
+        $offset: 2
+      );
+    }
   }
   .container section {
-    @include column(12, $gutter: $gutter-smaller);
-    @include column(10, $breakpoint: $screen-medium, $gutter: $gutter-medium);
-    @include column(8, $breakpoint: $screen-large, $offset-left: true, $offset: 2);
-    @include column(6, $breakpoint: $screen-largest, $offset-left: true, $offset: 2);
+    @include column(
+      $columns: 12,
+      $gutter: $gutter-smaller
+    );
+    @media(min-width: $screen-medium) {
+      @include column(
+        $columns: 10,
+        $gutter: $gutter-medium
+      );
+    }
+    @media(min-width: $screen-large) {
+      @include column(
+        $columns: 8,
+        $offset-left: true,
+        $offset: 2
+      );
+    }
+    @media(min-width: $screen-largest) {
+      @include column(
+        $columns: 6,
+        $offset-left: true,
+        $offset: 2
+      );
+    }
     h2, h3, h4, h5 {
-      @include column(12, $gutter: $gutter-smaller);
-      @include column(4, $breakpoint: $screen-largest, $gutter: $gutter-smaller);
+      @include column(
+        $columns: 12,
+        $gutter: $gutter-smaller
+      );
+      @include column(
+        $columns: 4,
+        $breakpoint: $screen-largest,
+        $gutter: $gutter-smaller
+      );
     }
     p {
-      @include column(12, $gutter: $gutter-smaller);
-      @include column(8, $breakpoint: $screen-largest, $gutter: $gutter-smaller);
+      @include column(
+        $columns: 12,
+        $gutter: $gutter-smaller
+      );
+      @include column(
+        $columns: 8,
+        $breakpoint: $screen-largest,
+        $gutter: $gutter-smaller
+      );
     }
   }
   .dl-wrapper,
   .code-block {
-    @include column(12, $gutter: $gutter-smaller);
+    @include column(
+      $columns: 12,
+      $gutter: $gutter-smaller
+    );
   }
   footer {
     @media(min-width: $screen-large) {
@@ -62,6 +143,11 @@
   }
   .sig {
     @include baseline($margin: 10);
-    @include column(8, $gutter: $gutter-small, $margin: auto, $breakpoint: $screen-large);
+    @include column(
+      $columns: 8,
+      $gutter: $gutter-small,
+      $margin: auto,
+      $breakpoint: $screen-large
+    );
   }
 }