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 15:39:45 UTC
[incubator-openwhisk-website] branch master updated: Add ASF
required links and legal text to footer (#307)
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 888e4ab Add ASF required links and legal text to footer (#307)
888e4ab is described below
commit 888e4ab97cbc5aeeceebc9ef0f8dab1683405f1e
Author: Matt Rutkowski <mr...@us.ibm.com>
AuthorDate: Wed Aug 15 10:39:43 2018 -0500
Add ASF required links and legal text to footer (#307)
* Add ASF required links and legal text to footer
* Add ASF required links and legal text to footer
* Add ASF required links and legal text to footer
* Add ASF required links and legal text to footer
* Add ASF required links and legal text to footer
* Add ASF required links and legal text to footer
---
_includes/partial/site-footer.html | 70 ++++++++++++---
_layouts/home.html | 4 +-
_scss/_base.scss | 176 +++++++++----------------------------
_scss/_desktop.scss | 35 +++++---
_scss/_header.scss | 156 ++++++++++++++++++++++++++++++++
_scss/_skin.scss | 43 +--------
_scss/_tablet.scss | 2 +
_scss/_terminal.scss | 29 ++++++
_scss/_variables.scss | 42 +++------
9 files changed, 330 insertions(+), 227 deletions(-)
diff --git a/_includes/partial/site-footer.html b/_includes/partial/site-footer.html
index 057b9d6..d8ca046 100644
--- a/_includes/partial/site-footer.html
+++ b/_includes/partial/site-footer.html
@@ -1,13 +1,61 @@
-<footer>
- <main class="light-text">
- <div style="text-align: center;">
- Apache OpenWhisk is an effort undergoing incubation at The Apache
- Software Foundation (ASF), sponsored by the Incubator.
- Incubation is required of all newly accepted projects until a further
- review indicates that the infrastructure, communications, and decision
- making process have stabilized in a manner consistent with other
- successful ASF projects. While incubation status is not necessarily a
- reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.
+<!--
+/*
+ * Required ASF website links (scanned)
+ *
+ * Name: Regex: URL
+ * ==== ===== ===
+ * Foundation: apache|asf|foundation: http://www.apache.org/
+ * Events: ^https?://.*apache.org/events/current-event: See: https://www.apache.org/events/README.txt
+ * License: ^https?://.*apache.org/licenses/$: http://www.apache.org/licenses/
+ * Thanks: ^https?://.*apache.org/foundation/thanks: http://www.apache.org/foundation/thanks.html
+ * Security: ^https?://.*apache.org/.*[Ss]ecurity: http://www.apache.org/security/
+ * Sponsorship: ^https?://.*apache.org/foundation/sponsorship http://www.apache.org/foundation/sponsorship.html
+ * Trademarks: \btrademarks\b All project or product homepages must feature a prominent trademark attribution of all applicable Apache trademarks.
+ * Copyright: ((Copyright|©).*apache|apache.*(Copyright|©)): All website content SHOULD include a copyright notice for the ASF.
+ * Image: . Projects SHOULD include a 212px wide copy of their logo in https://www.apache.org/img/ to be included in ASF homepage.
+ * See: https://www.apache.org/img/
+ */
+-->
+
+<footer class="footer light-text">
+ <main class="footer-row">
+ <div>
+ <div class="footer-row-text-links">
+ <a class="" href="http://www.apache.org/">Apache Software Foundation</a>
+ <a class="" href="https://apachecon.com/?ref=spark.apache.org">Events</a>
+ <a class="" href="http://www.apache.org/licenses/">License</a>
+ <a class="" href="http://www.apache.org/security/">Security</a>
+ <a class="" href="http://www.apache.org/foundation/thanks.html">Thanks</a>
+ <a class="" href="http://www.apache.org/foundation/sponsorship.html">Sponsorship</a>
</div>
- </main>
+ </div>
+ </main>
+ <main class="footer-row">
+ <div>
+ Apache OpenWhisk, OpenWhisk, Apache, the Apache feather logo, and
+ the Apache OpenWhisk project logo are either registered trademarks
+ or trademarks of The Apache Software Foundation
+ in the United States and other countries.
+ See guidance on use of Apache OpenWhisk trademarks.
+ All other marks mentioned may be trademarks or registered trademarks
+ of their respective owners.
+ </div>
+ </main class="footer-row">
+ <main class="footer-row">
+ <div>
+ Apache OpenWhisk is an effort undergoing incubation at The Apache
+ Software Foundation (ASF), sponsored by the Incubator.
+ Incubation is required of all newly accepted projects until a further
+ review indicates that the infrastructure, communications, and decision
+ making process have stabilized in a manner consistent with other
+ successful ASF projects. While incubation status is not necessarily a
+ reflection of the completeness or stability of the code,
+ it does indicate that the project has yet to be fully endorsed
+ by the ASF.
+ </div>
+ </main>
+ <main class="footer-row">
+ Copyright © 2016-present The Apache Software Foundation,
+ Licensed under the Apache License, Version 2.0.
+ </main>
</footer>
diff --git a/_layouts/home.html b/_layouts/home.html
index e93af6d..1fc4ed1 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -130,7 +130,9 @@ layout: default
<a class="button" href="{{ site.github.url }}/community.html">Join the OpenWhisk Community</a>
</div>
<div class="image-wrapper">
- <img style="max-height=174px; max-width:174px" src="{{ site.github.url }}/images/logo/SupportApache-small.png" alt="The Apache OpenWhisk project needs the support of contributors in all areas."/>
+ <a href="http://www.apache.org/foundation/sponsorship.html">
+ <img style="max-height=174px; max-width:174px;" src="{{ site.github.url }}/images/logo/SupportApache-small.png"
+ alt="The Apache OpenWhisk project needs the support of contributors in all areas."/></a>
</div>
</main>
</section>
diff --git a/_scss/_base.scss b/_scss/_base.scss
index 78518dd..d38f481 100644
--- a/_scss/_base.scss
+++ b/_scss/_base.scss
@@ -1,3 +1,7 @@
+// Import the various layout elements
+@import "header";
+@import "terminal";
+
/*
* Base stylesheet for small form factors
* less than tablets
@@ -39,114 +43,13 @@ footer {
padding: $whisk-footer-base-padding-base;
}
-.header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- flex-flow: column wrap;
- background-color: $color-header-bg;
- position: fixed;
- z-index: 8888;
- 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
- a {
- color: $color-header-fg;
- // TODO: explore moving this to an outer div
- padding: 4px;
-
- // TODO: explore turning text links into buttons as well
- border: 2px solid $color-header-icon-border;
- border-radius: 4px;
- }
-}
-
-// Note: ideally, we should use table-cell, but using an anchor to display
-// the logo has implication on layout we should look at later
-// Note: the use if !important may be superfluous
-// 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;
- height: $logo-height !important;
- border: 0px;
- padding: 0px;
- background-color: $color-header-bg-section-logo;
- // TODO: make a variable
- background-image: url(/images/apache-openwhisk.png);
- background-size: $logo-width $logo-height !important;
- background-repeat: no-repeat;
- border: none !important;
- background-position: 50% 50%;
-}
-
-.header-section-text-links {
- background: $color-header-bg-section-menu-text;
- // TODO: make image sizes variables
- min-width: 280px;
- color: white;
- text-align: center;
- vertical-align: middle;
-}
-
-// TODO: explore min-width had no effect for some reason...
-.header-section-social-icons {
- background-color: $color-header-bg-section-menu-icons;
-}
-
-// TODO: change row (div) height to have no padding/margin top and bottom
-.header-row-text-links {
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- justify-content: center;
- font-size: 14px;
- font-weight: 500;
- letter-spacing: 0.5px;
-}
-
-.header-row-social-icons {
- display: flex;
- flex-direction: row-reverse;
- justify-content: center;
-}
-
-.header-button-icon {
- flex: 0 0 auto;
- background-color: $color-header-icon-bg;
- border: 1px solid $color-header-icon-border;
- border-radius: 4px;
- align: center;
- height: 36px;
- width: 36px;
- margin: 3px;
-}
-
-.header-text-link {
- flex: 0 0 auto;
- background-color: $color-header-icon-bg;
- margin: 3px;
-}
-
-.header-icon-image {
- background: $color-header-icon-bg-image;
- width: 26px;
- padding: 0px;
-}
-
// Header is only shown on the "home" page
#whiskHeader {
background-color: $color-blue-dark;
color: $color-white;
text-align: center;
- padding-top: $whisk-header-base-padding-top;
+ // 20px accounts for the extra margin we add below fixed header in multi-line format
+ padding-top: $whisk-header-base-padding-top + 20px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
@@ -173,6 +76,32 @@ footer {
}
}
+// Footer is shown on all content pages
+#whiskFooter {
+}
+
+#whiskIndexedLayout {
+ display: table;
+ padding-top: $whisk-header-base-padding-top;
+
+ #whiskIndex {
+ vertical-align: top;
+ // position menu relative to header
+ display: float;
+ position: fixed;
+ top: $index-menu-top-offset-base;
+ left: $index-menu-left-offset;
+ width: $index-menu-width;
+ border: $index-border;
+ z-index: 6888;
+ }
+
+ #whiskNodes {
+ display: table-cell;
+ // Note: we do NOT make left padding for Index in for the 'base' media size (width too small)
+ }
+}
+
#whiskNodes {
// Note: pad only the bottom for each "node" (so we do not double up)
padding-bottom: $whisk-nodes-padding-base-Y;
@@ -190,8 +119,6 @@ footer {
background: $color-bg-base-content;
// Provide for space around content's text
padding: $whisk-nodes-main-content-padding-base;
- // TODO: ????
- height: 100%;
// Provide a space between image and content when vertical
margin-top: 20px;
@@ -209,12 +136,16 @@ footer {
img {
background: $color-bg-base-img;
display: block;
+ max-width: 500px; // prevent images from appearing too large
+ align-self: center;
width: 100%;
height: 100%;
+ margin: auto; // allows centering in all layouts
}
}
}
+// TODO look to remove this ID
#doc {
position: relative;
overflow: hidden;
@@ -249,7 +180,7 @@ footer {
*/
.project-structure-repo {
width: 240px;
- margin: 10px;
+ margin: 8px;
padding: 10px;
border-radius: 10px;
@@ -265,12 +196,13 @@ footer {
.repo-title {
box-sizing: border-box;
width: 100%;
- border-radius: 10px;
- padding: 10px;
+ border-radius: 4px;
+ padding: 4px;
background: $color-white;
text-align: center;
- font-size: $index-menu-font-size;
+ font-size: 4px; //$index-menu-font-size;
font-weight: $index-menu-font-weight;
+ line-height: 14px;
}
}
@@ -368,33 +300,11 @@ footer {
a.indexable {
display: block;
position: relative;
- // TODO: make a variable
- top: -100px;
+ // when index item is selected offset content based upon header height
+ top: $indexed-content-top-offset-base;
visibility: hidden;
}
-#whiskIndexedLayout {
- display: table;
- padding-top: $whisk-header-base-padding-top;
-
- #whiskIndex {
- vertical-align: top;
- // position menu relative to header
- display: float;
- position: fixed;
- top: $index-menu-top-offset;
- left: $index-menu-left-offset;
- width: $index-menu-width;
- border: $index-border;
- z-index: 6888;
- }
-
- #whiskNodes {
- display: table-cell;
- // Note: we do NOT make left padding for Index in for the 'base' media size (width too small)
- }
-}
-
#whiskIndex {
// Note: we will turn this off for small/base media, allow other profiles to turn on.
display: none;
diff --git a/_scss/_desktop.scss b/_scss/_desktop.scss
index 08e8dde..988def6 100644
--- a/_scss/_desktop.scss
+++ b/_scss/_desktop.scss
@@ -1,23 +1,38 @@
@media screen and (min-width: $media-size-desktop-start) {
.header {
flex-flow: row wrap;
+ // no margin needed when header is a single row
padding-bottom: 0px;
}
+ a.indexable {
+ // when index item is selected offset content based upon header height
+ top: $indexed-content-top-offset-desktop;
+ }
+
#whiskHeader {
- padding-top: $whisk-header-desktop-padding-top;
+ padding-top: $whisk-header-desktop-padding-top;
}
- #whiskNodes {
- main {
- background: $color-bg-desktop-main;
+ #whiskIndexedLayout {
+ padding-top: $whisk-header-desktop-padding-top;
- .content {
- width: $main-content-width-desktop;
- }
- .image-wrapper {
- // Note: the image-wrapper will automatically consume the remaining % (i.e., 40%)
- // Do NOT set any values here or image scaling will be impacted.
+ #whiskIndex {
+ top: $index-menu-top-offset-desktop;
+ }
+
+ #whiskNodes {
+ main {
+ background: $color-bg-desktop-main;
+
+ .content {
+ width: $main-content-width-desktop;
+ }
+
+ .image-wrapper {
+ // Note: the image-wrapper will automatically consume the remaining % (i.e., 40%)
+ // Do NOT set any values here or image scaling will be impacted.
+ }
}
}
}
diff --git a/_scss/_header.scss b/_scss/_header.scss
new file mode 100644
index 0000000..679f884
--- /dev/null
+++ b/_scss/_header.scss
@@ -0,0 +1,156 @@
+/*
+ * Header formatting
+ */
+
+.header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-flow: column wrap;
+ background-color: $color-header-bg;
+ position: fixed;
+ z-index: 8888;
+ top: 0;
+ width: 100%;
+ min-height: $header-single-row-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
+ a {
+ color: $color-header-fg;
+ // TODO: explore moving this to an outer div
+ padding: 4px;
+
+ // TODO: explore turning text links into buttons as well
+ border: 2px solid $color-header-icon-border;
+ border-radius: 4px;
+ }
+}
+
+// Note: ideally, we should use table-cell, but using an anchor to display
+// the logo has implication on layout we should look at later
+// Note: the use if !important may be superfluous
+// 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;
+ height: $logo-height !important;
+ border: 0px;
+ padding: 0px;
+ background-color: $color-header-bg-section-logo;
+ // TODO: make a variable
+ background-image: url(/images/apache-openwhisk.png);
+ background-size: $logo-width $logo-height !important;
+ background-repeat: no-repeat;
+ border: none !important;
+ background-position: 50% 50%;
+}
+
+.header-section-text-links {
+ background: $color-header-bg-section-menu-text;
+ // TODO: make image sizes variables
+ min-width: 280px;
+ color: white;
+ text-align: center;
+ vertical-align: middle;
+}
+
+.header-section-social-icons {
+ background-color: $color-header-bg-section-menu-icons;
+}
+
+.header-row-text-links {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: center;
+ font-size: 14px;
+ font-weight: 500;
+ letter-spacing: 0.5px;
+}
+
+.header-row-social-icons {
+ display: flex;
+ flex-direction: row-reverse;
+ justify-content: center;
+}
+
+.header-button-icon {
+ flex: 0 0 auto;
+ background-color: $color-header-icon-bg;
+ border: 1px solid $color-header-icon-border;
+ border-radius: 4px;
+ align: center;
+ height: 36px;
+ width: 36px;
+ margin: 3px;
+}
+
+.header-text-link {
+ flex: 0 0 auto;
+ background-color: $color-header-icon-bg;
+ margin: 3px;
+}
+
+.header-icon-image {
+ background: $color-header-icon-bg-image;
+ width: 26px;
+ padding: 0px;
+}
+
+.footer {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-flow: column wrap;
+ background-color: $color-header-bg;
+
+ // 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;
+
+ a {
+ display: flex;
+ flex-wrap: wrap;
+ margin-left: 4px;
+ margin-right: 4px;
+ text-decoration: none;
+ border-bottom: solid 1px $color-white;
+ display: inline;
+ padding-bottom: 1px;
+ }
+
+ a, a:visited, a:hover, a:active {
+ color: $color-white;
+ }
+}
+
+.footer-row {
+ text-align: center;
+ padding-bottom: 10px;
+ width: 100%;
+}
+
+.footer-row-text-links {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-around; // space-between;
+ font-size: 12px;
+ font-weight: 400;
+ letter-spacing: 0.5px;
+}
+
+// primarily used in the footer for finely printed text
+.light-text {
+ clear: both;
+ color: $color-fg-base-light-text;
+ // TODO: make vars.
+ font-size: 11px;
+ font-weight: 300;
+ line-height: 18px;
+}
diff --git a/_scss/_skin.scss b/_scss/_skin.scss
index 90dadd1..9546f0f 100644
--- a/_scss/_skin.scss
+++ b/_scss/_skin.scss
@@ -1,4 +1,3 @@
-
* {
box-sizing: border-box;
background: none;
@@ -51,22 +50,14 @@ a, a:visited, a:hover, a:active {
}
a.button {
- color: white;
+ color: $color-white;
}
+// The syntax highlighter uses the "figure" element, but we want to override its default margins
figure {
margin: 0px;
}
-.light-text {
- clear: both;
- color: $color-fg-base-light-text;
- // TODO: make vars.
- font-size: 11px;
- font-weight: 300;
- line-height: 18px;
-}
-
.button {
background-color: $color-blue-dark;
border-bottom: solid 3px #b2b1b1;
@@ -100,33 +91,3 @@ figure {
box-shadow: inset 0 10px 15px 0 $color-gray-percent-78;
top:2px;
}
-
-/*
- * Terminal / Code formatting
- */
-// TODO: move sizes to variables.
-.terminal {
- background: $color-terminal-bg;
- color: $color-terminal-fg;
- border: $terminal-default-border;
- padding: $terminal-padding;
- width: $terminal-width;
- margin-bottom: $terminal-margin-bottom;
-
- // Note: options: white-space: normal|nowrap|pre|pre-line|pre-wrap
- // Note: non-std. options: white-space: -moz-pre-wrap | -o-pre-wrap;
- pre {
- white-space: pre;
- display: inline;
- margin: $terminal-pre-margin;
- font-family: $font-family-code;
- font-weight: $terminal-font-weight;
- font-size: $terminal-font-size;
- line-height: $terminal-line-height;
- }
-}
-
-// Adjust code syntax padding when line numbers present
-.code {
- padding-left: $terminal-line-number-padding;
-}
diff --git a/_scss/_tablet.scss b/_scss/_tablet.scss
index 5c22135..9f2459c 100644
--- a/_scss/_tablet.scss
+++ b/_scss/_tablet.scss
@@ -22,6 +22,7 @@
// "Turn on" left index in this profile, as we have width to support it
#whiskIndexedLayout {
padding-top: $whisk-header-tablet-padding-top;
+
// Show the index area
#whiskIndex {
display: block;
@@ -56,6 +57,7 @@
// 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/_terminal.scss b/_scss/_terminal.scss
new file mode 100644
index 0000000..54883d0
--- /dev/null
+++ b/_scss/_terminal.scss
@@ -0,0 +1,29 @@
+/*
+ * Terminal / Code formatting
+ */
+.terminal {
+ background: $color-terminal-bg;
+ color: $color-terminal-fg;
+ border: $terminal-default-border;
+ padding: $terminal-padding;
+ width: $terminal-width;
+ margin-bottom: $terminal-margin-bottom;
+
+ // Note: options: white-space: normal|nowrap|pre|pre-line|pre-wrap
+ // Note: non-std. options: white-space: -moz-pre-wrap | -o-pre-wrap;
+ pre {
+ white-space: pre;
+ display: inline;
+ margin: $terminal-pre-margin;
+ font-family: $font-family-code;
+ font-weight: $terminal-font-weight;
+ font-size: $terminal-font-size;
+ line-height: $terminal-line-height;
+ }
+}
+
+// Adjust code syntax padding when line numbers present
+// Note: this overides syntax highlighter default padding.
+.code {
+ padding-left: $terminal-line-number-padding;
+}
diff --git a/_scss/_variables.scss b/_scss/_variables.scss
index c8610bb..59c3bb3 100644
--- a/_scss/_variables.scss
+++ b/_scss/_variables.scss
@@ -37,12 +37,13 @@ $main-image-wrapper-margin-base: 10px 10px 10px 10px;
* Layout: Header
*/
-$header-height: 80px;
+$header-single-row-height: 80px;
+$header-multi-row-height: 156px;
// Allow for a fixed top banner on all content pages
-$whisk-header-base-padding-top: 168px;
-$whisk-header-tablet-padding-top: $header-height;
-$whisk-header-desktop-padding-top: $header-height;
+$whisk-header-base-padding-top: $header-multi-row-height;
+$whisk-header-tablet-padding-top: $header-multi-row-height;
+$whisk-header-desktop-padding-top: $header-single-row-height;
$whisk-header-base-padding-X: $whisk-nodes-padding-base-X;
/*
@@ -103,7 +104,7 @@ $color-logo-deeper-sea-green: #008571;
$color-logo-deeper-aquamarine: #6eedd8;
/*
- * Layout Colors
+ * Theme Colors
*/
$color-fg-base-light-text: ghostwhite;
@@ -124,34 +125,10 @@ $color-header-icon-border: white;
$color-header-icon-bg-image: transparent;
$color-bg-tablet-image-wrapper-border: 8px solid white;
-
+// TODO: include in theme palette
$color-anchors: #2955d7;
/*
- * Layout Colors (DEBUG)
- */
-/*
-$color-fg-base-light-text: ghostwhite;
-$color-bg-base-main: red;
-$color-bg-base-content: ghostwhite;
-$color-bg-base-image-wrapper: green;
-$color-bg-base-img: yellow;
-$color-bg-tablet-main: magenta;
-$color-bg-desktop-main: darkviolet;
-
-$color-header-bg: gold;
-$color-header-bg-section-logo: darkred;
-$color-header-bg-section-menu-text: forestgreen;
-$color-header-bg-section-menu-icons: midnightblue;
-$color-header-fg: white;
-$color-header-icon-bg: slategray;
-$color-header-icon-border: pink;
-$color-header-icon-bg-image: orange;
-
-$color-bg-tablet-image-wrapper-border: 8px solid $color-logo-deeper-aquamarine;
-*/
-
-/*
* Fonts
*/
@@ -215,8 +192,11 @@ $p-line-height: $line-height-default;
$index-menu-width: 220px;
// position menu relative to header
-$index-menu-top-offset: $header-height + 10px;
$index-menu-margin: 10px;
+$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;
+$indexed-content-top-offset-desktop: -$index-menu-top-offset-desktop - 20px;
// left offset matches main body nodes
$index-menu-left-offset: $whisk-nodes-padding-base-X;