removing tween

Author: kylelangford

build/assets/css/styles.css

@@ -3139,12 +3139,6 @@ html {
 
 body {
   background-color: #ffffff;
-  opacity: 0;
-}
-
-body.tween {
-  opacity: 1;
-  transition: all 0.7s ease-in;
 }
 
 body.page--all .container {
@@ -3520,3 +3514,64 @@ ul.pretty {
   padding-top: 50%;
   /* If you want text inside of it */
 }
+
+.specimen,
+.media {
+  margin-bottom: 48px;
+  text-align: center;
+}
+
+@media only screen and (min-width: 1100px) {
+  .stretch {
+    margin-right: -10vw;
+    margin-left: -10vw;
+  }
+}
+
+/* Carousel Styling */
+.stack {
+  padding: 16px;
+  border: 1px solid #eee;
+  background: #fff;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 10px 0 -5px #eee, 0 10px 1px -4px rgba(0, 0, 0, 0.15), 0 20px 0 -10px #eee, 0 20px 1px -9px rgba(0, 0, 0, 0.15);
+}
+
+/* Image Styling */
+.paper {
+  padding: 8px;
+  border: 1px solid #eee;
+  background: #fff;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
+}
+
+.fake-browser-ui {
+  display: inline-block;
+  position: relative;
+  padding: 20px 0 0;
+  border-radius: 3px;
+  background: #ddd;
+  line-height: 0;
+}
+
+.fake-browser-ui .scroll-box {
+  height: 500px;
+  overflow: scroll;
+}
+
+.fake-browser-ui .frame {
+  display: block;
+  position: absolute;
+  top: 5px;
+  left: 1px;
+  height: 15px;
+}
+
+.fake-browser-ui span {
+  width: 8px;
+  height: 8px;
+  margin: 0 0 0 4px;
+  float: left;
+  border: 1px solid #dadada;
+  border-radius: 8px;
+  background-color: #eee;
+}

build/assets/js/main.js

@@ -47,7 +47,7 @@ $(function() {
 
 $('document').ready(function() {
   // Add Tween Class
-  $('body').addClass('tween');
+  // $('body').addClass('tween');
 
   // Menu Trigger
   $('.primary-menu-btn').on('click touchstart', function(e) {

build/assets/js/maps/main.js.map

@@ -4,16 +4,16 @@ html {
 
 body {
   background-color: $white;
-  opacity: 0;
+  // opacity: 0;
 
   // article {
   //   transform: translateY(35vh);
   // }
 
   &.tween {
     // on load
-    opacity: 1;
-    transition: all 0.7s ease-in;
+    // opacity: 1;
+    // transition: all 0.7s ease-in;
 
     // article {
     //   transition: all 0.7s ease-in;
@@ -403,3 +403,71 @@ ul.pretty {
 // .blend--multiply {
 //   mix-blend-mode: multiply;
 // }
+
+// Media Content
+.specimen,
+.media {
+  margin-bottom: g(6);
+  text-align: center;
+}
+
+.stretch {
+  @include media($md-breakpoint) {
+    margin-left: -10vw;
+    margin-right: -10vw;
+  }
+}
+
+/* Carousel Styling */
+.stack {
+  background: #fff;
+  border: 1px solid #eee;
+  box-shadow:
+    /* The top layer shadow */ 0 1px 1px rgba(0, 0, 0, 0.15),
+    /* The second layer */ 0 10px 0 -5px #eee,
+    /* The second layer shadow */ 0 10px 1px -4px rgba(0, 0, 0, 0.15),
+    /* The third layer */ 0 20px 0 -10px #eee,
+    /* The third layer shadow */ 0 20px 1px -9px rgba(0, 0, 0, 0.15);
+  padding: g(2);
+}
+
+/* Image Styling */
+.paper {
+  background: #fff;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
+  padding: 8px;
+  border: 1px solid #eee;
+  // width: 100%;
+}
+
+.fake-browser-ui {
+  padding: 20px 0 0;
+  border-radius: 3px;
+  background: #ddd;
+  display: inline-block;
+  position: relative;
+  line-height: 0;
+
+  .scroll-box {
+    overflow: scroll;
+    height: 500px;
+  }
+}
+
+.fake-browser-ui .frame {
+  display: block;
+  height: 15px;
+  position: absolute;
+  top: 5px;
+  left: 1px;
+}
+
+.fake-browser-ui span {
+  height: 8px;
+  width: 8px;
+  border-radius: 8px;
+  background-color: #eee;
+  border: 1px solid #dadada;
+  float: left;
+  margin: 0 0 0 4px;
+}