diff options
Diffstat (limited to 'sass/themes/classic')
| -rw-r--r-- | sass/themes/classic/_partials.scss | 5 | ||||
| -rw-r--r-- | sass/themes/classic/core/_layout.scss | 2 | ||||
| -rw-r--r-- | sass/themes/classic/core/_theme.scss | 67 | ||||
| -rw-r--r-- | sass/themes/classic/core/_typography.scss | 11 | ||||
| -rw-r--r-- | sass/themes/classic/partials/_pinboard.scss | 15 | ||||
| -rw-r--r-- | sass/themes/classic/partials/_shared.scss | 12 | ||||
| -rw-r--r-- | sass/themes/classic/partials/_sidebar.scss | 36 | ||||
| -rw-r--r-- | sass/themes/classic/partials/_syntax.scss | 432 | ||||
| -rw-r--r-- | sass/themes/classic/partials/_twitter.scss | 60 |
9 files changed, 299 insertions, 341 deletions
diff --git a/sass/themes/classic/_partials.scss b/sass/themes/classic/_partials.scss index e1e72490..4ca98c0f 100644 --- a/sass/themes/classic/_partials.scss +++ b/sass/themes/classic/_partials.scss @@ -1,8 +1,5 @@ //@import "partials/shared"; -//@import "partials/syntax"; //@import "partials/search"; -//@import "partials/sidebar"; -//@import "partials/twitter"; /* layout partials */ @import "partials/header"; @@ -11,3 +8,5 @@ @import "partials/sidebar"; @import "partials/blog"; @import "partials/footer"; + +@import "partials/syntax"; diff --git a/sass/themes/classic/core/_layout.scss b/sass/themes/classic/core/_layout.scss index b245fd1f..3c9bbc45 100644 --- a/sass/themes/classic/core/_layout.scss +++ b/sass/themes/classic/core/_layout.scss @@ -67,7 +67,7 @@ body { float: left; width: $sidebar-width - $sidebar-pad*2; margin: 0 -100% 0 0; - padding: $sidebar-pad; + padding: 0 $sidebar-pad $sidebar-pad; } } } diff --git a/sass/themes/classic/core/_theme.scss b/sass/themes/classic/core/_theme.scss index a69b11d7..b9e67a27 100644 --- a/sass/themes/classic/core/_theme.scss +++ b/sass/themes/classic/core/_theme.scss @@ -1,45 +1,44 @@ // Link Colors -$link_color: lighten(#165b94, 0.3); +$link-color: lighten(#165b94, 3); +$link-color-hover: darken(#165b94, 5); // Main Section Colors -$body_color: #333333; -$light_text: #999999; -$body_bg: #323232; +$body-color: #333333; +$light-text: #999999; +$body-bg: #323232; -$header_bg: #323232; -$header_border: #181818; -$title_color: #dddddd; +$header-bg: #323232; +$header-border: #181818; +$title-color: #dddddd; -$nav_color: #555555; -$nav_color_hover: black; -$nav_bg: #e8e8e8; -$nav_border_top: white; -$nav_border_bottom: #aaaaaa; -$nav_border_left: #cccccc; -$nav_border_right: white; +$nav-color: #555555; +$nav-color_hover: black; +$nav-bg: #e8e8e8; +$nav-border_top: white; +$nav-border_bottom: #aaaaaa; +$nav-border_left: #cccccc; +$nav-border_right: white; -$sidebar_bg: #f2f2f2; -$sidebar_border: #d5d5d5; +$sidebar-bg: #f2f2f2; +$sidebar-border: #d5d5d5; // Blog -$article_border: #eeeeee; -$main_bg: #fff; +$article-border: #eeeeee; +$main-bg: #fff; -$footer_color: #999999; -$footer_bg: #444444; +$footer-color: #999999; +$footer-bg: #444444; // Form Colors -$fieldset_bg: #ececec; -$fieldset_border: #c3c3c3; - -$textinput_color: #333333; -$textinput_bg: #f4f4f4; -$textinput_bg_focus: #fefeee; - -$textinput_border_top: #aaaaaa; -$textinput_border_bottom: #c6c6c6; -$textinput_border_left: #c3c3c3; -$textinput_border_right: #c3c3c3; -$textinput_border_focus: #989898; - -$twitter_topic: #888888; +$fieldset-bg: #ececec; +$fieldset-border: #c3c3c3; + +$textinput-color: #333333; +$textinput-bg: #f4f4f4; +$textinput-bg-focus: #fefeee; + +$textinput-border-top: #aaaaaa; +$textinput-border-bottom: #c6c6c6; +$textinput-border-left: #c3c3c3; +$textinput-border-right: #c3c3c3; +$textinput-border-focus: #989898; diff --git a/sass/themes/classic/core/_typography.scss b/sass/themes/classic/core/_typography.scss index 5916c82e..61693c7f 100644 --- a/sass/themes/classic/core/_typography.scss +++ b/sass/themes/classic/core/_typography.scss @@ -2,16 +2,17 @@ $type-border: #ddd; $type-color-light: #555; $type-color: #000; $blockquote: $type-border !default; //darken($type-border, 20) !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 { font-family: Adelle, "Helvetica Neue", Helvetica, Arial, sans; } -.sans-font { font-family: "Helvetica Neue", Helvetica, Arial, sans; } +.heading { font-family: Adelle, "Helvetica Neue", Arial, sans-serif; } +.sans { font-family: "Helvetica Neue", Arial, sans-serif; } +.mono { font-family: $mono; } body > header h1 { font-size: 3em; - @extend .heading-font; + @extend .heading; line-height: 1.2em; margin-bottom: 0.6667em; } @@ -54,7 +55,7 @@ article { } #{headings()}{ - @extend .heading-font; font-weight: normal; + @extend .heading; font-weight: normal; line-height: 1em; text-rendering: optimizelegibility; } diff --git a/sass/themes/classic/partials/_pinboard.scss b/sass/themes/classic/partials/_pinboard.scss new file mode 100644 index 00000000..60fd1ee6 --- /dev/null +++ b/sass/themes/classic/partials/_pinboard.scss @@ -0,0 +1,15 @@ +#pinboard_linkroll { + .pin-title, .pin-description { + display: block; + margin-bottom: .5em; + } + .pin-tag { + @extend .aside-alt-link; + &:after { + content: ','; + } + &:last-child:after { + content: ''; + } + } +} diff --git a/sass/themes/classic/partials/_shared.scss b/sass/themes/classic/partials/_shared.scss deleted file mode 100644 index a97b6051..00000000 --- a/sass/themes/classic/partials/_shared.scss +++ /dev/null @@ -1,12 +0,0 @@ -#collapser { - display: block; - cursor: pointer; - background: #f8f8f8; - color: #888888; - padding: 5px 10px; - font-size: 10px; - line-height: 150%; - cursor: pointer; - position: absolute; - top: 0; - right: 0; } diff --git a/sass/themes/classic/partials/_sidebar.scss b/sass/themes/classic/partials/_sidebar.scss index faab4152..ecad7a7a 100644 --- a/sass/themes/classic/partials/_sidebar.scss +++ b/sass/themes/classic/partials/_sidebar.scss @@ -1,9 +1,21 @@ +.side-shadow-border { + @include box-shadow(#fff 0 1px); +} #articles + aside { section { - @extend .sans-font; + @extend .sans; font-size: .8em; line-height: 1.5em; margin-bottom: 1.5em; + h1 { + margin: 1.5em 0 0; + padding-bottom: .2em; + border-bottom: 1px solid #ddd; + @extend .side-shadow-border; + + p { + padding-top: .4em; + } + } } ul { margin-bottom: 0.5em; @@ -13,8 +25,30 @@ padding: .5em 0; margin: 0; border-bottom: 1px solid #ddd; + @extend .side-shadow-border; p:last-child { margin-bottom: 0; } } + a { + color: inherit; + @include transition(color, .5s); + } + &:hover a, &:hover #tweets a { color: $link-color; } + @import "twitter"; + @import "pinboard"; + #recent_posts { + time { + text-transform: uppercase; + font-size: .9em; + color: #666; + } + } +} +.aside-alt-link { + color: #999; + text-decoration: none; + &:hover { + color: #555; + } } diff --git a/sass/themes/classic/partials/_syntax.scss b/sass/themes/classic/partials/_syntax.scss index b06a5a10..5797c28f 100644 --- a/sass/themes/classic/partials/_syntax.scss +++ b/sass/themes/classic/partials/_syntax.scss @@ -1,279 +1,167 @@ -.code_window { - @include border-top-radius(5px); - @include border-bottom-radius(2px); - background: #aaaaaa image-url("code_bg.png") top repeat-x; - position: relative; - margin: 0.3em 0 1.3em; - padding: 0 3px 3px; - font-size: 14px; - border: 1px solid #898989; - border-top-color: #cbcbcb; - border-left-color: #a5a5a5; - border-right-color: #a5a5a5; - em { - text-align: center; - text-shadow: #cccccc 1px 1px 1px; - display: block; - padding: 1px 0; - color: #333333; - font-style: normal; } - .highlight { - margin: 0; } } +$base03: #002b36; //darkest blue +$base02: #073642; //dark blue +$base01: #586e75; //darkest gray +$base00: #657b83; //dark gray +$base0: #839496; //medium gray +$base1: #93a1a1; //medium light gray +$base2: #eee8d5; //cream +$base3: #fdf6e3; //white +$yellow: #b58900; +$orange: #cb4b16; +$red: #dc322f; +$magenta: #d33682; +$violet: #6c71c4; +$blue: #268bd2; +$cyan: #2aa198; +$green: #859900; -pre { - color: #cccccc; - font-size: 13px; - background: #222222; - line-height: 1.5em; - border: #aaaaaa 1px solid; - overflow-x: auto; - overflow-y: hidden; - padding: 25px 20px; - .lineno { - color: #888888; - background: #e3e3e3; - display: inline-block; - padding: 0 0 0 10px; - &:first-child { - padding-top: 15px; - display: inline-block; } } } +// If you prefer light colors, uncomment the following block to change themes +//$base03: $base3; +//$base02: $base2; +//$base01: $base1; +//$base00: $base0; +//$base0: $base00; +//$base1: $base01; +//$base2: $base02; +//$base3: $base03; -.highlight { - position: relative; - .pre_expander { - font-size: 10px; +.gutter { + .line-numbers { text-align: right; - padding: 4px 8px; - line-height: 150%; - position: absolute; - cursor: pointer; - top: 2px; - right: 2px; - @include border-bottom-left-radius; - display: block; - color: #777777; - background: #333333; - &:hover { - background: #444444; - color: #cccccc; } } } + background: $base02 !important; + border-right: 1px solid darken($base03, 2); + @include box-shadow(lighten($base02, 2) -1px 0 inset); + text-shadow: darken($base02, 10) 0 -1px; + span { color: $base01 !important; } + } +} +html .gist .gist-file { + margin-bottom: 1.5em; + border: none; + .gist-syntax { + border-bottom: 1px solid #515151 !important; + .gist-highlight{ + background: $base03 !important; + pre { + @extend .pre; + overflow-y: hidden; + overflow-x: auto; + } + } + } + .gist-meta { + @include background(linear-gradient(#b0b0b0, #a7a7a7)); + padding: 0.5em; + background-color: #bababa !important; + border: 1px solid #9c9c9c; + border-top: 1px solid #d0d0d0; + border-bottom: 1px solid #777777; + font-size: .7em !important; + font-family: "Helvetica Neue", Arial, sans-serif !important; + color: #464646 !important; + line-height: 1.4em; + } +} +pre { @extend .pre; } -// based on: http://github.com/mojombo/tpw/raw/master/css/syntax.css -.editor { - background: rgb(0, 22, 41); - line-height: 1.25; } +.pre { + @extend .mono; + font-size: .8em; + line-height: 1.45em; + padding: 1em 1.2em !important; + background: $base03 !important; + color: $base1 !important; + span { color: $base1 !important; } + span { font-style: normal !important; font-weight: normal !important; } -pre.console { - background-color: black; - color: lighten(green, 25); - letter-spacing: 1px; - padding: 0.5em; - .prompt { - color: lighten(navy, 50); - &:before { - color: white; - content: "["; } - &:after { - color: white; - content: "]"; } } - .stdin { - font-weight: bold; - color: lighten(green, 75); } } + .c { color: $base01 !important; font-style: italic !important; } /* Comment */ + .cm { color: $base01 !important; font-style: italic !important; } /* Comment.Multiline */ + .cp { color: $base01 !important; font-style: italic !important; } /* Comment.Preproc */ + .c1 { color: $base01 !important; font-style: italic !important; } /* Comment.Single */ + .cs { color: $base01 !important; font-weight: bold !important; font-style: italic !important; } /* Comment.Special */ + .err { color: $red !important; background: none !important; } /* Error */ + .k { color: $orange !important; } /* Keyword */ + .o { color: $base1 !important; font-weight: bold !important; } /* Operator */ + .p { color: $base1 !important; } /* Operator */ + .ow { color: $cyan !important; font-weight: bold !important; } /* Operator.Word */ + .gd { color: $base1 !important; background-color: mix($red, $base03, 25%) !important; display: block; } /* Generic.Deleted */ + .gd .x { color: $base1 !important; background-color: mix($red, $base03, 35%) !important; display: block; } /* Generic.Deleted.Specific */ + .ge { color: $base1 !important; font-style: italic !important; } /* Generic.Emph */ + //.gr { color: #aa0000 } /* Generic.Error */ + .gh { color: $base01 !important; } /* Generic.Heading */ + .gi { color: $base1 !important; background-color: mix($green, $base03, 20%) !important; display: block; } /* Generic.Inserted */ + .gi .x { color: $base1 !important; background-color: mix($green, $base03, 40%) !important; display: block; } /* Generic.Inserted.Specific */ + //.go { color: #888888 } /* Generic.Output */ + //.gp { color: #555555 } /* Generic.Prompt */ + .gs { color: $base1 !important; font-weight: bold !important; } /* Generic.Strong */ + .gu { color: $violet !important; } /* Generic.Subheading */ + //.gt { color: #aa0000 } /* Generic.Traceback */ + .kc { color: $green !important; font-weight: bold !important; } /* Keyword.Constant */ + .kd { color: $blue !important; } /* Keyword.Declaration */ + .kp { color: $orange !important; font-weight: bold !important; } /* Keyword.Pseudo */ + .kr { color: $magenta !important; font-weight: bold !important; } /* Keyword.Reserved */ + .kt { color: $cyan !important; } /* Keyword.Type */ + .n { color: $blue !important; } + .na { color: $blue !important; } /* Name.Attribute */ + .nb { color: $green !important; } /* Name.Builtin */ + //.nc { color: #445588; font-weight: bold } /* Name.Class */ + .no { color: $yellow !important; } /* Name.Constant */ + //.ni { color: #800080 } /* Name.Entity */ + .ne { color: $blue !important; font-weight: bold !important; } /* Name.Exception */ + .nf { color: $blue !important; font-weight: bold !important; } /* Name.Function */ + .nn { color: $yellow !important; } /* Name.Namespace */ + .nt { color: $blue !important; font-weight: bold !important; } /* Name.Tag */ + .nx { color: $yellow !Important; } + //.bp { color: #999999 } /* Name.Builtin.Pseudo */ + //.vc { color: #008080 } /* Name.Variable.Class */ + .vg { color: $blue !important; } /* Name.Variable.Global */ + .vi { color: $blue !important; } /* Name.Variable.Instance */ + .nv { color: $blue !important; } /* Name.Variable */ + //.w { color: #bbbbbb } /* Text.Whitespace */ + .mf { color: $cyan !important; } /* Literal.Number.Float */ + .m { color: $cyan !important; } /* Literal.Number */ + .mh { color: $cyan !important; } /* Literal.Number.Hex */ + .mi { color: $cyan !important; } /* Literal.Number.Integer */ + //.mo { color: #009999 } /* Literal.Number.Oct */ + .s { color: $cyan !important; } /* Literal.String */ + //.sb { color: #d14 } /* Literal.String.Backtick */ + //.sc { color: #d14 } /* Literal.String.Char */ + .sd { color: $cyan !important; } /* Literal.String.Doc */ + .s2 { color: $cyan !important; } /* Literal.String.Double */ + .se { color: $red !important; } /* Literal.String.Escape */ + //.sh { color: #d14 } /* Literal.String.Heredoc */ + .si { color: $blue !important; } /* Literal.String.Interpol */ + //.sx { color: #d14 } /* Literal.String.Other */ + .sr { color: $cyan !important; } /* Literal.String.Regex */ + .s1 { color: $cyan !important; } /* Literal.String.Single */ + //.ss { color: #990073 } /* Literal.String.Symbol */ + //.il { color: #009999 } /* Literal.Number.Integer.Long */ +} .highlight { - padding: 0 0 0.1em; - color: white; - // Comment - .c { - color: #999988; - font-style: italic; } - // Error - .err { - color: #a61717; - background-color: #e3d2d2; } - // Name - .n { - color: white; } - // Keyword - .k { - color: rgb(255, 157, 0); } - // Paren - .p { - color: darken(#ff9d00, 33); } - // Operator - .o { - color: rgb(255, 157, 0); } - // Comment.Multiline - .cm { - color: #999988; - font-style: italic; } - // Comment.Preproc - .cp { - color: #999999; } - // Comment.Single - .c1 { - color: #999988; - font-style: italic; } - // Comment.Special - .cs { - color: #999999; - font-style: italic; } - // Generic.Deleted - .gd { - color: black; - background-color: #ffdddd; } - // Generic.Deleted.Specific - .gd .x { - color: black; - background-color: #ffaaaa; } - // Generic.Emph - .ge { - font-style: italic; } - // Generic.Error - .gr { - color: #aa0000; } - // Generic.Heading - .gh { - color: #999999; } - // Generic.Inserted - .gi { - color: black; - background-color: #ddffdd; } - // Generic.Inserted.Specific - .gi .x { - color: black; - background-color: #aaffaa; } - // Generic.Output - .go { - color: #888888; } - // Generic.Prompt - .gp { - color: #555555; } - // Generic.Strong - .gs { - color: white; } - // Generic.Subheading - .gu { - color: #aaaaaa; } - // Generic.Traceback - .gt { - color: #aa0000; } - // Keyword.Constant - .kc { - color: white; } - // Keyword.Declaration - .kd { - color: white; } - // Keyword.Pseudo - .kp { - color: white; } - // Keyword.Reserved - .kr { - color: white; } - // Keyword.Type - .kt { - color: #445588; } - // Literal.Number - .m { - color: rgb(255, 98, 140); } - // Literal.String - .s { - color: #dd1144; } - // Name.Attribute - .na { - color: teal; } - // Name.Builtin - .nb { - color: darken(rgb(128, 255, 187), 20); } - // Name.Class - .nc { - color: darken(rgb(128, 255, 187), 20); } - // Name.Constant - .no { - color: rgb(128, 255, 187); } - // Name.Entity - .ni { - color: purple; } - // Name.Exception - .ne { - color: rgb(255, 221, 0); } - // Name.Function - .nf { - color: rgb(255, 221, 0); } - // Name.Namespace - .nn { - color: #555555; } - // Name.Tag - .nt { - color: white; } - // Name.Variable - .nv { - color: teal; } - // Operator.Word - .ow { - color: white; } - // Text.Whitespace - .w { - color: #bbbbbb; } - // Literal.Number - .nl { - color: rgb(255, 98, 140); } - // Literal.Number.Float - .mf { - color: rgb(255, 98, 140); } - // Literal.Number.Hex - .mh { - color: rgb(255, 98, 140); } - // Literal.Number.Integer - .mi { - color: rgb(255, 98, 140); } - // Literal.Number.Oct - .mo { - color: rgb(255, 98, 140); } - // Literal.String.Backtick - .sb { - color: rgb(58, 217, 0); } - // Literal.String.Char - .sc { - color: rgb(58, 217, 0); } - // Literal.String.Doc - .sd { - color: rgb(58, 217, 0); } - // Literal.String.Double - .s2 { - color: rgb(58, 217, 0); } - // Literal.String.Escape - .se { - color: rgb(58, 217, 0); } - // Literal.String.Heredoc - .sh { - color: rgb(58, 217, 0); } - // Literal.String.Interpol - .si { - color: rgb(158, 255, 128); } - // Literal.String.Other - .sx { - color: rgb(58, 217, 0); } - // Literal.String.Regex - .sr { - color: #009926; } - // Literal.String.Single - .s1 { - color: rgb(58, 217, 0); } - // Literal.String.Symbol - .ss { - color: rgb(255, 98, 140); } - // Name.Builtin.Pseudo - .bp { - color: #999999; } - // Name.Variable.Class - .vc { - color: teal; } - // Name.Variable.Global - .vg { - color: teal; } - // Name.Variable.Instance - .vi { - color: teal; } - // Literal.Number.Integer.Long - .il { - color: rgb(255, 98, 140); } } + margin-bottom: 1.5em; + overflow-y: hidden; + .gutter pre { + padding-left: .8em !important; + padding-right: .8em !important; + } +} + +h3.filename { + font-size: 13px; + line-height: 2em; + text-align: center; + text-shadow: #cbcccc 0 1px 0; + color: #474747; + font-style: normal; + margin-bottom: 0; + + @include border-top-radius(5px); + font-family: "Helvetica Neue",Arial, "Lucida Grande", "Lucida Sans Unicode", Lucida, sans-serif; + background: #aaaaaa image-url("code_bg.png") top repeat-x; + border: 1px solid #565656; + border-top-color: #cbcbcb; + border-left-color: #a5a5a5; + border-right-color: #a5a5a5; + border-bottom: 0; +} diff --git a/sass/themes/classic/partials/_twitter.scss b/sass/themes/classic/partials/_twitter.scss index 5d8b7d97..eabe3477 100644 --- a/sass/themes/classic/partials/_twitter.scss +++ b/sass/themes/classic/partials/_twitter.scss @@ -1,15 +1,49 @@ -#twitter { +#tweets { + a { + color: #666; + text-decoration: none; + &:hover { text-decoration: underline; } + } + li:hover a[href*='status']{ + color: #666; + } p { - padding-bottom: 10px; - a.topic { - color: $twitter_topic; } } - .meta { - color: $light_text; - font-size: 80%; - display: block; - padding: 8px 0 0; - a { - color: inherit; + position: relative; + padding-right: 1.4em; + } + a[href*='status']{ + color: #ccc; + position: absolute; + top: 0; + right: -.5em; + text-decoration: none; + padding: 0 .5em .1em; + text-shadow: #fff 0 1px; + span:last-child { + display: none; + font-size: .7em; + } + span:first-child { + font-size: 1.1em; + } + &:hover { + span:first-child{ display: none; } + span:last-child{ display: inline-block; } + background: #e5e5e5; + @include box-shadow($sidebar-bg -2px 2px 8px 8px); + @include border-radius(1em); text-decoration: none; - &:hover { - text-decoration: underline; } } } } + line-height: 1.2em; + span:last-child { + color: #444; + //text-shadow: #eee 0 1px; + } + } + } + a[href*='twitter.com/search']{ + @extend .aside-alt-link; + &:hover { + text-decoration: underline; + } + } +} |