ratchet_design 0.1.19 → 0.1.20

data/app/assets/stylesheets/ratchet/base/_list.scss

@@ -7,15 +7,9 @@
  * ------------------------------------- */
 
 // Remove styling from unordered lists
-@mixin unstyle($reset-padding: on) {
+@mixin unstyle {
   list-style: none;
-
-  li {
-    text-indent: 0;
-    @if $reset-padding == on {
-      padding-left: 0;
-    }
-  }
+  padding-left: 0;
 }
 
 // Unstyle list
@@ -27,13 +21,8 @@
 %list-style {
   padding-top: 9px;
   margin-bottom: 21px;
-  list-style-position: inside;
-
-  // Horizontal alignment
-  li {
-    text-indent: -20px;
-    padding-left: 20px;
-  }
+  margin-left: 0;
+  padding-left: 1em;
 }
 
 /* ===================================== *
@@ -85,6 +74,8 @@ ol {
     line-height: 0;
     font-weight: 700;
     margin-right: 8px;
+    margin-left: -1em;
+    width: 1em;
   }
 }
 

data/app/assets/stylesheets/ratchet/base/_media.scss

@@ -6,14 +6,26 @@
  * i. Utility
  * ------------------------------------- */
 
+$embed-padding: 3vw;
+
 // Fluid Embeds
-@mixin embed {
-  width: 100%;
-  // height: calc(9 / 16 * #{$content-width});
+@mixin viewport-embed {
+  position: relative;
+  width: 100vw - $embed-padding * 2;
+  height: calc(9 / 16 * (100vw - #{$embed-padding * 2}));
+
+  @media (max-height: 56.25vw + $embed-padding) {
+    width: calc(16 / 9 * (100vh - #{$embed-padding * 2}));
+    height: calc(100vh - #{$embed-padding * 2});
+  }
 
-  // @media (max-width: $content-width + $content-padding * 2) {
-  //   height: calc(9 / 16 * 100vw - #{$content-padding});
-  // }
+  iframe,
+  object,
+  embed {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
 }
 
 // Image caption mixin
@@ -38,4 +50,8 @@ video {
   max-width: 100%;
   height: auto;
   vertical-align: top;
+}
+
+.viewport-embed {
+  @include viewport-embed;
 }

data/app/assets/stylesheets/ratchet/base/_section.scss

@@ -2,264 +2,15 @@
  * Contrast section
  * -------------------------------------------------------------------------- */
 
-/*
- * Variables that we need to account for:
- * Layout
- * Spacing
- * Background
- * Angle Direction
- * One Angle
- * Background Image
- */
+.container {
+  padding: vr(5) calc(50% - #{($site-width/2)}); /* 16em: width/2 */
 
-/* ===================================== *
- * a. Utilities
- * ------------------------------------- */
-
-$section-gutter-none: 0;
-$section-gutter-xsmall: 5%;
-$section-gutter-small: 15%;
-$section-gutter-large: 30%;
-
-@mixin section-offset($num) {
-  .section-offset-#{$num} {
-    margin-top: $num * -1%;
+  @include until($breakpoint-lg + 30px) {
+		padding: vr(4) vr(2);
   }
-}
-
-@include section-offset(10);
-@include section-offset(20);
-@include section-offset(30);
-@include section-offset(40);
-@include section-offset(50);
 
-/* ===================================== *
- * b. Common
- * ------------------------------------- */
-
-// Contrast and Angle Sections
-.contrast-section,
-.angle-section {
-  padding-top: vr(4);
-  padding-bottom: vr(6);
-  position: relative;
-    
-  // Background
-  &:before {
-    height: calc(100% + .57735027 * 100vw - 1px); // .57735027 = tangent of 30°
-    top: 0;    
-    content: '';
-    width: 100vw;
-    position: absolute;
-    left: calc(-50vw + 50%);
-    z-index: -1;
+  &.short {
+    padding-top: vr(1);
+    padding-bottom: vr(1); 
   }
-}
-
-// Angle and Block Heros
-// .angle-hero,
-// .block-hero {
-//   position: relative;
-//   // overflow: hidden;
-//   color: $white;
-//   max-height: 1400px;
-//   text-align: center;
-
-//   &:before {
-//     bottom: 0;
-//     z-index: -3;
-//     content: '';
-//     width: 100vw;
-//     position: absolute;
-//     left: calc(-50vw + 50%);
-//   }
-
-//   // Hero SVG
-//   figure {
-//     bottom: -11%;
-//     overflow: hidden;
-//     position: absolute;
-//     width: 100%;
-//     z-index: -1;
-    
-//     @media (max-width: $breakpoint) {
-//       @include hidden;
-//     }
-//   } 
-// }
-
-// // Angle Hero
-// .angle-hero {
-//   // Large Gutter is default for hero to completely set copy within angles
-//   padding-top: $section-gutter-large;
-//   padding-bottom: $section-gutter-large;
-//   margin-top: -$section-gutter-large;
-
-//   &:before {
-//     top: (-$section-gutter-large - $section-gutter-xsmall);
-//     height: 100% + $section-gutter-large;
-//   }
-  
-//   // // Adjust height
-//   // &.left:before,
-//   // &.right:before {
-//   //   height: 100%;
-//   //   @include until($breakpoint) {
-//   //     height: 110% + $section-gutter-xsmall;
-//   //   };
-//   //   @include between($breakpoint-lg, 1800px) {
-//   //     height: 100% - $section-gutter-xsmall;
-//   //   };
-//   // }
-// }
-
-// // Block Hero (No Angle)
-// .block-hero {
-//   padding-top: $section-gutter-large * 2;
-//   padding-bottom: 15%;
-//   margin-top: -$section-gutter-large * 2;
-//   margin-bottom: vr(4); // 60px
-
-//   &:before {
-//     top: 0;
-//     height: 100%;
-//   }
-
-//   @include at-least($breakpoint-lg) {
-//     padding-bottom: 10%;
-//   };
-// }
-
-// Default Angle Direction - RTL
-.angle-section {
-  &:before { transform: skewY(-$deg); }
-}
-
-// Reverse Angle Direction - LTR
-.angle-section.reverse,
-.angle-hero.right {
-  &:before { transform: skewY($deg); } 
-}
-
-// // Break full angle ** MAKE INTO MIXIN FOR VARIATIONS ****
-// .angle-break {
-//   background: $white;
-//   // Need better math here?
-//   bottom: -95%;
-//   content: '';
-//   display: block;
-//   height: 100%;
-//   right: 0;
-//   position: absolute;
-//   width: 100%;
-//   transform: skewY(30deg);
-
-//   &.reverse {
-//     transform: skewY(-30deg);
-//   }
-// }
-
-.oversized {
-  &:before{
-    height: 140%;
-  }
-}
-
-
-/* ===================================== *
- * c. Specific Hero SVG Styling
- * ------------------------------------- */
-
-// // Blank isometric grid SVG positioning within hero
-// .isometric-grid-hero-bg {
-//   figure {
-//     overflow: visible;
-//   }
-
-//   svg {
-//     margin-left: -136%;
-//     margin-bottom: -20%;
-//     width: 275%;
-//   }
-
-//   // Different positioning when hero is reversed
-//   &.reverse {
-//     svg {
-//       margin-left: -50%;
-//     }
-//   }
-// }
-
-.mongodb-leaves {
-  svg {
-    width: 100%;
-  }
-}
-
-// // Cube Stack SVG positioning within hero
-// .cube-stack-hero-bg {
-//   padding-bottom: 33%;
-
-//   svg {
-//     margin-left: -6%;
-//     width: 112%;
-
-//     // Prevent svg from continuing to scale
-//     @media (min-width: 1500px) {
-//       max-width: 1500px;
-//       margin: 0 auto;
-//     }
-//   }
-
-//   // Hide svg overflow - right
-//   &:after {
-//     background: $white;
-//     bottom: -95%;
-//     content: '';
-//     display: block;
-//     height: 100%;
-//     left: 0;
-//     position: absolute;
-//     width: 100%;
-//     transform: skewY(-30deg);
-//   }
-// }
-
-/* REVISIT BELOW */
-
-// Need to rethink the gutter for sections
-// // No Gutter for Sections
-// &.no-gutter {
-//   padding: {top: $section-gutter-none; bottom: $section-gutter-none;}
-// }
-
-// // Xsmall Gutter for Sections
-// &.xsmall-gutter {
-//   padding: {top: $section-gutter-xsmall; bottom: $section-gutter-xsmall;}
-// }
-
-// // Small Gutter for Sections
-// &.small-gutter {
-//   padding: {top: $section-gutter-small; bottom: $section-gutter-small;}
-// }
-
-// // Large Gutter for Sections
-// &.large-gutter {
-//   padding: {top: $section-gutter-large; bottom: $section-gutter-large;}
-// }
-
-// Need to rethink the gutters for heros
-// // No Gutter for Hero
-// &.no-gutter {
-//   padding-bottom: $section-gutter-none;
-// }
-
-// // Xsmall Gutter for Hero
-// &.xsmall-gutter {
-//   padding-bottom: $section-gutter-xsmall;
-// }
-
-// // Small Gutter for Hero
-// &.small-gutter {
-//   padding-bottom: $section-gutter-small;
-// }
+}