Merge pull request jupyter#546 from jupyter/orange-footer

Simplified footer and made its background orange

Author: Carreau

README.md

@@ -141,6 +141,18 @@ Add commit (and don't forget to add to `_data/nav.yml`).
 
 ## Site quirks and tips
 
+### SCSS variables
+
+Shortcuts with colors and other common variables can be found in `_sass/settings`. They can be used in SCSS files.
+
+```scss
+@import "settings/colors"
+
+a {
+    color: $orange;
+}
+```
+
 ### Lazy loading of images
 
 The Jupyter website uses [lazy loading of images](https://web.dev/browser-level-image-lazy-loading/). In general, images that are "below the fold" (below the browser window on page load) for laptop-sized screen sizes are encouraged to be configured for "lazy loading".
@@ -155,4 +167,4 @@ For images that are "above the fold" (that will be seen by users immediately aft
 
 ```html
 <img class="my-class" src="my/src.png" loading="eager" />
-```
+```

_includes/footer.html

@@ -2,13 +2,12 @@
 <div class="footer" role="navigation">
     <div class="container">
         <div class="navbar-text">
-            <p>Copyright © {{site.time | date: '%Y' }}  Project Jupyter –
-            Last updated {{site.time | date: "%a, %b %d, %Y" }}</p>
-            <p>The Jupyter Trademark is registered with the U.S. Patent &amp; Trademark Office.</p>
-        </div>
-        <div class="follow">
-            <a href="https://github.com/jupyter" class="button github-button" aria-label="Follow @jupyter on GitHub"><svg version="1.1" width="14" height="14" viewBox="0 0 16 16" class="octicon octicon-mark-github" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg> <span>Follow @jupyter</span></a>
-            <br><a href="https://twitter.com/intent/follow?screen_name=ProjectJupyter" class="twitter-follow-button" data-show-count="false">Follow @ProjectJupyter on Twitter</a>
+            <p>
+                Copyright © {{site.time | date: '%Y' }}  Project Jupyter
+            </p>
+            <p>
+                The Jupyter Trademark is registered with the U.S. Patent & Trademark Office.
+            </p>
         </div>
     </div>
 </div>

_sass/_nav.scss

@@ -79,46 +79,6 @@ body {
     color: #E46E2E;
 }
 
-.footer {
-    background-color: #757575;
-}
-
-.footer p {
-    color: white;
-    padding-top: 10px;
-}
-
-.footer li {
-    color: white;
-    display: inline-block;
-    text-decoration: none;
-}
-
-.footer a {
-    color: white;
-    text-decoration: none;
-}
-
-.footer a:hover, .footer a:active {
-    opacity: .8;
-}
-
-.footer li::after {
-    content:" |";
-}
-
-.footer li:last-of-type::after {
-    content:"";
-}
-
-.footer-text {
-    font-size: 16px;
-    margin-left: 0;
-    padding-left: 0;
-}
-
-
-
 /* Reusable elements */
 
 /* Header section of each page */
@@ -764,10 +724,6 @@ body {
         display: block;
         margin: 0 auto;
     }
-    .footer {
-        padding-bottom: 15px;
-        text-align: center;
-    }
 }
 @media (min-width: 420px) {
     .button-container {

_sass/components/_footer.scss

@@ -0,0 +1,9 @@
+@import "settings/colors";
+
+.footer {
+    background-color: $orange;
+    p {
+        color: $black;
+        padding-top: 10px;
+    }
+}

_sass/settings/_colors.scss

@@ -0,0 +1,9 @@
+$black: #000000;
+
+// Jupyter official orange
+$orange: #F37626;
+
+$dark-gray: #4D4D4D;
+$medium-dark-gray: #616161;
+$medium-gray: #757575;
+$gray: #9E9E9E;

assets/css/main.scss

@@ -9,5 +9,6 @@
 @import "about";
 @import "gallery";
 @import "syntax";
+@import "components/footer";
 @import "components/jumbotron";
-@import "components/jupyterhub";
+@import "components/jupyterhub";