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: Add ASF required links and legal text to footer (#307)
Date Wed, 15 Aug 2018 15:39:45 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 888e4ab  Add ASF required links and legal text to footer (#307)
888e4ab is described below

commit 888e4ab97cbc5aeeceebc9ef0f8dab1683405f1e
Author: Matt Rutkowski <mrutkows@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&nbsp;Software&nbsp;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;


Mime
View raw message