Skip to content

Commit 8fb218c

Browse files
committed
responsive CSS and print styles
1 parent 9803fa7 commit 8fb218c

File tree

3 files changed

+143
-75
lines changed

3 files changed

+143
-75
lines changed

_layouts/default.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
</head>
3434
<body>
3535
<div class="wrapper">
36+
<a href="https://github.com/tutorials/tutorials.github.com" class="ribbon"><img class="fork" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
3637
<header>
3738
<div id="static_inner">
3839
<h1><a href="/">tutorials.github.com</a></h1>
@@ -62,7 +63,7 @@ <h1><a href="/">tutorials.github.com</a></h1>
6263
<a href="https://twitter.com/githubtutorials" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @githubtutorials</a>
6364
<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>
6465
</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>
66+
<a href="https://github.com/tutorials/tutorials.github.com" class="hidden_ribbon">Fork tutorials on GitHub</a>
6667
</footer>
6768
</div>
6869
<!--[if !IE]><script>fixScale(document);</script><!--<![endif]-->
@@ -75,7 +76,7 @@ <h3><%= name %> (<%= visible_counts[name] %>)</h3>
7576
<% if(_(filters).any(function(filter) { return filter.name === name && filter.value === val; })) { %>
7677
<strong><%= val %></strong>
7778
<% } else { %>
78-
<%= val %> (<%= count %>)
79+
<%= val %> <span class='count'>(<%= count %>)</span>
7980
<% } %>
8081
</li>
8182
<% }) %>

javascripts/sidebar.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,11 +64,15 @@ $(function() {
6464
difference = window_height - (header_height + footer_height);
6565

6666
if (difference>0) {
67-
$nav_sidebar.height(sidebar_height+difference);
67+
if ($(window).width>970){
68+
$nav_sidebar.height(sidebar_height+difference);
69+
} else {
70+
$nav_sidebar.css('height', 'auto');
71+
}
6872
}
6973
}
7074
sidebar_fix();
71-
$(window).resize(function() { console.log('scroll'); sidebar_fix() });
75+
$(window).resize(function() { sidebar_fix() });
7276

7377
// title fix
7478
var $section = $('section#main'),

stylesheets/styles.css

Lines changed: 134 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -107,65 +107,11 @@ header {
107107
box-shadow: 0px 5px 10px #FFF;
108108
padding-top:10px;
109109
}
110-
111-
#download {
112-
list-style:none;
113-
height:40px;
114-
115-
padding:0;
116-
117-
background: #eee;
118-
background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
119-
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd));
120-
background: -webkit-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
121-
background: -o-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
122-
background: -ms-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
123-
background: linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
124-
125-
border-radius:5px;
126-
border:1px solid #d2d2d2;
127-
box-shadow:inset #fff 0 1px 0, inset rgba(0,0,0,0.03) 0 -1px 0;
128-
width:270px;
129-
}
130-
131-
#download li {
132-
width:89px;
133-
float:left;
134-
border-right:1px solid #d2d2d2;
135-
height:40px;
136-
}
137-
138-
#download a {
139-
line-height:1;
140-
font-size:11px;
141-
color:#999;
142-
display:block;
143-
text-align:center;
144-
padding-top:6px;
145-
height:40px;
146-
}
147-
148110
strong {
149111
color:#222;
150112
font-weight:700;
151113
}
152114

153-
#download li + li {
154-
width:88px;
155-
border-left:1px solid #fff;
156-
}
157-
158-
#download li + li + li {
159-
border-right:none;
160-
width:89px;
161-
}
162-
163-
#download a strong {
164-
font-size:14px;
165-
display:block;
166-
color:#222;
167-
}
168-
169115
#sidebar{
170116
overflow-y: scroll;
171117
height: 400px;
@@ -240,7 +186,11 @@ section#main h1{
240186
}
241187

242188
a.ribbon img.fork {
243-
position: fixed; top: 0; left: 0; border: 0;
189+
position: fixed;
190+
top: 0;
191+
right: 0;
192+
border: 0;
193+
z-index:3;
244194
}
245195

246196
small {
@@ -262,63 +212,167 @@ footer {
262212
z-index:1;
263213
}
264214

265-
@media print, screen and (max-width: 960px) {
215+
a.hidden_ribbon{
216+
display:none;
217+
border-top:1px dotted #CCC;
218+
margin-top:10px;
219+
}
266220

221+
@media print, screen and (max-width: 960px) {
222+
body {
223+
padding:15px;
224+
}
267225
div.wrapper {
268226
width:auto;
269227
margin:0;
270228
}
271-
272229
header, section#main, footer {
273230
float:none;
274231
position:static;
275232
width:auto;
276233
}
277-
278234
header {
279-
padding-right:320px;
235+
width:100%;
236+
}
237+
a.ribbon img.fork {
238+
display:none;
239+
}
240+
a.hidden_ribbon{
241+
display:block;
280242
}
281-
282243
section#main {
283244
border:1px solid #e5e5e5;
284245
border-width:1px 0;
285246
padding:20px 0;
286247
margin:0 0 20px;
248+
width:100%;
249+
}
250+
section#main h1{
251+
width:100%;
287252
}
288-
289253
header a small {
290254
display:inline;
291255
}
292-
293-
#download {
294-
position:absolute;
295-
right:50px;
296-
top:52px;
256+
#sidebar ul li{
257+
float:left;
258+
}
259+
#sidebar ul li span.count{
260+
display:none;
261+
}
262+
#sidebar ul li:after{
263+
margin-right:5px;
264+
content:"|";
265+
}
266+
#sidebar ul li:last-child:after{
267+
content:"";
268+
}
269+
#sidebar ul {
270+
*zoom: 1;
271+
}
272+
#sidebar ul:before, #sidebar ul:after {
273+
display: table;
274+
content: "";
275+
}
276+
#sidebar ul:after {
277+
clear: both;
297278
}
298279
}
299280

300281
@media print, screen and (max-width: 720px) {
301282
body {
302283
word-wrap:break-word;
284+
padding:15px;
303285
}
304-
305286
header {
306287
padding:0;
288+
width:100%;
307289
}
308-
309-
#download, header p.view {
290+
header p.view {
310291
position:static;
311292
}
293+
section#main{
294+
float:left;
295+
width:100%;
296+
}
297+
section#main h1{
298+
width:100%;
299+
}
300+
a.ribbon img.fork {
301+
display:none;
302+
}
303+
a.hidden_ribbon{
304+
display:block;
305+
}
306+
#sidebar ul li{
307+
float:left;
308+
}
309+
#sidebar ul li span.count{
310+
display:none;
311+
}
312+
#sidebar ul li:after{
313+
margin-right:5px;
314+
content:"|";
315+
}
316+
#sidebar ul li:last-child:after{
317+
content:"";
318+
}
319+
#sidebar ul {
320+
*zoom: 1;
321+
}
322+
#sidebar ul:before, #sidebar ul:after {
323+
display: table;
324+
content: "";
325+
}
326+
#sidebar ul:after {
327+
clear: both;
328+
}
312329
}
313330

314331
@media print, screen and (max-width: 480px) {
315332
body {
316333
padding:15px;
317334
}
318-
319-
#download {
335+
a.ribbon img.fork {
336+
display:none;
337+
}
338+
a.hidden_ribbon{
339+
display:block;
340+
}
341+
section#main{
342+
float:left;
343+
width:100%;
344+
}
345+
section#main h1{
346+
width:100%;
347+
}
348+
header{
349+
padding:0;
350+
width:100%;
351+
}
352+
#sidebar ul li{
353+
float:left;
354+
}
355+
#sidebar ul li span.count{
320356
display:none;
321357
}
358+
#sidebar ul li:after{
359+
margin-right:5px;
360+
content:"|";
361+
}
362+
#sidebar ul li:last-child:after{
363+
content:"";
364+
}
365+
#sidebar ul {
366+
*zoom: 1;
367+
}
368+
#sidebar ul:before, #sidebar ul:after {
369+
display: table;
370+
content: "";
371+
}
372+
#sidebar ul:after {
373+
clear: both;
374+
}
375+
322376
}
323377

324378
@media print {
@@ -327,4 +381,13 @@ footer {
327381
font-size:12pt;
328382
color:#444;
329383
}
384+
section#main{
385+
border:0px none;
386+
}
387+
header{
388+
padding-top:50px;
389+
}
390+
footer{
391+
display:none;
392+
}
330393
}

0 commit comments

Comments
 (0)