Skip to content

Commit cdd7f19

Browse files
darcyclarkedarcyclarke
committed
Fixed up the pages in the sub nav, add styling for author information and footer
1 parent b570cb8 commit cdd7f19

File tree

9 files changed

+148
-28
lines changed

9 files changed

+148
-28
lines changed

‎content/assets/css/style.css‎

Lines changed: 87 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,7 @@
199199
/*******************************************************************************/
200200
.vg-code,
201201
.vg-container .vg-code {
202-
background-color: transparent;
202+
background-color: #fff;
203203
}
204204
/*
205205
code
@@ -1662,12 +1662,12 @@
16621662
-ms-transition: all 500ms ease-in-out;
16631663
transition: all 500ms ease-in-out; }
16641664

1665-
.jquery-learning #sidebar .paper.subnav:hover .paper_edges
1665+
.jquery-learning #sidebar .paper.subnav.closed:hover .paper_edges
16661666
{ -webkit-transform: rotate(0deg);
16671667
-moz-transform: rotate(0deg);
16681668
transform: rotate(0deg); }
16691669

1670-
.jquery-learning #sidebar .paper.subnav:hover
1670+
.jquery-learning #sidebar .paper.subnav.closed:hover
16711671
{ width: 30%;
16721672
margin-left: -36.5%; }
16731673

@@ -1679,23 +1679,100 @@
16791679
height: 100%;
16801680
margin: -120px 0 0 59px; }
16811681

1682-
.jquery-learning #sidebar .paper.subnav .inner ul
1683-
{ margin-top: -110px;
1682+
.jquery-learning #sidebar .paper.subnav .inner .white_bg
1683+
{ background: #fff;
1684+
margin-top: -110px;
1685+
width: 100%;
1686+
height: 100%;
16841687
position: absolute;
1685-
width: 90%;
1688+
margin-left: -2%; }
1689+
1690+
.jquery-learning #sidebar .paper.subnav .inner .white_bg ul
1691+
{ width: 90%;
16861692
height: 100%;
1687-
background: white url(../i/learning_paper_line_bg.png) repeat-y 0 0;
1688-
margin-left: -2%;
1693+
background: #fff url(../i/learning_paper_line_bg.png) repeat-y 0 0;
1694+
position: absolute;
16891695
opacity: 0;
16901696
-webkit-transition: all 500ms ease-in-out;
16911697
-moz-transition: all 500ms ease-in-out;
16921698
-o-transition: all 500ms ease-in-out;
16931699
-ms-transition: all 500ms ease-in-out;
16941700
transition: all 500ms ease-in-out; }
16951701

1696-
.jquery-learning #sidebar .paper.subnav.open .inner ul
1702+
.jquery-learning #sidebar .paper.subnav.open .inner .white_bg ul
16971703
{ opacity: 1; }
1704+
1705+
.jquery-learning #sidebar .paper.subnav .inner ul li a
1706+
{ font-family: 'Gloria Hallelujah', cursive;
1707+
font-size: 16px;
1708+
font-weight: normal;
1709+
text-decoration: none; }
1710+
1711+
.jquery-learning #sidebar .paper.subnav .inner ul li a:hover
1712+
{ border-bottom: 1px dashed #999; }
1713+
1714+
.jquery-learning #sidebar .paper.subnav .inner ul li
1715+
{ margin: 0 0 11px 44px;
1716+
list-style: none; }
1717+
1718+
.jquery-learning #sidebar .paper.subnav .inner ul li:first-child
1719+
{ padding-top: 38px; }
1720+
1721+
1722+
1723+
/*******************************************************************************/
1724+
/* Author Meta
1725+
/*******************************************************************************/
1726+
1727+
#body .inner .meta
1728+
{ background: #e8e8e8 url(../i/github.png) no-repeat 102% 50%;
1729+
border: 1px solid #b7b7b7;
1730+
padding: 10px;
1731+
text-shadow: 0 1px 1px #fff;
1732+
color: #5d5d5d; }
1733+
1734+
#body .inner .meta .github
1735+
{ float: left;
1736+
display: block;
1737+
width: 35%;
1738+
border-right: 1px solid #fff;
1739+
-webkit-box-shadow: 1px 0 0 #b7b7b7; }
1740+
1741+
#body .inner .meta .github .avatar
1742+
{ border: 5px solid #fff;
1743+
width: auto;
1744+
height: 40px;
1745+
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.25);
1746+
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.25);
1747+
box-shadow: 0 0 5px rgba(0,0,0,0.25);
1748+
display: block;
1749+
float: left; }
1750+
1751+
#body .inner .meta .github .author
1752+
{ font-size: 12px;
1753+
font-weight: normal;
1754+
letter-spacing: normal;
1755+
float: left;
1756+
display: block;
1757+
margin: 10px 0 0 20px; }
1758+
1759+
#body .inner .meta .github .author a
1760+
{ font-weight: bold; }
1761+
1762+
#body .inner .meta .feedback
1763+
{ float: left;
1764+
display: block;
1765+
width: 62%;
1766+
padding: 0 0 0 3%; }
16981767

1768+
#body .inner .meta .feedback h4
1769+
{ font-size: 18px;
1770+
font-family: 'Myriad Pro', Arial, Helvetica, sans-serif;
1771+
letter-spacing: 0;
1772+
margin: 4px 0 0 0; }
1773+
1774+
1775+
16991776

17001777
/*******************************************************************************/
17011778
/* Media Queries
@@ -1775,7 +1852,7 @@
17751852

17761853
}
17771854

1778-
@media all and (max-width: 600px){
1855+
@media all and (max-width: 660px){
17791856

17801857
h1 a
17811858
{ margin: 20px auto;

‎content/assets/i/github.png‎

6.73 KB
Loading

‎content/assets/js/plugins.js‎

Lines changed: 11 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎content/assets/js/scripts.js‎

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,21 @@ App.subscribe("init", function(){
1515
App.autoHeight();
1616
});
1717

18+
//
19+
// Add Search Interactions
20+
//
21+
$("#search").bind('focus', function(){
22+
$(this).parent().find("label").animate({opacity:'0.5'}, 200);
23+
}).bind('blur', function(){
24+
$(this).parent().find("label").animate({opacity:'1'}, 200);
25+
}).bind('keypress', function(){
26+
$(this).parent().find('label').hide();
27+
}).bind('keyup', function(){
28+
if($(this).val() == ''){
29+
$(this).parent().find('label').show();
30+
}
31+
});
32+
1833
//
1934
// Project Select Show/Hide
2035
//
@@ -77,14 +92,19 @@ App.subscribe("init", function(){
7792
//
7893
// Learning Site Specific
7994
//
80-
$("#sidebar .paper_edges").bind("click", function(e){
95+
$("#sidebar .paper").bind("click", function(e){
8196
e.preventDefault();
82-
var el = $(this),
83-
container = el.parents(".paper");
84-
if(container.hasClass("open")){
85-
container.addClass("open").animate({"width":"24%","margin-left":"-30.5%"}, 500, function(){});
97+
var el = $(this);
98+
if(el.hasClass("open")){
99+
el.removeClass("open").addClass("closed").animate({"width":"24%","margin-left":"-30.5%"}, 500);
86100
} else {
87-
container.addClass("open").animate({"width":"120%","margin-left":"-126.5%"}, 500, function(){});
101+
el.removeClass("closed").addClass("open").animate({"width":"120%","margin-left":"-126.5%"}, 500);
102+
}
103+
});
104+
$("#sidebar").bind("clickoutside", function(e){
105+
var el = $(".paper",this);
106+
if(el.hasClass("open")){
107+
el.removeClass("open").addClass("closed").animate({"width":"24%","margin-left":"-30.5%"}, 500);
88108
}
89109
});
90110

‎layouts/article_footer.html‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,23 @@
55
<% user_request = Curl::Easy.http_get("https://api.github.com/users/"+github_user) %>
66
<% user_request.perform %>
77
<% user_obj = JSON.parse(user_request.body_str) %>
8-
<h3>By <%= user_obj["name"] %></h3>
9-
<img src="<%= user_obj["avatar_url"] %>" />
8+
<img src="<%= user_obj["avatar_url"] %>" class="avatar" />
9+
<h3 class="author">By <a href="<%= user_obj["html_url"] %>"><%= user_obj["name"] %></a></h3>
1010
<% else %>
11-
<h3>By <%= @item[:attribution] %></h3>
11+
<h3 class="author">By <%= @item[:attribution] %></h3>
1212
<% end %>
1313
</div>
14+
<div class="feedback">
15+
<h4>Suggestions? Problems? Feedback?</h4>
16+
You can open an issue or submit a pull request for
17+
<a target="_blank" href="https://github.com/jquery/web-learn-jquery-com/blob/master/content/<%= @item.identifier.slice(1..-2) %>.md">
18+
this article on GitHub
19+
</a>
20+
<a href="#">(Help!)</a>
21+
</div>
22+
</div>
1423

15-
<h4>Suggestions? Problems? Feedback?</h4>
16-
You can open an issue or submit a pull request for
17-
<a target="_blank" href="https://github.com/jquery/web-learn-jquery-com/blob/master/content/<%= @item.identifier.slice(1..-2) %>.md">
18-
this article on GitHub
19-
</a>
20-
<a href="#">(Help!)</a>
24+
<div class="clearfix pagination">
25+
<a href="#" class="previous"><span class="article">jQuery for Designers</span> <span class="direction">Previous</span></a>
26+
<a href="#" class="next"><span class="article">$(document).ready()</span> <span class="direction">Next</span></a>
2127
</div>

‎layouts/header.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
<link rel="stylesheet" href="/assets/css/jquery.vangogh.css?v=1">
2424
<link rel="stylesheet" href="/assets/css/github.css?v=1">
2525
<link rel="stylesheet" href="/assets/css/style.css?v=1">
26+
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Reenie+Beanie|Gloria+Hallelujah'>
2627

2728
<script src="/assets/js/libs/modernizr-1.5.min.js?v=1"></script>
2829

‎layouts/sidebar.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,13 @@ <h2>Categories</h2>
2626
<% end %>
2727
</ul>
2828

29-
<div class="paper subnav">
29+
<div class="paper subnav closed">
3030
<div class="shadow"></div>
3131
<a href="#" class="paper_edges">Open</a>
3232
<div class="inner">
33-
<%= render 'chapter_contents' %>
33+
<div class="white_bg">
34+
<%= render 'chapter_contents' %>
35+
</div>
3436
</div>
3537
</div>
3638

‎tmp/checksums‎

Lines changed: 4 additions & 0 deletions
Large diffs are not rendered by default.

‎tmp/compiled_content‎

2.31 MB
Binary file not shown.

0 commit comments

Comments
 (0)