Skip to content

Simplified footer and made its background orange #546

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Dec 26, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 13 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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".
Expand All @@ -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" />
```
```
13 changes: 6 additions & 7 deletions _includes/footer.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
44 changes: 0 additions & 44 deletions _sass/_nav.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down Expand Up @@ -764,10 +724,6 @@ body {
display: block;
margin: 0 auto;
}
.footer {
padding-bottom: 15px;
text-align: center;
}
}
@media (min-width: 420px) {
.button-container {
Expand Down
9 changes: 9 additions & 0 deletions _sass/components/_footer.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
@import "settings/colors";

.footer {
background-color: $orange;
p {
color: $black;
padding-top: 10px;
}
}
9 changes: 9 additions & 0 deletions _sass/settings/_colors.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
$black: #000000;

// Jupyter official orange
$orange: #F37626;

$dark-gray: #4D4D4D;
$medium-dark-gray: #616161;
$medium-gray: #757575;
$gray: #9E9E9E;
3 changes: 2 additions & 1 deletion assets/css/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,6 @@
@import "about";
@import "gallery";
@import "syntax";
@import "components/footer";
@import "components/jumbotron";
@import "components/jupyterhub";
@import "components/jupyterhub";