Style tweaks to pagination, right sidebar, and background color

This commit is contained in:
Michael Rose 2016-03-29 23:13:00 -04:00
parent 181ac73615
commit 85fb0d0283
9 changed files with 50 additions and 51 deletions

View file

@ -1,8 +1,8 @@
<nav class="pagination">
{% if page.previous %}
<a href="{{ base_path }}{{ page.previous.url }}" class="btn btn--inverse btn--small" title="{{ page.previous.title | markdownify | strip_html }}">{{ site.data.ui-text[site.locale].pagination_previous }}</a>
<a href="{{ base_path }}{{ page.previous.url }}" class="pagination--pager" title="{{ page.previous.title | markdownify | strip_html }}">{{ site.data.ui-text[site.locale].pagination_previous }}</a>
{% endif %}
{% if page.next %}
<a href="{{ base_path }}{{ page.next.url }}" class="btn btn--inverse btn--small" title="{{ page.next.title | markdownify | strip_html }}">{{ site.data.ui-text[site.locale].pagination_next }}</a>
<a href="{{ base_path }}{{ page.next.url }}" class="pagination--pager" title="{{ page.next.title | markdownify | strip_html }}">{{ site.data.ui-text[site.locale].pagination_next }}</a>
{% endif %}
</nav>

View file

@ -19,6 +19,5 @@
{% include nav_list items=page.sidebar.nav %}
{% endif %}
{% endif %}
{% include post_pagination.html %}
</div>
{% endif %}

View file

@ -47,6 +47,8 @@ layout: default
</footer>
{% if site.share and page.share %}{% include social-share.html %}{% endif %}
{% include post_pagination.html %}
</div>
{% if site.comments.provider and page.comments %}

View file

@ -8,7 +8,7 @@ body {
color: $text-color;
font-family: $serif;
line-height: 1.5;
background-color: $body-color;
background-color: $background-color;
&.overflow--hidden {
/* when primary navigation is visible, the content in the background won't scroll */
@ -122,18 +122,6 @@ a {
}
}
/* lists */
ol, ul {
@include breakpoint($small) {
padding-left: 0;
ol, ul {
padding: 0.5em 1em;
}
}
}
/* code */
tt, code, kbd, samp, pre {

View file

@ -53,8 +53,10 @@
========================================================================== */
.pagination {
margin-top: 1em;
padding-top: 1em;
@include full();
@include clearfix();
margin-top: 2em;
padding-top: 2em;
border-top: 1px solid $border-color;
ul {
@ -77,6 +79,37 @@
.current {
font-weight: bold;
}
/* next/previous buttons */
&--pager {
display: block;
padding: 1em 2em;
float: left;
width: 50%;
font-family: $sans-serif;
font-size: 18px;
font-weight: bold;
line-height: 1.5;
text-align: center;
text-decoration: none;
color: mix(#fff, $gray, 25%);
border: 1px solid $light-gray;
border-radius: $border-radius;
&:hover {
color: $gray;
}
&:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&:last-child {
margin-left: -1px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
}
@ -87,7 +120,7 @@
.greedy-nav {
position: relative;
min-width: 250px;
background: #fff;
background: $background-color;
a {
display: block;

View file

@ -22,18 +22,13 @@
}
.page {
@include breakpoint($medium) {
padding-right: $right-sidebar-width-narrow;
}
@include breakpoint($large) {
@include span(10 of 12 last);
padding-right: $right-sidebar-width;
@include suffix(2 of 12);
}
@include breakpoint($x-large) {
@include prefix(0.5 of 12);
padding-right: $right-sidebar-width-wide;
}
.page__inner-wrap {
@ -225,7 +220,7 @@
&:hover {
text-decoration: none;
border-color: $gray;
color: $gray;
}
}

View file

@ -10,13 +10,8 @@
@include clearfix();
margin-bottom: 1em;
@include breakpoint($medium) {
padding-right: $right-sidebar-width-narrow;
}
@include breakpoint($large) {
@include span(2 of 12);
@include suffix(0.25 of 12);
}
@include breakpoint($x-large) {
@ -48,30 +43,17 @@
}
.sidebar__right {
@include breakpoint($medium) {
position: absolute;
top: 0;
right: 1em;
margin-bottom: 1em;
@include breakpoint($large) {
float: right;
width: $right-sidebar-width-narrow;
padding-left: 2em;
margin-left: span(0.5 of 12);
}
@include breakpoint($large) {
@include breakpoint($x-large) {
width: $right-sidebar-width;
}
@include breakpoint($x-large) {
width: $right-sidebar-width-wide;
padding-left: span(1 of 12);
}
}
@include breakpoint($large) {
right: calc(50% - (0.5 * #{$large}) + 1em); // 50% - 1/2 of wrapper's max-width + wrapper padding
}
@include breakpoint($x-large) {
right: calc(50% - (0.5 * #{$x-large}) + 1em); // 50% - 1/2 of wrapper's max-width + wrapper padding
}
}
/*

View file

@ -40,7 +40,7 @@ $light-gray : mix(#fff, $gray, 70%);
$lighter-gray : mix(#fff, $gray, 90%);
$body-color : #fff;
$background-color : #fff;
$background-color : #f5f5f5;
$code-background-color : #f8f8f8;
$text-color : #333332;
$border-color : $lighter-gray;

File diff suppressed because one or more lines are too long