You are viewing a plain text version of this content. The canonical link for it is here.
Posted to issues@openwhisk.apache.org by GitBox <gi...@apache.org> on 2018/08/08 22:11:36 UTC
[GitHub] pritidesai closed pull request #286: Fix spacing between logo and
buttons in header
pritidesai closed pull request #286: Fix spacing between logo and buttons in header
URL: https://github.com/apache/incubator-openwhisk-website/pull/286
This is a PR merged from a forked repository.
As GitHub hides the original diff on merge, it is displayed below for
the sake of provenance:
As this is a foreign pull request (from a fork), the diff is supplied
below (as it won't show otherwise due to GitHub magic):
diff --git a/_scss/_base.scss b/_scss/_base.scss
index b5dc8af..257136f 100644
--- a/_scss/_base.scss
+++ b/_scss/_base.scss
@@ -4,54 +4,60 @@
*/
body {
- background-color: $color-white;
+ background-color: $color-white;
}
-section, header {
- padding-left: $full-width-paddingX;
- padding-right: $full-width-paddingX;
+section,
+header {
+ padding-left: $full-width-paddingX;
+ padding-right: $full-width-paddingX;
- main {
- width: $main-width;
- // !Important. Home page scrolls horz. without this width constraint (affected by SVG <img> issues)
- max-width: $media-size-max-width;
- }
+ main {
+ width: $main-width;
+ // !Important. Home page scrolls horz. without this width constraint (affected by SVG <img> issues)
+ max-width: $media-size-max-width;
+ }
}
-section, header, footer {
- main {
- position: relative;
- margin: auto;
- }
+section,
+header,
+footer {
+ main {
+ position: relative;
+ margin: auto;
+ }
}
section {
- position: relative;
- background-color: $color-white;
+ position: relative;
+ background-color: $color-white;
}
footer {
- width: 100%;
- background-color: $color-blue-dark;
- padding: $whisk-footer-base-padding-base
+ width: 100%;
+ background-color: $color-blue-dark;
+ padding: $whisk-footer-base-padding-base;
}
// 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: 0px;
+ white-space: pre;
+ display: inline;
+ margin: 0px;
}
.header {
- display: table;
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
+ flex-flow: column wrap;
background-color: $color-header-bg;
position: fixed;
z-index: 8888;
top: 0;
width: 100%;
- height: $header-height;
+ min-height: $header-height;
padding-bottom: 20px;
// Assure that menu items have white foreground and proper spacing
@@ -72,174 +78,166 @@ pre {
// 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 {
- display: table-cell;
- position: relative;
- 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%;
+ 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 {
- display: table-row-group;
- background: $color-header-bg-section-menu-text;
- // TODO: make image sizes variables
- width: 33%;
- min-width: 280px;
- color: white;
- text-align: center;
- vertical-align: middle;
+ 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 {
- display: table-footer-group;
- background-color: $color-header-bg-section-menu-icons;
- width: 33%;
- vertical-align: middle;
+ 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;
+ 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;
- padding-left: 10px;
- padding-right: 10px;
+ 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-right: 4px;
+ 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;
+ 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;
+ background: $color-header-icon-bg-image;
+ width: 26px;
+ padding: 0px;
}
// TODO: move sizes to variables.
.terminal {
- background: $color-terminal-bg;
- color: $color-terminal-fg;
- border: 1px solid $color-terminal-border;
- font-family: $font-family-code;
- font-weight: 300;
- font-size: 14px;
- line-height: 140%;
- // top right bottom left
- padding: 4px 4px 4px 8px;
- width: 700px;
- margin-bottom: 10px;
+ background: $color-terminal-bg;
+ color: $color-terminal-fg;
+ border: 1px solid $color-terminal-border;
+ font-family: $font-family-code;
+ font-weight: 300;
+ font-size: 14px;
+ line-height: 140%;
+ // top right bottom left
+ padding: 4px 4px 4px 8px;
+ max-width: 700px;
+ margin-bottom: 10px;
}
// 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;
- padding-left: 10px;
- padding-right: 10px;
- padding-bottom: 10px;
- margin-bottom: $whisk-nodes-padding-base-Y;
-
- h1 {
- font-size: $header-base-h1-font-size;
- font-weight: $header-base-h1-font-weight;
- font-style: $header-base-h1-font-style;
- line-height: $header-base-h1-line-height;
- margin-bottom: 12px;
- }
- h5 {
- font-size: $header-base-h5-font-size;
- font-weight: $header-base-h5-font-weight;
- font-style: $header-base-h5-font-style;
- line-height: $header-base-h5-line-height;
- margin-bottom: 4px;
- }
+ background-color: $color-blue-dark;
+ color: $color-white;
+ text-align: center;
+ padding-top: $whisk-header-base-padding-top;
+ padding-left: 10px;
+ padding-right: 10px;
+ padding-bottom: 10px;
+ margin-bottom: $whisk-nodes-padding-base-Y;
+
+ h1 {
+ font-size: $header-base-h1-font-size;
+ font-weight: $header-base-h1-font-weight;
+ font-style: $header-base-h1-font-style;
+ line-height: $header-base-h1-line-height;
+ margin-bottom: 12px;
+ }
+ h5 {
+ font-size: $header-base-h5-font-size;
+ font-weight: $header-base-h5-font-weight;
+ font-style: $header-base-h5-font-style;
+ line-height: $header-base-h5-line-height;
+ margin-bottom: 4px;
+ }
- h1, h5 {
- color: $color-white;
- }
+ h1,
+ h5 {
+ color: $color-white;
+ }
}
#whiskNodes {
- // Note: pad only the bottom for each "node" (so we do not double up)
- 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;
- background: $color-bg-base-main;
- margin-bottom: $whisk-nodes-padding-base-Y;
- }
- .content {
- 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;
- }
- .image-wrapper {
- background: $color-bg-base-image-wrapper;
- display: table-header-group;
-
- // NOTE: margin ONLY works in horz. layout and has no impact in vert. layout
- // margin: (top right bottom left)
- margin: $main-image-wrapper-margin-base;
-
- // NOTE: SVG files and the <img> tags do not work well together
- // Important! without this style, the image will not stretch and display properly
- img {
- background: $color-bg-base-img;
- display: block;
- width: 100%;
- height: 100%;
- }
+ // Note: pad only the bottom for each "node" (so we do not double up)
+ 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;
+ background: $color-bg-base-main;
+ margin-bottom: $whisk-nodes-padding-base-Y;
+ }
+ .content {
+ 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;
+ }
+ .image-wrapper {
+ background: $color-bg-base-image-wrapper;
+ display: table-header-group;
+
+ // NOTE: margin ONLY works in horz. layout and has no impact in vert. layout
+ // margin: (top right bottom left)
+ margin: $main-image-wrapper-margin-base;
+
+ // NOTE: SVG files and the <img> tags do not work well together
+ // Important! without this style, the image will not stretch and display properly
+ img {
+ background: $color-bg-base-img;
+ display: block;
+ width: 100%;
+ height: 100%;
}
+ }
}
#doc {
- position: relative;
- overflow: hidden;
- text-align: left;
+ position: relative;
+ overflow: hidden;
+ text-align: left;
}
/*
@@ -247,22 +245,22 @@ pre {
*/
.flow-columns {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- margin-bottom: 10px;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ margin-bottom: 10px;
}
.flow-item-container {
- background: $color-white;
- width: 260px;
- margin: 10px;
+ background: $color-white;
+ width: 260px;
+ margin: 10px;
}
.flow-item-image {
- border-image-width: 0px;
- max-width: 240px;
- width: 240px;
+ border-image-width: 0px;
+ max-width: 240px;
+ width: 240px;
}
/*
@@ -270,21 +268,21 @@ pre {
*/
.collapsible-toggle {
- color: $color-menu-collapsible-fg;
- background-color: $color-menu-collapsible-bg;
- border: 1px solid $color-menuitem-collapsible-border;
- cursor: pointer; // finger shown to let ppl know you can click it
+ color: $color-menu-collapsible-fg;
+ background-color: $color-menu-collapsible-bg;
+ border: 1px solid $color-menuitem-collapsible-border;
+ cursor: pointer; // finger shown to let ppl know you can click it
}
.collapsible-toggle:hover {
- background-color: $color-menu-collapsible-hover-bg;
+ background-color: $color-menu-collapsible-hover-bg;
}
.collapse-content {
- padding: 0 18px;
- display: none;
- overflow: hidden;
- background-color: white;
+ padding: 0 18px;
+ display: none;
+ overflow: hidden;
+ background-color: white;
}
/*
@@ -294,85 +292,84 @@ pre {
// Need to create custom anchors that are aware of our fixed header
// (i.e., position below it on click)
a.indexable {
- display: block;
- position: relative;
- // TODO: make a variable
- top: -100px;
- visibility: hidden;
+ display: block;
+ position: relative;
+ // TODO: make a variable
+ top: -100px;
+ 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;
- }
+ 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)
- }
+ #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;
- background-color: $color-index-bg;
- width: $index-menu-width;
- // Pad the overall index <div> (and not all the nested <ul>s)
- margin: $index-menu-margin;
-
- ul {
- background-color: $color-index-list-bg;
- list-style-type: none;
- list-style-position: inside;
+ // Note: we will turn this off for small/base media, allow other profiles to turn on.
+ display: none;
+ background-color: $color-index-bg;
+ width: $index-menu-width;
+ // Pad the overall index <div> (and not all the nested <ul>s)
+ margin: $index-menu-margin;
+
+ ul {
+ background-color: $color-index-list-bg;
+ list-style-type: none;
+ list-style-position: inside;
+
+ // Override <ul> defaults:
+ margin: 0px;
+ padding: 0px;
+ }
- // Override <ul> defaults:
- margin: 0px;
- padding: 0px;
+ li {
+ background-color: $color-index-item-bg;
+ color: $color-index-fg;
+ border: $index-item-border;
+ font-size: $index-menu-font-size;
+ font-weight: $index-menu-font-weight;
+ padding: $index-menuitem-padding;
+ line-height: $index-menuitem-line-height;
+
+ // Control index-item (anchor) text color regardless by state
+ a {
+ color: $color-index-fg;
+ text-decoration: none;
}
-
- li {
- background-color: $color-index-item-bg;
- color: $color-index-fg;
- border: $index-item-border;
- font-size: $index-menu-font-size;
- font-weight: $index-menu-font-weight;
- padding: $index-menuitem-padding;
- line-height: $index-menuitem-line-height;
-
- // Control index-item (anchor) text color regardless by state
- a {
- color: $color-index-fg;
- text-decoration: none;
- }
- a:hover {
- // use different color on index-item hover
- color: $color-index-fg-highlight;
- }
- a:visited {
- color:$color-index-fg;
- }
- a:active {
- color: $color-index-fg;
- }
+ a:hover {
+ // use different color on index-item hover
+ color: $color-index-fg-highlight;
}
-
- li:hover {
- background-color: $color-index-bg-highlight;
- font-weight: $index-menuitem-font-weight-hover;
- a {
- color: $color-index-fg-highlight;
- }
+ a:visited {
+ color: $color-index-fg;
+ }
+ a:active {
+ color: $color-index-fg;
}
+ }
+ li:hover {
+ background-color: $color-index-bg-highlight;
+ font-weight: $index-menuitem-font-weight-hover;
+ a {
+ color: $color-index-fg-highlight;
+ }
+ }
}
diff --git a/_scss/_desktop.scss b/_scss/_desktop.scss
index 77fae35..3039871 100644
--- a/_scss/_desktop.scss
+++ b/_scss/_desktop.scss
@@ -1,16 +1,25 @@
@media screen and (min-width: $media-size-desktop-start) {
+ .header {
+ justify-content: space-evenly;
+ flex-flow: row wrap;
+ padding-bottom: 0px;
+ }
- #whiskNodes{
- main {
- background: $color-bg-desktop-main;
+ #whiskHeader {
+ 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.
- }
- }
+ #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/_tablet.scss b/_scss/_tablet.scss
index 36c24cc..b35fcd0 100644
--- a/_scss/_tablet.scss
+++ b/_scss/_tablet.scss
@@ -1,89 +1,74 @@
@media screen and (min-width: $media-size-tablet-start) {
- .header {
- // TODO: make variables
- height: $header-height;
- padding-bottom: 0px;
- background-position: 10px center;
- background-size: contain;
- }
- .header-section-logo {
- display: block;
- }
- .header-section-text-links {
- display: table-cell;
- }
+ .header {
+ // TODO: make variables
+ background-position: 10px center;
+ background-size: contain;
+ }
- .header-section-social-icons {
- display: table-cell;
- }
+ footer {
+ padding: $whisk-footer-base-padding-tablet;
+ }
- footer {
- padding: $whisk-footer-base-padding-tablet;
+ #whiskHeader {
+ h1 {
+ font-size: $header-tablet-h1-font-size;
+ font-weight: $header-tablet-h1-font-weight;
+ font-style: $header-tablet-h1-font-style;
+ line-height: $header-tablet-h1-line-height;
}
-
- #whiskHeader {
- padding-top: $whisk-header-tablet-padding-top;
- h1 {
- font-size: $header-tablet-h1-font-size;
- font-weight: $header-tablet-h1-font-weight;
- font-style: $header-tablet-h1-font-style;
- line-height: $header-tablet-h1-line-height;
- }
- h5 {
- font-size: $header-tablet-h5-font-size;
- font-weight: $header-tablet-h5-font-weight;
- font-style: $header-tablet-h5-font-style;
- line-height: $header-tablet-h5-line-height;
- }
-
+ h5 {
+ font-size: $header-tablet-h5-font-size;
+ font-weight: $header-tablet-h5-font-weight;
+ font-style: $header-tablet-h5-font-style;
+ line-height: $header-tablet-h5-line-height;
}
+ }
- // "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;
- }
-
- // 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;
- }
+ // "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;
}
+ // 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;
+ }
+ }
- padding-left: $whisk-nodes-padding-tablet-X;
- padding-right: $whisk-nodes-padding-tablet-X;
+ #whiskNodes {
+ padding-left: $whisk-nodes-padding-tablet-X;
+ padding-right: $whisk-nodes-padding-tablet-X;
- main {
- clear: both;
- display: table;
- background: $color-bg-tablet-main;
- position: relative;
+ main {
+ clear: both;
+ display: table;
+ background: $color-bg-tablet-main;
+ position: relative;
- .content {
- display: table-cell;
- vertical-align: top;
- position: relative;
- width: $main-content-width-tablet;
- padding: $whisk-nodes-main-content-padding-tablet;
+ .content {
+ display: table-cell;
+ vertical-align: top;
+ position: relative;
+ 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;
- }
- .image-wrapper {
- // Alter to a 'block' display to get side-by-side layout
- display: block;
- position: relative;
+ // 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;
+ position: relative;
- // Note: we have a border in side-by-side layout, but do not in vertical layout.
- border: $color-bg-tablet-image-wrapper-border;
- }
- }
+ // Note: we have a border in side-by-side layout, but do not in vertical layout.
+ border: $color-bg-tablet-image-wrapper-border;
+ }
}
+ }
}
diff --git a/_scss/_variables.scss b/_scss/_variables.scss
index 3fee7be..2ddbefa 100644
--- a/_scss/_variables.scss
+++ b/_scss/_variables.scss
@@ -42,6 +42,7 @@ $header-height: 80px;
// 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;
/*
* Layout: Footer
@@ -151,7 +152,7 @@ $color-bg-tablet-image-wrapper-border: 8px solid $color-logo-deeper-aquamarine;
* Fonts
*/
-$font-family-default: 'Roboto', sans-serif;
+$font-family-default: "Roboto", sans-serif;
$font-family-code: "Courier New", Courier, monospace;
$font-size-default: 14px;
$font-weight-default: 300;
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services