mirror of
https://github.com/moparisthebest/www.moparscape.org
synced 2024-11-15 05:45:06 -05:00
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:
parent
b0921c1e27
commit
87f300b2bc
@ -19,7 +19,7 @@ body {
|
|||||||
max-width: $max-width;
|
max-width: $max-width;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0 auto;
|
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;
|
@extend .group;
|
||||||
padding-left: $pad-min;
|
padding-left: $pad-min;
|
||||||
padding-right: $pad-min;
|
padding-right: $pad-min;
|
||||||
@ -59,11 +59,6 @@ body {
|
|||||||
body > header { font-size: 1em; }
|
body > header { font-size: 1em; }
|
||||||
#content aside {
|
#content aside {
|
||||||
@extend .group;
|
@extend .group;
|
||||||
section {
|
|
||||||
&.odd, &.even { float: left; width: 48%; }
|
|
||||||
&.odd { margin-left: 0; }
|
|
||||||
&.even { margin-left: 4%; }
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media only screen and (min-width: 768px) {
|
@media only screen and (min-width: 768px) {
|
||||||
|
@ -4,7 +4,7 @@ $img-border: inline-image('dotted-border.png');
|
|||||||
// Main Link Colors
|
// Main Link Colors
|
||||||
$link-color: lighten(#165b94, 3) !default;
|
$link-color: lighten(#165b94, 3) !default;
|
||||||
$link-color-hover: adjust-color($link-color, $lightness: 10, $saturation: 25) !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;
|
$link-color-active: adjust-color($link-color-hover, $lightness: -15) !default;
|
||||||
|
|
||||||
// Main Section Colors
|
// Main Section Colors
|
||||||
@ -38,7 +38,7 @@ $nav-border-left: darken($nav-bg, 11) !default;
|
|||||||
$nav-border-right: lighten($nav-bg, 7) !default;
|
$nav-border-right: lighten($nav-bg, 7) !default;
|
||||||
|
|
||||||
/* Sidebar colors */
|
/* Sidebar colors */
|
||||||
$sidebar-bg: #eee !default;
|
$sidebar-bg: #f2f2f2 !default;
|
||||||
$sidebar-link-color: $link-color !default;
|
$sidebar-link-color: $link-color !default;
|
||||||
$sidebar-link-color-hover: $link-color-hover !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;
|
$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 {
|
> article, > div > article {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding-bottom: 1em;
|
padding-top: 1em;
|
||||||
&:last-child { margin-bottom: 0; }
|
|
||||||
h2 {
|
h2 {
|
||||||
padding-top: 0.8em;
|
padding-top: 0.8em;
|
||||||
background: $img-border top left repeat-x;
|
background: $img-border top left repeat-x;
|
||||||
@ -32,16 +31,16 @@
|
|||||||
font-size: .9em;
|
font-size: .9em;
|
||||||
color: $text-color-light;
|
color: $text-color-light;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@extend .sans;
|
|
||||||
&.meta {
|
&.meta {
|
||||||
|
@extend .sans;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
position: absolute; top: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media only screen and (min-width: 768px) {
|
@media only screen and (min-width: 768px) {
|
||||||
margin-bottom: 1.5em;
|
margin-bottom: 1.5em;
|
||||||
padding-bottom: 1em;
|
padding-bottom: 1em;
|
||||||
background: $img-border bottom left repeat-x;
|
background: $img-border bottom left repeat-x;
|
||||||
p.meta { position: absolute; top: 0; }
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.feature {
|
.feature {
|
||||||
@ -82,12 +81,13 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
> div > article > footer {
|
> div > article > footer {
|
||||||
margin-bottom: 1.5em;
|
padding-bottom: 2.5em;
|
||||||
background: $img-border top left repeat-x;
|
|
||||||
margin-top: 2em;
|
margin-top: 2em;
|
||||||
padding-top: 1em;
|
|
||||||
@extend .sans;
|
@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;
|
background: $img-border top left repeat-x;
|
||||||
}
|
}
|
||||||
#content .blog-index {
|
#content .blog-index {
|
||||||
|
padding: { top: 0; bottom: 0; }
|
||||||
|
article { padding-top: 2em; }
|
||||||
article header { background: none; padding-bottom: 0; }
|
article header { background: none; padding-bottom: 0; }
|
||||||
article h1 {
|
article h1 {
|
||||||
font-size: 2.2em;
|
font-size: 2.2em;
|
||||||
@ -126,3 +128,23 @@ article + article {
|
|||||||
padding: 0 .4em 0 .2em;
|
padding: 0 .4em 0 .2em;
|
||||||
display: inline-block;
|
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%; }
|
.search { width: 91%; }
|
||||||
}
|
}
|
||||||
fieldset[role=mobile-nav] { display: none; }
|
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) {
|
@media only screen and (min-width: 992px) {
|
||||||
|
@ -1,7 +1,6 @@
|
|||||||
footer .sharing {
|
.sharing {
|
||||||
display: inline-block;
|
p.meta + & {
|
||||||
position: relative;
|
padding: { top: 1em; left: 0; }
|
||||||
top: .3em;
|
background: $img-border top left repeat-x;
|
||||||
padding-left: .5em;
|
}
|
||||||
&:first-child { padding-left: 0; }
|
|
||||||
}
|
}
|
||||||
|
@ -5,20 +5,17 @@
|
|||||||
{% else %}
|
{% else %}
|
||||||
<h1 class="entry-title">{{ page.title | titlecase }}</h1>
|
<h1 class="entry-title">{{ page.title | titlecase }}</h1>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% unless page.no_meta or !index %}<p class="meta">{% include post_date.html %}</p>{% endunless %}
|
{% unless page.no_meta %}
|
||||||
|
<p class="meta">{% include post_date.html %}</p>
|
||||||
|
{% endunless %}
|
||||||
</header>
|
</header>
|
||||||
|
{% if index %}
|
||||||
|
{% endif %}
|
||||||
{% endunless %}
|
{% endunless %}
|
||||||
{% if index %}
|
{% if index %}
|
||||||
<div class="entry-content">{{ content | exerpt | smart_quotes }}</div>
|
<div class="entry-content">{{ content | exerpt | smart_quotes }}</div>
|
||||||
<p><a rel="full-article" href="{{ post.url }}">Read on →</a></p>
|
|
||||||
<footer>
|
<footer>
|
||||||
<p class="meta">
|
<a rel="full-article" href="{{ post.url }}">Read on →</a>
|
||||||
{% include post_author.html %}
|
|
||||||
{% include post_date.html %}
|
|
||||||
{% include post_categories.html %}
|
|
||||||
<span class="comments"><a rel="comments" href="{{ post.url }}#disqus_thread">Comments</a></span>
|
|
||||||
{% include sharing.html %}
|
|
||||||
</p>
|
|
||||||
</footer>
|
</footer>
|
||||||
{% else %}
|
{% else %}
|
||||||
<div class="entry-content">{{ content | smart_quotes }}</div>
|
<div class="entry-content">{{ content | smart_quotes }}</div>
|
||||||
|
@ -12,5 +12,5 @@
|
|||||||
</form>
|
</form>
|
||||||
<ul role="main-nav">
|
<ul role="main-nav">
|
||||||
<li><a href="/">Blog</a></li>
|
<li><a href="/">Blog</a></li>
|
||||||
<li><a href="/blog/archives.html">Archives</a></li>
|
<li><a href="/blog/archives/index.html">Archives</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
{% capture category %}{% if post %}{{ post.categories | category_links | size }}{% else %}{{ page.categories | category_links | size }}{% endif %}{% endcapture %}
|
{% capture category %}{% if post %}{{ post.categories | category_links | size }}{% else %}{{ page.categories | category_links | size }}{% endif %}{% endcapture %}
|
||||||
{% unless category == '0' %}
|
{% unless category == '0' %}
|
||||||
<span class="categories"> in
|
<span class="categories">
|
||||||
{% if post %}
|
{% if post %}
|
||||||
{{ post.categories | category_links }}
|
{{ post.categories | category_links }}
|
||||||
{% else %}
|
{% else %}
|
||||||
|
@ -11,13 +11,17 @@ blog_index: true
|
|||||||
</article>
|
</article>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
<nav role="pagination">
|
<nav role="pagination">
|
||||||
{% if paginator.next_page %}
|
<div>
|
||||||
<a href="/page{{paginator.next_page}}/">← Older</a>
|
{% if paginator.next_page %}
|
||||||
{% endif %}
|
<a class="prev" href="/page{{paginator.next_page}}/">← Older</a>
|
||||||
<a href="/blog/archive.html">Blog Archive</a>
|
{% endif %}
|
||||||
{% if paginator.previous_page %}
|
<a href="/blog/archives/index.html">Blog Archives</a>
|
||||||
<a href="/page{{paginator.previous_page}}/">Newer →</a>
|
{% if paginator.previous_page and paginator.previous_page > 1 %}
|
||||||
{% endif %}
|
<a class="next" href="/page{{paginator.previous_page}}/">Newer →</a>
|
||||||
|
{% elsif paginator.previous_page %}
|
||||||
|
<a class="next" href="/">Newer →</a>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
{% if site.disqus_short_name %}
|
{% if site.disqus_short_name %}
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
@ -9,7 +9,7 @@ function getNav(){
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
function addSidebarToggler() {
|
function addSidebarToggler() {
|
||||||
$('#content').prepend('<a href="#" class="toggle-sidebar">»</a>');
|
$('#content').append('<a href="#" class="toggle-sidebar">»</a>');
|
||||||
$('.toggle-sidebar').bind('click', function(e){
|
$('.toggle-sidebar').bind('click', function(e){
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if($('body').hasClass('collapse-sidebar')){
|
if($('body').hasClass('collapse-sidebar')){
|
||||||
|
@ -28,7 +28,7 @@ simple_search: http://google.com/search
|
|||||||
email:
|
email:
|
||||||
|
|
||||||
# Twitter
|
# Twitter
|
||||||
twitter_user:
|
twitter_user: imathis
|
||||||
twitter_tweet_count: 4
|
twitter_tweet_count: 4
|
||||||
twitter_show_replies: false
|
twitter_show_replies: false
|
||||||
twitter_follow_button: true
|
twitter_follow_button: true
|
||||||
@ -40,7 +40,7 @@ google_plus_one: true
|
|||||||
google_plus_one_size: medium
|
google_plus_one_size: medium
|
||||||
|
|
||||||
# Pinboard
|
# Pinboard
|
||||||
pinboard_user:
|
pinboard_user: imathis
|
||||||
pinboard_count: 3
|
pinboard_count: 3
|
||||||
|
|
||||||
# Delicious
|
# Delicious
|
||||||
@ -48,7 +48,7 @@ delicious_user:
|
|||||||
delicious_count: 3
|
delicious_count: 3
|
||||||
|
|
||||||
# Disqus Comments
|
# Disqus Comments
|
||||||
disqus_short_name:
|
disqus_short_name: octopress
|
||||||
|
|
||||||
# Google Analytics
|
# Google Analytics
|
||||||
google_analytics_tracking_id:
|
google_analytics_tracking_id:
|
||||||
|
Loading…
Reference in New Issue
Block a user