You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@openwhisk.apache.org by pd...@apache.org on 2018/08/15 20:55:34 UTC
[incubator-openwhisk-website] branch master updated: Adjust header
logo size and height + minor fixes (#310)
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 <mr...@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