Skip to content

Commit 290d49e

Browse files
palewirepalewire
authored
Tidy up page header (jupyter#568)
1 parent 2b4d44d commit 290d49e

File tree

10 files changed

+66
-94
lines changed

10 files changed

+66
-94
lines changed

‎_includes/page-header.html

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<header class="page-header">
2+
{% if include.image %}
3+
<img src="{{ include.image }}"
4+
{% if include.image_alt %}alt="{{ include.image_alt }}"{% endif %}
5+
loading="eager" />
6+
{% else %}
7+
<h1>{{ include.title }}</h1>
8+
{% endif %}
9+
<p>{{ include.tagline }}</p>
10+
</header>

‎_layouts/page.html

+13-17
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,18 @@
11
---
22
layout: default
33
---
4-
<div class="post">
5-
<header class="post-header header header-grey">
6-
{% if page.title_image %}
7-
<img src="{{ page.title_image }}" class="title_image" {% if page.title_image_alt %}alt="{{ page.title_image_alt }}"{% endif %} />
8-
{% else %}
9-
<h2>{{ page.title }}</h2>
10-
{% endif %}
11-
<p>{{ page.tagline }}</p>
12-
</header>
134

14-
<article class="post-content">
15-
<div class="section-white top-section-border">
16-
<div class="page_content container">
17-
{{ content }}
18-
</div>
19-
</div>
20-
</article>
5+
{% include page-header.html
6+
title=page.title
7+
tagline=page.tagline
8+
image=page.title_image
9+
image_alt=page.title_image_alt
10+
%}
2111

22-
</div>
12+
<article class="post-content">
13+
<div class="section-white top-section-border">
14+
<div class="page_content container">
15+
{{ content }}
16+
</div>
17+
</div>
18+
</article>

‎_sass/_markdown.scss

-6
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,6 @@ div.page_content.container > ul {
3131
}
3232

3333

34-
img.title_image {
35-
max-height: 200px;
36-
padding-top: 10px;
37-
padding-bottom: 10px;
38-
}
39-
4034
.clear {
4135
clear: both;
4236
}

‎_sass/_nav.scss

-40
Original file line numberDiff line numberDiff line change
@@ -81,31 +81,6 @@ body {
8181

8282
/* Reusable elements */
8383

84-
/* Header section of each page */
85-
.header {
86-
padding-top: 42px;
87-
padding-bottom: 42px;
88-
text-align: center;
89-
}
90-
91-
.header-darkgray {
92-
/* Only using dark gray for documentation page, add padding top to center in header */
93-
background-color: #757575;
94-
color: white;
95-
}
96-
97-
.header-grey {
98-
background-color: #f5f5f5;
99-
}
100-
101-
.header-white {
102-
background-color: white;
103-
}
104-
105-
.header p {
106-
margin: 0 30%;
107-
}
108-
10984
/* Section elements */
11085
/* Section classes used for particular sections within a page. Sections should differ in background color when used next to each other */
11186
.section-white {
@@ -455,11 +430,6 @@ body {
455430
font-weight: 500;
456431
line-height: 1.25;
457432
}
458-
h1 {
459-
font-size: 48px;
460-
font-weight: 500;
461-
line-height: 1.05em;
462-
}
463433
.follow {
464434
float: right;
465435
margin-top: 15px;
@@ -493,11 +463,6 @@ body {
493463
font-weight: 500;
494464
line-height: 1.153em;
495465
}
496-
h1 {
497-
font-size: 32px;
498-
font-weight: 500;
499-
line-height: 1.25em;
500-
}
501466
.nb-highlight-text {
502467
text-align: center;
503468
}
@@ -634,11 +599,6 @@ body {
634599
font-weight: 500;
635600
line-height: 1.153em;
636601
}
637-
h1 {
638-
font-size: 32px;
639-
font-weight: 500;
640-
line-height: 1.25em;
641-
}
642602
.nav>li>a {
643603
letter-spacing: 1px;
644604
padding-left: 16px;

‎_sass/components/_page-header.scss

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
@import "settings/colors";
2+
3+
.page-header {
4+
padding: 3em 1em;
5+
text-align: center;
6+
background-color: $light-gray;
7+
h1 {
8+
font-size: 2.5em;
9+
line-height: 1.3;
10+
@media (max-width: 767px) {
11+
font-size: 2em;
12+
}
13+
}
14+
img {
15+
max-height: 200px;
16+
padding-top: 10px;
17+
padding-bottom: 10px;
18+
}
19+
p {
20+
margin: 0 auto;
21+
max-width: 500px;
22+
line-height: 1.5;
23+
}
24+
}

‎_sass/settings/_colors.scss

+1
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,4 @@ $dark-gray: #4D4D4D;
77
$medium-dark-gray: #616161;
88
$medium-gray: #757575;
99
$gray: #9E9E9E;
10+
$light-gray: #f5f5f5;

‎assets/css/main.scss

+1
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,4 @@
1414
@import "components/footer";
1515
@import "components/jumbotron";
1616
@import "components/jupyterhub";
17+
@import "components/page-header";

‎documentation.html

+6-9
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,16 @@
11
---
22
layout: default
33
title: Documentation
4-
description: A comprehensive list of Jupyter projects, subprojects and repositories
4+
tagline: A comprehensive list of Jupyter projects, subprojects and repositories
55
permalink: /documentation
66
---
77

88
<div class="post">
9-
<header class="post-header header header-grey">
10-
<div class="container">
11-
<h2>{{ page.title }}</h2>
12-
<p>
13-
{{ page.description }}
14-
</p>
15-
</div>
16-
</header>
9+
10+
{% include page-header.html
11+
title=page.title
12+
tagline=page.tagline
13+
%}
1714

1815
<article class="post-content">
1916
<div class="section-white top-section-border">

‎try.html

+5-9
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: default
33
title: Try Jupyter
4-
description: 'You can try Jupyter out right now, without installing anything. Select an example below and you will get a temporary Jupyter server just for you, running on <a href="https://mybinder.org">mybinder.org</a>. If you like it, you can <a href="https://jupyter.org/install.html">install Jupyter</a> yourself.'
4+
tagline: 'You can try Jupyter out right now, without installing anything. Select an example below and you will get a temporary Jupyter server just for you, running on <a href="https://mybinder.org">mybinder.org</a>. If you like it, you can <a href="https://jupyter.org/install.html">install Jupyter</a> yourself.'
55
permalink: /try
66

77
boxes:
@@ -61,14 +61,10 @@
6161
---
6262

6363
<div class="post">
64-
<header class="post-header header header-grey">
65-
<div class="container">
66-
<h2>{{ page.title }}</h2>
67-
<p>
68-
{{ page.description }}
69-
</p>
70-
</div>
71-
</header>
64+
{% include page-header.html
65+
title=page.title
66+
tagline=page.tagline
67+
%}
7268

7369
<article class="post-content">
7470
<div class="section-white top-section-border">

‎widgets.html

+6-13
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
layout: default
3-
title: Widgets
3+
title: Interactive Widgets
4+
tagline: Jupyter widgets enable interactive data visualization in the Jupyter notebooks.
45
permalink: /widgets
56
---
67

@@ -11,18 +12,10 @@
1112
</script>
1213
<script src="https://unpkg.com/@jupyter-widgets/html-manager@*/dist/embed-amd.js" crossorigin="anonymous"></script>
1314

14-
<section>
15-
<div class="header header-grey">
16-
<div class="container">
17-
<div class="row">
18-
<div class="col-xs-12">
19-
<h2>Interactive Widgets</h2>
20-
<p>Jupyter widgets enable interactive data visualization in the Jupyter notebooks.</p>
21-
</div>
22-
</div>
23-
</div>
24-
</div>
25-
</section>
15+
{% include page-header.html
16+
title=page.title
17+
tagline=page.tagline
18+
%}
2619

2720
<section>
2821
<div class="section-white top-section-border">

0 commit comments

Comments
 (0)