Skip to content

Commit 2cbbc45

Browse files
headwindsheadwinds
committed
update to the modular backbone tutorial to give data from github and replace users with contributors
1 parent 5deef95 commit 2cbbc45

37 files changed

+942
-153
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,5 @@
22
*config.js
33
*node_modules/
44
.DS_Store
5+
*.sublime-project
6+
*.sublime-workspace

‎css/reset.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -130,8 +130,8 @@ input:invalid, textarea:invalid {
130130
/* These selection declarations have to be separate
131131
No text-shadow: twitter.com/miketaylr/status/12228805301
132132
Also: hot pink! */
133-
::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
134-
::selection { background:#FF5E99; color:#fff; text-shadow: none; }
133+
::-moz-selection{ background: #666; color:#fff; text-shadow: none; }
134+
::selection { background:#666; color:#fff; text-shadow: none; }
135135

136136
/* j.mp/webkit-tap-highlight-color */
137137
a:link { -webkit-tap-highlight-color: #FF5E99; }

‎examples/modular-backbone/css/style.css

+325-3
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,8 @@ body, button, input, select, textarea { font-family: sans-serif; color: #222; }
4141
* Also: hot pink!
4242
*/
4343

44-
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
45-
::selection { background: #fe57a1; color: #fff; text-shadow: none; }
44+
::-moz-selection { background: #666; color: #fff; text-shadow: none; }
45+
::selection { background: #666; color: #fff; text-shadow: none; }
4646

4747

4848
/* =============================================================================
@@ -245,11 +245,333 @@ h1{
245245
border-bottom: 1px solid #ebebeb;
246246
min-height: 400px;
247247
padding: 20px;
248+
overflow: hidden;
248249
}
249250

251+
#page {
252+
253+
}
254+
255+
#page .main {
256+
display: block;
257+
position:relative;
258+
top: 0px;
259+
left: 0px;
260+
padding: 0px;
261+
margin: 0px;
262+
width: 500px;
263+
float: left;
264+
overflow: hidden;
265+
}
266+
267+
#page .sidebar {
268+
display: block;
269+
position:relative;
270+
top: 0px;
271+
left: 0px;
272+
padding: 10px;
273+
margin: 0px;
274+
width: 400px;
275+
height: 300px;
276+
background-color:#FFF;
277+
float: left;
278+
}
279+
280+
#page .sidebar .ad {
281+
clear:both;
282+
}
283+
284+
#page .sidebar .ad .pic {
285+
display: block;
286+
position: relative;
287+
margin: 0px;
288+
padding: 0px;
289+
float: left;
290+
top: 0px;
291+
left: 0px;
292+
width: 150px;
293+
}
294+
295+
#page .sidebar .ad .info {
296+
display: block;
297+
position: relative;
298+
margin: 0px;
299+
padding: 0px;
300+
float: left;
301+
top: 0px;
302+
left: 0px;
303+
width: 250px;
304+
}
305+
306+
#page .sidebar .ad .info h4 {
307+
font-size: 16px;
308+
color:#666;
309+
}
310+
311+
#page .sidebar .ad .info p {
312+
font-size: 10px;
313+
color:#999;
314+
}
315+
316+
#page .contributors-stats ul {
317+
list-style: none;
318+
}
319+
320+
#page .contributors-stats ul li {
321+
display:block;
322+
position: relative;
323+
height: 20px;
324+
}
325+
326+
#page .contributors-stats ul li p {
327+
font-size: 20px;
328+
color:#999;
329+
font-weight: bold;
330+
margin: 0px;
331+
padding: 0px;
332+
}
333+
334+
#page #contributors-list {
335+
336+
}
337+
338+
#page #contributors-list ul.contributors {
339+
list-style: none;
340+
margin: 0px;
341+
padding: 0px;
342+
}
343+
344+
#page #contributors-list ul.contributors li {
345+
display: block;
346+
position: relative;
347+
margin: 0px;
348+
padding: 0px;
349+
top: 0px;
350+
left: 0px;
351+
float: left;
352+
}
353+
354+
#page #contributors-list ul.contributors li div.contributor {
355+
display: block;
356+
position: relative;
357+
margin: 0px;
358+
padding: 0px;
359+
top: 0px;
360+
left: 0px;
361+
border: 1px solid #CCC;
362+
}
363+
364+
#page #contributors-list ul.contributors li div.contributor ul {
365+
list-style: none;
366+
margin: 0px;
367+
padding: 0px;
368+
369+
}
370+
371+
#page #contributors-list ul.contributors li div.contributor ul li {
372+
display: block;
373+
position: absolute;
374+
margin: 0px;
375+
padding: 0px;
376+
top: 0px;
377+
left: 0px;
378+
}
379+
380+
#page #contributors-list ul.contributors li div.contributor ul li.username {
381+
z-index: 2;
382+
height: 14px;
383+
border: none;
384+
}
385+
386+
#page #contributors-list ul.contributors li div.contributor ul li.username p {
387+
display:block;
388+
position: absolute;
389+
margin: 0px;
390+
padding: 0px;
391+
top: 0px;
392+
left: 0px;
393+
width: 100%;
394+
height: 14px;
395+
background-color: #CCC;
396+
text-align: center;
397+
font-size: 10px;
398+
font-weight: bold;
399+
color:#999;
400+
}
401+
402+
#page #contributors-list ul.contributors li div.contributor ul li.username p a {
403+
color:#999;
404+
text-decoration: none;
405+
}
406+
407+
#page #contributors-list ul.contributors li div.contributor ul li.username p a:hover {
408+
color:#334231;
409+
}
410+
411+
#page #contributors-list ul.contributors li div.contributor ul li.pic {
412+
z-index: 1;
413+
}
414+
415+
#page #contributors-list ul.contributors li div.contributor ul li.pic a {
416+
display:block;
417+
position: absolute;
418+
margin: 0px;
419+
padding: 0px;
420+
top: 0px;
421+
left: 0px;
422+
width: 100%;
423+
border: none;
424+
}
425+
426+
#page #contributors-list ul.contributors li div.contributor ul li.pic p {
427+
display: block;
428+
position: absolute;
429+
margin: 0px;
430+
padding: 0px;
431+
top: 0px;
432+
left: 0px;
433+
width: 100%;
434+
}
435+
436+
#page #contributors-list ul.contributors li div.contributor ul li.contributions {
437+
z-index: 3;
438+
pointer-events:none;
439+
}
440+
441+
#page #contributors-list ul.contributors li div.contributor ul li.contributions p {
442+
display:block;
443+
position: absolute;
444+
left:0px;
445+
width:100%;
446+
height: 15%;
447+
top: 85%;
448+
background-color: #333;
449+
text-align: center;
450+
font-size: 10px;
451+
font-weight: bold;
452+
color:#666;
453+
margin:0px;
454+
padding:0px;
455+
}
456+
457+
250458
#footer {
251-
text-align: center;
459+
display: block;
460+
position:relative;
461+
text-align: left;
462+
background-color:#CCC;
463+
height: 100px;
464+
margin:0px;
465+
padding:0px;
466+
-webkit-box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.35);
467+
box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.35);
468+
}
469+
470+
#footer ul {
471+
list-style-type: none;
472+
margin:0px;
473+
padding:0px;
474+
}
475+
476+
#footer ul li {
477+
display:block;
478+
position:relative;
479+
width: 100%;
480+
height: 20px;
481+
margin: 0px;
482+
padding: 0px;
483+
}
484+
485+
#footer p {
486+
font-size: 20px;
487+
font-weight: bold;
488+
color: rgba(153, 153, 153, 0.35);
489+
margin: 0px;
490+
padding: 0px;
491+
}
492+
493+
#footer .pic {
494+
display:block;
495+
position:absolute;
496+
float: left;
497+
margin:5px;
498+
padding:0px;
499+
width: 90px;
500+
height: 90px;
501+
top: 0px;
502+
left: 0px;
503+
}
504+
505+
#footer .pic a {
506+
display:block;
507+
position:absolute;
508+
margin:0px;
509+
padding:0px;
510+
width: 90px;
511+
height: 90px;
512+
top: 0px;
513+
left: 0px;
514+
border: 1px #999 solid;
515+
}
516+
517+
#footer .pic a img {
518+
display:block;
519+
position:absolute;
520+
margin:0px;
521+
padding:0px;
522+
width: 90px;
523+
height: 90px;
524+
top: 0px;
525+
left: 0px;
526+
filter: grayscale(100%);
527+
/*filter: url(filters.svg#grayscale);
528+
filter: gray;*/
529+
-webkit-filter: grayscale(100%);
530+
-moz-filter: grayscale(100%);
531+
-ms-filter: grayscale(100%);
532+
-o-filter: grayscale(100%);
533+
}
534+
535+
#footer .info {
536+
display:block;
537+
position:relative;
538+
float: left;
539+
margin:0px;
540+
padding:0px;
541+
width: 100%;
542+
height: 100px;
543+
top: 10px;
544+
left: 120px;
545+
}
546+
547+
548+
549+
/* =============================================================================
550+
Page styles
551+
========================================================================== */
552+
553+
#home {
554+
252555
}
556+
557+
#home .main {
558+
559+
}
560+
561+
#home #sidebar {
562+
563+
}
564+
565+
#projects {
566+
567+
}
568+
569+
#contributors {
570+
571+
}
572+
573+
574+
253575
/* =============================================================================
254576
Non-semantic helper classes
255577
Please define your styles before this section.

‎examples/modular-backbone/imgs/backbone_logo.png

21.7 KB
Loading

‎examples/modular-backbone/imgs/require_logo.png

6.16 KB
Loading

‎examples/modular-backbone/index.html

+3-5
Original file line numberDiff line numberDiff line change
@@ -26,16 +26,14 @@ <h1>Modular Backbone</h1>
2626
<div id="menu">
2727
<ul>
2828
<li><a href="#">Home</a></li>
29-
<li><a href="#/projects">Project List</a></li>
30-
<li><a href="#/users">User List</a></li>
29+
<li><a href="#/projects">Projects</a></li>
30+
<li><a href="#/users">Contributors</a></li>
3131
</ul>
3232
</div>
3333
<div id="page">
3434
Loading....
3535
</div>
36-
<div id="footer">
37-
Thomas Davis
38-
</div>
36+
<div id="footer"></div>
3937
</div>
4038

4139
</body>

0 commit comments

Comments
 (0)