mirror of
https://github.com/WatchOutNewsAgency/wona.github.com.git
synced 2026-02-12 10:20:54 +00:00
1. Replaced Rdiscount in favor of Kramdown (better html5 support) for markdown processing.
2. Added updated instructions to the README 3. Removed unused media css directories 4. Improved use of color variables for page theming. 5. Improved Typography and blog styling. 6. Added support for simple pre and code styles 7. Misc styling and markup improvements.
This commit is contained in:
Brandon Mathis
@ -1,9 +1,9 @@
|
||||
$default-border-radius: 4px;
|
||||
|
||||
$pad-min: 18px;
|
||||
$pad-narrow: 18px;
|
||||
$pad-medium: 24px;
|
||||
$pad-wide: 30px;
|
||||
$pad-narrow: 20px;
|
||||
$pad-medium: 35px;
|
||||
$pad-wide: 55px;
|
||||
$sidebar-width-medium: 240px;
|
||||
$sidebar-pad-medium: 15px;
|
||||
$sidebar-pad-wide: 20px;
|
||||
@ -117,8 +117,6 @@ body {
|
||||
}
|
||||
body > nav + div > div { margin-right: $sidebar-width-wide; }
|
||||
#articles {
|
||||
padding-top: $pad-wide/2;
|
||||
padding-bottom: $pad-wide/2;
|
||||
+ aside {
|
||||
width: $sidebar-width-wide - $sidebar-pad-wide*2;
|
||||
padding: 0 $sidebar-pad-wide $sidebar-pad-wide;
|
||||
|
||||
@ -1,37 +1,53 @@
|
||||
// Link Colors
|
||||
// Main Link Colors
|
||||
$link-color: lighten(#165b94, 3);
|
||||
$link-color-hover: darken(#165b94, 5);
|
||||
$link-color-hover: adjust-hue($link-color, -200);
|
||||
$link-color-visited: darken(adjust_hue($link_color, 70), 10);
|
||||
$link-color-active: darken($link-color-hover, 15);
|
||||
|
||||
// Main Section Colors
|
||||
$body-color: #333333;
|
||||
$light-text: #999999;
|
||||
$page-bg: #252525;
|
||||
$article-border: #eeeeee;
|
||||
$main-bg: #f5f5f5;
|
||||
|
||||
$header-bg: #333; //#0c2e46; //darken(#238bd2, 32); //#263448; //#323232;
|
||||
$header-bg: #333;
|
||||
$header-border: lighten($header-bg, 15);
|
||||
$title-color: #f2f2f2;
|
||||
$subtitle-color: #aaa;
|
||||
|
||||
$nav-bg: #ccc;//#3a6ea5;
|
||||
$type-border: #ddd;
|
||||
$type-color-light: #555;
|
||||
$type-color: #222;
|
||||
|
||||
$nav-bg: #ccc;
|
||||
$nav-color: darken($nav-bg, 38);
|
||||
$nav-color-hover: darken($nav-color, 25);
|
||||
$nav-border: darken($nav-bg, 10);
|
||||
$nav-border-top: lighten($nav-bg, 15);
|
||||
$nav-border-bottom: darken($nav-bg, 25);//darken($nav-bg, 5);
|
||||
$nav-border-bottom: darken($nav-bg, 25);
|
||||
$nav-border-left: darken($nav-bg, 11);
|
||||
$nav-border-right: lighten($nav-bg, 7);
|
||||
|
||||
$sidebar-bg: #eee; //#f8f8f8; //desaturate(change-color(#e8f4f4, $hue: 207), 100); //mix(#f5f5f5, aqua, 93%);
|
||||
$sidebar-bg: #eee;
|
||||
$sidebar-color: change-color(mix($type-color, $sidebar-bg, 80), $hue: hue($sidebar-bg), $saturation: saturation($sidebar-bg)/2);
|
||||
$sidebar-border: desaturate(darken($sidebar-bg, 7), 10);
|
||||
$sidebar-border: darken($sidebar-bg, 7);
|
||||
|
||||
// Blog
|
||||
$article-border: #eeeeee;
|
||||
$main-bg: #f9f8f6;
|
||||
$sidebar-link-color: $link-color;
|
||||
$sidebar-link-color-hover: $link-color-hover;
|
||||
$sidebar-link-color-subdued: lighten($sidebar-color, 20);
|
||||
$sidebar-link-color-subdued-hover: $link-color-hover;//darken($sidebar-link-color-subdued, 20);
|
||||
$twitter-status-link: lighten($sidebar-link-color-subdued, 15);
|
||||
|
||||
$footer-color: #999999;
|
||||
//$footer-bg: #444444;
|
||||
$footer-bg: $nav-bg;//$page-bg;
|
||||
$footer-border: $nav-border-top;//$page-bg;
|
||||
$footer-bg: #ccc;
|
||||
$footer-color: darken($footer-bg, 38);
|
||||
$footer-color-hover: darken($footer-color, 10);
|
||||
$footer-placeholder: desaturate(darken($footer-bg, 10), 15);
|
||||
$footer-border-top: lighten($footer-bg, 15);
|
||||
$footer-link-color: darken($footer-bg, 38);
|
||||
$footer-link-color-hover: darken($footer-color, 25);
|
||||
$page-border-bottom: darken($footer-bg, 5);
|
||||
|
||||
// Form Colors
|
||||
$fieldset-bg: #ececec;
|
||||
@ -48,6 +64,6 @@ $textinput-border-right: #c3c3c3;
|
||||
$textinput-border-focus: #989898;
|
||||
|
||||
#articles a, #articles + aside a {
|
||||
@include link-colors($link-color, $hover: saturate(darken($link_color, 15), 20), $focus: saturate(darken($link_color, 15), 20), $visited: darken(adjust_hue($link_color, 70), 10));
|
||||
@include link-colors($link-color, $hover: $link-color-hover, $focus: $link-color-hover, $visited: $link-color-visited, $active: $link-color-active);
|
||||
}
|
||||
a { @include transition(color, .5s); }
|
||||
|
||||
@ -1,11 +1,7 @@
|
||||
$type-border: #ddd;
|
||||
$type-color-light: #555;
|
||||
$type-color: #000;
|
||||
$blockquote: $type-border !default; //darken($type-border, 20) !default;
|
||||
$blockquote: $type-border !default;
|
||||
$mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
|
||||
|
||||
// Fonts
|
||||
//@include font-face("Adelle", font-files("adellebasic_bold-webfont.woff", woff, "adellebasic_bold-webfont.ttf", truetype, "adellebasic_bold-webfont.svg#webfontKykxqSyz", svg), $eot: "adellebasic_bold-webfont.eot" );
|
||||
.heading {
|
||||
font-family: "PT Serif", "Georgia", "Helvetica Neue", Arial, sans-serif;
|
||||
}
|
||||
@ -14,7 +10,7 @@ $mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
|
||||
.mono { font-family: $mono; }
|
||||
|
||||
body > header h1 {
|
||||
font-size: 2em;
|
||||
font-size: 3em;
|
||||
@extend .heading;
|
||||
font-weight: normal;
|
||||
line-height: 1.2em;
|
||||
@ -31,10 +27,10 @@ body {
|
||||
@extend .heading;
|
||||
text-rendering: optimizelegibility;
|
||||
margin-bottom: 1em;
|
||||
font-weight: normal;
|
||||
font-weight: bold;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2.4em;
|
||||
font-size: 3.2em;
|
||||
line-height: 1.2em
|
||||
}
|
||||
h2, section h1 {
|
||||
@ -59,8 +55,6 @@ ul{ list-style-type: disc; }
|
||||
ol{ list-style-type: decimal; ol { list-style-type: lower-alpha; } }
|
||||
ul ul, ol ol { margin-left: 1.75em; }
|
||||
|
||||
li { margin-bottom: .5em; }
|
||||
|
||||
strong { font-weight: bold; }
|
||||
|
||||
em { font-style: italic; }
|
||||
|
||||
@ -1,26 +0,0 @@
|
||||
#articles + aside { display: none; }
|
||||
body > nav {
|
||||
.site-serch {
|
||||
width: 10em;
|
||||
.search { width: 100%; background-color: #f6f6f6; }
|
||||
}
|
||||
}
|
||||
|
||||
body > nav, body > footer, body > div > div {
|
||||
padding-left: .5em;
|
||||
padding-right: .5em;
|
||||
}
|
||||
body > * { font-size: .8em; }
|
||||
body > header {
|
||||
font-size: .5em;
|
||||
padding: .4em .5em;
|
||||
}
|
||||
header, #{headings()} { text-align: center; }
|
||||
.site-search {
|
||||
margin: .15em 0 0; padding: 0;
|
||||
.search {
|
||||
padding: .3em .8em 0;
|
||||
line-height: 1.5em;
|
||||
font-size: .85em;
|
||||
}
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
//body {
|
||||
//padding: 0 1em;
|
||||
//}
|
||||
//body > header {
|
||||
//font-size: 1em;
|
||||
//padding-top: .5em;
|
||||
//padding-bottom: .5em;
|
||||
//}
|
||||
@ -1,19 +0,0 @@
|
||||
//@include media-layout(1.2em, 20em, 1em);
|
||||
//body > * {
|
||||
//margin: 0 auto;
|
||||
//font-size: 1em;
|
||||
//}
|
||||
//body {
|
||||
//max-width: 1280px;
|
||||
//margin: 0 auto;
|
||||
//> header {
|
||||
//padding-top: 2em;
|
||||
//padding-bottom: 1em;
|
||||
//}
|
||||
//> nav {
|
||||
//border-left: 1px solid $header-border;
|
||||
//border-right: 1px solid $header-border;
|
||||
//@include border-top-radius(.6em);
|
||||
//}
|
||||
//}
|
||||
|
||||
@ -1,11 +1,18 @@
|
||||
$border: inline-image('dotted-border.png');
|
||||
#articles {
|
||||
@media only screen and (max-width: 992px) {
|
||||
ul, ol { margin-left: 1.4em; }
|
||||
}
|
||||
> article {
|
||||
padding-bottom: 1em;
|
||||
&:last-child { margin-bottom: 0; border-bottom: none; }
|
||||
h2 {
|
||||
padding-top: 0.8em;
|
||||
background: $border top left repeat-x;
|
||||
&:first-child {
|
||||
background: none;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
.byline + time:before, .byline + time +time:before {
|
||||
content: "\2022 ";
|
||||
@ -31,7 +38,6 @@ $border: inline-image('dotted-border.png');
|
||||
margin: 0;
|
||||
font-style: italic;
|
||||
@extend .sans;
|
||||
//font-family: "Georgia", Palatino, Times, "Times New Roman";
|
||||
}
|
||||
}
|
||||
.entry-content {
|
||||
@ -60,6 +66,10 @@ $border: inline-image('dotted-border.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
header.feature h1 {
|
||||
font-size: 2.0em; font-style: italic;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
#disqus_thread { }
|
||||
.meta {
|
||||
border-bottom: 1px dashed #dddddd;
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
body > footer {
|
||||
@extend .sans;
|
||||
font-size: .8em;
|
||||
color: $nav-color;
|
||||
color: $footer-color;
|
||||
text-shadow: lighten($footer-bg, 5) 0 1px;
|
||||
background-color: $footer-bg;
|
||||
@include background(linear-gradient(lighten($nav-bg, 8), $nav-bg, darken($nav-bg, 11)));
|
||||
border-top: 1px solid $footer-border;
|
||||
@include background(linear-gradient(lighten($footer-bg, 8), $footer-bg, darken($footer-bg, 11)));
|
||||
border-top: 1px solid $footer-border-top;
|
||||
position: relative;
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
@ -13,7 +13,7 @@ body > footer {
|
||||
@include border-bottom-radius(.4em);
|
||||
z-index: 1;
|
||||
a {
|
||||
@include link-colors($nav-color, $nav-color-hover);
|
||||
@include link-colors($footer-link-color, $footer-link-color-hover);
|
||||
}
|
||||
p:last-child { margin-bottom: 0; }
|
||||
}
|
||||
|
||||
@ -13,5 +13,6 @@ body > header {
|
||||
@extend .sans;
|
||||
font-size: 1em;
|
||||
color: $subtitle-color;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@ body {
|
||||
border: 0 0 1px 0 solid darken($page-bg, 5);
|
||||
> div {
|
||||
background-color: $sidebar-bg;
|
||||
border-bottom: 1px solid $nav-border-bottom;
|
||||
border-bottom: 1px solid $page-border-bottom;
|
||||
> div {
|
||||
background-color: $main-bg;
|
||||
border-right: 1px solid $sidebar-border;
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
.side-shadow-border {
|
||||
@include box-shadow(#fff 0 1px);
|
||||
@include box-shadow(lighten($sidebar-bg, 5) 0 1px);
|
||||
}
|
||||
#articles + aside {
|
||||
color: $sidebar-color;
|
||||
padding-top: 1.2em;
|
||||
text-shadow: lighten($sidebar-bg, 8) 0 1px;
|
||||
section {
|
||||
@extend .sans;
|
||||
font-size: .8em;
|
||||
line-height: 1.5em;
|
||||
line-height: 1.4em;
|
||||
margin-bottom: 1.5em;
|
||||
h1 {
|
||||
margin: 1.5em 0 0;
|
||||
@ -35,7 +37,9 @@
|
||||
color: inherit;
|
||||
@include transition(color, .5s);
|
||||
}
|
||||
&:hover a, &:hover #tweets a { color: $link-color; }
|
||||
&:hover a, &:hover #tweets a { color: $sidebar-link-color;
|
||||
&:hover { color: $sidebar-link-color-hover; }
|
||||
}
|
||||
#recent_posts {
|
||||
time {
|
||||
text-transform: uppercase;
|
||||
@ -48,8 +52,8 @@
|
||||
@import "delicious";
|
||||
}
|
||||
.aside-alt-link {
|
||||
color: #999;
|
||||
color: $sidebar-link-color-subdued;
|
||||
&:hover {
|
||||
color: #555;
|
||||
color: $sidebar-link-color-subdued-hover;
|
||||
}
|
||||
}
|
||||
|
||||
@ -26,15 +26,16 @@ $green: #859900;
|
||||
//$base3: $base03;
|
||||
|
||||
.highlight, html .gist .gist-file .gist-syntax .gist-highlight {
|
||||
pre.line-numbers {
|
||||
.line-numbers {
|
||||
text-align: right;
|
||||
font-size: .8em;
|
||||
line-height: 1.45em;
|
||||
background: $base02 !important;
|
||||
border-right: 1px solid darken($base03, 2) !important;
|
||||
@include box-shadow(lighten($base02, 2) -1px 0 inset);
|
||||
text-shadow: darken($base02, 10) 0 -1px;
|
||||
span { color: $base01 !important; }
|
||||
padding-left: .8em !important;
|
||||
padding-right: .8em !important;
|
||||
padding: .8em !important;
|
||||
}
|
||||
}
|
||||
html .gist .gist-file {
|
||||
@ -47,10 +48,7 @@ html .gist .gist-file {
|
||||
.gist-highlight{
|
||||
background: $base03 !important;
|
||||
pre {
|
||||
@extend .pre;
|
||||
}
|
||||
pre.line-numbers {
|
||||
|
||||
@extend .pre-code;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -79,19 +77,39 @@ html .gist .gist-file {
|
||||
}
|
||||
}
|
||||
}
|
||||
pre { @extend .pre; }
|
||||
|
||||
.pre {
|
||||
pre {
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
@include border-radius(.4em);
|
||||
@extend .mono;
|
||||
@include selection(adjust-color($base03, $lightness: 23%, $saturation: -65%), $text-shadow: $base03 0 1px);
|
||||
line-height: 1.45em;
|
||||
font-size: .8em;
|
||||
margin-bottom: 1.5em;
|
||||
padding: .4em .8em;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
p code {
|
||||
@extend .mono;
|
||||
display: inline-block;
|
||||
white-space: no-wrap;
|
||||
background: #fff;
|
||||
font-size: .9em;
|
||||
color: #555;
|
||||
border: 1px solid #ddd;
|
||||
@include border-radius(.4em);
|
||||
padding: 0 .3em;
|
||||
}
|
||||
|
||||
.pre-code {
|
||||
@include selection(adjust-color($base03, $lightness: 23%, $saturation: -65%), $text-shadow: $base03 0 1px);
|
||||
overflow: scroll;
|
||||
overflow-y: hidden;
|
||||
display: block;
|
||||
padding: .8em !important;
|
||||
overflow-x: auto;
|
||||
line-height: 1.45em;
|
||||
padding: 1em 1.2em !important;
|
||||
background: $base03 !important;
|
||||
code { background: $base03 !important; overflow: hidden; }
|
||||
color: $base1 !important;
|
||||
span { color: $base1 !important; }
|
||||
span { font-style: normal !important; font-weight: normal !important; }
|
||||
@ -162,12 +180,13 @@ pre { @extend .pre; }
|
||||
}
|
||||
|
||||
.highlight, .gist-highlight {
|
||||
pre { background: none; @include border-radius(none); border: none; padding: 0; margin-bottom: 0; }
|
||||
margin-bottom: 1.5em;
|
||||
background: $base03;
|
||||
overflow-y: hidden;
|
||||
overflow-x: auto;
|
||||
pre { overflow: visible; }
|
||||
}
|
||||
.highlight code { @extend .pre-code; background: #000;}
|
||||
figure {
|
||||
margin-bottom: 1.5em;
|
||||
figcaption {
|
||||
@ -201,7 +220,6 @@ h3.filename { @extend .code-title; }
|
||||
position: absolute; right: .8em;
|
||||
@include hover-link;
|
||||
color: #666 !important;
|
||||
&:hover { color: $link-color !important; }
|
||||
z-index: 1;
|
||||
font-size: 13px;
|
||||
text-shadow: #cbcccc 0 1px 0;
|
||||
|
||||
@ -9,13 +9,13 @@
|
||||
background: inline-image('bird_32_gray_fail.png') no-repeat center .5em;
|
||||
}
|
||||
}
|
||||
a { color: #666; @include hover-link; }
|
||||
a { color: $sidebar-link-color-subdued; @include hover-link; }
|
||||
p {
|
||||
position: relative;
|
||||
padding-right: 1em;
|
||||
}
|
||||
a[href*='status']{
|
||||
color: #aaa;
|
||||
a[href*=status]{
|
||||
color: $twitter-status-link;
|
||||
float: right;
|
||||
padding: 0 0 .1em 1em;
|
||||
position: relative; right: -1.3em;
|
||||
@ -23,7 +23,7 @@
|
||||
font-size: .7em;
|
||||
span { font-size: 1.5em; }
|
||||
&:hover {
|
||||
color: #555;
|
||||
color: $sidebar-link-color-subdued-hover;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user