1. Styled pagination for blog index
2. Fixed Newer pagination link on page 2 3. Improved sidebar section breakdown on collapse 4. Removed sharing links from the blog index page (moved to pages) 5. Improved styling for metadata on the blog index 6. Moved /blog/archives.html to /blog/archives/index.html 7. Improved responsive layout styling bugs
This commit is contained in:
@ -19,7 +19,7 @@ body {
|
||||
max-width: $max-width;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
> header, > nav, > footer, #content > article, #content > div > article, #content > div > nav {
|
||||
> header, > nav, > footer, #content > article, #content > div > article, #content > div > section, nav[role=pagination] {
|
||||
@extend .group;
|
||||
padding-left: $pad-min;
|
||||
padding-right: $pad-min;
|
||||
@ -59,11 +59,6 @@ body {
|
||||
body > header { font-size: 1em; }
|
||||
#content aside {
|
||||
@extend .group;
|
||||
section {
|
||||
&.odd, &.even { float: left; width: 48%; }
|
||||
&.odd { margin-left: 0; }
|
||||
&.even { margin-left: 4%; }
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 768px) {
|
||||
|
||||
@ -4,7 +4,7 @@ $img-border: inline-image('dotted-border.png');
|
||||
// Main Link Colors
|
||||
$link-color: lighten(#165b94, 3) !default;
|
||||
$link-color-hover: adjust-color($link-color, $lightness: 10, $saturation: 25) !default;
|
||||
$link-color-visited: adjust-color($link-color, $hue: 80, $lightness: -2) !default;
|
||||
$link-color-visited: adjust-color($link-color, $hue: 80, $lightness: -4) !default;
|
||||
$link-color-active: adjust-color($link-color-hover, $lightness: -15) !default;
|
||||
|
||||
// Main Section Colors
|
||||
@ -38,7 +38,7 @@ $nav-border-left: darken($nav-bg, 11) !default;
|
||||
$nav-border-right: lighten($nav-bg, 7) !default;
|
||||
|
||||
/* Sidebar colors */
|
||||
$sidebar-bg: #eee !default;
|
||||
$sidebar-bg: #f2f2f2 !default;
|
||||
$sidebar-link-color: $link-color !default;
|
||||
$sidebar-link-color-hover: $link-color-hover !default;
|
||||
$sidebar-color: change-color(mix($text-color, $sidebar-bg, 80), $hue: hue($sidebar-bg), $saturation: saturation($sidebar-bg)/2) !default;
|
||||
|
||||
@ -5,8 +5,7 @@
|
||||
}
|
||||
> article, > div > article {
|
||||
overflow: hidden;
|
||||
padding-bottom: 1em;
|
||||
&:last-child { margin-bottom: 0; }
|
||||
padding-top: 1em;
|
||||
h2 {
|
||||
padding-top: 0.8em;
|
||||
background: $img-border top left repeat-x;
|
||||
@ -32,16 +31,16 @@
|
||||
font-size: .9em;
|
||||
color: $text-color-light;
|
||||
margin: 0;
|
||||
@extend .sans;
|
||||
&.meta {
|
||||
@extend .sans;
|
||||
text-transform: uppercase;
|
||||
position: absolute; top: 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 768px) {
|
||||
margin-bottom: 1.5em;
|
||||
padding-bottom: 1em;
|
||||
background: $img-border bottom left repeat-x;
|
||||
p.meta { position: absolute; top: 0; }
|
||||
}
|
||||
}
|
||||
.feature {
|
||||
@ -82,12 +81,13 @@
|
||||
}
|
||||
}
|
||||
> div > article > footer {
|
||||
margin-bottom: 1.5em;
|
||||
background: $img-border top left repeat-x;
|
||||
padding-bottom: 2.5em;
|
||||
margin-top: 2em;
|
||||
padding-top: 1em;
|
||||
@extend .sans;
|
||||
p.meta { display: inline-block; font-size: .8em; }
|
||||
p.meta {
|
||||
margin-bottom: .8em;
|
||||
font-size: .85em;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -95,6 +95,8 @@ article + article {
|
||||
background: $img-border top left repeat-x;
|
||||
}
|
||||
#content .blog-index {
|
||||
padding: { top: 0; bottom: 0; }
|
||||
article { padding-top: 2em; }
|
||||
article header { background: none; padding-bottom: 0; }
|
||||
article h1 {
|
||||
font-size: 2.2em;
|
||||
@ -126,3 +128,23 @@ article + article {
|
||||
padding: 0 .4em 0 .2em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
nav[role=pagination] {
|
||||
text-align: center;
|
||||
font-size: .95em;
|
||||
div {
|
||||
position: relative;
|
||||
background: $img-border top left repeat-x;
|
||||
padding: {top: 1.5em; bottom: 1.5em;}
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $text-color-light;
|
||||
&.prev { position: absolute; left: 0; }
|
||||
&.next { position: absolute; right: 0; }
|
||||
&:hover { color: $link-color-hover; }
|
||||
&[href*=archive] {
|
||||
&:before, &:after { content: '\2014'; padding: 0 .3em; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -86,7 +86,7 @@ body > nav {
|
||||
.search { width: 91%; }
|
||||
}
|
||||
fieldset[role=mobile-nav] { display: none; }
|
||||
fieldset[role=site-search]{ width: 100%; }
|
||||
fieldset[role=site-search]{ width: 99%; }
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
footer .sharing {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: .3em;
|
||||
padding-left: .5em;
|
||||
&:first-child { padding-left: 0; }
|
||||
.sharing {
|
||||
p.meta + & {
|
||||
padding: { top: 1em; left: 0; }
|
||||
background: $img-border top left repeat-x;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user