Merge branch 'origin/future' into future

getzaymo · Feb 7, 2019 · 4e2e558 · 4e2e558
2 parents 11663d1 + ca15e5b
commit 4e2e558
Show file tree

Hide file tree

Showing 33 changed files with 700 additions and 319 deletions.
diff --git a/frontend/icons/external.svg b/frontend/icons/external.svg
diff --git a/frontend/scss/components/atoms/_bevel.scss b/frontend/scss/components/atoms/_bevel.scss
@@ -24,7 +24,7 @@
 
   &:before {
     height: 1000px;
-    top: 0;
+    top: -3em;
   }
 
   &:after {

diff --git a/frontend/scss/components/atoms/_button.scss b/frontend/scss/components/atoms/_button.scss
@@ -34,12 +34,11 @@ none
 	@include hl;
   font-size: 1em;
 	@include color-white;
-
 	display: inline-block;
 	max-width: 100%;
 	width: auto;
 	height: auto;
-	padding: 1em 2em;
+	padding: 0.75em 1.75em;
 	margin: 0;
 	text-decoration: none;
 	text-align: center;
@@ -53,4 +52,8 @@ none
     transform: translateY(-0.125em);
     box-shadow: 0 25px 20px -15px rgba(0, 0, 0, 0.15);
 	}
+
+  @media (min-width: 768px) {
+    padding: 1em 2em;
+  }
 }
diff --git a/frontend/scss/components/atoms/_headline.scss b/frontend/scss/components/atoms/_headline.scss
@@ -46,7 +46,7 @@ stories-home
 }
 
 @mixin hl-xlrg {
-  font-size: 2.125rem;
+  font-size: 1.65rem;
 
   @media (min-width: 768px) {
     font-size: 2.125rem;
@@ -58,7 +58,7 @@ stories-home
 }
 
 @mixin hl-stage {
-  font-size: 2.25rem;
+  font-size: 1.65rem;
 
   @media (min-width: 768px) {
     font-size: 3.25rem;
@@ -108,6 +108,7 @@ stories-home
 
 @mixin hl-h5 {
   font-size: 1.125rem;
+  line-height: 1.3;
 }
 
 @mixin hl-h6 {

diff --git a/frontend/scss/components/molecules/_quote.scss b/frontend/scss/components/molecules/_quote.scss
@@ -29,8 +29,14 @@
     }
 
     .#{atom('img')} {
-      width: 100%;
-      max-width: 150px;
+      position: relative;
+      width: 150px;
+      height: 30px;
+
+      amp-img.contain img {
+        object-fit: contain;
+        object-position: right top;
+      }
     }
 
     .#{atom('ico')} {

diff --git a/frontend/scss/components/molecules/_teaser.scss b/frontend/scss/components/molecules/_teaser.scss
@@ -47,6 +47,7 @@ teaser types. (Success Stories, Templates, Guides and Tutorials, Examples, ...)
 	right: 16px;
 	top: -15px;
 	z-index: 1;
+	font-family: 'Poppins';
 }
 
 @mixin teaser-card {

diff --git a/frontend/scss/components/molecules/jumbo.scss b/frontend/scss/components/molecules/jumbo.scss
@@ -17,12 +17,10 @@
 
 .#{molecule('jumbo')} {
   grid-column: 6 / 20;
-  padding: 0 20px;
   margin-bottom: 1.5em;
   text-align: center;
 
   @media (min-width: 768px) {
-    padding-left: 20px;
     margin-bottom: 3em;
   }
 

diff --git a/frontend/scss/components/molecules/link.scss b/frontend/scss/components/molecules/link.scss
@@ -24,6 +24,7 @@
     @include txt-strong;
     @include color-blue-ribbon;
     line-height: 1.3;
+    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
   }
 
   &-icon {
@@ -32,6 +33,12 @@
     margin-bottom: auto;
     margin-right: 0.625em;
     box-sizing: initial;
+    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
+  }
+
+  &:hover &-text,
+  &:hover &-icon {
+    transform: translateX(10px);
   }
 
   &-square {
@@ -48,9 +55,27 @@
       &-icon {
         @include ico-2;
         @include ico-square;
+        overflow: hidden;
         padding: 0.563em;
         box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.25);
       }
     }
+
+    &:hover {
+      .#{molecule('lnk-icon')} {
+        box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.25);
+
+        svg {
+          animation: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) duepduep;
+        }
+      }
+    }
   }
 }
+
+@keyframes duepduep {
+  0% { transform: translate(0, 0); }
+  49% { transform: translate(40px, 0); }
+  50% { transform: translate(-40px, 0); }
+  100% { transform: translate(0, 0); }
+}
diff --git a/frontend/scss/components/molecules/rolling-formats.scss b/frontend/scss/components/molecules/rolling-formats.scss
@@ -17,20 +17,13 @@ $showTime: 2s;
   &-item {
     grid-column: 1 / -1;
     grid-row: 1 / -1;
+    margin-right: auto;
     animation-name: roll;
     animation-duration: $showTime * 4;
     animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
     animation-iteration-count: infinite;
     animation-fill-mode: backwards;
 
-    @media screen and (min-width: 575px) {
-      margin-right: auto;
-    }
-
-    @media screen and (min-width: 768px) {
-      margin-left: 0;
-    }
-
     &:nth-child(2) { animation-delay: $showTime * 4 * 1 / 4; }
     &:nth-child(3) { animation-delay: $showTime * 4 * 1 / 2; }
     &:nth-child(4) { animation-delay: $showTime * 4 * 3 / 4; }

diff --git a/frontend/scss/components/molecules/tag.scss b/frontend/scss/components/molecules/tag.scss
@@ -23,7 +23,6 @@ TODO: Add info text to this molecule.
 	@include txt-2;
 	@include txt-strong;
 	@include txt-center;
-	@include txt-uppercase;
 
 	display: inline-block;
 	min-width: 80px;

diff --git a/frontend/scss/components/molecules/teaser-success-story.scss b/frontend/scss/components/molecules/teaser-success-story.scss
@@ -18,6 +18,7 @@
 .#{molecule('teaser-success-story')} {
 	&.#{molecule('teaser')} {
 		@include teaser;
+		margin-bottom: 20px;
 
 		& > a {
 			@include teaser-linking;
@@ -40,14 +41,24 @@
 		&-card {
 			@include teaser-card;
 
+			@media (max-width: 767px) {
+				margin-bottom: 60px;
+			}
+
 			.#{molecule('teaser')} {
 
 				&-logo {
 					width: 100%;
-					max-width: 120px;
+					max-width: 100px;
 					position: relative;
-					margin-bottom: 10px;
-
+		      width: 110px;
+		      height: 30px;
+					margin-bottom: 1em;
+
+		      amp-img.contain img {
+		        object-fit: contain;
+		        object-position: left center;
+		      }
 				}
 			}
 		}

diff --git a/frontend/scss/components/organisms/format-explainer.scss b/frontend/scss/components/organisms/format-explainer.scss
@@ -43,10 +43,12 @@
       grid-column: 1 / -1;
       grid-row: 1 / -1;
       opacity: 0;
-      transition: opacity 0.4s cubic-bezier(.55,0,.1,1), transform 0.4s cubic-bezier(.55,0,.1,1);
+      visibility: hidden;
+      transition: opacity 0.4s cubic-bezier(.55,0,.1,1), visibility 0.4s cubic-bezier(.55,0,.1,1), transform 0.4s cubic-bezier(.55,0,.1,1);
 
       &.active {
         opacity: 1;
+        visibility: visible;
       }
     }
   }

diff --git a/frontend/scss/components/organisms/ghost-frame-block.scss b/frontend/scss/components/organisms/ghost-frame-block.scss
@@ -22,12 +22,18 @@ This positioning can be change by using the modifier `-alternate`.
 
 .#{utility('stage')} {
   .#{organism('ghost-frame-block')} {
-    margin-top: -10%;
     grid-column: 15 / -1;
+    max-width: 360px;
+    position: absolute;
+    left: 60px;
+    top: 0;
 
     @media (min-width: 768px) {
-      margin-top: -65%;
       grid-column: 14 / -2;
+      max-width: 100%;
+      position: relative;
+      left: 0;
+      margin-top: -65%;
     }
 
     @media (min-width: 1024px) {

diff --git a/frontend/scss/components/organisms/stage.scss b/frontend/scss/components/organisms/stage.scss
@@ -45,7 +45,7 @@
 
 	&-content {
     position: relative;
-    margin: 20vw 0;
+    margin: 10vw 0 22vw;
 
     @media (min-width: 768px) {
       grid-column: 3 / 13;
@@ -121,14 +121,14 @@
         &-icon { @include fill-websites; border-color: color('white'); }
         &-headline { @include color-websites; }
         &-subline { @include color-websites; }
+        &-button { color: color('blue-ribbon'); background-color: color('white'); }
       }
     }
   }
 
-
   &-ads {
     .#{organism('stage')}-content-button {
-      color: color('white'); background-color: color('electric-violet');
+      color: color('electric-violet');
     }
   }
 

diff --git a/frontend/scss/components/organisms/text-media-block.scss b/frontend/scss/components/organisms/text-media-block.scss
@@ -17,6 +17,7 @@
 
 .#{organism('text-media-block')} {
   position: relative;
+  align-items: center;
 
   .#{molecule('text-media')} {
     h2 {

diff --git a/frontend/scss/components/templates/docs-guides-overview.scss b/frontend/scss/components/templates/docs-guides-overview.scss
@@ -22,6 +22,13 @@
 @import 'components/molecules/_teaser.scss';
 
 .#{template('docs-guides-overview')} {
+  top: 0;
+  left: 0;
+  background-repeat: no-repeat;
+  background-size: 100% auto;
+  background-position: top right;
+  background-attachment: fixed;
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 768"><defs><linearGradient id="a" x1="239.67" y1="855.23" x2="606.28" y2="-152.04" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset="1" stop-color="#EDEDF1"/></linearGradient></defs><g><path fill="url(%23a)" d="M0 0h1024v214L786.37 768H0V0z"/></g></svg>');
 
   .#{utility('container')} {
     @include container;
@@ -164,4 +171,90 @@
       }
     }
   }
+
+  .#{utility('benefits--list')} {
+    margin-top: 50px;
+    @media (min-width: 1024px){
+      display: flex;
+    }
+
+    .#{molecule('benefit')} {
+      margin: 20px 0;
+      display: block;
+
+      @media (min-width: 768px){
+        margin-right: 40px;
+      }
+
+      .#{molecule('lnk')} {
+        padding: 0;
+      }
+
+      &-text {
+        display: flex;
+        flex-direction: row;
+        margin-bottom: 20px;
+
+        &-centered {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          margin-bottom: 30px;
+        }
+
+        h4 {
+          margin: 10px 0 0 0;
+        }
+
+        b {
+          font-size: inherit;
+        }
+
+        &-block {
+          margin-bottom: 40px;
+        }
+
+        &-headline {
+          font-family: 'Poppins';
+        }
+      }
+
+      &-twocolumns {
+        margin: 40px 0;
+        flex: 0 0 calc(50% - 40px);
+        &:first-child {
+          margin-right: 80px;
+        }
+
+        p {
+          margin-bottom: 0;
+        }
+
+        h2 {
+          margin-bottom: 30px;
+        }
+
+      }
+
+      &-daily {
+        padding: 30px;
+        background: color('white');
+        box-shadow: 0 30px 30px -15px rgba(0, 0, 0, 0.25);
+        a {
+          padding-bottom: 0;
+        }
+        P {
+          @include txt-2;
+          margin-bottom: 20px;
+        }
+      }
+    }
+  }
+
+  .#{organism('teaser-grid-featured')} {
+    background: color('white');
+    padding: 30px 30px 0;
+    margin: 0 -30px;
+  }
+
 }