mirror of
https://github.com/moparisthebest/android.moparisthebest.org
synced 2024-12-23 16:08:53 -05:00
1. Udated category layout
2. Improved scoping and styling for links 3. Sidebar collapse improvements
This commit is contained in:
Brandon Mathis
parent
4443fd4429
commit
8b6d83ae60
@ -90,7 +90,7 @@ body {
|
||||
}
|
||||
}
|
||||
.collapse-sidebar & {
|
||||
margin-right: 10px;
|
||||
margin-right: 20px;
|
||||
> aside {
|
||||
float: none;
|
||||
clear: left;
|
||||
@ -114,31 +114,47 @@ body {
|
||||
}
|
||||
.toggle-sidebar {
|
||||
outline: none;
|
||||
position: absolute; right: -21px; top: 0;
|
||||
width: 20px;
|
||||
font-size: 1.2em;
|
||||
line-height: 1.1em;
|
||||
padding-bottom: .1em;
|
||||
text-indent: -1px;
|
||||
text-decoration: none;
|
||||
@include link-colors(#ccc, #999);
|
||||
@include border-bottom-right-radius(.3em);
|
||||
text-align: center;
|
||||
background: $main-bg;
|
||||
border-bottom: 1px solid $sidebar-border;
|
||||
border-right: 1px solid $sidebar-border;
|
||||
position: absolute; right: -10px; top: 0; bottom: 0;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
color: mix($text-color-light, $sidebar-bg);
|
||||
width: 9px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: mix($sidebar-border, $sidebar-bg);
|
||||
@include background(linear-gradient(left, rgba($sidebar-border, .5), rgba($sidebar-border, 0)));
|
||||
}
|
||||
&:after {
|
||||
position: absolute; right: -11px; top: 0;
|
||||
width: 20px;
|
||||
font-size: 1.2em;
|
||||
line-height: 1.1em;
|
||||
padding-bottom: .15em;
|
||||
@include border-bottom-right-radius(.3em);
|
||||
text-align: center;
|
||||
background: $main-bg $noise-bg;
|
||||
border-bottom: 1px solid $sidebar-border;
|
||||
border-right: 1px solid $sidebar-border;
|
||||
content: "\00BB";
|
||||
text-indent: -1px;
|
||||
}
|
||||
.collapse-sidebar & {
|
||||
right: -11px;
|
||||
width: 24px;
|
||||
bottom: 0;
|
||||
background-color: $sidebar-bg;
|
||||
border-right-width: 0;
|
||||
text-indent: 0px;
|
||||
border-left: 1px solid $sidebar-border;
|
||||
@include link-colors(#aaa, #888);
|
||||
right: -20px;
|
||||
width: 19px;
|
||||
&:hover {
|
||||
background: $sidebar-border;
|
||||
background: mix($sidebar-border, $sidebar-bg);
|
||||
}
|
||||
&:after {
|
||||
border-left: 1px solid $sidebar-border;
|
||||
text-shadow: #fff 0 1px;
|
||||
content: "\00AB";
|
||||
left: 0px; right: 0;
|
||||
text-align: center;
|
||||
text-indent: 0;
|
||||
border: 0;
|
||||
border-right-width: 0;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -41,6 +41,7 @@ $nav-border-right: lighten($nav-bg, 7) !default;
|
||||
$sidebar-bg: #f2f2f2 !default;
|
||||
$sidebar-link-color: $link-color !default;
|
||||
$sidebar-link-color-hover: $link-color-hover !default;
|
||||
$sidebar-link-color-active: $link-color-active !default;
|
||||
$sidebar-color: change-color(mix($text-color, $sidebar-bg, 80), $hue: hue($sidebar-bg), $saturation: saturation($sidebar-bg)/2) !default;
|
||||
$sidebar-border: desaturate(darken($sidebar-bg, 7), 10) !default;
|
||||
$sidebar-border: darken($sidebar-bg, 7) !default;
|
||||
@ -61,9 +62,12 @@ $page-border-bottom: darken($footer-bg, 5) !default;
|
||||
|
||||
/* Core theme application */
|
||||
|
||||
article a, #articles + aside a {
|
||||
a {
|
||||
@include link-colors($link-color, $hover: $link-color-hover, $focus: $link-color-hover, $visited: $link-color-visited, $active: $link-color-active);
|
||||
}
|
||||
aside[role=sidebar] a {
|
||||
@include link-colors($sidebar-link-color, $hover: $sidebar-link-color-hover, $focus: $sidebar-link-color-hover, $active: $sidebar-link-color-active);
|
||||
}
|
||||
a {
|
||||
@include transition(color, .3s);
|
||||
}
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
#archive {
|
||||
#content > div { &, > article { padding-top: 0; } }
|
||||
}
|
||||
#blog-archives {
|
||||
article {
|
||||
padding: 1em 0 1em;
|
||||
@ -6,12 +9,10 @@
|
||||
&:last-child {
|
||||
background: none;
|
||||
}
|
||||
footer { padding: 0; margin: 0;}
|
||||
}
|
||||
h2 {
|
||||
background: none;
|
||||
display: none;
|
||||
}
|
||||
h1, h2 { color: $text-color; margin-bottom: .3em; }
|
||||
h1 { color: $text-color; margin-bottom: .3em; }
|
||||
h2 { display: none; }
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
a {
|
||||
@ -30,7 +31,7 @@
|
||||
.entry-content { display: none; }
|
||||
time {
|
||||
font-size: .9em;
|
||||
line-height: 1em;
|
||||
line-height: 1.2em;
|
||||
.month, .day { display: inline-block; }
|
||||
.month { text-transform: uppercase; }
|
||||
}
|
||||
@ -40,10 +41,11 @@
|
||||
@media only screen and (min-width: 550px) {
|
||||
article { margin-left: 5em; }
|
||||
h2 {
|
||||
background: none;
|
||||
margin-bottom: .3em;
|
||||
font-weight: normal;
|
||||
display: inline-block;
|
||||
position: relative; top: -1px;
|
||||
float: left;
|
||||
padding-top: .75em;
|
||||
&:first-child { padding-top: .75em; }
|
||||
}
|
||||
time {
|
||||
|
||||
@ -1,21 +1,10 @@
|
||||
#content {
|
||||
article { ul, ol { margin-left: 1.4em; }}
|
||||
article {
|
||||
overflow: hidden;
|
||||
padding-top: 1em;
|
||||
ul, ol { margin-left: 1.4em; }
|
||||
@media only screen and (min-width: 768px) {
|
||||
ul, ol { margin-left: 0; }
|
||||
}
|
||||
> article, > div > article {
|
||||
overflow: hidden;
|
||||
padding-top: 1em;
|
||||
h2 {
|
||||
padding-top: 0.8em;
|
||||
background: $img-border top left repeat-x;
|
||||
.entry-content &:first-child { padding-top: 0; }
|
||||
&:first-child { background: none; }
|
||||
}
|
||||
.byline + time:before, time +time:before, .comments:before, .byline ~ .categories:before {
|
||||
@extend .separator;
|
||||
}
|
||||
}
|
||||
header {
|
||||
position: relative;
|
||||
padding-top: 2em;
|
||||
@ -43,6 +32,12 @@
|
||||
background: $img-border bottom left repeat-x;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
padding-top: 0.8em;
|
||||
background: $img-border top left repeat-x;
|
||||
.entry-content &:first-child { padding-top: 0; }
|
||||
&:first-child { background: none; }
|
||||
}
|
||||
.feature {
|
||||
padding-top: .5em;
|
||||
margin-bottom: 1em;
|
||||
@ -80,7 +75,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
> div > article > footer {
|
||||
> footer {
|
||||
padding-bottom: 2.5em;
|
||||
margin-top: 2em;
|
||||
@extend .sans;
|
||||
@ -88,6 +83,9 @@
|
||||
margin-bottom: .8em;
|
||||
font-size: .85em;
|
||||
}
|
||||
.byline + time:before, time +time:before, .comments:before, .byline ~ .categories:before {
|
||||
@extend .separator;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -129,7 +127,7 @@ article + article {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
nav[role=pagination] {
|
||||
#content nav[role=pagination] {
|
||||
text-align: center;
|
||||
font-size: .95em;
|
||||
div {
|
||||
|
||||
@ -13,7 +13,7 @@ body > footer {
|
||||
@include border-bottom-radius(.4em);
|
||||
z-index: 1;
|
||||
a {
|
||||
@include link-colors($footer-link-color, $footer-link-color-hover);
|
||||
@include link-colors($footer-link-color, $footer-link-color-hover, $visited: $footer-link-color);
|
||||
}
|
||||
p:last-child { margin-bottom: 0; }
|
||||
}
|
||||
|
||||
@ -88,7 +88,6 @@ body > nav {
|
||||
fieldset[role=mobile-nav] { display: none; }
|
||||
fieldset[role=site-search]{ width: 99%; }
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
form {
|
||||
width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 + 10px;
|
||||
|
||||
@ -167,6 +167,12 @@ p code {
|
||||
overflow-y: hidden;
|
||||
overflow-x: auto;
|
||||
}
|
||||
pre, .highlight, .gist-highlight {
|
||||
&::-webkit-scrollbar { height: .5em; background: rgba(#fff, .15); }
|
||||
//&::-webkit-scrollbar-track { -webkit-box-shadow: $base03 1px 1px 0 inset; }
|
||||
&::-webkit-scrollbar-thumb:horizontal { background: rgba(#fff, .2); -webkit-border-radius: 4px; border-radius: 4px }
|
||||
}
|
||||
|
||||
.highlight code { @extend .pre-code; background: #000;}
|
||||
figure {
|
||||
margin-bottom: 1.5em;
|
||||
|
||||
@ -1,10 +1,15 @@
|
||||
---
|
||||
layout: post
|
||||
no_meta: true
|
||||
layout: page
|
||||
no_footer: true
|
||||
---
|
||||
|
||||
<div class="blog-archives category">
|
||||
<div id="blog-archives" class="category">
|
||||
{% for post in site.categories[page.category] %}
|
||||
{% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
|
||||
{% unless year == this_year %}
|
||||
{% assign year = this_year %}
|
||||
<h2>{{ year }}</h2>
|
||||
{% endunless %}
|
||||
<article>
|
||||
{% include archive_post.html %}
|
||||
</article>
|
||||
|
||||
@ -9,15 +9,13 @@ function getNav(){
|
||||
});
|
||||
}
|
||||
function addSidebarToggler() {
|
||||
$('#content').append('<a href="#" class="toggle-sidebar">»</a>');
|
||||
$('#content').append('<span class="toggle-sidebar"></span>');
|
||||
$('.toggle-sidebar').bind('click', function(e){
|
||||
e.preventDefault();
|
||||
if($('body').hasClass('collapse-sidebar')){
|
||||
$('body').removeClass('collapse-sidebar');
|
||||
e.target.innerHTML = '»';
|
||||
} else {
|
||||
$('body').addClass('collapse-sidebar');
|
||||
e.target.innerHTML = '«';
|
||||
}
|
||||
});
|
||||
sections = $('aside[role=sidebar] > section')
|
||||
|
||||
Loading…
Reference in New Issue
Block a user