Skip to content

Commit c89fedc

Browse files
ajpianoajpiano
committed
learn.jquery.com: Conformance with new-css framework, reapplied layout/styling to custom elements in sidebar, footer, and home page
1 parent 53bb24a commit c89fedc

File tree

4 files changed

+101
-129
lines changed

4 files changed

+101
-129
lines changed

‎themes/learn.jquery.com/content-page.php

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@
2222

2323
<hr>
2424

25-
<footer class="entry-meta">
26-
<aside class="meta-details">
25+
<div class="entry-meta row">
26+
<aside class="meta-details six columns">
2727
<h3>Details</h3>
2828
<ul>
2929
<li class="icon-calendar icon-large" title="Last Updated"><?php the_modified_time('F j, Y'); ?></li>
@@ -50,23 +50,23 @@
5050
</ul>
5151
<?php endif; ?>
5252
</aside>
53-
<aside class="github-feedback">
53+
<aside class="github-feedback six columns">
5454
<h3>Suggestions, Problems, Feedback?</h3>
55-
<a class="btn" href="<?php echo jq_get_github_url(); ?>"><i class="icon-github"></i> Open an Issue or Submit a Pull Request on GitHub</a>
55+
<a class="button dark" href="<?php echo jq_get_github_url(); ?>"><i class="icon-github"></i> Open an Issue or Submit a Pull Request on GitHub</a>
5656
</aside>
5757

5858
<?php if (isset($next_prev_arr['prev']) || isset($next_prev_arr['next']) ): ?>
59-
<div class='bottom-links'>
59+
<div class="bottom-links row">
6060
<?php if (isset($next_prev_arr['prev'])): ?>
61-
<div class='prev'>
61+
<div class="prev six columns">
6262
<a href="<?php echo $next_prev_arr['prev']->guid; ?>">
6363
<i class="icon-chevron-left"></i>
6464
<?php echo $next_prev_arr['prev']->post_title; ?>
6565
</a>
6666
</div>
6767
<?php endif; ?>
6868
<?php if (isset($next_prev_arr['next'])): ?>
69-
<div class='next'>
69+
<div class="next six columns">
7070
<a href="<?php echo $next_prev_arr['next']->guid; ?>">
7171
<?php echo $next_prev_arr['next']->post_title; ?>
7272
<i class="icon-chevron-right"></i>
@@ -75,5 +75,5 @@
7575
<?php endif; ?>
7676
</div>
7777
<?php endif; ?>
78-
</footer><!-- .entry-meta -->
78+
</div><!-- .entry-meta -->
7979
</article><!-- #post-<?php the_ID(); ?> -->

‎themes/learn.jquery.com/home.php

Lines changed: 47 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -4,64 +4,60 @@
44
*/
55
get_header(); ?>
66

7-
<!-- body -->
8-
<div id="body" class="clearfix">
7+
<!-- body -->
8+
<div class="content-full full-width">
99

10-
<!-- inner -->
11-
<div class="inner">
10+
<!-- inner -->
11+
<div id="content">
1212

13-
<?php the_post(); ?>
13+
<?php the_post(); ?>
1414

15-
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
15+
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
1616

17-
<?php the_content(); ?>
17+
<?php the_content(); ?>
1818

19-
<div id="home-features">
20-
<aside id="chapter-list">
21-
<h3><?php _e( 'Chapters', 'twentyeleven' ); ?></h3>
22-
<ul>
23-
<?php $chapters = learn_chapter_listing(); ?>
24-
<?php while ( $chapters->have_posts() ) : $chapters->the_post(); ?>
25-
<li>
26-
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
27-
</li>
28-
<?php endwhile; wp_reset_postdata(); ?>
29-
</ul>
30-
</aside>
19+
<div id="home-features" class="row">
20+
<aside id="chapter-list" class="four columns">
21+
<h3><?php _e( 'Chapters', 'twentyeleven' ); ?></h3>
22+
<ul>
23+
<?php $chapters = learn_chapter_listing(); ?>
24+
<?php while ( $chapters->have_posts() ) : $chapters->the_post(); ?>
25+
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
26+
<?php endwhile; wp_reset_postdata(); ?>
27+
</ul>
28+
</aside>
3129

32-
<aside id="recent-updates">
33-
<h3><?php _e( 'Recently Updated', 'twentyeleven' ); ?></h3>
34-
<?php
35-
$recent_updates = new WP_Query( array(
30+
<aside id="recent-updates" class="four columns">
31+
<h3><?php _e( 'Recently Updated', 'twentyeleven' ); ?></h3>
32+
<?php
33+
$recent_updates = new WP_Query( array(
3634
'post_type' => 'page',
3735
'post_limits' => 10,
38-
));
39-
?>
40-
<ul>
41-
<?php while ( $recent_updates->have_posts() ) : $recent_updates->the_post(); ?>
42-
<li>
43-
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
44-
</li>
45-
<?php endwhile; wp_reset_postdata(); ?>
46-
</ul>
47-
</aside>
48-
49-
<aside id="open-source-content">
50-
<h3><?php _e( 'Open Source Content', 'twentyeleven' ); ?></h3>
51-
<p>
52-
All of the content in this site is completely open source, and we welcome your contribution.
53-
Whether you notice a small improvement that should be made, or want to write entirely new articles, this is one area where feature requests are encouraged!
54-
</p>
55-
<a class="btn" href="http://github.com/jquery/learn.jquery.com"><i class="icon-github"></i> Open an Issue or Submit a Pull Request</a>
56-
<p class="clearfix">Each of our articles has a link to the raw content on GitHub, and we urge everyone to fork, edit, and help improve this community resource!</p>
57-
</aside>
58-
</div>
59-
</div><!-- #post-<?php the_ID(); ?> -->
60-
61-
</div>
62-
<!-- /inner -->
63-
64-
</div>
65-
<!-- /body -->
36+
));
37+
?>
38+
<ul>
39+
<?php while ( $recent_updates->have_posts() ) : $recent_updates->the_post(); ?>
40+
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
41+
<?php endwhile; wp_reset_postdata(); ?>
42+
</ul>
43+
</aside>
44+
45+
<aside id="open-source-content" class="four columns">
46+
<h3><?php _e( 'Open Source Content', 'twentyeleven' ); ?></h3>
47+
<p>
48+
All of the content in this site is completely open source, and we welcome your contribution.
49+
Whether you notice a small improvement that should be made, or want to write entirely new articles, this is one area where feature requests are encouraged!
50+
</p>
51+
<a class="button dark" href="http://github.com/jquery/learn.jquery.com"><i class="icon-github"></i> Open an Issue or Submit a Pull Request</a>
52+
<p class="clearfix">Each of our articles has a link to the raw content on GitHub, and we urge everyone to fork, edit, and help improve this community resource!</p>
53+
</aside>
54+
</div>
55+
</div><!-- #post-<?php the_ID(); ?> -->
56+
57+
</div>
58+
<!-- /inner -->
59+
60+
</div>
61+
<!-- /body -->
6662

6763
<?php get_footer(); ?>

‎themes/learn.jquery.com/sidebar.php

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,16 +21,24 @@
2121
<?php the_title(); ?>
2222
</a>
2323
<?php $sub_chapters = learn_nested_items($post->ID); ?>
24+
<?php $show_sub_chapters = false ?>
2425
<?php if ($sub_chapters) : ?>
25-
<ul class="sub-chapter">
2626
<?php while ( $sub_chapters->have_posts() ) : $sub_chapters->the_post(); ?>
2727
<?php if ( has_children( $post ) ) { ?>
28-
<li><a href="<?php the_permalink(); ?>">
29-
<?php the_title(); ?>
30-
</a></li>
28+
<?php $show_sub_chapters = true; ?>
3129
<?php } ?>
3230
<?php endwhile; wp_reset_postdata(); ?>
33-
</ul>
31+
<?php if ($show_sub_chapters) : ?>
32+
<ul class="sub-chapter">
33+
<?php while ( $sub_chapters->have_posts() ) : $sub_chapters->the_post(); ?>
34+
<?php if ( has_children( $post ) ) { ?>
35+
<li><a href="<?php the_permalink(); ?>">
36+
<?php the_title(); ?>
37+
</a></li>
38+
<?php } ?>
39+
<?php endwhile; wp_reset_postdata(); ?>
40+
</ul>
41+
<?php endif; ?>
3442
<?php endif; ?>
3543
</li>
3644
<?php endwhile; wp_reset_postdata(); ?>

‎themes/learn.jquery.com/style.css

Lines changed: 33 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,13 @@ Theme Name: learn-jquery-com
33
Template: jquery
44
*/
55

6+
a {
7+
color: #0769AD;
8+
}
9+
610
/*******************************************************************************/
711
/* Home Page
812
/*******************************************************************************/
9-
#banner .banner-box {
10-
float: left;
11-
width: 50%;
12-
text-align: center;
13-
box-sizing: border-box;
14-
-moz-box-sizing: border-box;
15-
padding: 0 5%;
16-
}
17-
18-
#banner .banner-box p {
19-
margin: 0;
20-
text-align: left;
21-
font-weight: bold;
22-
}
23-
24-
#home-features aside {
25-
float: left;
26-
width: 33%;
27-
box-sizing: border-box;
28-
-moz-box-sizing: border-box;
29-
padding:0 1%;
30-
}
3113
#home-features aside h3 {
3214
text-align: center;
3315
}
@@ -44,15 +26,6 @@ Template: jquery
4426
clear: both;
4527
}
4628

47-
@media screen and (max-width: 480px) {
48-
#banner .banner-box {
49-
width: 100%;
50-
}
51-
52-
#home-features aside {
53-
width: 100%;
54-
}
55-
}
5629
/*******************************************************************************/
5730
/* Beta Ribbon
5831
/*******************************************************************************/
@@ -111,8 +84,10 @@ Template: jquery
11184
/* Sidebar
11285
/*******************************************************************************/
11386

114-
#sidebar #chapter-listing ul li a {
115-
padding: 2% 10%;
87+
#sidebar #chapter-listing ul li {
88+
background: none;
89+
padding-left: 0;
90+
11691
}
11792

11893
#sidebar #chapter-listing li.active a {
@@ -121,28 +96,32 @@ Template: jquery
12196
text-shadow: none;
12297
}
12398

124-
#container #body #sidebar #chapter-listing ul.sub-chapter {
99+
#sidebar #chapter-listing li.active a i.icon-tasks {
100+
color: #fff;
101+
}
102+
103+
#sidebar #chapter-listing ul.sub-chapter {
125104
margin: 0;
126105
float: none;
127106
}
128107

129-
#container #body #sidebar #chapter-listing ul.sub-chapter li {
108+
#sidebar #chapter-listing ul.sub-chapter li {
130109
border-bottom: none;
131110
}
132111

133-
#container #body #sidebar #chapter-listing ul.sub-chapter li a {
134-
padding: 1% 10% 1% 23%;
135-
width: 83%;
112+
#sidebar #chapter-listing ul.sub-chapter li a {
113+
padding: 1% 10% 1% 15%;
114+
width: 100%;
136115
}
137116
/*******************************************************************************/
138117
/* Footer Metadata
139118
/*******************************************************************************/
140119

120+
.entry-meta.row {
121+
min-width: auto;
122+
}
123+
141124
.entry-meta aside {
142-
width: 49%;
143-
box-sizing: border-box;
144-
-moz-box-sizing: border-box;
145-
margin:0 0 1% 0;
146125
color: #333;
147126
}
148127

@@ -154,7 +133,6 @@ Template: jquery
154133
background: #fff7e3;
155134
background: -webkit-linear-gradient(top, #fffaf5 0%,#fff7e3 100%,#fff7e3 100%);
156135
background: linear-gradient(to bottom, #fffaf5 0%,#fff7e3 100%,#fff7e3 100%);
157-
margin-right: 2%;
158136
margin-bottom: 1.8em;
159137
padding: 1em 1em 0 1em;
160138
}
@@ -215,10 +193,12 @@ Template: jquery
215193
list-style-type: none;
216194
margin: 0;
217195
}
218-
.entry-meta aside.meta-details .contributor-list li {
196+
#content .entry-meta aside.meta-details .contributor-list li {
219197
font-size: 14px;
220198
line-height: 24px;
221199
margin: 0 0 4px 0;
200+
background: none;
201+
padding-left: 0;
222202
}
223203

224204
.entry-meta aside.meta-details .contributor-list li a {
@@ -245,40 +225,28 @@ Template: jquery
245225
}
246226

247227
.icon-github {
248-
color:#30b9f8;
228+
color:#7ACEF4;
249229
}
250230
.entry-meta .bottom-links {
251-
background: #ccc;
252-
overflow:auto;
253-
padding:0px 10px;
231+
background-image: url(../jquery/images/gauze.png);
232+
border: none;
233+
margin: 2em 0;
254234
clear:both;
255-
margin: 1em 0;
256235
}
257236

258-
.bottom-links a {
237+
#content .bottom-links a {
259238
line-height:2;
260239
text-decoration: none;
261240
font-size:140%;
262241
}
263242

264-
.bottom-links a:hover {
243+
#content .bottom-links a:hover {
265244
text-decoration: underline;
266245
}
267-
.bottom-links .prev, .bottom-links .next {
246+
#content .bottom-links .prev, #content .bottom-links .next {
268247
color: #333;
269248
}
270-
.bottom-links .prev {
271-
float:left;
272-
}
273-
.bottom-links .next {
274-
float:right;
275-
}
276249

277-
@media screen and (max-width: 480px) {
278-
.entry-meta aside {
279-
width: 100%;
280-
}
281-
.entry-meta .bottom-links {
282-
width: 100%;
283-
}
250+
#content .bottom-links .next {
251+
text-align: right;
284252
}

0 commit comments

Comments
 (0)