website - responsive styling for timeline component

website/source/assets/stylesheets/consul-connect/_typography.scss

@@ -2,15 +2,10 @@
   // TODO - root is set to 10px
 
   ul,
-  p {
-    font-size: 1.125em;
-    line-height: 1.75;
-    margin: 16px 0;
-  }
-
   p {
     font-size: 1.6rem;
-    margin: 1em 0;
+    line-height: 1.75;
+    margin: 1rem 0;
 
     @media (min-width: 992px) {
       font-size: 1.8rem;
@@ -38,7 +33,7 @@
     @media (min-width: 768px) {
       font-size: 4rem;
     }
-    
+
     @media (min-width: 992px) {
       font-size: 5.6rem;
     }
@@ -59,12 +54,18 @@
   .h3 {
     font-family: $font-family-open-sans;
     font-weight: 600;
-    font-size: 1.5em;
+    font-size: 1.8rem;
     line-height: 1.5em;
     margin: 1em 0;
-    @media (max-width: 700px) {
+
-      font-size: 1.2em;
+    @media (min-width: 768px) {
+      font-size: 2rem;
     }
+
+    @media (min-width: 992px) {
+      font-size: 2.4rem;
+    }
+
     &.lighter {
       font-weight: 100;
     }

website/source/assets/stylesheets/consul-connect/components/_timeline.scss

@@ -3,41 +3,99 @@
 .g-timeline {
   align-content: space-between;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   margin: 0 (-$site-gutter-padding);
-  text-align: center;
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+    text-align: center;
+  }
 
   &.no-intro {
-    margin-top: -90px;
+    margin-top: -30px;
+
+    @media (min-width: 768px) {
+      margin-top: -90px;
+    }
   }
 
   & > div {
-    padding: 40px $site-gutter-padding 0;
+    margin-left: 18px;
+    padding: 40px $site-gutter-padding 0 42px;
     position: relative;
-    width: 50%;
 
-    &:last-child .dot {
+    @media (min-width: 768px) {
-      border-color: #ca2171;
+      margin-left: 0;
+      padding-left: $site-gutter-padding;
+      width: 50%;
+    }
+
+    &:last-child {
+      .dot {
+        border-color: #ca2171;
+      }
     }
 
     .line {
-      background-image: linear-gradient(
+      background-image: linear-gradient(180deg, #d2d4dc 50%, #c82070 100%);
-        90deg,
+      height: calc(100% - 12px);
-        rgba(229, 230, 235, 0) 5%,
+      left: 8px;
-        #dadce3 26%,
-        #d2d4dc 43%,
-        #c82070 100%
-      );
-      height: 2px;
       position: absolute;
-      right: calc(50% + 34px);
+      top: 45px;
-      top: 8px;
+      width: 2px;
-      width: 1038px;
+
+      @media (min-width: 768px) {
+        background-image: linear-gradient(
+          90deg,
+          rgba(229, 230, 235, 0),
+          #d2d4dc 0%,
+          #c82070 100%
+        );
+        height: 2px;
+        left: 50%;
+        top: 8px;
+        width: calc(100% - 34px);
+      }
+
+      &:first-child {
+        background-image: linear-gradient(
+          180deg,
+          rgba(229, 230, 235, 0) 5%,
+          #dadce3 70%,
+          #d2d4dc 100%
+        );
+        bottom: calc(100% - 45px);
+        height: 60px;
+        top: auto;
+
+        @media (min-width: 768px) {
+          background-image: linear-gradient(
+            90deg,
+            rgba(229, 230, 235, 0) 5%,
+            #dadce3 26%,
+            #d2d4dc 100%
+          );
+          height: 2px;
+          left: auto;
+          right: 50%;
+          top: 8px;
+          width: calc(50% + 120px);
+        }
+      }
 
       svg {
         position: absolute;
-        right: -10px;
+        top: calc(100% - 8px);
-        top: -6px;
+        transform: rotate(90deg);
+        left: -4px;
+
+        @media (min-width: 768px) {
+          left: auto;
+          right: -10px;
+          top: -6px;
+          transform: none;
+        }
       }
     }
 
@@ -47,8 +105,13 @@
 
     .sub-heading {
       display: block;
-      font-size: 1.8rem;
+      font-size: 1.6rem;
-      margin-bottom: 40px;
+      margin-bottom: 24px;
+
+      @media (min-width: 992px) {
+        font-size: 1.8rem;
+        margin-bottom: 40px;
+      }
     }
 
     .dot {
@@ -57,15 +120,22 @@
       border-radius: 50%;
       display: inline-block;
       height: 18px;
-      left: 50%;
+      left: 0;
-      margin: 0 0 0 -9px;
       position: absolute;
-      top: 0;
+      top: 45px;
       width: 18px;
       z-index: 1;
+
+      @media (min-width: 768px) {
+        margin: 0 0 0 -9px;
+        left: 50%;
+        top: 0;
+      }
     }
 
     img {
+      display: block;
+      margin: 0 auto;
       max-width: 100%;
     }
 

website/source/configuration.html.erb

@@ -25,6 +25,12 @@ description: |-
     <div class='g-container'>
       <div class='g-timeline no-intro'>
         <div>
+          <span class='line'></span>
+          <span class='line'>
+            <svg xmlns="http://www.w3.org/2000/svg" width="11" height="15" viewBox="0 0 11 15">
+                <path fill="#CA2171" d="M0 0v15l5.499-3.751L11 7.5 5.499 3.749.002 0z"/>
+            </svg>
+          </span>
           <span class='dot'></span>
           <h3>The Challenge</h3>
           <span class='sub-heading'>Runtime configuration management loses performace at scale.</span>
@@ -32,11 +38,6 @@ description: |-
           <p>Services have many runtime configurations, such as feature flags or maintenance modes, that need to be propagated in real time. Distributing these updates using configuration management or by re-deploying services can take minutes to hours. During these rollout periods, infrastructure can be out of sync and service configurations could be incorrect.</p>
         </div>
         <div>
-          <span class='line'>
-            <svg xmlns="http://www.w3.org/2000/svg" width="11" height="15" viewBox="0 0 11 15">
-                <path fill="#CA2171" d="M0 0v15l5.499-3.751L11 7.5 5.499 3.749.002 0z"/>
-            </svg>
-          </span>
           <span class='dot'></span>
           <h3>The Solution</h3>
           <span class='sub-heading'>Real-time runtime configuration for distributed applications.</span>

website/source/discovery.html.erb

@@ -25,6 +25,12 @@ description: |-
     <div class='g-container'>
       <div class='g-timeline no-intro'>
         <div>
+          <span class='line'></span>
+          <span class='line'>
+            <svg xmlns="http://www.w3.org/2000/svg" width="11" height="15" viewBox="0 0 11 15">
+                <path fill="#CA2171" d="M0 0v15l5.499-3.751L11 7.5 5.499 3.749.002 0z"/>
+            </svg>
+          </span>
           <span class='dot'></span>
           <h3>The Challenge</h3>
           <span class='sub-heading'>Service load balancers aren't efficient in a dynamic world.</span>
@@ -32,11 +38,6 @@ description: |-
           <p>Load balancers are often used to front a service tier and provide a static IP. These load balancers add cost, increase latency, introduce single points of failure, and must be updated as services scale up/down.</p>
         </div>
         <div>
-          <span class='line'>
-            <svg xmlns="http://www.w3.org/2000/svg" width="11" height="15" viewBox="0 0 11 15">
-                <path fill="#CA2171" d="M0 0v15l5.499-3.751L11 7.5 5.499 3.749.002 0z"/>
-            </svg>
-          </span>
           <span class='dot'></span>
           <h3>The Solution</h3>
           <span class='sub-heading'>Service discovery for dynamic infrastructure.</span>

website/source/index.html.erb

@@ -41,17 +41,18 @@ description: |-
       </div>
       <div class='g-timeline'>
         <div>
+          <span class='line'></span>
+          <span class='line'>
+            <svg xmlns='http://www.w3.org/2000/svg' width='11' height='15' viewBox='0 0 11 15'>
+                <path fill='#CA2171' d='M0 0v15l5.499-3.751L11 7.5 5.499 3.749.002 0z'/>
+            </svg>
+          </span>
           <span class='dot'></span>
           <h3>Static</h3>
           <span class='sub-heading'>Host-based networking.</span>
           <img src='//placehold.it/516x314'>
         </div>
         <div>
-          <span class='line'>
-            <svg xmlns='http://www.w3.org/2000/svg' width='11' height='15' viewBox='0 0 11 15'>
-                <path fill='#CA2171' d='M0 0v15l5.499-3.751L11 7.5 5.499 3.749.002 0z'/>
-            </svg>
-          </span>
           <span class='dot'></span>
           <h3>Dynamic</h3>
           <span class='sub-heading'>Service-based networking.</span>

website/source/segmentation.html.erb

@@ -26,6 +26,12 @@ description: |-
     <div class='g-container'>
       <div class='g-timeline no-intro'>
         <div>
+          <span class='line'></span>
+          <span class='line'>
+            <svg xmlns="http://www.w3.org/2000/svg" width="11" height="15" viewBox="0 0 11 15">
+                <path fill="#CA2171" d="M0 0v15l5.499-3.751L11 7.5 5.499 3.749.002 0z"/>
+            </svg>
+          </span>
           <span class='dot'></span>
           <h3>The Challenge</h3>
           <span class='sub-heading'>Securing service-to-service communication with firewalls doesn’t scale in dynamic settings.</span>
@@ -33,11 +39,6 @@ description: |-
           <p>East-west firewalls are the main tool for networking security in a static world. They depend on constraining traffic flow and use IP based rules to control ingress and egress traffic. But in a dynamic world where services move across machines and machines are frequently created and destroyed, this perimeter-based approach is difficult to scale as it requires complex network topologies and a large number of short lived firewall rules.</p>
         </div>
         <div>
-          <span class='line'>
-            <svg xmlns="http://www.w3.org/2000/svg" width="11" height="15" viewBox="0 0 11 15">
-                <path fill="#CA2171" d="M0 0v15l5.499-3.751L11 7.5 5.499 3.749.002 0z"/>
-            </svg>
-          </span>
           <span class='dot'></span>
           <h3>The Solution</h3>
           <span class='sub-heading'>Service segmentation for dynamic service authorization.</span>