openwhisk-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From pde...@apache.org
Subject [incubator-openwhisk-website] branch master updated: Adjust header logo size and height + minor fixes (#310)
Date Wed, 15 Aug 2018 20:55:34 GMT
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 a58a3a9  Adjust header logo size and height + minor fixes (#310)
a58a3a9 is described below

commit a58a3a97ae98b5b115f2af51912abe2cf775ec98
Author: Matt Rutkowski <mrutkows@us.ibm.com>
AuthorDate: Wed Aug 15 15:55:31 2018 -0500

    Adjust header logo size and height + minor fixes (#310)
---
 _layouts/documentation.html |  27 ++++++++++++++-------------
 _scss/_base.scss            |  10 ++++++----
 _scss/_desktop.scss         |   2 ++
 _scss/_header.scss          |  12 +++++-------
 _scss/_tablet.scss          |   7 +++----
 _scss/_variables.scss       |  11 +++++++----
 images/apache-openwhisk.png | Bin 28453 -> 0 bytes
 7 files changed, 37 insertions(+), 32 deletions(-)

diff --git a/_layouts/documentation.html b/_layouts/documentation.html
index 113374e..fc88490 100644
--- a/_layouts/documentation.html
+++ b/_layouts/documentation.html
@@ -103,16 +103,17 @@ layout: default
         </ul>
     </div>
 
-<section id="whiskNodes">
-    <main id="doc">
-        <div class="content">
-            <a class="indexable" id="documentation"></a>
-            <h2>Documentation</h2>
-            <div>
-               <p>There are many resources for learning about OpenWhisk; this page
attempts to organize, describe, index and link to the essential information, wherever it resides,
to help users in getting started.  In general, much of the best information is in the actual
project repositories and we encourage you to seek detailed and in-depth information there.</p>
+    <section id="whiskNodes">
+        <main id="doc">
+            <div class="content">
+                <a class="indexable" id="documentation"></a>
+                <h2>Documentation</h2>
+                <div>
+                   <p>There are many resources for learning about OpenWhisk; this page
attempts to organize, describe, index and link to the essential information, wherever it resides,
to help users in getting started.  In general, much of the best information is in the actual
project repositories and we encourage you to seek detailed and in-depth information there.</p>
+                </div>
             </div>
-        </div>
-    </main>
+        </main>
+
     <main id="doc">
         <div class="content">
             <a class="indexable" id="project-structure"></a>
@@ -467,7 +468,7 @@ layout: default
     <main id="doc">
         <div class="content">
             <p>
-                <h5>OpenWhisk documentation is organized by the following roles:</h4>
+                <h5>OpenWhisk documentation is organized by the following roles:</h5>
             </p>
             <ul>
                 <li><a href="#operators">Operators</a>: users who deploy,
configure, and host the Apache OpenWhisk Function-as-a-Service platform
@@ -1098,7 +1099,7 @@ $ jar cvf hello.jar Hello.class
 {% highlight bash %}$ wsk action create helloJava hello.jar --main Hello{% endhighlight %}
                     </div>
                     <div class="terminal">
-<pre>ok: created action helloJava</pre>
+{% highlight yaml %}ok: created action helloJava{% endhighlight %}
                     </div>
                     <li style="list-style-type: decimal">Invoke an action <i>helloJava</i>:</li>
                     <div class="terminal">
@@ -1184,7 +1185,7 @@ $ jar cvf hello.jar Hello.class
 {% highlight bash %}$ wsk action create helloPHP hello.php{% endhighlight %}
                     </div>
                     <div class="terminal">
-<pre>ok: created action helloPHP</pre>
+{% highlight bash %}ok: created action helloPHP{% endhighlight %}
                     </div>
                     <li style="list-style-type: decimal">Invoke an action <i>helloPHP</i>:</li>
                     <div class="terminal">
@@ -1340,7 +1341,7 @@ $ jar cvf hello.jar Hello.class
 {% highlight bash %}$ wsk package bind /whisk.system/samples valhallaSamples --param place
Valhalla{% endhighlight %}
                         </div>
                         <div class="terminal">
-<pre>ok: created binding valhallaSamples</pre>
+{% highlight bash %}ok: created binding valhallaSamples{% endhighlight %}
                         </div>
                         <li style="list-style: circle">Invoke an action in the package
binding:</li>
                         <div class="terminal">
diff --git a/_scss/_base.scss b/_scss/_base.scss
index d38f481..e2b91e9 100644
--- a/_scss/_base.scss
+++ b/_scss/_base.scss
@@ -9,6 +9,7 @@
 
 body {
   background-color: $color-white;
+  -webkit-text-size-adjust: none;
 }
 
 section,
@@ -85,7 +86,7 @@ footer {
   padding-top: $whisk-header-base-padding-top;
 
   #whiskIndex {
-    vertical-align: top;
+    //vertical-align: top;
     // position menu relative to header
     display: float;
     position: fixed;
@@ -98,7 +99,8 @@ footer {
 
   #whiskNodes {
     display: table-cell;
-    // Note: we do NOT make left padding for Index in for the 'base' media size (width too
small)
+    // Apply extra top padding to the (set of) whiskNodes on all content pages
+    padding-top: 20px;
   }
 }
 
@@ -107,8 +109,6 @@ footer {
   padding-bottom: $whisk-nodes-padding-base-Y;
   padding-left: $whisk-nodes-padding-base-X;
   padding-right: $whisk-nodes-padding-base-X;
-  // YYY
-  padding-top: 20px;
 
   main {
     display: table;
@@ -312,6 +312,8 @@ a.indexable {
   width: $index-menu-width;
   // Pad the overall index <div> (and not all the nested <ul>s)
   margin: $index-menu-margin;
+  // Add padding around overall index to visually match content padding
+  padding: $index-menu-padding;
 
   ul {
     background-color: $color-index-list-bg;
diff --git a/_scss/_desktop.scss b/_scss/_desktop.scss
index 988def6..020af02 100644
--- a/_scss/_desktop.scss
+++ b/_scss/_desktop.scss
@@ -11,10 +11,12 @@
   }
 
   #whiskHeader {
+      // This padding applies only to the home page which has a banner
       padding-top: $whisk-header-desktop-padding-top;
   }
 
   #whiskIndexedLayout {
+    // This padding applies to all content pages (no banner)
     padding-top: $whisk-header-desktop-padding-top;
 
     #whiskIndex {
diff --git a/_scss/_header.scss b/_scss/_header.scss
index 679f884..9b34e24 100644
--- a/_scss/_header.scss
+++ b/_scss/_header.scss
@@ -37,17 +37,15 @@
 // Note: use of a fixed .PNG seems to be more reliable than .SVG
 // where different browsers tend to stretch SVG despite layout properties
 .header-section-logo {
-  width: $logo-width !important;
+  width:  $logo-width !important;
   height: $logo-height !important;
-  border: 0px;
-  padding: 0px;
+  border: none !important;
+  transform: none;
   background-color: $color-header-bg-section-logo;
-  // TODO: make a variable
-  background-image: url(/images/apache-openwhisk.png);
+  background-image: url($logo-relative-filename);
   background-size: $logo-width $logo-height !important;
   background-repeat: no-repeat;
-  border: none !important;
-  background-position: 50% 50%;
+  background-position: center center;
 }
 
 .header-section-text-links {
diff --git a/_scss/_tablet.scss b/_scss/_tablet.scss
index 9f2459c..8e4aa2c 100644
--- a/_scss/_tablet.scss
+++ b/_scss/_tablet.scss
@@ -31,7 +31,6 @@
     // Make room on left for the Index
     #whiskNodes {
       display: table-cell;
-      // NOTE: margin does not work here, must use left padding
       // TODO: make a variable
       padding-left: $index-menu-width + 40px;
     }
@@ -54,10 +53,10 @@
         width: $main-content-width-tablet;
         padding: $whisk-nodes-main-content-padding-tablet;
 
-        // No top margin needed when content & image-wrapper are horz.
-        margin-top: 0px;
+        // YYY No top margin needed when content & image-wrapper are horz.
+        //margin-top: 0px;
       }
-      
+
       .image-wrapper {
         // Alter to a 'block' display to get side-by-side layout
         display: block;
diff --git a/_scss/_variables.scss b/_scss/_variables.scss
index 59c3bb3..5cf8a0c 100644
--- a/_scss/_variables.scss
+++ b/_scss/_variables.scss
@@ -37,8 +37,8 @@ $main-image-wrapper-margin-base: 10px 10px 10px 10px;
  * Layout: Header
  */
 
-$header-single-row-height: 80px;
-$header-multi-row-height: 156px;
+$header-single-row-height: 60px;
+$header-multi-row-height: $header-single-row-height + 76px;
 
 // Allow for a fixed top banner on all content pages
 $whisk-header-base-padding-top: $header-multi-row-height;
@@ -66,8 +66,9 @@ $full-width-paddingX: 10px;
 
 // Note: this is the actual size of the .PNG file which has built-in spacing
 // so we do not need to add any margins/padding/borders.
-$logo-width: 320px;
-$logo-height: 80px;
+$logo-relative-filename: "/images/apache-openwhisk.svg";
+$logo-width: 240px;
+$logo-height: 60px;
 
 /*
  * Theme Colors
@@ -193,6 +194,8 @@ $index-menu-width: 220px;
 
 // position menu relative to header
 $index-menu-margin: 10px;
+$index-menu-padding: 8px;
+
 $index-menu-top-offset-base: $header-multi-row-height + 10px;
 $index-menu-top-offset-desktop: $header-single-row-height + 10px;
 $indexed-content-top-offset-base: -$index-menu-top-offset-base - 20px;
diff --git a/images/apache-openwhisk.png b/images/apache-openwhisk.png
deleted file mode 100644
index af45972..0000000
Binary files a/images/apache-openwhisk.png and /dev/null differ


Mime
View raw message