Skip to content

Commit 646f392

Browse files
hkrishnahkrishna
committed
Fixed the title with CSS and adjusting the body through JS. Sidebar fix. footer in place. fork me ribbon. root link set to '/'. Other minor CSS/JS changes.
1 parent 2e62e18 commit 646f392

File tree

3 files changed

+82
-36
lines changed

3 files changed

+82
-36
lines changed

‎_layouts/default.html

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,19 @@
3434
<body>
3535
<div class="wrapper">
3636
<header>
37-
<h1><a href="http://tutorials.github.com">tutorials.github.com</a></h1>
38-
<p>Decentralized polyglot tutorials</p>
39-
<nav id="sidebar"></nav>
40-
<div class="social footroom">
37+
<div id="static_inner">
38+
<h1><a href="/">tutorials.github.com</a></h1>
39+
<p>Decentralized polyglot tutorials</p>
40+
<nav id="sidebar"></nav>
41+
</div>
42+
</header>
43+
<section id="main">
44+
{{ content }}
45+
</section>
46+
<footer>
47+
<div class="less_footroom"><small>Hosted on GitHub Pages &mdash; Theme by <a href="https://github.com/orderedlist">orderedlist</a></small></div>
48+
49+
<div class="social line_bottom">
4150
<!-- AddThis Button BEGIN -->
4251
<div class="addthis_toolbox addthis_default_style ">
4352
<a class="addthis_button_facebook_like ftg" fb:like:layout="button_count"></a>
@@ -48,18 +57,12 @@ <h1><a href="http://tutorials.github.com">tutorials.github.com</a></h1>
4857
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4fe63cf9228607aa"></script>
4958
<!-- AddThis Button END -->
5059
</div>
51-
<ul id="download">
52-
<li><a href="https://github.com/tutorials/tutorials.github.com/zipball/master">Download <strong>ZIP File</strong></a></li>
53-
<li><a href="https://github.com/tutorials/tutorials.github.com/tarball/master">Download <strong>TAR Ball</strong></a></li>
54-
<li><a href="https://github.com/tutorials/tutorials.github.com">Fork On <strong>GitHub</strong></a></li>
55-
</ul>
56-
</header>
57-
<section id="main">
58-
{{ content }}
59-
</section>
60-
<footer>
61-
<p>This project is maintained by <a href="https://github.com/Whitespace">Whitespace</a></p>
62-
<p><small>Hosted on GitHub Pages &mdash; Theme by <a href="https://github.com/orderedlist">orderedlist</a></small></p>
60+
<div class="less_footroom"><small>This project is maintained by <a href="https://github.com/Whitespace">Whitespace</a></small></div>
61+
<div class="social_follow">
62+
<a href="https://twitter.com/githubtutorials" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @githubtutorials</a>
63+
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
64+
</div>
65+
<a href="https://github.com/tutorials/tutorials.github.com" class="ribbon"><img class="fork" src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub"></a>
6366
</footer>
6467
</div>
6568
<!--[if !IE]><script>fixScale(document);</script><!--<![endif]-->

‎javascripts/sidebar.js

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -54,16 +54,27 @@ $(function() {
5454
// Draw the sidebar
5555
redraw();
5656

57-
// sticky header
58-
var $title = $('section#main h1');
59-
var headOffset = 50;
60-
$(window).scroll(function(){
61-
if( $(window).scrollTop() > headOffset ) {
62-
$title.addClass("fixed_top");
63-
} else {
64-
$title.removeClass("fixed_top");
57+
//Fix sidebar
58+
function sidebar_fix() {
59+
var header_height = $('header').height(),
60+
footer_height = $('footer').height(),
61+
window_height = $(window).height(),
62+
$nav_sidebar = $('nav#sidebar'),
63+
sidebar_height= $nav_sidebar.height(),
64+
difference = window_height - (header_height + footer_height);
65+
if (difference>0) {
66+
$nav_sidebar.height(sidebar_height+difference);
6567
}
66-
});
68+
}
69+
sidebar_fix();
70+
$(window).resize(function() { console.log('scroll'); sidebar_fix() });
71+
72+
// title fix
73+
var $section = $('section#main'),
74+
$title = $section.find('h1'),
75+
title_height = $title.height(),
76+
set_padding = title_height + 20;
77+
$section.css('paddingTop',set_padding);
6778

6879
// Hide tutorials if the user clicks on a facet
6980
$("nav li").live("click", function(e) {
@@ -135,4 +146,4 @@ function update_sidebar() {
135146
counts[key] = _(val).keys().length;
136147
});
137148
visible_counts = counts;
138-
};
149+
};

‎stylesheets/styles.css

Lines changed: 42 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
@import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700);
22

33
body {
4-
padding:50px;
54
font:14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
65
color:#777;
76
font-weight:300;
7+
margin:0px;
8+
padding:0px;
89
}
910

1011
h1, h2, h3, h4, h5, h6 {
@@ -96,8 +97,15 @@ img {
9697
}
9798

9899
header {
99-
width:270px;
100+
width:250px;
100101
float:left;
102+
position:fixed;
103+
z-index:2;
104+
background:#fff;
105+
-moz-box-shadow: 0px 5px 10px #FFF;
106+
-webkit-box-shadow: 0px 5px 10px #FFF;
107+
box-shadow: 0px 5px 10px #FFF;
108+
padding-top:10px;
101109
}
102110

103111
#download {
@@ -158,6 +166,11 @@ strong {
158166
color:#222;
159167
}
160168

169+
#sidebar{
170+
overflow-y: scroll;
171+
height: 400px;
172+
}
173+
161174
#sidebar ul h3 {
162175
margin: 0;
163176
}
@@ -183,36 +196,53 @@ strong {
183196
margin: 20px 0 0 0;
184197
}
185198

199+
.less_headroom{
200+
margin: 10px 0 0 0;
201+
}
202+
186203
.footroom{
187204
margin: 0 0 20px;
188205
}
189206

207+
.less_footroom{
208+
margin: 0 0 10px;
209+
}
210+
211+
.line_bottom{
212+
border-bottom: 1px dotted #ccc;
213+
margin-bottom:10px;
214+
}
215+
190216
div.social a.ftg{
191-
width:85px;
217+
width:79px;
192218
}
193219

194220
div.tutorial p.about span{
195221
margin-right:5px;
196222
}
197223

198224
section#main {
199-
width:560px;
225+
width:580px;
200226
float:right;
201-
padding-bottom:50px;
227+
padding:50px 0;
202228
}
203229

204-
section#main h1.fixed_top{
230+
section#main h1{
205231
position:fixed;
206232
top:0px;
207-
z-index:100;
208-
width: 560px;
233+
z-index:1;
234+
width: 580px;
209235
padding: 10px 0;
210236
-moz-box-shadow: 0px 5px 10px #FFF;
211237
-webkit-box-shadow: 0px 5px 10px #FFF;
212238
box-shadow: 0px 5px 10px #FFF;
213239
background:#FFF;
214240
}
215241

242+
a.ribbon img.fork {
243+
position: fixed; top: 0; left: 0; border: 0;
244+
}
245+
216246
small {
217247
font-size:11px;
218248
}
@@ -225,9 +255,11 @@ hr {
225255
}
226256

227257
footer {
228-
width:270px;
258+
width:250px;
229259
float:left;
230-
bottom:50px;
260+
bottom:10px;
261+
position:fixed;
262+
z-index:1;
231263
}
232264

233265
@media print, screen and (max-width: 960px) {

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy