Skip to content

Commit 8908ccb

Browse files
author
Jordan McCullough
committed
Merge pull request #201 from github/bring-back-nav-and-pretty-styles
Revise curriculum layout, add improved TOC functionality
2 parents e4de8b2 + dd1c28b commit 8908ccb

File tree

5 files changed

+104
-74
lines changed

5 files changed

+104
-74
lines changed

‎_includes/slide-section

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

2-
<section class="slide">
2+
<div class="slide">
33
<div class="alignment">
44
{{slide | markdownify}}
55
</div>
6-
</section>
6+
</div>

‎_javascript/curriculum.js

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,22 @@
11
$(function(){
22

3+
$(window).resize(function () {
4+
updateSlideSize();
5+
});
6+
7+
updateSlideSize();
8+
9+
function updateSlideSize(){
10+
var w = window.innerWidth;
11+
var h = window.innerHeight;
12+
$(".slide").css("height", h);
13+
}
14+
315
buildToc();
416

517
$(document).scrollsnap({
6-
snaps: 'section',
7-
proximity: 250
18+
snaps: '.slide',
19+
proximity: 150
820
});
921

1022
function buildToc(){
@@ -27,15 +39,13 @@ $(function(){
2739

2840
item = $('<li><a href="#' + headingSep + '">' + headings[h].innerHTML + '</a></li>');
2941
toc.append(item);
30-
// console.log(headings[h].parentElement);
3142

32-
// var hiddenTitle = document.createElement("h3");
33-
// hiddenTitle.setAttribute("id", headingSep);
34-
// console.log(hiddenTitle);
35-
36-
// $(headings[h].parentElement).prepend(hiddenTitle);
37-
38-
headings[h].parentElement.setAttribute("id", headingSep);
43+
if(headings[h].parentElement.getAttribute("class").indexOf("alignment")>-1){
44+
headings[h].parentElement.setAttribute("id", headingSep);
45+
}
46+
else{
47+
headings[h].setAttribute("id", headingSep);
48+
}
3949

4050
$('.curriculum').scrollspy({ target: '#toc' });
4151
}

‎_layouts/curriculum-beta.html

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,30 @@
1212
{% endif %}
1313
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
1414

15-
<script src="{{ leadingpath }}/_javascript/jquery-1.11.0.min.js"></script>
16-
<script src="{{ leadingpath }}/_javascript/bootstrap/js/bootstrap.min.js"></script>
15+
{% include dependencies %}
16+
<!--Scrollsnap-->
1717
<script src="{{ leadingpath }}/_javascript/jquery-scrollsnap-plugin/src/jquery.scrollstop.js"></script>
1818
<script src="{{ leadingpath }}/_javascript/jquery-scrollsnap-plugin/src/jquery.easing.min.js"></script>
1919
<script src="{{ leadingpath }}/_javascript/jquery-scrollsnap-plugin/src/jquery.scrollsnap.js"></script>
2020

21+
<!--Curriculum setup JS-->
2122
<script src="{{ leadingpath }}/_javascript/curriculum.js"></script>
2223

23-
<link rel="stylesheet" href="{{ leadingpath }}/_javascript/bootstrap/css/bootstrap.min.css">
24+
<!--Curriculum special styling-->
2425
<link rel="stylesheet" href="{{ leadingpath }}/_stylesheets/curriculum-beta.css" type="text/css" />
2526
</head>
2627
<body data-spy="scroll" data-target="#toc">
28+
{% include navigation.html %}
29+
30+
<div class="hero overview">
31+
<div class="container">
32+
<div class="content">
33+
<h2>{{ page.title }}</h2>
34+
<p>{{ page.description }}</p>
35+
</div>
36+
</div>
37+
</div>
38+
2739
<div id="toc-wrapper">
2840
<div id="toc" data-spy="affix" data-offset-top="165">
2941
<ul id="toc-list" class="nav" role="tablist"></ul>
@@ -32,6 +44,6 @@
3244

3345
<div class="curriculum">{{ content }}</div>
3446

35-
<!-- {% include footer.html %} -->
47+
{% include footer.html %}
3648
</body>
3749
</html>

‎_stylesheets/curriculum-beta.css

Lines changed: 30 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -47,32 +47,22 @@ ul.site-footer-links {
4747
@media screen and (max-width: 568px) {
4848
ul.site-footer-links {
4949
display: none; } }
50-
html, body {
51-
height: 100%;
52-
background: #f4f4f4;
50+
body {
5351
font-size: 16px; }
5452

5553
.nav-list > li > a {
5654
font-size: 8pt; }
5755

5856
.curriculum {
59-
height: 100%;
60-
width: 100%;
57+
width: 960px;
58+
margin: 0 auto;
59+
position: relative;
6160
/* General external link */
6261
/* GitHub Links */
6362
/* GitHub Book Links, Guide Links */
6463
/* YouTube Links */ }
6564
.curriculum h1, .curriculum h2, .curriculum h3, .curriculum h4, .curriculum h5, .curriculum h6, .curriculum p, .curriculum ul, .curriculum svg {
66-
font-weight: normal;
67-
margin: 0 15%; }
68-
.curriculum pre {
69-
margin: 0 15%;
70-
background: white; }
71-
.curriculum pre:before {
72-
content: "\f0c8";
73-
font: normal normal 22px octicons;
74-
float: right;
75-
opacity: .4; }
65+
font-weight: normal; }
7666
.curriculum h3 {
7767
font-size: 400%;
7868
line-height: 1.25em;
@@ -85,24 +75,29 @@ html, body {
8575
text-shadow: 0 1px rgba(0, 0, 0, 0.1);
8676
color: #454545;
8777
border-bottom: solid 1px #e8e8ea; }
78+
.curriculum pre {
79+
margin: 0 15%;
80+
background: white; }
81+
.curriculum pre:before {
82+
content: "\f0c8";
83+
font: normal normal 22px octicons;
84+
float: right;
85+
opacity: .4; }
8886
.curriculum p {
8987
line-height: 1.75em;
9088
margin-bottom: 2em; }
91-
.curriculum ul {
92-
display: inline-block;
93-
text-align: left; }
9489
.curriculum iframe {
9590
display: block;
9691
margin: 0 auto; }
9792
.curriculum .slide {
98-
min-height: 100%;
9993
width: 100%;
10094
background: #ffffff;
101-
display: table;
102-
text-align: center; }
95+
display: table; }
96+
.curriculum .slide h3, .curriculum .slide h4, .curriculum .slide h5 {
97+
text-align: center; }
10398
.curriculum .slide h1, .curriculum .slide h2, .curriculum .slide h3, .curriculum .slide h4, .curriculum .slide h5, .curriculum .slide h6, .curriculum .slide p, .curriculum .slide ul, .curriculum .slide pre, .curriculum .slide svg {
104-
font-weight: normal;
105-
padding: 0 0; }
99+
margin-left: 0;
100+
margin-right: 0; }
106101
.curriculum .slide .alignment {
107102
padding: 0 20%;
108103
display: table-cell;
@@ -152,12 +147,22 @@ html, body {
152147
font: normal normal 20px octicons; }
153148

154149
#toc-wrapper {
155-
position: fixed;
150+
position: absolute;
151+
z-index: 1000;
156152
right: 0;
157153
width: 15%;
158-
z-index: 10000; }
154+
opacity: .2;
155+
transition: all 200ms; }
156+
#toc-wrapper:hover {
157+
opacity: 1; }
159158

160159
#toc .active {
161160
font-weight: 700; }
162161
#toc .active a {
163162
color: #222222; }
163+
164+
.affix-top {
165+
position: absolute; }
166+
167+
.affix {
168+
position: fixed; }

‎_stylesheets/curriculum-beta.scss

Lines changed: 36 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,8 @@ $mono-dark: #454545;
1515
}
1616
}
1717

18-
html, body{
19-
height: 100%;
20-
background: #f4f4f4;
18+
body{
19+
// background: #f4f4f4;
2120
font-size: 16px;
2221
}
2322

@@ -26,24 +25,14 @@ html, body{
2625
}
2726

2827
.curriculum{
29-
height: 100%;
30-
width: 100%;
28+
width: $width-desktop;
29+
// width: 100%;
30+
margin: 0 auto;
31+
position: relative;
3132

3233
h1,h2,h3,h4,h5,h6,p,ul,svg{
3334
font-weight: normal;
34-
margin: 0 15%;
35-
}
36-
37-
pre{
38-
margin: 0 15%;
39-
background: $mono-bright;
40-
41-
&:before {
42-
content: "\f0c8";
43-
font: normal normal 22px octicons;
44-
float: right;
45-
opacity: .4;
46-
}
35+
// margin: 0 15%;
4736
}
4837

4938
h3{
@@ -62,39 +51,49 @@ html, body{
6251
border-bottom: solid 1px $mono-light;
6352
}
6453

54+
pre{
55+
margin: 0 15%;
56+
background: $mono-bright;
57+
58+
&:before {
59+
content: "\f0c8";
60+
font: normal normal 22px octicons;
61+
float: right;
62+
opacity: .4;
63+
}
64+
}
65+
6566
p{
6667
line-height: 1.75em;
6768
margin-bottom: 2em;
6869
}
69-
ul{
70-
display: inline-block;
71-
text-align: left;
72-
}
7370

7471
iframe{
7572
display: block;
7673
margin: 0 auto;
7774
}
7875

79-
8076
.slide{
81-
min-height: 100%;
8277
width: 100%;
8378
background: #ffffff;
8479
display: table;
85-
text-align: center;
80+
81+
h3,h4,h5{
82+
text-align: center;
83+
}
8684

8785
h1,h2,h3,h4,h5,h6,p,ul,pre,svg{
88-
font-weight: normal;
89-
padding: 0 0;
86+
margin-left: 0;
87+
margin-right: 0;
9088
}
9189

9290
.alignment{
93-
// margin: 0 20%;
9491
padding: 0 20%;
9592
display: table-cell;
9693
vertical-align: middle;
9794
}
95+
96+
9897
}
9998

10099
/* General external link */
@@ -136,11 +135,15 @@ html, body{
136135
}
137136

138137
#toc-wrapper{
139-
position: fixed;
138+
position: absolute;
139+
z-index: 1000;
140140
right: 0;
141141
width: 15%;
142-
z-index: 10000;
143-
// padding: 15px 0 0 0;
142+
opacity: .2;
143+
transition: all 200ms;
144+
&:hover{
145+
opacity: 1;
146+
}
144147
}
145148

146149
#toc{
@@ -154,12 +157,12 @@ html, body{
154157
}
155158

156159
.affix-top{
157-
160+
position: absolute;
158161
}
159162

160163
.affix{
164+
position: fixed;
161165
}
162166

163167
.affix-bottom{
164-
165168
}

0 commit comments

Comments
 (0)