Amend scss mixins

2 files changed, 41 insertions, 19 deletions

diff --git a/assets/sass/_ed.scss b/assets/sass/_ed.scss
index 4042af9..c227ad8 100644
--- a/assets/sass/_ed.scss
+++ b/assets/sass/_ed.scss
@@ -12,7 +12,7 @@
 */
 
 /*
-  To apply a different color scheme to the whole scroll down to the themes section instructions at
+  To apply a different color scheme to the whole scroll down to the themes section for instructions at
   the very bottom of this file
 */
 
@@ -50,8 +50,7 @@ html {
 body {
   color: $text-color;
   background-color: #fff;
-  -webkit-text-size-adjust: 100%;
-      -ms-text-size-adjust: 100%;
+  @include text-size-adjust(100%);
 }
 
 .content {
@@ -233,10 +232,7 @@ tbody tr:nth-child(odd) th {
   font-family: $main-font;
   font-size: 1.8rem;
   line-height: .777em;
-  margin-top: 2em;
-  margin-bottom: 0;
-  margin-right: 0;
-  margin-left: 0;
+  margin: 2em 0 0;
   text-align: center;
 }
 
@@ -290,8 +286,7 @@ tbody tr:nth-child(odd) th {
   font-size: .875rem;/* 15px*/
   color: rgba(255,255,255,.6);
   background-color: #202020;
-  -webkit-transition: all .3s ease-in-out;
-          transition: all .3s ease-in-out;
+  @include transition(all .3s ease-in-out);
 }
 
 @media (min-width: 30em) {
@@ -445,9 +440,7 @@ a.sidebar-nav-item:focus {
 #sidebar-checkbox:checked ~ .sidebar,
 #sidebar-checkbox:checked ~ .wrap,
 #sidebar-checkbox:checked ~ .sidebar-toggle {
-  -webkit-transform: translateX(14rem);
-      -ms-transform: translateX(14rem);
-          transform: translateX(14rem);
+  @include transform(translateX(14rem));
 }
 
 
@@ -470,9 +463,7 @@ a.sidebar-nav-item:focus {
 .layout-reverse #sidebar-checkbox:checked ~ .sidebar,
 .layout-reverse #sidebar-checkbox:checked ~ .wrap,
 .layout-reverse #sidebar-checkbox:checked ~ .sidebar-toggle {
-  -webkit-transform: translateX(-14rem);
-      -ms-transform: translateX(-14rem);
-          transform: translateX(-14rem);
+  @include transform(translateX(-14rem));
 }
 
 
@@ -483,9 +474,7 @@ a.sidebar-nav-item:focus {
 */
 
 .sidebar-overlay #sidebar-checkbox:checked ~ .wrap {
-  -webkit-transform: translateX(0);
-      -ms-transform: translateX(0);
-          transform: translateX(0);
+  @include transform(translateX(0));
 }
 
 .sidebar-overlay #sidebar-checkbox:checked ~ .sidebar-toggle {
@@ -642,7 +631,7 @@ a.footnote-ref {
   font-size: .66rem;
 }
 
-/*Bibliography styles */
+/* Bibliography styles */
 ol.bibliography {
   list-style-type:none;
   padding-left: 1rem;
diff --git a/assets/sass/_mixins.scss b/assets/sass/_mixins.scss
index 6261654..2c0ca95 100644
--- a/assets/sass/_mixins.scss
+++ b/assets/sass/_mixins.scss
@@ -40,6 +40,39 @@ $break-desktop: 1600px;
   }
 }
 
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  text-size-adjust
+// Controls the text inflation algorithm used on some smartphones and tablets.
+// Other browsers will ignore this property.
+//
+// Usage: @include text-size-adjust(none);
+
+@mixin text-size-adjust($value) {
+  -webkit-text-size-adjust: $value;
+     -moz-text-size-adjust: $value;
+      -ms-text-size-adjust: $value;
+          text-size-adjust: $value;
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  Transform
+// Usage: @include transform(
+//             rotate(90deg),
+//             scale(0.5),
+//             // ... add more transforms if you need
+//        );
+//
+
+@mixin transform($transforms...) {
+  // combine the passed transforms into a space separated list
+  $transform-list: join($transforms, null, space);
+
+  // print out the transforms
+  -webkit-transform: $transform-list;
+     -moz-transform: $transform-list;
+      -ms-transform: $transform-list;
+       -o-transform: $transform-list;
+          transform: $transform-list;
+}
+
 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  Transitions
 // Usage: @include transition(color .3s ease);