[incubator-openwhisk-website] branch master updated: adjust header flow layout margins to match content (#296)

[pd...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

pdesai pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-openwhisk-website.git


The following commit(s) were added to refs/heads/master by this push:
     new 5544887  adjust header flow layout margins to match content (#296)
5544887 is described below

commit 5544887e148d95345f7c1b55af4ed042318d9071
Author: Matt Rutkowski <mr...@us.ibm.com>
AuthorDate: Thu Aug 9 18:19:54 2018 -0500

    adjust header flow layout margins to match content (#296)
---
 _layouts/documentation.html | 3 +--
 _scss/_base.scss            | 6 +++++-
 _scss/_desktop.scss         | 1 -
 _scss/_tablet.scss          | 5 -----
 _scss/_variables.scss       | 1 +
 5 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/_layouts/documentation.html b/_layouts/documentation.html
index c0c5fb8..596e12e 100644
--- a/_layouts/documentation.html
+++ b/_layouts/documentation.html
@@ -141,8 +141,7 @@ layout: default
         <div class="content">
             <a class="indexable" id="openwhisk_deployment"></a>
             <h3>OpenWhisk Deployment</h3>
-        </br>
-            <img width="400px" src="https://raw.githubusercontent.com/apache/incubator-openwhisk/master/docs/images/OpenWhisk_flow_of_processing.png" alt="OpenWhisk Architecture"/>
+            <img style="padding-top:20px;" width="400px" src="https://raw.githubusercontent.com/apache/incubator-openwhisk/master/docs/images/OpenWhisk_flow_of_processing.png" alt="OpenWhisk Architecture"/>
             <p>
                 The above diagram depicts the high-level architecture of OpenWhisk. From Nginx to Kafka to Docker,
                 multiple technologies are powering Apache OpenWhisk - Open Source Serverless Cloud Platform.
diff --git a/_scss/_base.scss b/_scss/_base.scss
index 55c353c..69fcc66 100644
--- a/_scss/_base.scss
+++ b/_scss/_base.scss
@@ -41,7 +41,7 @@ footer {
 
 .header {
   display: flex;
-  justify-content: space-evenly;
+  justify-content: space-between;
   align-items: center;
   flex-flow: column wrap;
   background-color: $color-header-bg;
@@ -50,6 +50,10 @@ footer {
   top: 0;
   width: 100%;
   min-height: $header-height;
+
+  // adjust padding so that the logo and icons have same margin as content
+  padding-right: $whisk-header-base-padding-X;
+  padding-left: $whisk-header-base-padding-X;
   padding-bottom: 20px;
 
   // Assure that menu items have white foreground and proper spacing
diff --git a/_scss/_desktop.scss b/_scss/_desktop.scss
index 3039871..08e8dde 100644
--- a/_scss/_desktop.scss
+++ b/_scss/_desktop.scss
@@ -1,6 +1,5 @@
 @media screen and (min-width: $media-size-desktop-start) {
   .header {
-    justify-content: space-evenly;
     flex-flow: row wrap;
     padding-bottom: 0px;
   }
diff --git a/_scss/_tablet.scss b/_scss/_tablet.scss
index b35fcd0..5c22135 100644
--- a/_scss/_tablet.scss
+++ b/_scss/_tablet.scss
@@ -1,9 +1,4 @@
 @media screen and (min-width: $media-size-tablet-start) {
-  .header {
-    // TODO: make variables
-    background-position: 10px center;
-    background-size: contain;
-  }
 
   footer {
     padding: $whisk-footer-base-padding-tablet;
diff --git a/_scss/_variables.scss b/_scss/_variables.scss
index a60dcb5..3f9a7b8 100644
--- a/_scss/_variables.scss
+++ b/_scss/_variables.scss
@@ -43,6 +43,7 @@ $header-height: 80px;
 $whisk-header-base-padding-top: 168px;
 $whisk-header-tablet-padding-top: $header-height;
 $whisk-header-desktop-padding-top: $header-height;
+$whisk-header-base-padding-X: $whisk-nodes-padding-base-X;
 
 /*
  * Layout: Footer