aboutsummaryrefslogtreecommitdiff
path: root/themes/classic/sass
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--themes/classic/sass/default/core/_layout.scss8
-rw-r--r--themes/classic/sass/default/core/_theme.scss44
-rw-r--r--themes/classic/sass/default/core/_typography.scss14
-rw-r--r--themes/classic/sass/default/media/_480.scss26
-rw-r--r--themes/classic/sass/default/media/_768.scss8
-rw-r--r--themes/classic/sass/default/media/_992.scss19
-rw-r--r--themes/classic/sass/default/partials/_blog.scss12
-rw-r--r--themes/classic/sass/default/partials/_footer.scss8
-rw-r--r--themes/classic/sass/default/partials/_header.scss1
-rw-r--r--themes/classic/sass/default/partials/_page.scss2
-rw-r--r--themes/classic/sass/default/partials/_sidebar.scss14
-rw-r--r--themes/classic/sass/default/partials/_syntax.scss46
-rw-r--r--themes/classic/sass/default/partials/_twitter.scss8
13 files changed, 99 insertions, 111 deletions
diff --git a/themes/classic/sass/default/core/_layout.scss b/themes/classic/sass/default/core/_layout.scss
index 2fabd928..e1a271b2 100644
--- a/themes/classic/sass/default/core/_layout.scss
+++ b/themes/classic/sass/default/core/_layout.scss
@@ -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;
diff --git a/themes/classic/sass/default/core/_theme.scss b/themes/classic/sass/default/core/_theme.scss
index 6d73f2e0..6c82ae2a 100644
--- a/themes/classic/sass/default/core/_theme.scss
+++ b/themes/classic/sass/default/core/_theme.scss
@@ -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); }
diff --git a/themes/classic/sass/default/core/_typography.scss b/themes/classic/sass/default/core/_typography.scss
index 13103378..78abb6e4 100644
--- a/themes/classic/sass/default/core/_typography.scss
+++ b/themes/classic/sass/default/core/_typography.scss
@@ -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; }
diff --git a/themes/classic/sass/default/media/_480.scss b/themes/classic/sass/default/media/_480.scss
deleted file mode 100644
index fe1aa64d..00000000
--- a/themes/classic/sass/default/media/_480.scss
+++ /dev/null
@@ -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;
- }
-}
diff --git a/themes/classic/sass/default/media/_768.scss b/themes/classic/sass/default/media/_768.scss
deleted file mode 100644
index 67e7952d..00000000
--- a/themes/classic/sass/default/media/_768.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-//body {
- //padding: 0 1em;
-//}
-//body > header {
- //font-size: 1em;
- //padding-top: .5em;
- //padding-bottom: .5em;
-//}
diff --git a/themes/classic/sass/default/media/_992.scss b/themes/classic/sass/default/media/_992.scss
deleted file mode 100644
index bacd81d2..00000000
--- a/themes/classic/sass/default/media/_992.scss
+++ /dev/null
@@ -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);
- //}
-//}
-
diff --git a/themes/classic/sass/default/partials/_blog.scss b/themes/classic/sass/default/partials/_blog.scss
index 916e78c8..1f1a4a86 100644
--- a/themes/classic/sass/default/partials/_blog.scss
+++ b/themes/classic/sass/default/partials/_blog.scss
@@ -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;
diff --git a/themes/classic/sass/default/partials/_footer.scss b/themes/classic/sass/default/partials/_footer.scss
index a04b3df9..019bc2a4 100644
--- a/themes/classic/sass/default/partials/_footer.scss
+++ b/themes/classic/sass/default/partials/_footer.scss
@@ -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; }
}
diff --git a/themes/classic/sass/default/partials/_header.scss b/themes/classic/sass/default/partials/_header.scss
index 4cc92e4f..9cc4601f 100644
--- a/themes/classic/sass/default/partials/_header.scss
+++ b/themes/classic/sass/default/partials/_header.scss
@@ -13,5 +13,6 @@ body > header {
@extend .sans;
font-size: 1em;
color: $subtitle-color;
+ font-weight: normal;
}
}
diff --git a/themes/classic/sass/default/partials/_page.scss b/themes/classic/sass/default/partials/_page.scss
index cb0aa27a..8bda58e1 100644
--- a/themes/classic/sass/default/partials/_page.scss
+++ b/themes/classic/sass/default/partials/_page.scss
@@ -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;
diff --git a/themes/classic/sass/default/partials/_sidebar.scss b/themes/classic/sass/default/partials/_sidebar.scss
index 046068d1..8c38e2a6 100644
--- a/themes/classic/sass/default/partials/_sidebar.scss
+++ b/themes/classic/sass/default/partials/_sidebar.scss
@@ -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;
}
}
diff --git a/themes/classic/sass/default/partials/_syntax.scss b/themes/classic/sass/default/partials/_syntax.scss
index 2258ac46..b249559f 100644
--- a/themes/classic/sass/default/partials/_syntax.scss
+++ b/themes/classic/sass/default/partials/_syntax.scss
@@ -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 {
+ background: #fff;
+ border: 1px solid #ddd;
+ @include border-radius(.4em);
+ @extend .mono;
+ line-height: 1.45em;
+ font-size: .8em;
+ margin-bottom: 1.5em;
+ padding: .4em .8em;
+ color: #555;
+}
-.pre {
+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);
- font-size: .8em;
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;
diff --git a/themes/classic/sass/default/partials/_twitter.scss b/themes/classic/sass/default/partials/_twitter.scss
index de7a6930..36c6f62b 100644
--- a/themes/classic/sass/default/partials/_twitter.scss
+++ b/themes/classic/sass/default/partials/_twitter.scss
@@ -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;
}
}