Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

LESS Part 8: Pagination

A link back to the parent post are now showed at attachment pages.
  • Loading branch information...
commit c3c0ecede1ef8b10b451fded809c2ec09be34ee4 1 parent ab16cb0
Jesper Johansen authored
Showing with 82 additions and 69 deletions.
  1. +2 −2 image.php
  2. +9 −3 loop-nav.php
  3. +30 −22 style.dev.css
  4. +41 −42 style.dev.less
4 image.php
View
@@ -29,6 +29,8 @@
<?php do_atomic( 'open_entry' ); //cakifo_open_entry ?>
<header class="entry-header">
+ <?php get_template_part( 'loop-nav' ); // Loads the loop-nav.php template ?>
+
<?php echo apply_atomic_shortcode( 'entry_title', '[entry-title permalink=""]' ); ?>
<?php echo apply_atomic_shortcode( 'byline_attachment_image', '<div class="byline">' . sprintf( __( 'Sizes: %s', 'cakifo' ), cakifo_get_image_size_links() ) . '</div>' ); ?>
</header> <!-- .entry-header -->
@@ -69,8 +71,6 @@
<?php do_atomic( 'close_main' ); // cakifo_close_main ?>
- <?php get_template_part( 'loop-nav' ); // Loads the loop-nav.php template ?>
-
</div> <!-- #main -->
<?php do_atomic( 'after_main' ); // cakifo_after_main ?>
12 loop-nav.php
View
@@ -10,9 +10,15 @@
*/
?>
- <?php if ( is_singular( 'post' ) ) : ?>
+ <?php if ( is_attachment() ) : ?>
- <nav class="pagination post-pagination clearfix">
+ <div class="loop-nav">
+ <?php previous_post_link( '%link', '<span class="previous">' . __( '<span class="meta-nav">&larr;</span> Return to entry', 'cakifo' ) . '</span>' ); ?>
+ </div> <!-- .loop-nav -->
+
+ <?php elseif ( is_singular( 'post' ) ) : ?>
+
+ <nav class="pagination post-pagination">
<h3 class="assistive-text"><?php _e( 'Post navigation', 'cakifo' ); ?></h3>
<?php previous_post_link( '%link', '<span class="previous">&larr; %title</span>' ); ?>
<?php next_post_link( '%link', '<span class="next">%title &rarr;</span>' ); ?>
@@ -36,6 +42,6 @@
<nav class="pagination">
<h3 class="assistive-text"><?php _e( 'Post navigation', 'cakifo' ); ?></h3>
<?php echo $nav; ?>
- </nav> <!-- .pagination.loop-pagination -->
+ </nav> <!-- .pagination -->
<?php endif; ?>
52 style.dev.css
View
@@ -1771,6 +1771,9 @@ table caption {
/* =============================================================================
Components: Attachment pages
========================================================================== */
+.attachment-title {
+ margin-top: 0;
+}
.image-info {
float: left;
width: 35%;
@@ -1834,50 +1837,55 @@ table caption {
Components: Pagination
========================================================================== */
.pagination {
+ margin: 40px 0;
+}
+.pagination:before,
+.pagination:after {
+ content: "";
+ display: table;
+}
+.pagination:after {
clear: both;
- font: bold 14px sans-serif;
- margin: 40px 0 30px;
}
.pagination a,
.pagination > span {
- background: #e3e3e3;
+ background-color: #eeeeee;
+ box-shadow: 0 2px 0 #c8c8c8;
border-radius: 3px;
- color: #464646;
+ color: #484848;
display: inline-block;
- margin: 0 2px 8px 0;
- padding: 10px 14px 9px;
- text-shadow: 0 1px 0 #fff;
- box-shadow: 0 2px 0 #ccc;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
+ line-height: normal;
+ margin-right: 2px;
+ padding: 13px 14px 12px;
+ text-shadow: 0 1px 0 #ffffff;
-webkit-transition: all 150ms ease-in-out;
-moz-transition: all 150ms ease-in-out;
-o-transition: all 150ms ease-in-out;
- -ms-transition: all 150ms ease-in-out;
transition: all 150ms ease-in-out;
}
.pagination a:hover {
- background: #d54e21;
- color: #fff;
- text-shadow: 0 -1px 0 #7b000f;
- box-shadow: 0 2px 0 #9b000f;
+ background-color: #ffc768;
+ box-shadow: 0 2px 0 #f89406;
+ color: #511d0c;
+ text-shadow: 0 1px 0 #ffedce;
+}
+.pagination a:active {
+ box-shadow: 0 2px 0 #f89406, inset 2px 2px 8px rgba(0, 0, 0, 0.3);
}
.pagination .current {
- background: #464646;
- color: #fff;
+ background-color: #4d4d4d;
+ box-shadow: 0 2px 0 #000000;
+ color: #ffffff;
text-shadow: 0 -1px 0 #000000;
- box-shadow: 0 2px 0 #3e3e3e;
}
/* Prev and next post pagination */
.post-pagination a {
max-width: 49%;
- line-height: 1.6;
}
-.post-pagination a[rel=prev] {
+.post-pagination a[rel="prev"] {
float: left;
}
-.post-pagination a[rel=next] {
+.post-pagination a[rel="next"] {
float: right;
}
/* =============================================================================
83 style.dev.less
View
@@ -714,6 +714,10 @@ sub {
Components: Attachment pages
========================================================================== */
+.attachment-title {
+ margin-top: 0;
+}
+
.image-info {
float: left;
width: 35%;
@@ -782,59 +786,54 @@ sub {
========================================================================== */
.pagination {
- clear: both;
- font: bold 14px sans-serif;
- margin: 40px 0 30px;
-}
+ margin: @gutterWidth 0;
+ .clearfix;
-.pagination a,
-.pagination > span {
- background: #e3e3e3;
- border-radius: 3px;
- color: #464646;
- display: inline-block;
- margin: 0 2px 8px 0;
- padding: 10px 14px 9px;
- text-shadow: 0 1px 0 #fff;
- box-shadow: 0 2px 0 #ccc;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- -webkit-transition: all 150ms ease-in-out;
- -moz-transition: all 150ms ease-in-out;
- -o-transition: all 150ms ease-in-out;
- -ms-transition: all 150ms ease-in-out;
- transition: all 150ms ease-in-out;
-}
+ a, > span {
+ background-color: @grayLighter;
+ box-shadow: 0 2px 0 darken(@grayLighter, 15%);
+ border-radius: 3px;
+ color: darken(@gray, 5%);
+ display: inline-block;
+ line-height: normal;
+ margin-right: 2px;
+ padding: 13px 14px 12px;
+ text-shadow: 0 1px 0 @white;
+ .transition(all 150ms ease-in-out);
+ }
-.pagination a:hover {
- background: #d54e21;
- color: #fff;
- text-shadow: 0 -1px 0 #7b000f;
- box-shadow: 0 2px 0 #9b000f;
-}
+ a:hover {
+ background-color: @orangeLight;
+ box-shadow: 0 2px 0 @orange;
+ color: darken(@orangeDark, 30%);
+ text-shadow: 0 1px 0 lighten(@orangeLight, 20%);
-.pagination .current {
- background: #464646;
- color: #fff;
- text-shadow: 0 -1px 0 #000;
- box-shadow: 0 2px 0 #3e3e3e;
-}
+ }
- /* Prev and next post pagination */
- .post-pagination a {
- max-width: 49%;
- line-height: 1.6;
+ a:active {
+ box-shadow: 0 2px 0 @orange, inset 2px 2px 8px fade(@black, 30%);
}
- .post-pagination a[rel=prev] {
+ .current {
+ background-color: lighten(@grayDark, 10%);
+ box-shadow: 0 2px 0 @black;
+ color: @white;
+ text-shadow: 0 -1px 0 @black;
+ }
+}
+
+/* Prev and next post pagination */
+.post-pagination a {
+ max-width: 49%;
+
+ &[rel="prev"] {
float: left;
}
- .post-pagination a[rel=next] {
+ &[rel="next"] {
float: right;
}
-
+}
/* =============================================================================
Components: Widgets
Please sign in to comment.
Something went wrong with that request. Please try again.