Skip to content

Commit a4616e6

Browse files
author
Jordan McCullough
committed
Merge pull request #288 from github/styling-refresh
Update style, tidy custom components
2 parents 0712187 + a1772f5 commit a4616e6

3 files changed

Lines changed: 91 additions & 108 deletions

File tree

‎_javascript/curriculum.js‎

Lines changed: 7 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,8 @@ $(function(){
2020
{
2121
url: "https://api.github.com/users/"+username,
2222
success: function(data, textStatus, jqXHR){
23-
24-
$("<span/>",
25-
{
26-
class: "teacher-name",
27-
text: data.name
28-
}).appendTo("#teacher-name");
29-
23+
$("#teacher-name").html(data.name);
24+
3025
$("<span/>",
3126
{
3227
text: data.login
@@ -143,24 +138,18 @@ $(function(){
143138

144139
//Time toggle keybinding
145140
$(".timer-label").click(function(){
146-
$(".timer-wrapper").toggleClass("fade-out");
147-
$(".timer-amount").show();
148-
resetTimer();
149-
});
150-
$(".timer-exit").click(function(){
151-
$(".timer-wrapper").toggleClass("fade-out");
152-
$("#timer-check").removeAttr("checked");
153-
// $(".timer-amount").();
154141
resetTimer();
155142
});
156143
$("#start-stop").click(function(){
144+
157145
var timeLeftDisplay = $("#time-left")
158146
var min = $("#minutes").attr("value");
159147
var duration = min*60;
160148

161149
resetTimer();
162150

163-
$(".timer-amount").hide();
151+
$(".time-amount").hide();
152+
$("#start-stop").hide();
164153

165154
timeLeftInterval = setInterval(function(){
166155
timeLeftDisplay.html( Math.floor((duration)/60) + ":" + (duration%60 < 10 ? "0"+duration%60:duration%60) );
@@ -173,6 +162,8 @@ $(function(){
173162
});
174163
function resetTimer(){
175164
clearInterval(timeLeftInterval);
165+
$("#start-stop").show();
166+
$(".time-amount").show();
176167
$("#time-left").html("");
177168
}
178169

‎_layouts/curriculum.html‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@
44
---
55

66
<!-- Modal -->
7-
<div class="modal fade" id="help" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
7+
<div class="modal fade" id="help" tabindex="-1" role="dialog" aria-labelledby="timerModalLabel" aria-hidden="true">
88
<div class="modal-dialog">
99
<div class="modal-content">
1010
<div class="modal-header">
1111
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
12-
<h4 class="modal-title" id="myModalLabel">Help / Shortcuts</h4>
12+
<h4 class="modal-title" id="timerModalLabel">Help / Shortcuts</h4>
1313
</div>
1414
<div class="modal-body">
1515
<table>
@@ -26,7 +26,7 @@ <h4 class="modal-title" id="myModalLabel">Help / Shortcuts</h4>
2626
<td>Hide/show table of contents</td>
2727
</tr>
2828
</table>
29-
29+
3030
<table>
3131
<tr>
3232
<th>URL Command</th>
@@ -48,16 +48,19 @@ <h4 class="modal-title" id="myModalLabel">Help / Shortcuts</h4>
4848
</div>
4949
</div>
5050

51-
<div class="timer-wrapper fade-out">
52-
<div class="timer">
53-
<div class="timer-exit"><span class="octicon octicon-x"></span></div>
54-
<div class="timer-amount">
55-
<input type="number" id="minutes" name="minutes" min="1" max="20" value="5" placeholder="min" class="form-control">
56-
<!-- <input type="number" id="seconds" name="seconds" min="1" max="60" value="0" placeholder="sec" class="form-control"> -->
57-
<button id="start-stop" type="submit" class="btn btn-default">Start</button>
58-
</div>
59-
<div class="timer-content">
60-
<span class="time-left" id="time-left"></span>
51+
52+
53+
<!-- Modal -->
54+
<div class="modal fade" id="timerModal" tabindex="-1" role="dialog" aria-labelledby="timerModalLabel" aria-hidden="true">
55+
<div class="modal-dialog">
56+
<div class="modal-content text-center">
57+
<input type="number" id="minutes" name="minutes" min="1" max="60" value="5" placeholder="min" class="form-control time-amount">
58+
<div class="time-left" id="time-left"></div>
59+
60+
<div class="modal-footer">
61+
<button id="start-stop" type="submit" class="btn btn-default">Start</button>
62+
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
63+
</div>
6164
</div>
6265
</div>
6366
</div>
@@ -67,7 +70,8 @@ <h4 class="modal-title" id="myModalLabel">Help / Shortcuts</h4>
6770
<div class="alignment">
6871
<div id="teacher-avatar" class=""></div>
6972
<div class="" id="teacher-info">
70-
<div id="teacher-name"></div>
73+
74+
<h3 id="teacher-name"></h3>
7175

7276
<span id="teacher-username">
7377
<span class="octicon octicon-octoface"></span>
@@ -121,7 +125,7 @@ <h4>Table of Contents</h4>
121125
<li>
122126
<div class="timer-toggle"></div>
123127
<input type="checkbox" name="timer-check" id="timer-check" class="timer-check" value="true">
124-
<label for="timer-check" class="timer-label">Timer</label>
128+
<label for="timer-check" class="timer-label" data-toggle="modal" data-target="#timerModal">Timer</label>
125129
</li>
126130
</ul>
127131
</div>

‎_stylesheets/curriculum.scss‎

Lines changed: 65 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,23 @@
22

33
---
44

5+
// Import external dependencies
56
@import "octicons/octicons/sprockets-octicons.scss";
67
@import "bootstrap-sass/lib/bootstrap.scss";
78

9+
10+
body{
11+
background: $body-bg;
12+
}
13+
14+
// Incorporate Bootstrap table striping
815
table{
916
@extend .table;
1017
@extend .table-striped;
1118
@extend .table-bordered;
1219
}
1320

21+
// Octicon mixin
1422
@mixin octicon-link($char){
1523
font: normal normal 1em octicons;
1624
text-decoration: none;
@@ -22,38 +30,51 @@ table{
2230
}
2331
}
2432

25-
33+
// Custom columns for hide/show of TOC
2634
.col-content, .col-toc{
2735
transition: padding 300ms, opacity 200ms;
2836
}
29-
3037
.col-toc{
3138
position: fixed;
3239
right: -16.66667%;
3340
right: 0;
3441
opacity: 0;
3542
}
36-
3743
.shift-left{
3844
&.col-content{
3945
padding-right: 16.66667%;
4046
}
41-
4247
&.col-toc{
4348
right: 0;
4449
opacity: 1;
4550
}
4651
}
4752

53+
// Custom Octicon styling
54+
.mega-octicon{
55+
font-size: 110px;
56+
color: $brand-primary;
4857

58+
&:after{
59+
content: "";
60+
display: block;
61+
width: 170px;
62+
height: 170px;
63+
border: solid 1px $gray-light;
64+
border-radius: 50%;
65+
padding: 20px;
66+
margin-top: -142px;
67+
}
68+
}
69+
70+
// Table of contents
4971
#toc-wrapper{
5072
opacity: .5;
5173
transition: all 200ms;
5274
&:hover{
5375
opacity: 1;
5476
}
5577
}
56-
5778
#toc{
5879
transition: margin 300ms;
5980
font-size: .7em;
@@ -62,43 +83,19 @@ table{
6283
}
6384
}
6485

65-
66-
.fade-out{
67-
background: none !important;
68-
margin-left: 100%;
69-
position: fixed;
70-
left: -35px !important;
71-
72-
.octicon{
73-
font-size: 14px !important;
74-
}
75-
76-
&.timer-wrapper{
77-
background-color: none !important;
78-
}
79-
80-
.timer{
81-
margin: 0 0 !important;
82-
}
83-
84-
.timer-toggle{
85-
padding-left: 0px !important;
86-
opacity: .3;
87-
text-align: left !important;
88-
}
89-
90-
.timer-amount{
91-
visibility: hidden;
92-
}
93-
}
94-
9586
.display-controls{
9687
border-top: solid 2px $gray-lighter;
9788
margin-top: 5px;
9889
padding-top: 10px;
9990
}
10091

101-
92+
// Custom components
93+
.time-amount{
94+
text-align: center;
95+
}
96+
.time-left{
97+
font-size: 88px;
98+
}
10299

103100
.timer-check{
104101
visibility: hidden;
@@ -135,7 +132,6 @@ table{
135132
width: 14px;
136133
height: 14px;
137134
box-shadow: 0 0 0 1px $gray-light;
138-
// padding-top: 1px;
139135
}
140136
}
141137

@@ -218,32 +214,45 @@ table{
218214

219215
.deck{
220216
position: relative;
221-
font-size: 16px;
217+
font: 13px/1.4 Helvetica, arial, freesans, clean, sans-serif;
218+
font-weight: 300;
219+
color: $gray-darker;
222220

223-
.mega-octicon{
224-
font-size: 600%;
221+
h1,h2,h3,h4,h5,h6,p,ul,li{
222+
font-weight: inherit;
225223
}
226224

227-
#teacher-avatar{
228-
img{
229-
height: 300px;
230-
width: 300px;
225+
.slide{
226+
h2{
227+
font-size: 52px;
228+
}
229+
h3,h4{
230+
font-size: 42px;
231+
}
232+
p,ul{
233+
font-size: 20px;
234+
color: $gray;
231235
}
232236
}
233237

234-
.teacher-name{
235-
color: $brand-primary;
236-
font-size: 300%;
237-
}
238+
#teacher{
239+
.octicon{
240+
color: $brand-primary;
241+
}
242+
span{
243+
margin: auto 4px;
244+
}
238245

239-
#teacher-username,#teacher-email, #teacher-organization, #teacher-location{
240-
margin: auto .75em;
241-
opacity: .6;
246+
.teacher-badges{
247+
margin-top: 10px;
248+
}
242249
}
243250

244-
.teacher-badges{
245-
margin: 1em 0;
246-
opacity: .5;
251+
#teacher-avatar{
252+
img{
253+
height: 300px;
254+
width: 300px;
255+
}
247256
}
248257

249258
&>hr{
@@ -252,43 +261,22 @@ table{
252261

253262
.slide{
254263
width: 100%;
255-
background: #ffffff;
256264
display: table;
257265

258-
h2,h3,h4,h5{
259-
text-align: center;
260-
font-size: 400%;
261-
}
262-
263-
h1,h2,h3,h4,h5,h6,p,ul,pre,svg{
264-
margin-left: 0;
265-
margin-right: 0;
266-
}
267-
268266
pre{
269267
width: 80%;
270268
padding: 2em;
271269
font-size: 120%;
272270
text-align: left;
273271
margin: 0 auto;
274-
background: #222;
275-
color: #f9f9f9;
272+
background: $gray-darker;
273+
color: $gray-lighter;
276274

277275
code{
278276
font-size: 1.5em;
279277
}
280278
}
281279

282-
ul,ol{
283-
display: inline-block;
284-
text-align: left;
285-
}
286-
.lab{
287-
text-align: left;
288-
ul, ol{
289-
display: block;
290-
}
291-
}
292280

293281
.alignment{
294282
display: table-cell;

0 commit comments

Comments
 (0)