Browse code
1. Reordered configs in Rakefile based on importance. 2. Refactored stylesheets to simplify dreictory trees.
Brandon Mathis authored on 22/06/2011 at 16:29:23Showing 37 changed files
- Rakefile
- themes/classic/sass/core/_layout.scss
- themes/classic/sass/core/_theme.scss
- themes/classic/sass/core/_typography.scss
- themes/classic/sass/core/_utilities.scss
- themes/classic/sass/custom/_colors.scss
- themes/classic/sass/custom/_styles.scss
- themes/classic/sass/default/_style.scss
- themes/classic/sass/default/core/_layout.scss
- themes/classic/sass/default/core/_theme.scss
- themes/classic/sass/default/core/_typography.scss
- themes/classic/sass/default/core/_utilities.scss
- themes/classic/sass/default/custom/_colors.scss
- themes/classic/sass/default/custom/_styles.scss
- themes/classic/sass/default/partials/_blog.scss
- themes/classic/sass/default/partials/_delicious.scss
- themes/classic/sass/default/partials/_footer.scss
- themes/classic/sass/default/partials/_header.scss
- themes/classic/sass/default/partials/_navigation.scss
- themes/classic/sass/default/partials/_page.scss
- themes/classic/sass/default/partials/_pinboard.scss
- themes/classic/sass/default/partials/_sidebar.scss
- themes/classic/sass/default/partials/_solarized.scss
- themes/classic/sass/default/partials/_syntax.scss
- themes/classic/sass/default/partials/_twitter.scss
- themes/classic/sass/partials/_blog.scss
- themes/classic/sass/partials/_delicious.scss
- themes/classic/sass/partials/_footer.scss
- themes/classic/sass/partials/_header.scss
- themes/classic/sass/partials/_navigation.scss
- themes/classic/sass/partials/_page.scss
- themes/classic/sass/partials/_pinboard.scss
- themes/classic/sass/partials/_sidebar.scss
- themes/classic/sass/partials/_solarized.scss
- themes/classic/sass/partials/_syntax.scss
- themes/classic/sass/partials/_twitter.scss
- themes/classic/sass/screen.scss
| ... | ... |
@@ -1,6 +1,13 @@ |
| 1 | 1 |
require "rubygems" |
| 2 | 2 |
require "bundler/setup" |
| 3 | 3 |
|
| 4 |
+## -- Rsync Deploy config -- ## |
|
| 5 |
+# Be sure your public key is listed in your server's ~/.ssh/authorized_keys file |
|
| 6 |
+ssh_user = "mathisweb@imathis.com" |
|
| 7 |
+document_root = "~/dev.octopress.org/" |
|
| 8 |
+ |
|
| 9 |
+## -- Misc Configs, you probably have no reason to changes these -- ## |
|
| 10 |
+ |
|
| 4 | 11 |
public_dir = "public" # compiled site directory |
| 5 | 12 |
source_dir = "source" # source file directory |
| 6 | 13 |
deploy_dir = "_deploy" # deploy directory (for Github pages deployment) |
| ... | ... |
@@ -8,10 +15,6 @@ stash_dir = "_stash" # directory to stash posts for speedy generation |
| 8 | 8 |
posts_dir = "_posts" # directory for blog files |
| 9 | 9 |
post_format = "markdown" # file format for new posts when using the post rake task |
| 10 | 10 |
|
| 11 |
-## -- Rsync Deploy config -- ## |
|
| 12 |
-# Be sure your public key is listed in your server's ~/.ssh/authorized_keys file |
|
| 13 |
-ssh_user = "mathisweb@imathis.com" |
|
| 14 |
-document_root = "~/dev.octopress.org/" |
|
| 15 | 11 |
|
| 16 | 12 |
desc "Initial setup for Octopress: copies the default theme into the path of Jekyll's generator. rake install defaults to rake install[classic] to install a different theme run rake install[some_theme_name]" |
| 17 | 13 |
task :install, :theme do |t, args| |
| 18 | 14 |
new file mode 100644 |
| ... | ... |
@@ -0,0 +1,131 @@ |
| 0 |
+$default-border-radius: 4px; |
|
| 1 |
+ |
|
| 2 |
+$pad-min: 18px; |
|
| 3 |
+$pad-narrow: 20px; |
|
| 4 |
+$pad-medium: 35px; |
|
| 5 |
+$pad-wide: 55px; |
|
| 6 |
+$sidebar-width-medium: 240px; |
|
| 7 |
+$sidebar-pad-medium: 15px; |
|
| 8 |
+$sidebar-pad-wide: 20px; |
|
| 9 |
+$sidebar-width-wide: 300px; |
|
| 10 |
+ |
|
| 11 |
+.group { @include pie-clearfix; }
|
|
| 12 |
+ |
|
| 13 |
+body {
|
|
| 14 |
+ -webkit-text-size-adjust: none; |
|
| 15 |
+ max-width: 1350px; |
|
| 16 |
+ position: relative; |
|
| 17 |
+ margin: 0 auto; |
|
| 18 |
+ > header, > nav, > footer, #articles > article {
|
|
| 19 |
+ @extend .group; |
|
| 20 |
+ padding-left: $pad-min; |
|
| 21 |
+ padding-right: $pad-min; |
|
| 22 |
+ @media only screen and (min-width: 480px) {
|
|
| 23 |
+ padding-left: $pad-narrow; |
|
| 24 |
+ padding-right: $pad-narrow; |
|
| 25 |
+ } |
|
| 26 |
+ @media only screen and (min-width: 768px) {
|
|
| 27 |
+ padding-left: $pad-medium; |
|
| 28 |
+ padding-right: $pad-medium; |
|
| 29 |
+ } |
|
| 30 |
+ @media only screen and (min-width: 992px) {
|
|
| 31 |
+ padding-left: $pad-wide; |
|
| 32 |
+ padding-right: $pad-wide; |
|
| 33 |
+ } |
|
| 34 |
+ } |
|
| 35 |
+ > header {
|
|
| 36 |
+ font-size: 1em; |
|
| 37 |
+ padding-top: 1.5em; |
|
| 38 |
+ padding-bottom: 1.5em; |
|
| 39 |
+ } |
|
| 40 |
+} |
|
| 41 |
+ |
|
| 42 |
+.toggle-sidebar { display: none; }
|
|
| 43 |
+#articles { width: 100%;
|
|
| 44 |
+ + aside {
|
|
| 45 |
+ float: none; |
|
| 46 |
+ padding: 0 $pad-min 1px; |
|
| 47 |
+ background-color: $sidebar-bg; |
|
| 48 |
+ border-top: 1px solid $sidebar-border; |
|
| 49 |
+ } |
|
| 50 |
+} |
|
| 51 |
+ |
|
| 52 |
+@media only screen and (min-width: 550px) {
|
|
| 53 |
+ body > header { font-size: 1em; }
|
|
| 54 |
+} |
|
| 55 |
+@media only screen and (min-width: 768px) {
|
|
| 56 |
+ body { -webkit-text-size-adjust: auto; }
|
|
| 57 |
+ body > header { font-size: 1.2em; }
|
|
| 58 |
+ body > nav {
|
|
| 59 |
+ + div {
|
|
| 60 |
+ @extend .group; |
|
| 61 |
+ padding: 0; |
|
| 62 |
+ margin: 0 auto; |
|
| 63 |
+ > div {
|
|
| 64 |
+ @extend .group; |
|
| 65 |
+ margin-right: $sidebar-width-medium; |
|
| 66 |
+ } |
|
| 67 |
+ } |
|
| 68 |
+ } |
|
| 69 |
+ #articles {
|
|
| 70 |
+ padding-top: $pad-medium/2; |
|
| 71 |
+ padding-bottom: $pad-medium/2; |
|
| 72 |
+ float: left; |
|
| 73 |
+ + aside {
|
|
| 74 |
+ width: $sidebar-width-medium - $sidebar-pad-medium*2; |
|
| 75 |
+ padding: 0 $sidebar-pad-medium $sidebar-pad-medium; |
|
| 76 |
+ background: none; |
|
| 77 |
+ float: left; |
|
| 78 |
+ margin: 0 -100% 0 0; |
|
| 79 |
+ } |
|
| 80 |
+ } |
|
| 81 |
+ body > div > div { position: relative; }
|
|
| 82 |
+ |
|
| 83 |
+ .collapse-sidebar {
|
|
| 84 |
+ > div > div { margin-right: 10px; }
|
|
| 85 |
+ #articles + aside {
|
|
| 86 |
+ display: none; |
|
| 87 |
+ } |
|
| 88 |
+ .toggle-sidebar {
|
|
| 89 |
+ right: -1px; |
|
| 90 |
+ background-color: $sidebar-bg; |
|
| 91 |
+ border-right-width: 0; |
|
| 92 |
+ text-indent: 2px; |
|
| 93 |
+ border-left: 1px solid $sidebar-border; |
|
| 94 |
+ @include border-bottom-right-radius(0); |
|
| 95 |
+ @include border-bottom-left-radius(.3em); |
|
| 96 |
+ @include link-colors(#aaa, #888); |
|
| 97 |
+ } |
|
| 98 |
+ } |
|
| 99 |
+ |
|
| 100 |
+ .toggle-sidebar {
|
|
| 101 |
+ outline: none; |
|
| 102 |
+ position: absolute; right: -21px; top: 0; |
|
| 103 |
+ width: 20px; |
|
| 104 |
+ font-size: 1.2em; |
|
| 105 |
+ line-height: 1.1em; |
|
| 106 |
+ padding-bottom: .1em; |
|
| 107 |
+ text-indent: -1px; |
|
| 108 |
+ text-decoration: none; |
|
| 109 |
+ @include link-colors(#ccc, #999); |
|
| 110 |
+ @include border-bottom-right-radius(.3em); |
|
| 111 |
+ text-align: center; |
|
| 112 |
+ background: $main-bg; |
|
| 113 |
+ border-bottom: 1px solid $sidebar-border; |
|
| 114 |
+ border-right: 1px solid $sidebar-border; |
|
| 115 |
+ display: inline-block; |
|
| 116 |
+ } |
|
| 117 |
+} |
|
| 118 |
+ |
|
| 119 |
+@media only screen and (min-width: 992px) {
|
|
| 120 |
+ body > header { font-size: 1.3em; }
|
|
| 121 |
+ body > nav + div > div { margin-right: $sidebar-width-wide; }
|
|
| 122 |
+ #articles {
|
|
| 123 |
+ padding-top: $pad-wide/2; |
|
| 124 |
+ padding-bottom: $pad-wide/2; |
|
| 125 |
+ + aside {
|
|
| 126 |
+ width: $sidebar-width-wide - $sidebar-pad-wide*2; |
|
| 127 |
+ padding: 1.2em $sidebar-pad-wide $sidebar-pad-wide; |
|
| 128 |
+ } |
|
| 129 |
+ } |
|
| 130 |
+} |
| 0 | 131 |
new file mode 100644 |
| ... | ... |
@@ -0,0 +1,71 @@ |
| 0 |
+// Main Link Colors |
|
| 1 |
+$link-color: lighten(#165b94, 3) !default; |
|
| 2 |
+$link-color-hover: adjust-hue($link-color, -200) !default; |
|
| 3 |
+$link-color-visited: darken(adjust_hue($link_color, 70), 10) !default; |
|
| 4 |
+$link-color-active: darken($link-color-hover, 15) !default; |
|
| 5 |
+ |
|
| 6 |
+// Main Section Colors |
|
| 7 |
+$page-bg: #252525 !default; |
|
| 8 |
+$article-border: #eeeeee !default; |
|
| 9 |
+$main-bg: #f5f5f5 !default; |
|
| 10 |
+ |
|
| 11 |
+$header-bg: #333 !default; |
|
| 12 |
+$header-border: lighten($header-bg, 15) !default; |
|
| 13 |
+$title-color: #f2f2f2 !default; |
|
| 14 |
+$subtitle-color: #aaa !default; |
|
| 15 |
+ |
|
| 16 |
+$text-color: #222 !default; |
|
| 17 |
+$text-color-light: #aaa !default; |
|
| 18 |
+$type-border: #ddd !default; |
|
| 19 |
+ |
|
| 20 |
+ |
|
| 21 |
+/* Navigation */ |
|
| 22 |
+$nav-bg: #ccc !default; |
|
| 23 |
+$nav-color: darken($nav-bg, 38) !default; |
|
| 24 |
+$nav-color-hover: darken($nav-color, 25) !default; |
|
| 25 |
+$nav-placeholder: desaturate(darken($nav-bg, 10), 15) !default; |
|
| 26 |
+$nav-border: darken($nav-bg, 10) !default; |
|
| 27 |
+$nav-border-top: lighten($nav-bg, 15) !default; |
|
| 28 |
+$nav-border-bottom: darken($nav-bg, 25) !default; |
|
| 29 |
+$nav-border-left: darken($nav-bg, 11) !default; |
|
| 30 |
+$nav-border-right: lighten($nav-bg, 7) !default; |
|
| 31 |
+ |
|
| 32 |
+/* Sidebar colors */ |
|
| 33 |
+$sidebar-bg: #eee !default; |
|
| 34 |
+$sidebar-link-color: $link-color !default; |
|
| 35 |
+$sidebar-link-color-hover: $link-color-hover !default; |
|
| 36 |
+$sidebar-color: change-color(mix($text-color, $sidebar-bg, 80), $hue: hue($sidebar-bg), $saturation: saturation($sidebar-bg)/2) !default; |
|
| 37 |
+$sidebar-border: desaturate(darken($sidebar-bg, 7), 10) !default; |
|
| 38 |
+$sidebar-border: darken($sidebar-bg, 7) !default; |
|
| 39 |
+$sidebar-link-color-subdued: lighten($sidebar-color, 20) !default; |
|
| 40 |
+$sidebar-link-color-subdued-hover: $sidebar-link-color-hover !default; |
|
| 41 |
+$twitter-status-link: lighten($sidebar-link-color-subdued, 15) !default; |
|
| 42 |
+ |
|
| 43 |
+$footer-color: #999999 !default; |
|
| 44 |
+$footer-bg: #ccc !default; |
|
| 45 |
+$footer-color: darken($footer-bg, 38) !default; |
|
| 46 |
+$footer-color-hover: darken($footer-color, 10) !default; |
|
| 47 |
+$footer-border-top: lighten($footer-bg, 15) !default; |
|
| 48 |
+$footer-border-bottom: darken($footer-bg, 15) !default; |
|
| 49 |
+$footer-link-color: darken($footer-bg, 38) !default; |
|
| 50 |
+$footer-link-color-hover: darken($footer-color, 25) !default; |
|
| 51 |
+$page-border-bottom: darken($footer-bg, 5) !default; |
|
| 52 |
+ |
|
| 53 |
+// Form Colors |
|
| 54 |
+$fieldset-bg: #ececec; |
|
| 55 |
+$fieldset-border: #c3c3c3; |
|
| 56 |
+ |
|
| 57 |
+$textinput-color: #333333; |
|
| 58 |
+$textinput-bg: #f4f4f4; |
|
| 59 |
+$textinput-bg-focus: #fefeee; |
|
| 60 |
+ |
|
| 61 |
+$textinput-border-top: #aaaaaa; |
|
| 62 |
+$textinput-border-bottom: #c6c6c6; |
|
| 63 |
+$textinput-border-left: #c3c3c3; |
|
| 64 |
+$textinput-border-right: #c3c3c3; |
|
| 65 |
+$textinput-border-focus: #989898; |
|
| 66 |
+ |
|
| 67 |
+#articles a, #articles + aside a {
|
|
| 68 |
+ @include link-colors($link-color, $hover: $link-color-hover, $focus: $link-color-hover, $visited: $link-color-visited, $active: $link-color-active); |
|
| 69 |
+} |
|
| 70 |
+a { @include transition(color, .5s); }
|
| 0 | 71 |
new file mode 100644 |
| ... | ... |
@@ -0,0 +1,142 @@ |
| 0 |
+$blockquote: $type-border !default; |
|
| 1 |
+$mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; |
|
| 2 |
+ |
|
| 3 |
+// Fonts |
|
| 4 |
+.heading {
|
|
| 5 |
+ font-family: "PT Serif", "Georgia", "Helvetica Neue", Arial, sans-serif; |
|
| 6 |
+} |
|
| 7 |
+.sans { font-family: "PT Sans", "Helvetica Neue", Arial, sans-serif; }
|
|
| 8 |
+.serif { font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; }
|
|
| 9 |
+.mono { font-family: $mono; }
|
|
| 10 |
+ |
|
| 11 |
+body > header h1 {
|
|
| 12 |
+ font-size: 3em; |
|
| 13 |
+ @extend .heading; |
|
| 14 |
+ font-weight: normal; |
|
| 15 |
+ line-height: 1.2em; |
|
| 16 |
+ margin-bottom: 0.6667em; |
|
| 17 |
+} |
|
| 18 |
+ |
|
| 19 |
+body {
|
|
| 20 |
+ line-height: 1.5em; |
|
| 21 |
+ color: $text-color; |
|
| 22 |
+ @extend .serif; |
|
| 23 |
+} |
|
| 24 |
+ |
|
| 25 |
+#{headings()}{
|
|
| 26 |
+ @extend .heading; |
|
| 27 |
+ text-rendering: optimizelegibility; |
|
| 28 |
+ margin-bottom: 1em; |
|
| 29 |
+ font-weight: bold; |
|
| 30 |
+} |
|
| 31 |
+h1 {
|
|
| 32 |
+ font-size: 3.2em; |
|
| 33 |
+ line-height: 1.2em; |
|
| 34 |
+ @media only screen and (max-width: 768px) { font-size: 2.2em; }
|
|
| 35 |
+} |
|
| 36 |
+ |
|
| 37 |
+ |
|
| 38 |
+h2, section h1 {
|
|
| 39 |
+ font-size: 1.5em; |
|
| 40 |
+} |
|
| 41 |
+h3, section h2, section section h1 {
|
|
| 42 |
+ font-size: 1.3em; |
|
| 43 |
+} |
|
| 44 |
+h4, section h3, section section h2, section section section h1 {
|
|
| 45 |
+ font-size: 1em; |
|
| 46 |
+} |
|
| 47 |
+h5, section h4, section section h3 {
|
|
| 48 |
+ font-size: .9em; |
|
| 49 |
+} |
|
| 50 |
+h6, section h5, section section h4, section section section h3 {
|
|
| 51 |
+ font-size: .8em; |
|
| 52 |
+} |
|
| 53 |
+p, blockquote, ul, ol { margin-bottom: 1.5em; }
|
|
| 54 |
+ |
|
| 55 |
+ul{ list-style-type: disc; }
|
|
| 56 |
+ |
|
| 57 |
+ol{ list-style-type: decimal; ol { list-style-type: lower-alpha; } }
|
|
| 58 |
+ul ul, ol ol { margin-left: 1.75em; }
|
|
| 59 |
+ |
|
| 60 |
+strong { font-weight: bold; }
|
|
| 61 |
+ |
|
| 62 |
+em { font-style: italic; }
|
|
| 63 |
+ |
|
| 64 |
+sup, sub { font-size: 0.8em; position: relative; display: inline-block; }
|
|
| 65 |
+sup { top: -.5em; }
|
|
| 66 |
+sub { bottom: -.5em; }
|
|
| 67 |
+ |
|
| 68 |
+q { font-style: italic;
|
|
| 69 |
+ &:before { content: "\201C"; }
|
|
| 70 |
+ &:after { content: "\201D"; }
|
|
| 71 |
+} |
|
| 72 |
+ |
|
| 73 |
+em, dfn { font-style: italic; }
|
|
| 74 |
+ |
|
| 75 |
+strong, dfn { font-weight: bold; }
|
|
| 76 |
+ |
|
| 77 |
+del, s { text-decoration: line-through; }
|
|
| 78 |
+ |
|
| 79 |
+abbr, acronym { border-bottom: 1px dotted; cursor: help; }
|
|
| 80 |
+ |
|
| 81 |
+pre, code, tt { @extend .mono-font; }
|
|
| 82 |
+ |
|
| 83 |
+sub, sup { line-height: 0; }
|
|
| 84 |
+ |
|
| 85 |
+hr { margin-bottom: 0.2em; }
|
|
| 86 |
+ |
|
| 87 |
+small { font-size: .8em; }
|
|
| 88 |
+ |
|
| 89 |
+big { font-size: 1.2em; }
|
|
| 90 |
+ |
|
| 91 |
+blockquote {
|
|
| 92 |
+ $bq-margin: 1.2em; |
|
| 93 |
+ font-style: italic; |
|
| 94 |
+ position: relative; |
|
| 95 |
+ margin-left: $bq-margin; |
|
| 96 |
+ > p {
|
|
| 97 |
+ &:first-child:before {
|
|
| 98 |
+ content: "\201C"; |
|
| 99 |
+ position: absolute; |
|
| 100 |
+ top: 0.1em; |
|
| 101 |
+ left: -.5em; |
|
| 102 |
+ font-size: 3em; |
|
| 103 |
+ color: $blockquote; |
|
| 104 |
+ } |
|
| 105 |
+ &:last-child:after {
|
|
| 106 |
+ content: "\201D"; |
|
| 107 |
+ position: relative; |
|
| 108 |
+ top: 0.3em; |
|
| 109 |
+ line-height: 0; |
|
| 110 |
+ font-size: 2em; |
|
| 111 |
+ color: $blockquote; |
|
| 112 |
+ } |
|
| 113 |
+ } |
|
| 114 |
+ + p > cite {
|
|
| 115 |
+ margin-left: $bq-margin; |
|
| 116 |
+ text-align: right; |
|
| 117 |
+ &:before { content: '– '; color: $text-color-light; }
|
|
| 118 |
+ a { font-style: italic; }
|
|
| 119 |
+ } |
|
| 120 |
+} |
|
| 121 |
+ |
|
| 122 |
+.has-pullquote:before {
|
|
| 123 |
+ /* Reset metrics. */ |
|
| 124 |
+ padding: 0; |
|
| 125 |
+ border: none; |
|
| 126 |
+ |
|
| 127 |
+ /* Content */ |
|
| 128 |
+ content: attr(data-pullquote); |
|
| 129 |
+ |
|
| 130 |
+ /* Pull out to the right, modular scale based margins. */ |
|
| 131 |
+ float: right; |
|
| 132 |
+ width: 45%; |
|
| 133 |
+ margin: .5em 0 1em 1.5em; |
|
| 134 |
+ |
|
| 135 |
+ /* Baseline correction */ |
|
| 136 |
+ position: relative; |
|
| 137 |
+ top: 7px; |
|
| 138 |
+ font-size: 1.4em; |
|
| 139 |
+ line-height: 1.45em; |
|
| 140 |
+} |
|
| 141 |
+ |
| 0 | 142 |
new file mode 100644 |
| ... | ... |
@@ -0,0 +1,21 @@ |
| 0 |
+@mixin mask-image($img, $repeat: no-repeat){
|
|
| 1 |
+ @include experimental(mask-image, image-url($img), -webkit, -moz, -o, -ms); |
|
| 2 |
+ @include experimental(mask-repeat, $repeat, -webkit, -moz, -o, -ms); |
|
| 3 |
+ width: image-width($img); |
|
| 4 |
+ height: image-height($img); |
|
| 5 |
+} |
|
| 6 |
+ |
|
| 7 |
+@mixin selection($bg, $color: inherit, $text-shadow: none){
|
|
| 8 |
+ * {
|
|
| 9 |
+ &::-moz-selection { background: $bg; color: $color; text-shadow: $text-shadow; }
|
|
| 10 |
+ &::-webkit-selection { background: $bg; color: $color; text-shadow: $text-shadow; }
|
|
| 11 |
+ &::selection { background: $bg; color: $color; text-shadow: $text-shadow; }
|
|
| 12 |
+ } |
|
| 13 |
+} |
|
| 14 |
+ |
|
| 15 |
+@function text-color($color, $dark: dark, $light: light){
|
|
| 16 |
+ $text-color: ( (red($color)*299) + (green($color)*587) + (blue($color)*114) ) / 1000; |
|
| 17 |
+ $text-color: if($text-color >= 150, $dark, $light); |
|
| 18 |
+ @return $text-color; |
|
| 19 |
+} |
|
| 20 |
+ |
| 0 | 21 |
new file mode 100644 |
| ... | ... |
@@ -0,0 +1,22 @@ |
| 0 |
+// Here you can easily change your sites's color scheme. |
|
| 1 |
+// To give it a try, uncomment some of the lines below rebuild your blog, and see how it works. |
|
| 2 |
+ |
|
| 3 |
+//$header-bg: #263347; |
|
| 4 |
+//$subtitle-color: lighten($header-bg, 58); |
|
| 5 |
+//$nav-bg: desaturate(lighten(#8fc17a, 18), 5); |
|
| 6 |
+//$sidebar-bg: desaturate(#eceff5, 8); |
|
| 7 |
+//$sidebar-link-color: saturate(#526f9a, 10); |
|
| 8 |
+//$sidebar-link-color-hover: darken(#7ab662, 9); |
|
| 9 |
+ |
|
| 10 |
+ |
|
| 11 |
+//To use the light Solarized highlighting theme uncomment this block |
|
| 12 |
+/* |
|
| 13 |
+$base03: $base3; |
|
| 14 |
+$base02: $base2; |
|
| 15 |
+$base01: $base1; |
|
| 16 |
+$base00: $base0; |
|
| 17 |
+$base0: $base00; |
|
| 18 |
+$base1: $base01; |
|
| 19 |
+$base2: $base02; |
|
| 20 |
+$base3: $base03; |
|
| 21 |
+*/ |
| 0 | 2 |
deleted file mode 100644 |
| ... | ... |
@@ -1,19 +0,0 @@ |
| 1 |
-@include global-reset; |
|
| 2 |
-@include reset-html5; |
|
| 3 |
- |
|
| 4 |
-@import "core/utilities"; |
|
| 5 |
-@import "partials/solarized"; |
|
| 6 |
-@import "custom/colors"; |
|
| 7 |
-@import "core/theme"; |
|
| 8 |
-@import "core/layout"; |
|
| 9 |
-@import "core/typography"; |
|
| 10 |
- |
|
| 11 |
-/* layout partials */ |
|
| 12 |
-@import "partials/header"; |
|
| 13 |
-@import "partials/navigation"; |
|
| 14 |
-@import "partials/page"; |
|
| 15 |
-@import "partials/sidebar"; |
|
| 16 |
-@import "partials/blog"; |
|
| 17 |
-@import "partials/footer"; |
|
| 18 |
-@import "partials/syntax"; |
|
| 19 |
-@import "custom/styles"; |
| 20 | 1 |
deleted file mode 100644 |
| ... | ... |
@@ -1,131 +0,0 @@ |
| 1 |
-$default-border-radius: 4px; |
|
| 2 |
- |
|
| 3 |
-$pad-min: 18px; |
|
| 4 |
-$pad-narrow: 20px; |
|
| 5 |
-$pad-medium: 35px; |
|
| 6 |
-$pad-wide: 55px; |
|
| 7 |
-$sidebar-width-medium: 240px; |
|
| 8 |
-$sidebar-pad-medium: 15px; |
|
| 9 |
-$sidebar-pad-wide: 20px; |
|
| 10 |
-$sidebar-width-wide: 300px; |
|
| 11 |
- |
|
| 12 |
-.group { @include pie-clearfix; }
|
|
| 13 |
- |
|
| 14 |
-body {
|
|
| 15 |
- -webkit-text-size-adjust: none; |
|
| 16 |
- max-width: 1350px; |
|
| 17 |
- position: relative; |
|
| 18 |
- margin: 0 auto; |
|
| 19 |
- > header, > nav, > footer, #articles > article {
|
|
| 20 |
- @extend .group; |
|
| 21 |
- padding-left: $pad-min; |
|
| 22 |
- padding-right: $pad-min; |
|
| 23 |
- @media only screen and (min-width: 480px) {
|
|
| 24 |
- padding-left: $pad-narrow; |
|
| 25 |
- padding-right: $pad-narrow; |
|
| 26 |
- } |
|
| 27 |
- @media only screen and (min-width: 768px) {
|
|
| 28 |
- padding-left: $pad-medium; |
|
| 29 |
- padding-right: $pad-medium; |
|
| 30 |
- } |
|
| 31 |
- @media only screen and (min-width: 992px) {
|
|
| 32 |
- padding-left: $pad-wide; |
|
| 33 |
- padding-right: $pad-wide; |
|
| 34 |
- } |
|
| 35 |
- } |
|
| 36 |
- > header {
|
|
| 37 |
- font-size: 1em; |
|
| 38 |
- padding-top: 1.5em; |
|
| 39 |
- padding-bottom: 1.5em; |
|
| 40 |
- } |
|
| 41 |
-} |
|
| 42 |
- |
|
| 43 |
-.toggle-sidebar { display: none; }
|
|
| 44 |
-#articles { width: 100%;
|
|
| 45 |
- + aside {
|
|
| 46 |
- float: none; |
|
| 47 |
- padding: 0 $pad-min 1px; |
|
| 48 |
- background-color: $sidebar-bg; |
|
| 49 |
- border-top: 1px solid $sidebar-border; |
|
| 50 |
- } |
|
| 51 |
-} |
|
| 52 |
- |
|
| 53 |
-@media only screen and (min-width: 550px) {
|
|
| 54 |
- body > header { font-size: 1em; }
|
|
| 55 |
-} |
|
| 56 |
-@media only screen and (min-width: 768px) {
|
|
| 57 |
- body { -webkit-text-size-adjust: auto; }
|
|
| 58 |
- body > header { font-size: 1.2em; }
|
|
| 59 |
- body > nav {
|
|
| 60 |
- + div {
|
|
| 61 |
- @extend .group; |
|
| 62 |
- padding: 0; |
|
| 63 |
- margin: 0 auto; |
|
| 64 |
- > div {
|
|
| 65 |
- @extend .group; |
|
| 66 |
- margin-right: $sidebar-width-medium; |
|
| 67 |
- } |
|
| 68 |
- } |
|
| 69 |
- } |
|
| 70 |
- #articles {
|
|
| 71 |
- padding-top: $pad-medium/2; |
|
| 72 |
- padding-bottom: $pad-medium/2; |
|
| 73 |
- float: left; |
|
| 74 |
- + aside {
|
|
| 75 |
- width: $sidebar-width-medium - $sidebar-pad-medium*2; |
|
| 76 |
- padding: 0 $sidebar-pad-medium $sidebar-pad-medium; |
|
| 77 |
- background: none; |
|
| 78 |
- float: left; |
|
| 79 |
- margin: 0 -100% 0 0; |
|
| 80 |
- } |
|
| 81 |
- } |
|
| 82 |
- body > div > div { position: relative; }
|
|
| 83 |
- |
|
| 84 |
- .collapse-sidebar {
|
|
| 85 |
- > div > div { margin-right: 10px; }
|
|
| 86 |
- #articles + aside {
|
|
| 87 |
- display: none; |
|
| 88 |
- } |
|
| 89 |
- .toggle-sidebar {
|
|
| 90 |
- right: -1px; |
|
| 91 |
- background-color: $sidebar-bg; |
|
| 92 |
- border-right-width: 0; |
|
| 93 |
- text-indent: 2px; |
|
| 94 |
- border-left: 1px solid $sidebar-border; |
|
| 95 |
- @include border-bottom-right-radius(0); |
|
| 96 |
- @include border-bottom-left-radius(.3em); |
|
| 97 |
- @include link-colors(#aaa, #888); |
|
| 98 |
- } |
|
| 99 |
- } |
|
| 100 |
- |
|
| 101 |
- .toggle-sidebar {
|
|
| 102 |
- outline: none; |
|
| 103 |
- position: absolute; right: -21px; top: 0; |
|
| 104 |
- width: 20px; |
|
| 105 |
- font-size: 1.2em; |
|
| 106 |
- line-height: 1.1em; |
|
| 107 |
- padding-bottom: .1em; |
|
| 108 |
- text-indent: -1px; |
|
| 109 |
- text-decoration: none; |
|
| 110 |
- @include link-colors(#ccc, #999); |
|
| 111 |
- @include border-bottom-right-radius(.3em); |
|
| 112 |
- text-align: center; |
|
| 113 |
- background: $main-bg; |
|
| 114 |
- border-bottom: 1px solid $sidebar-border; |
|
| 115 |
- border-right: 1px solid $sidebar-border; |
|
| 116 |
- display: inline-block; |
|
| 117 |
- } |
|
| 118 |
-} |
|
| 119 |
- |
|
| 120 |
-@media only screen and (min-width: 992px) {
|
|
| 121 |
- body > header { font-size: 1.3em; }
|
|
| 122 |
- body > nav + div > div { margin-right: $sidebar-width-wide; }
|
|
| 123 |
- #articles {
|
|
| 124 |
- padding-top: $pad-wide/2; |
|
| 125 |
- padding-bottom: $pad-wide/2; |
|
| 126 |
- + aside {
|
|
| 127 |
- width: $sidebar-width-wide - $sidebar-pad-wide*2; |
|
| 128 |
- padding: 1.2em $sidebar-pad-wide $sidebar-pad-wide; |
|
| 129 |
- } |
|
| 130 |
- } |
|
| 131 |
-} |
| 132 | 1 |
deleted file mode 100644 |
| ... | ... |
@@ -1,71 +0,0 @@ |
| 1 |
-// Main Link Colors |
|
| 2 |
-$link-color: lighten(#165b94, 3) !default; |
|
| 3 |
-$link-color-hover: adjust-hue($link-color, -200) !default; |
|
| 4 |
-$link-color-visited: darken(adjust_hue($link_color, 70), 10) !default; |
|
| 5 |
-$link-color-active: darken($link-color-hover, 15) !default; |
|
| 6 |
- |
|
| 7 |
-// Main Section Colors |
|
| 8 |
-$page-bg: #252525 !default; |
|
| 9 |
-$article-border: #eeeeee !default; |
|
| 10 |
-$main-bg: #f5f5f5 !default; |
|
| 11 |
- |
|
| 12 |
-$header-bg: #333 !default; |
|
| 13 |
-$header-border: lighten($header-bg, 15) !default; |
|
| 14 |
-$title-color: #f2f2f2 !default; |
|
| 15 |
-$subtitle-color: #aaa !default; |
|
| 16 |
- |
|
| 17 |
-$text-color: #222 !default; |
|
| 18 |
-$text-color-light: #aaa !default; |
|
| 19 |
-$type-border: #ddd !default; |
|
| 20 |
- |
|
| 21 |
- |
|
| 22 |
-/* Navigation */ |
|
| 23 |
-$nav-bg: #ccc !default; |
|
| 24 |
-$nav-color: darken($nav-bg, 38) !default; |
|
| 25 |
-$nav-color-hover: darken($nav-color, 25) !default; |
|
| 26 |
-$nav-placeholder: desaturate(darken($nav-bg, 10), 15) !default; |
|
| 27 |
-$nav-border: darken($nav-bg, 10) !default; |
|
| 28 |
-$nav-border-top: lighten($nav-bg, 15) !default; |
|
| 29 |
-$nav-border-bottom: darken($nav-bg, 25) !default; |
|
| 30 |
-$nav-border-left: darken($nav-bg, 11) !default; |
|
| 31 |
-$nav-border-right: lighten($nav-bg, 7) !default; |
|
| 32 |
- |
|
| 33 |
-/* Sidebar colors */ |
|
| 34 |
-$sidebar-bg: #eee !default; |
|
| 35 |
-$sidebar-link-color: $link-color !default; |
|
| 36 |
-$sidebar-link-color-hover: $link-color-hover !default; |
|
| 37 |
-$sidebar-color: change-color(mix($text-color, $sidebar-bg, 80), $hue: hue($sidebar-bg), $saturation: saturation($sidebar-bg)/2) !default; |
|
| 38 |
-$sidebar-border: desaturate(darken($sidebar-bg, 7), 10) !default; |
|
| 39 |
-$sidebar-border: darken($sidebar-bg, 7) !default; |
|
| 40 |
-$sidebar-link-color-subdued: lighten($sidebar-color, 20) !default; |
|
| 41 |
-$sidebar-link-color-subdued-hover: $sidebar-link-color-hover !default; |
|
| 42 |
-$twitter-status-link: lighten($sidebar-link-color-subdued, 15) !default; |
|
| 43 |
- |
|
| 44 |
-$footer-color: #999999 !default; |
|
| 45 |
-$footer-bg: #ccc !default; |
|
| 46 |
-$footer-color: darken($footer-bg, 38) !default; |
|
| 47 |
-$footer-color-hover: darken($footer-color, 10) !default; |
|
| 48 |
-$footer-border-top: lighten($footer-bg, 15) !default; |
|
| 49 |
-$footer-border-bottom: darken($footer-bg, 15) !default; |
|
| 50 |
-$footer-link-color: darken($footer-bg, 38) !default; |
|
| 51 |
-$footer-link-color-hover: darken($footer-color, 25) !default; |
|
| 52 |
-$page-border-bottom: darken($footer-bg, 5) !default; |
|
| 53 |
- |
|
| 54 |
-// Form Colors |
|
| 55 |
-$fieldset-bg: #ececec; |
|
| 56 |
-$fieldset-border: #c3c3c3; |
|
| 57 |
- |
|
| 58 |
-$textinput-color: #333333; |
|
| 59 |
-$textinput-bg: #f4f4f4; |
|
| 60 |
-$textinput-bg-focus: #fefeee; |
|
| 61 |
- |
|
| 62 |
-$textinput-border-top: #aaaaaa; |
|
| 63 |
-$textinput-border-bottom: #c6c6c6; |
|
| 64 |
-$textinput-border-left: #c3c3c3; |
|
| 65 |
-$textinput-border-right: #c3c3c3; |
|
| 66 |
-$textinput-border-focus: #989898; |
|
| 67 |
- |
|
| 68 |
-#articles a, #articles + aside a {
|
|
| 69 |
- @include link-colors($link-color, $hover: $link-color-hover, $focus: $link-color-hover, $visited: $link-color-visited, $active: $link-color-active); |
|
| 70 |
-} |
|
| 71 |
-a { @include transition(color, .5s); }
|
| 72 | 1 |
deleted file mode 100644 |
| ... | ... |
@@ -1,142 +0,0 @@ |
| 1 |
-$blockquote: $type-border !default; |
|
| 2 |
-$mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; |
|
| 3 |
- |
|
| 4 |
-// Fonts |
|
| 5 |
-.heading {
|
|
| 6 |
- font-family: "PT Serif", "Georgia", "Helvetica Neue", Arial, sans-serif; |
|
| 7 |
-} |
|
| 8 |
-.sans { font-family: "PT Sans", "Helvetica Neue", Arial, sans-serif; }
|
|
| 9 |
-.serif { font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; }
|
|
| 10 |
-.mono { font-family: $mono; }
|
|
| 11 |
- |
|
| 12 |
-body > header h1 {
|
|
| 13 |
- font-size: 3em; |
|
| 14 |
- @extend .heading; |
|
| 15 |
- font-weight: normal; |
|
| 16 |
- line-height: 1.2em; |
|
| 17 |
- margin-bottom: 0.6667em; |
|
| 18 |
-} |
|
| 19 |
- |
|
| 20 |
-body {
|
|
| 21 |
- line-height: 1.5em; |
|
| 22 |
- color: $text-color; |
|
| 23 |
- @extend .serif; |
|
| 24 |
-} |
|
| 25 |
- |
|
| 26 |
-#{headings()}{
|
|
| 27 |
- @extend .heading; |
|
| 28 |
- text-rendering: optimizelegibility; |
|
| 29 |
- margin-bottom: 1em; |
|
| 30 |
- font-weight: bold; |
|
| 31 |
-} |
|
| 32 |
-h1 {
|
|
| 33 |
- font-size: 3.2em; |
|
| 34 |
- line-height: 1.2em; |
|
| 35 |
- @media only screen and (max-width: 768px) { font-size: 2.2em; }
|
|
| 36 |
-} |
|
| 37 |
- |
|
| 38 |
- |
|
| 39 |
-h2, section h1 {
|
|
| 40 |
- font-size: 1.5em; |
|
| 41 |
-} |
|
| 42 |
-h3, section h2, section section h1 {
|
|
| 43 |
- font-size: 1.3em; |
|
| 44 |
-} |
|
| 45 |
-h4, section h3, section section h2, section section section h1 {
|
|
| 46 |
- font-size: 1em; |
|
| 47 |
-} |
|
| 48 |
-h5, section h4, section section h3 {
|
|
| 49 |
- font-size: .9em; |
|
| 50 |
-} |
|
| 51 |
-h6, section h5, section section h4, section section section h3 {
|
|
| 52 |
- font-size: .8em; |
|
| 53 |
-} |
|
| 54 |
-p, blockquote, ul, ol { margin-bottom: 1.5em; }
|
|
| 55 |
- |
|
| 56 |
-ul{ list-style-type: disc; }
|
|
| 57 |
- |
|
| 58 |
-ol{ list-style-type: decimal; ol { list-style-type: lower-alpha; } }
|
|
| 59 |
-ul ul, ol ol { margin-left: 1.75em; }
|
|
| 60 |
- |
|
| 61 |
-strong { font-weight: bold; }
|
|
| 62 |
- |
|
| 63 |
-em { font-style: italic; }
|
|
| 64 |
- |
|
| 65 |
-sup, sub { font-size: 0.8em; position: relative; display: inline-block; }
|
|
| 66 |
-sup { top: -.5em; }
|
|
| 67 |
-sub { bottom: -.5em; }
|
|
| 68 |
- |
|
| 69 |
-q { font-style: italic;
|
|
| 70 |
- &:before { content: "\201C"; }
|
|
| 71 |
- &:after { content: "\201D"; }
|
|
| 72 |
-} |
|
| 73 |
- |
|
| 74 |
-em, dfn { font-style: italic; }
|
|
| 75 |
- |
|
| 76 |
-strong, dfn { font-weight: bold; }
|
|
| 77 |
- |
|
| 78 |
-del, s { text-decoration: line-through; }
|
|
| 79 |
- |
|
| 80 |
-abbr, acronym { border-bottom: 1px dotted; cursor: help; }
|
|
| 81 |
- |
|
| 82 |
-pre, code, tt { @extend .mono-font; }
|
|
| 83 |
- |
|
| 84 |
-sub, sup { line-height: 0; }
|
|
| 85 |
- |
|
| 86 |
-hr { margin-bottom: 0.2em; }
|
|
| 87 |
- |
|
| 88 |
-small { font-size: .8em; }
|
|
| 89 |
- |
|
| 90 |
-big { font-size: 1.2em; }
|
|
| 91 |
- |
|
| 92 |
-blockquote {
|
|
| 93 |
- $bq-margin: 1.2em; |
|
| 94 |
- font-style: italic; |
|
| 95 |
- position: relative; |
|
| 96 |
- margin-left: $bq-margin; |
|
| 97 |
- > p {
|
|
| 98 |
- &:first-child:before {
|
|
| 99 |
- content: "\201C"; |
|
| 100 |
- position: absolute; |
|
| 101 |
- top: 0.1em; |
|
| 102 |
- left: -.5em; |
|
| 103 |
- font-size: 3em; |
|
| 104 |
- color: $blockquote; |
|
| 105 |
- } |
|
| 106 |
- &:last-child:after {
|
|
| 107 |
- content: "\201D"; |
|
| 108 |
- position: relative; |
|
| 109 |
- top: 0.3em; |
|
| 110 |
- line-height: 0; |
|
| 111 |
- font-size: 2em; |
|
| 112 |
- color: $blockquote; |
|
| 113 |
- } |
|
| 114 |
- } |
|
| 115 |
- + p > cite {
|
|
| 116 |
- margin-left: $bq-margin; |
|
| 117 |
- text-align: right; |
|
| 118 |
- &:before { content: '– '; color: $text-color-light; }
|
|
| 119 |
- a { font-style: italic; }
|
|
| 120 |
- } |
|
| 121 |
-} |
|
| 122 |
- |
|
| 123 |
-.has-pullquote:before {
|
|
| 124 |
- /* Reset metrics. */ |
|
| 125 |
- padding: 0; |
|
| 126 |
- border: none; |
|
| 127 |
- |
|
| 128 |
- /* Content */ |
|
| 129 |
- content: attr(data-pullquote); |
|
| 130 |
- |
|
| 131 |
- /* Pull out to the right, modular scale based margins. */ |
|
| 132 |
- float: right; |
|
| 133 |
- width: 45%; |
|
| 134 |
- margin: .5em 0 1em 1.5em; |
|
| 135 |
- |
|
| 136 |
- /* Baseline correction */ |
|
| 137 |
- position: relative; |
|
| 138 |
- top: 7px; |
|
| 139 |
- font-size: 1.4em; |
|
| 140 |
- line-height: 1.45em; |
|
| 141 |
-} |
|
| 142 |
- |
| 143 | 1 |
deleted file mode 100644 |
| ... | ... |
@@ -1,21 +0,0 @@ |
| 1 |
-@mixin mask-image($img, $repeat: no-repeat){
|
|
| 2 |
- @include experimental(mask-image, image-url($img), -webkit, -moz, -o, -ms); |
|
| 3 |
- @include experimental(mask-repeat, $repeat, -webkit, -moz, -o, -ms); |
|
| 4 |
- width: image-width($img); |
|
| 5 |
- height: image-height($img); |
|
| 6 |
-} |
|
| 7 |
- |
|
| 8 |
-@mixin selection($bg, $color: inherit, $text-shadow: none){
|
|
| 9 |
- * {
|
|
| 10 |
- &::-moz-selection { background: $bg; color: $color; text-shadow: $text-shadow; }
|
|
| 11 |
- &::-webkit-selection { background: $bg; color: $color; text-shadow: $text-shadow; }
|
|
| 12 |
- &::selection { background: $bg; color: $color; text-shadow: $text-shadow; }
|
|
| 13 |
- } |
|
| 14 |
-} |
|
| 15 |
- |
|
| 16 |
-@function text-color($color, $dark: dark, $light: light){
|
|
| 17 |
- $text-color: ( (red($color)*299) + (green($color)*587) + (blue($color)*114) ) / 1000; |
|
| 18 |
- $text-color: if($text-color >= 150, $dark, $light); |
|
| 19 |
- @return $text-color; |
|
| 20 |
-} |
|
| 21 |
- |
| 22 | 1 |
deleted file mode 100644 |
| ... | ... |
@@ -1,22 +0,0 @@ |
| 1 |
-// Here you can easily change your sites's color scheme. |
|
| 2 |
-// To give it a try, uncomment some of the lines below rebuild your blog, and see how it works. |
|
| 3 |
- |
|
| 4 |
-//$header-bg: #263347; |
|
| 5 |
-//$subtitle-color: lighten($header-bg, 58); |
|
| 6 |
-//$nav-bg: desaturate(lighten(#8fc17a, 18), 5); |
|
| 7 |
-//$sidebar-bg: desaturate(#eceff5, 8); |
|
| 8 |
-//$sidebar-link-color: saturate(#526f9a, 10); |
|
| 9 |
-//$sidebar-link-color-hover: darken(#7ab662, 9); |
|
| 10 |
- |
|
| 11 |
- |
|
| 12 |
-//To use the light Solarized highlighting theme uncomment this block |
|
| 13 |
-/* |
|
| 14 |
-$base03: $base3; |
|
| 15 |
-$base02: $base2; |
|
| 16 |
-$base01: $base1; |
|
| 17 |
-$base00: $base0; |
|
| 18 |
-$base0: $base00; |
|
| 19 |
-$base1: $base01; |
|
| 20 |
-$base2: $base02; |
|
| 21 |
-$base3: $base03; |
|
| 22 |
-*/ |
| 3 | 1 |
deleted file mode 100644 |
| ... | ... |
@@ -1,135 +0,0 @@ |
| 1 |
-$border: inline-image('dotted-border.png');
|
|
| 2 |
-#articles {
|
|
| 3 |
- @media only screen and (max-width: 992px) {
|
|
| 4 |
- ul, ol { margin-left: 1.4em; }
|
|
| 5 |
- } |
|
| 6 |
- > article {
|
|
| 7 |
- padding-bottom: 1em; |
|
| 8 |
- &:last-child { margin-bottom: 0; border-bottom: none; }
|
|
| 9 |
- h2 {
|
|
| 10 |
- padding-top: 0.8em; |
|
| 11 |
- background: $border top left repeat-x; |
|
| 12 |
- &:first-child {
|
|
| 13 |
- background: none; |
|
| 14 |
- padding-top: 0; |
|
| 15 |
- } |
|
| 16 |
- } |
|
| 17 |
- .byline + time:before, time +time:before, .comments:before {
|
|
| 18 |
- @extend .separator; |
|
| 19 |
- } |
|
| 20 |
- header {
|
|
| 21 |
- position: relative; |
|
| 22 |
- padding-top: 2em; |
|
| 23 |
- margin-bottom: 1.5em; |
|
| 24 |
- padding-bottom: 1em; |
|
| 25 |
- background: $border bottom left repeat-x; |
|
| 26 |
- h1 {
|
|
| 27 |
- margin: 0; |
|
| 28 |
- a { text-decoration: none;
|
|
| 29 |
- &:hover { text-decoration: underline; } }
|
|
| 30 |
- } |
|
| 31 |
- p {
|
|
| 32 |
- font-size: .9em; |
|
| 33 |
- color: $text-color-light; |
|
| 34 |
- margin: 0; |
|
| 35 |
- @extend .sans; |
|
| 36 |
- &.meta {
|
|
| 37 |
- text-transform: uppercase; |
|
| 38 |
- position: absolute; |
|
| 39 |
- top: 0; |
|
| 40 |
- } |
|
| 41 |
- } |
|
| 42 |
- @media only screen and (max-width: 768px) {
|
|
| 43 |
- padding-bottom: 1em; |
|
| 44 |
- margin-bottom: 1em; |
|
| 45 |
- background: $border bottom left repeat-x; |
|
| 46 |
- p.meta { position: static; }
|
|
| 47 |
- } |
|
| 48 |
- |
|
| 49 |
- &.feature h1 {
|
|
| 50 |
- font-size: 2.0em; font-style: italic; |
|
| 51 |
- line-height: 1.3em; |
|
| 52 |
- } |
|
| 53 |
- } |
|
| 54 |
- .entry-content {
|
|
| 55 |
- img, video { max-width: 100%; height: auto; }
|
|
| 56 |
- video { display: block; margin-bottom: 1.5em;
|
|
| 57 |
- padding: .8em; background: #fff; border: 1px solid #eee; |
|
| 58 |
- @include box-sizing(border-box); |
|
| 59 |
- } |
|
| 60 |
- .flash-video {
|
|
| 61 |
- max-width: 100%; |
|
| 62 |
- padding: .8em; background: #fff; border: 1px solid #eee; |
|
| 63 |
- > div {
|
|
| 64 |
- position: relative; |
|
| 65 |
- display: block; |
|
| 66 |
- padding-bottom: 56.25%; |
|
| 67 |
- padding-top: 1px; |
|
| 68 |
- height: 0; |
|
| 69 |
- overflow: hidden; |
|
| 70 |
- iframe, object, embed {
|
|
| 71 |
- position: absolute; |
|
| 72 |
- top: 0; |
|
| 73 |
- left: 0; |
|
| 74 |
- width: 100%; |
|
| 75 |
- height: 100%; |
|
| 76 |
- } |
|
| 77 |
- } |
|
| 78 |
- } |
|
| 79 |
- } |
|
| 80 |
- #disqus_thread { }
|
|
| 81 |
- |
|
| 82 |
- iframe.twitter-share-button {
|
|
| 83 |
- //display: block; |
|
| 84 |
- //margin-top: .5em; |
|
| 85 |
- //padding: .2em 0; |
|
| 86 |
- position: relative; |
|
| 87 |
- top: .3em; |
|
| 88 |
- padding-left: .5em; |
|
| 89 |
- } |
|
| 90 |
- footer {
|
|
| 91 |
- margin-top: 2em; |
|
| 92 |
- padding-top: 1em; |
|
| 93 |
- margin-bottom: 1.5em; |
|
| 94 |
- background: $border top left repeat-x; |
|
| 95 |
- time, .author { color: $text-color-light; @extend .sans; }
|
|
| 96 |
- } |
|
| 97 |
- } |
|
| 98 |
-} |
|
| 99 |
-article + article {
|
|
| 100 |
- background: $border top left repeat-x; |
|
| 101 |
-} |
|
| 102 |
-#articles.blog-index {
|
|
| 103 |
- article header { background: none; padding-bottom: 0; }
|
|
| 104 |
- article h1 {
|
|
| 105 |
- font-size: 2.2em; |
|
| 106 |
- a { color: inherit; &:hover{ color: $link-color-hover; } }
|
|
| 107 |
- } |
|
| 108 |
- a[rel=full-article] {
|
|
| 109 |
- background: darken($main-bg, 5); |
|
| 110 |
- display: inline-block; |
|
| 111 |
- padding: .4em .8em; |
|
| 112 |
- margin-right: .5em; |
|
| 113 |
- text-decoration: none; |
|
| 114 |
- color: mix($text-color, $text-color-light); |
|
| 115 |
- @extend .serif; |
|
| 116 |
- @include transition(background-color, .5s); |
|
| 117 |
- &:hover {
|
|
| 118 |
- background: $link-color-hover; |
|
| 119 |
- text-shadow: none; |
|
| 120 |
- color: $main-bg; |
|
| 121 |
- } |
|
| 122 |
- } |
|
| 123 |
- footer {
|
|
| 124 |
- @extend .sans; |
|
| 125 |
- margin-top: 1em; |
|
| 126 |
- p.meta { color: $text-color-light; }
|
|
| 127 |
- a { color: inherit; &:hover{ color: $link-color-hover;} }
|
|
| 128 |
- } |
|
| 129 |
-} |
|
| 130 |
- |
|
| 131 |
-.separator {
|
|
| 132 |
- content: "\2022 "; |
|
| 133 |
- padding: 0 .4em 0 .2em; |
|
| 134 |
- display: inline-block; |
|
| 135 |
-} |
| 5 | 1 |
deleted file mode 100644 |
| ... | ... |
@@ -1,19 +0,0 @@ |
| 1 |
-body > footer {
|
|
| 2 |
- @extend .sans; |
|
| 3 |
- font-size: .8em; |
|
| 4 |
- color: $footer-color; |
|
| 5 |
- text-shadow: lighten($footer-bg, 5) 0 1px; |
|
| 6 |
- background-color: $footer-bg; |
|
| 7 |
- @include background(linear-gradient(lighten($footer-bg, 8), $footer-bg, darken($footer-bg, 11))); |
|
| 8 |
- border-top: 1px solid $footer-border-top; |
|
| 9 |
- position: relative; |
|
| 10 |
- padding-top: 1em; |
|
| 11 |
- padding-bottom: 1em; |
|
| 12 |
- margin-bottom: 3em; |
|
| 13 |
- @include border-bottom-radius(.4em); |
|
| 14 |
- z-index: 1; |
|
| 15 |
- a {
|
|
| 16 |
- @include link-colors($footer-link-color, $footer-link-color-hover); |
|
| 17 |
- } |
|
| 18 |
- p:last-child { margin-bottom: 0; }
|
|
| 19 |
-} |
| 20 | 1 |
deleted file mode 100644 |
| ... | ... |
@@ -1,18 +0,0 @@ |
| 1 |
-body > header {
|
|
| 2 |
- background-color: $header-bg; |
|
| 3 |
- h1 {
|
|
| 4 |
- display: inline-block; |
|
| 5 |
- margin: 0; |
|
| 6 |
- a, a:visited {
|
|
| 7 |
- color: $title_color; |
|
| 8 |
- text-decoration: none; |
|
| 9 |
- } |
|
| 10 |
- } |
|
| 11 |
- h2 {
|
|
| 12 |
- margin: .2em 0 0; |
|
| 13 |
- @extend .sans; |
|
| 14 |
- font-size: 1em; |
|
| 15 |
- color: $subtitle-color; |
|
| 16 |
- font-weight: normal; |
|
| 17 |
- } |
|
| 18 |
-} |
| 19 | 1 |
deleted file mode 100644 |
| ... | ... |
@@ -1,138 +0,0 @@ |
| 1 |
-body > nav {
|
|
| 2 |
- position: relative; |
|
| 3 |
- background-color: $nav-bg; |
|
| 4 |
- @include background(linear-gradient(lighten($nav-bg, 8), $nav-bg, darken($nav-bg, 11))); |
|
| 5 |
- border: {
|
|
| 6 |
- top: 1px solid $nav-border-top; |
|
| 7 |
- bottom: 1px solid $nav-border-bottom; } |
|
| 8 |
- padding-top: .35em; |
|
| 9 |
- padding-bottom: .35em; |
|
| 10 |
- //position: absolute; left: 0; right: 0; top: 0; |
|
| 11 |
- form {
|
|
| 12 |
- @include background-clip(padding-box); |
|
| 13 |
- margin: 0; padding: 0; |
|
| 14 |
- .search {
|
|
| 15 |
- padding: .3em .5em 0; |
|
| 16 |
- font-size: .85em; |
|
| 17 |
- @extend .sans; |
|
| 18 |
- line-height: 1.1em; |
|
| 19 |
- width: 95%; |
|
| 20 |
- @include border-radius(.5em); |
|
| 21 |
- @include background-clip(padding-box); |
|
| 22 |
- @include box-shadow(lighten($nav-bg, 2) 0 1px); |
|
| 23 |
- background-color: lighten($nav-bg, 15); |
|
| 24 |
- border: 1px solid $nav-border; |
|
| 25 |
- color: #888; |
|
| 26 |
- &:focus {
|
|
| 27 |
- color: #444; |
|
| 28 |
- border-color: #80b1df; |
|
| 29 |
- @include box-shadow(#80b1df 0 0 4px, #80b1df 0 0 3px inset); |
|
| 30 |
- background-color: #fff; |
|
| 31 |
- outline: none; |
|
| 32 |
- } |
|
| 33 |
- } |
|
| 34 |
- } |
|
| 35 |
- fieldset[role=site-search]{ float: right; width: 48%; }
|
|
| 36 |
- fieldset[role=mobile-nav]{ float: left; width: 48%;
|
|
| 37 |
- select{ width: 100%; font-size: .8em; border: 1px solid #888;}
|
|
| 38 |
- } |
|
| 39 |
- ul { display: none; }
|
|
| 40 |
- @media only screen and (min-width: 550px) {
|
|
| 41 |
- font-size: .9em; |
|
| 42 |
- ul {
|
|
| 43 |
- @include horizontal-list(0); |
|
| 44 |
- float: left; |
|
| 45 |
- display: block; |
|
| 46 |
- padding-top: .25em; |
|
| 47 |
- } |
|
| 48 |
- ul[role=subscription] {
|
|
| 49 |
- margin-left: .8em; |
|
| 50 |
- float: right; |
|
| 51 |
- li:last-child a { padding-right: 0; }
|
|
| 52 |
- } |
|
| 53 |
- ul li {
|
|
| 54 |
- margin: 0; |
|
| 55 |
- } |
|
| 56 |
- a {
|
|
| 57 |
- @include link-colors($nav-color, $nav-color-hover, $visited: $nav-color); |
|
| 58 |
- @extend .sans; |
|
| 59 |
- text-shadow: lighten($nav-bg, 12) 0 1px; |
|
| 60 |
- float: left; |
|
| 61 |
- text-decoration: none; |
|
| 62 |
- font-size: 1em; |
|
| 63 |
- padding: .1em 0; |
|
| 64 |
- line-height: 1.5em; |
|
| 65 |
- } |
|
| 66 |
- li + li {
|
|
| 67 |
- border-left: 1px solid $nav-border-left; |
|
| 68 |
- margin-left: .8em; |
|
| 69 |
- a {
|
|
| 70 |
- padding-left: .8em; |
|
| 71 |
- border-left: 1px solid $nav-border-right; |
|
| 72 |
- } |
|
| 73 |
- } |
|
| 74 |
- form {
|
|
| 75 |
- float: right; |
|
| 76 |
- text-align: left; |
|
| 77 |
- padding-left: .8em; |
|
| 78 |
- width: $sidebar-width-medium - $pad-medium*2 - $sidebar-pad-medium + 5px; |
|
| 79 |
- .search {
|
|
| 80 |
- width: 93%; |
|
| 81 |
- font-size: .95em; |
|
| 82 |
- line-height: 1.2em; |
|
| 83 |
- } |
|
| 84 |
- } |
|
| 85 |
- ul[data-subscription$=email] + form {
|
|
| 86 |
- width: $sidebar-width-medium - $pad-medium*2 - $sidebar-pad-medium - 58px; |
|
| 87 |
- .search { width: 91%; }
|
|
| 88 |
- } |
|
| 89 |
- fieldset[role=mobile-nav] { display: none; }
|
|
| 90 |
- fieldset[role=site-search]{ width: 100%; }
|
|
| 91 |
- } |
|
| 92 |
- |
|
| 93 |
- @media only screen and (min-width: 992px) {
|
|
| 94 |
- form {
|
|
| 95 |
- width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 + 5px; |
|
| 96 |
- } |
|
| 97 |
- ul[data-subscription$=email] + form {
|
|
| 98 |
- width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 - 58px; |
|
| 99 |
- } |
|
| 100 |
- } |
|
| 101 |
-} |
|
| 102 |
-.no-placeholder {
|
|
| 103 |
- body > nav .search {
|
|
| 104 |
- background: lighten($nav-bg, 15) image-url('search.png') .3em .25em no-repeat;
|
|
| 105 |
- text-indent: 1.3em; |
|
| 106 |
- } |
|
| 107 |
-} |
|
| 108 |
-@mixin mask-subscription-nav($feed: 'rss.png'){
|
|
| 109 |
- position: relative; top: 0px; |
|
| 110 |
- text-indent: -999999em; |
|
| 111 |
- background-color: $nav-border-right; |
|
| 112 |
- border: 0; |
|
| 113 |
- padding: 0; |
|
| 114 |
- &,&:after { @include mask-image($feed); }
|
|
| 115 |
- &:after {
|
|
| 116 |
- content: ""; |
|
| 117 |
- position: absolute; top: -1px; left: 0; |
|
| 118 |
- background-color: lighten($nav-color, 25); |
|
| 119 |
- } |
|
| 120 |
- &:hover:after { background-color: lighten($nav-color, 20); }
|
|
| 121 |
-} |
|
| 122 |
-.maskImage {
|
|
| 123 |
- body > nav {
|
|
| 124 |
- @media only screen and (min-width: 550px) {
|
|
| 125 |
- ul[data-subscription$=email] + form {
|
|
| 126 |
- width: $sidebar-width-medium - $pad-medium*2 - $sidebar-pad-medium - 32px; |
|
| 127 |
- } |
|
| 128 |
- } |
|
| 129 |
- @media only screen and (min-width: 992px) {
|
|
| 130 |
- ul[data-subscription$=email] + form {
|
|
| 131 |
- width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 - 32px; |
|
| 132 |
- } |
|
| 133 |
- } |
|
| 134 |
- } |
|
| 135 |
- ul[role=subscription] { li, a { border: 0; padding: 0; }}
|
|
| 136 |
- a[rel=subscribe-rss]{ @include mask-subscription-nav('rss.png'); }
|
|
| 137 |
- a[rel=subscribe-email]{ @include mask-subscription-nav('email.png'); }
|
|
| 138 |
-} |
| 139 | 1 |
deleted file mode 100644 |
| ... | ... |
@@ -1,18 +0,0 @@ |
| 1 |
-html {
|
|
| 2 |
- background: $page-bg inline-image('line-tile.png') top left;
|
|
| 3 |
-} |
|
| 4 |
-body {
|
|
| 5 |
- border: 0 0 1px 0 solid darken($page-bg, 5); |
|
| 6 |
- > div {
|
|
| 7 |
- background-color: $sidebar-bg; |
|
| 8 |
- border-bottom: 1px solid $page-border-bottom; |
|
| 9 |
- > div {
|
|
| 10 |
- background-color: $main-bg; |
|
| 11 |
- border-right: 1px solid $sidebar-border; |
|
| 12 |
- } |
|
| 13 |
- } |
|
| 14 |
-} |
|
| 15 |
- |
|
| 16 |
-@media only screen and (min-width: 1400px) {
|
|
| 17 |
- body { border: 0 1px 0 solid darken($page-bg, 5); }
|
|
| 18 |
-} |
| 19 | 1 |
deleted file mode 100644 |
| ... | ... |
@@ -1,12 +0,0 @@ |
| 1 |
-#pinboard_linkroll {
|
|
| 2 |
- .pin-title, .pin-description {
|
|
| 3 |
- display: block; |
|
| 4 |
- margin-bottom: .5em; |
|
| 5 |
- } |
|
| 6 |
- .pin-tag {
|
|
| 7 |
- @include hover-link; |
|
| 8 |
- @extend .aside-alt-link; |
|
| 9 |
- &:after { content: ','; }
|
|
| 10 |
- &:last-child:after { content: ''; }
|
|
| 11 |
- } |
|
| 12 |
-} |
| 13 | 1 |
deleted file mode 100644 |
| ... | ... |
@@ -1,59 +0,0 @@ |
| 1 |
-.side-shadow-border {
|
|
| 2 |
- @include box-shadow(lighten($sidebar-bg, 5) 0 1px); |
|
| 3 |
-} |
|
| 4 |
-#articles + aside {
|
|
| 5 |
- color: $sidebar-color; |
|
| 6 |
- padding-top: 1.2em; |
|
| 7 |
- text-shadow: lighten($sidebar-bg, 8) 0 1px; |
|
| 8 |
- section {
|
|
| 9 |
- @extend .sans; |
|
| 10 |
- font-size: .8em; |
|
| 11 |
- line-height: 1.4em; |
|
| 12 |
- margin-bottom: 1.5em; |
|
| 13 |
- h1 {
|
|
| 14 |
- margin: 1.5em 0 0; |
|
| 15 |
- padding-bottom: .2em; |
|
| 16 |
- border-bottom: 1px solid $sidebar-border; |
|
| 17 |
- @extend .side-shadow-border; |
|
| 18 |
- + p {
|
|
| 19 |
- padding-top: .4em; |
|
| 20 |
- } |
|
| 21 |
- } |
|
| 22 |
- } |
|
| 23 |
- ul {
|
|
| 24 |
- margin-bottom: 0.5em; |
|
| 25 |
- } |
|
| 26 |
- li {
|
|
| 27 |
- list-style: none; |
|
| 28 |
- padding: .5em 0; |
|
| 29 |
- margin: 0; |
|
| 30 |
- border-bottom: 1px solid $sidebar-border; |
|
| 31 |
- @extend .side-shadow-border; |
|
| 32 |
- p:last-child {
|
|
| 33 |
- margin-bottom: 0; |
|
| 34 |
- } |
|
| 35 |
- } |
|
| 36 |
- a {
|
|
| 37 |
- color: inherit; |
|
| 38 |
- @include transition(color, .5s); |
|
| 39 |
- } |
|
| 40 |
- &:hover a, &:hover #tweets a { color: $sidebar-link-color;
|
|
| 41 |
- &:hover { color: $sidebar-link-color-hover; }
|
|
| 42 |
- } |
|
| 43 |
- #recent_posts {
|
|
| 44 |
- time {
|
|
| 45 |
- text-transform: uppercase; |
|
| 46 |
- font-size: .9em; |
|
| 47 |
- color: #666; |
|
| 48 |
- } |
|
| 49 |
- } |
|
| 50 |
- @import "twitter"; |
|
| 51 |
- @import "pinboard"; |
|
| 52 |
- @import "delicious"; |
|
| 53 |
-} |
|
| 54 |
-.aside-alt-link {
|
|
| 55 |
- color: $sidebar-link-color-subdued; |
|
| 56 |
- &:hover {
|
|
| 57 |
- color: $sidebar-link-color-subdued-hover; |
|
| 58 |
- } |
|
| 59 |
-} |
| 60 | 1 |
deleted file mode 100644 |
| ... | ... |
@@ -1,16 +0,0 @@ |
| 1 |
-$base03: #002b36; //darkest blue |
|
| 2 |
-$base02: #073642; //dark blue |
|
| 3 |
-$base01: #586e75; //darkest gray |
|
| 4 |
-$base00: #657b83; //dark gray |
|
| 5 |
-$base0: #839496; //medium gray |
|
| 6 |
-$base1: #93a1a1; //medium light gray |
|
| 7 |
-$base2: #eee8d5; //cream |
|
| 8 |
-$base3: #fdf6e3; //white |
|
| 9 |
-$yellow: #b58900; |
|
| 10 |
-$orange: #cb4b16; |
|
| 11 |
-$red: #dc322f; |
|
| 12 |
-$magenta: #d33682; |
|
| 13 |
-$violet: #6c71c4; |
|
| 14 |
-$blue: #268bd2; |
|
| 15 |
-$cyan: #2aa198; |
|
| 16 |
-$green: #859900; |
| 17 | 1 |
deleted file mode 100644 |
| ... | ... |
@@ -1,204 +0,0 @@ |
| 1 |
-.highlight, html .gist .gist-file .gist-syntax .gist-highlight {
|
|
| 2 |
- .line-numbers {
|
|
| 3 |
- text-align: right; |
|
| 4 |
- font-size: .8em; |
|
| 5 |
- line-height: 1.45em; |
|
| 6 |
- background: $base02 !important; |
|
| 7 |
- border-right: 1px solid darken($base03, 2) !important; |
|
| 8 |
- @include box-shadow(lighten($base02, 2) -1px 0 inset); |
|
| 9 |
- text-shadow: darken($base02, 10) 0 -1px; |
|
| 10 |
- span { color: $base01 !important; }
|
|
| 11 |
- padding: .8em !important; |
|
| 12 |
- } |
|
| 13 |
-} |
|
| 14 |
-html .gist .gist-file {
|
|
| 15 |
- margin-bottom: 1.5em; |
|
| 16 |
- position: relative; |
|
| 17 |
- border: none; |
|
| 18 |
- padding-top: image-height("code_bg.png") !important;
|
|
| 19 |
- .gist-syntax {
|
|
| 20 |
- border-bottom: 1px solid darken($base03, 2) !important; |
|
| 21 |
- .gist-highlight{
|
|
| 22 |
- background: $base03 !important; |
|
| 23 |
- pre {
|
|
| 24 |
- @extend .pre-code; |
|
| 25 |
- } |
|
| 26 |
- } |
|
| 27 |
- } |
|
| 28 |
- .gist-meta {
|
|
| 29 |
- padding: .6em 0.8em; |
|
| 30 |
- border: 1px solid lighten($base02, 2) !important; |
|
| 31 |
- color: $base01; |
|
| 32 |
- font-size: .7em !important; |
|
| 33 |
- background: $base02; |
|
| 34 |
- @extend .sans; |
|
| 35 |
- line-height: 1.5em; |
|
| 36 |
- a {
|
|
| 37 |
- color: mix($base1, $base01) !important; |
|
| 38 |
- @include hover-link; |
|
| 39 |
- &:hover { color: $base1 !important; }
|
|
| 40 |
- } |
|
| 41 |
- a[href*='#file'] {
|
|
| 42 |
- position: absolute; top: 0; left:0; right:-10px; |
|
| 43 |
- color: #474747 !important; |
|
| 44 |
- @extend .code-title; |
|
| 45 |
- &:hover { color: $link-color !important; }
|
|
| 46 |
- } |
|
| 47 |
- a[href*=raw]{
|
|
| 48 |
- @extend .download-source; |
|
| 49 |
- top: .4em; |
|
| 50 |
- } |
|
| 51 |
- } |
|
| 52 |
-} |
|
| 53 |
-pre {
|
|
| 54 |
- background: #fff; |
|
| 55 |
- border: 1px solid #ddd; |
|
| 56 |
- @include border-radius(.4em); |
|
| 57 |
- @extend .mono; |
|
| 58 |
- line-height: 1.45em; |
|
| 59 |
- font-size: .8em; |
|
| 60 |
- margin-bottom: 1.5em; |
|
| 61 |
- padding: .4em .8em; |
|
| 62 |
- color: #555; |
|
| 63 |
- overflow: auto; |
|
| 64 |
-} |
|
| 65 |
- |
|
| 66 |
-p code {
|
|
| 67 |
- @extend .mono; |
|
| 68 |
- display: inline-block; |
|
| 69 |
- white-space: no-wrap; |
|
| 70 |
- background: #fff; |
|
| 71 |
- font-size: .9em; |
|
| 72 |
- line-height: 1.5em; |
|
| 73 |
- color: #555; |
|
| 74 |
- border: 1px solid #ddd; |
|
| 75 |
- @include border-radius(.4em); |
|
| 76 |
- padding: 0 .3em; |
|
| 77 |
- margin: -1px 0; |
|
| 78 |
-} |
|
| 79 |
- |
|
| 80 |
-.pre-code {
|
|
| 81 |
- @include selection(adjust-color($base03, $lightness: 23%, $saturation: -65%), $text-shadow: $base03 0 1px); |
|
| 82 |
- overflow: scroll; |
|
| 83 |
- overflow-y: hidden; |
|
| 84 |
- display: block; |
|
| 85 |
- padding: .8em !important; |
|
| 86 |
- overflow-x: auto; |
|
| 87 |
- line-height: 1.45em; |
|
| 88 |
- background: $base03 !important; |
|
| 89 |
- color: $base1 !important; |
|
| 90 |
- span { color: $base1 !important; }
|
|
| 91 |
- span { font-style: normal !important; font-weight: normal !important; }
|
|
| 92 |
- |
|
| 93 |
- .c { color: $base01 !important; font-style: italic !important; } /* Comment */
|
|
| 94 |
- .cm { color: $base01 !important; font-style: italic !important; } /* Comment.Multiline */
|
|
| 95 |
- .cp { color: $base01 !important; font-style: italic !important; } /* Comment.Preproc */
|
|
| 96 |
- .c1 { color: $base01 !important; font-style: italic !important; } /* Comment.Single */
|
|
| 97 |
- .cs { color: $base01 !important; font-weight: bold !important; font-style: italic !important; } /* Comment.Special */
|
|
| 98 |
- .err { color: $red !important; background: none !important; } /* Error */
|
|
| 99 |
- .k { color: $orange !important; } /* Keyword */
|
|
| 100 |
- .o { color: $base1 !important; font-weight: bold !important; } /* Operator */
|
|
| 101 |
- .p { color: $base1 !important; } /* Operator */
|
|
| 102 |
- .ow { color: $cyan !important; font-weight: bold !important; } /* Operator.Word */
|
|
| 103 |
- .gd { color: $base1 !important; background-color: mix($red, $base03, 25%) !important; display: inline-block; } /* Generic.Deleted */
|
|
| 104 |
- .gd .x { color: $base1 !important; background-color: mix($red, $base03, 35%) !important; display: inline-block; } /* Generic.Deleted.Specific */
|
|
| 105 |
- .ge { color: $base1 !important; font-style: italic !important; } /* Generic.Emph */
|
|
| 106 |
- //.gr { color: #aa0000 } /* Generic.Error */
|
|
| 107 |
- .gh { color: $base01 !important; } /* Generic.Heading */
|
|
| 108 |
- .gi { color: $base1 !important; background-color: mix($green, $base03, 20%) !important; display: inline-block; } /* Generic.Inserted */
|
|
| 109 |
- .gi .x { color: $base1 !important; background-color: mix($green, $base03, 40%) !important; display: inline-block; } /* Generic.Inserted.Specific */
|
|
| 110 |
- //.go { color: #888888 } /* Generic.Output */
|
|
| 111 |
- //.gp { color: #555555 } /* Generic.Prompt */
|
|
| 112 |
- .gs { color: $base1 !important; font-weight: bold !important; } /* Generic.Strong */
|
|
| 113 |
- .gu { color: $violet !important; } /* Generic.Subheading */
|
|
| 114 |
- //.gt { color: #aa0000 } /* Generic.Traceback */
|
|
| 115 |
- .kc { color: $green !important; font-weight: bold !important; } /* Keyword.Constant */
|
|
| 116 |
- .kd { color: $blue !important; } /* Keyword.Declaration */
|
|
| 117 |
- .kp { color: $orange !important; font-weight: bold !important; } /* Keyword.Pseudo */
|
|
| 118 |
- .kr { color: $magenta !important; font-weight: bold !important; } /* Keyword.Reserved */
|
|
| 119 |
- .kt { color: $cyan !important; } /* Keyword.Type */
|
|
| 120 |
- .n { color: $blue !important; }
|
|
| 121 |
- .na { color: $blue !important; } /* Name.Attribute */
|
|
| 122 |
- .nb { color: $green !important; } /* Name.Builtin */
|
|
| 123 |
- //.nc { color: #445588; font-weight: bold } /* Name.Class */
|
|
| 124 |
- .no { color: $yellow !important; } /* Name.Constant */
|
|
| 125 |
- //.ni { color: #800080 } /* Name.Entity */
|
|
| 126 |
- .ne { color: $blue !important; font-weight: bold !important; } /* Name.Exception */
|
|
| 127 |
- .nf { color: $blue !important; font-weight: bold !important; } /* Name.Function */
|
|
| 128 |
- .nn { color: $yellow !important; } /* Name.Namespace */
|
|
| 129 |
- .nt { color: $blue !important; font-weight: bold !important; } /* Name.Tag */
|
|
| 130 |
- .nx { color: $yellow !Important; }
|
|
| 131 |
- //.bp { color: #999999 } /* Name.Builtin.Pseudo */
|
|
| 132 |
- //.vc { color: #008080 } /* Name.Variable.Class */
|
|
| 133 |
- .vg { color: $blue !important; } /* Name.Variable.Global */
|
|
| 134 |
- .vi { color: $blue !important; } /* Name.Variable.Instance */
|
|
| 135 |
- .nv { color: $blue !important; } /* Name.Variable */
|
|
| 136 |
- //.w { color: #bbbbbb } /* Text.Whitespace */
|
|
| 137 |
- .mf { color: $cyan !important; } /* Literal.Number.Float */
|
|
| 138 |
- .m { color: $cyan !important; } /* Literal.Number */
|
|
| 139 |
- .mh { color: $cyan !important; } /* Literal.Number.Hex */
|
|
| 140 |
- .mi { color: $cyan !important; } /* Literal.Number.Integer */
|
|
| 141 |
- //.mo { color: #009999 } /* Literal.Number.Oct */
|
|
| 142 |
- .s { color: $cyan !important; } /* Literal.String */
|
|
| 143 |
- //.sb { color: #d14 } /* Literal.String.Backtick */
|
|
| 144 |
- //.sc { color: #d14 } /* Literal.String.Char */
|
|
| 145 |
- .sd { color: $cyan !important; } /* Literal.String.Doc */
|
|
| 146 |
- .s2 { color: $cyan !important; } /* Literal.String.Double */
|
|
| 147 |
- .se { color: $red !important; } /* Literal.String.Escape */
|
|
| 148 |
- //.sh { color: #d14 } /* Literal.String.Heredoc */
|
|
| 149 |
- .si { color: $blue !important; } /* Literal.String.Interpol */
|
|
| 150 |
- //.sx { color: #d14 } /* Literal.String.Other */
|
|
| 151 |
- .sr { color: $cyan !important; } /* Literal.String.Regex */
|
|
| 152 |
- .s1 { color: $cyan !important; } /* Literal.String.Single */
|
|
| 153 |
- //.ss { color: #990073 } /* Literal.String.Symbol */
|
|
| 154 |
- //.il { color: #009999 } /* Literal.Number.Integer.Long */
|
|
| 155 |
- div { .gd, .gd .x, .gi, .gi .x { display: block; }}
|
|
| 156 |
-} |
|
| 157 |
- |
|
| 158 |
-.highlight, .gist-highlight {
|
|
| 159 |
- pre { background: none; @include border-radius(none); border: none; padding: 0; margin-bottom: 0; }
|
|
| 160 |
- margin-bottom: 1.5em; |
|
| 161 |
- background: $base03; |
|
| 162 |
- overflow-y: hidden; |
|
| 163 |
- overflow-x: auto; |
|
| 164 |
-} |
|
| 165 |
-.highlight code { @extend .pre-code; background: #000;}
|
|
| 166 |
-figure {
|
|
| 167 |
- margin-bottom: 1.5em; |
|
| 168 |
- figcaption {
|
|
| 169 |
- position: relative; |
|
| 170 |
- @extend .code-title; |
|
| 171 |
- a { @extend .download-source; }
|
|
| 172 |
- } |
|
| 173 |
- .highlight { margin-bottom: 0; border-bottom: 1px solid darken($base03, 2) !important; }
|
|
| 174 |
-} |
|
| 175 |
-h3.filename { @extend .code-title; }
|
|
| 176 |
-.code-title {
|
|
| 177 |
- text-align: center; |
|
| 178 |
- font-size: 13px; |
|
| 179 |
- line-height: 2em; |
|
| 180 |
- text-shadow: #cbcccc 0 1px 0; |
|
| 181 |
- color: #474747; |
|
| 182 |
- font-style: normal; |
|
| 183 |
- margin-bottom: 0; |
|
| 184 |
- |
|
| 185 |
- @include border-top-radius(5px); |
|
| 186 |
- font-family: "Helvetica Neue", Arial, "Lucida Grande", "Lucida Sans Unicode", Lucida, sans-serif; |
|
| 187 |
- background: #aaaaaa image-url("code_bg.png") top repeat-x;
|
|
| 188 |
- border: 1px solid #565656; |
|
| 189 |
- border-top-color: #cbcbcb; |
|
| 190 |
- border-left-color: #a5a5a5; |
|
| 191 |
- border-right-color: #a5a5a5; |
|
| 192 |
- border-bottom: 0; |
|
| 193 |
-} |
|
| 194 |
- |
|
| 195 |
-.download-source {
|
|
| 196 |
- position: absolute; right: .8em; |
|
| 197 |
- @include hover-link; |
|
| 198 |
- color: #666 !important; |
|
| 199 |
- z-index: 1; |
|
| 200 |
- font-size: 13px; |
|
| 201 |
- text-shadow: #cbcccc 0 1px 0; |
|
| 202 |
- padding-left: 3em; |
|
| 203 |
-} |
|
| 204 |
- |
| 205 | 1 |
deleted file mode 100644 |
| ... | ... |
@@ -1,33 +0,0 @@ |
| 1 |
-#tweets {
|
|
| 2 |
- .loading {
|
|
| 3 |
- background: inline-image('bird_32_gray.png') no-repeat center .5em;
|
|
| 4 |
- color: darken($sidebar-bg, 18); |
|
| 5 |
- text-shadow: $main-bg 0 1px; |
|
| 6 |
- text-align: center; |
|
| 7 |
- padding: 2.5em 0 .5em; |
|
| 8 |
- &.error {
|
|
| 9 |
- background: inline-image('bird_32_gray_fail.png') no-repeat center .5em;
|
|
| 10 |
- } |
|
| 11 |
- } |
|
| 12 |
- a { color: $sidebar-link-color-subdued; @include hover-link; }
|
|
| 13 |
- p {
|
|
| 14 |
- position: relative; |
|
| 15 |
- padding-right: 1em; |
|
| 16 |
- } |
|
| 17 |
- a[href*=status]{
|
|
| 18 |
- color: $twitter-status-link; |
|
| 19 |
- float: right; |
|
| 20 |
- padding: 0 0 .1em 1em; |
|
| 21 |
- position: relative; right: -1.3em; |
|
| 22 |
- text-shadow: #fff 0 1px; |
|
| 23 |
- font-size: .7em; |
|
| 24 |
- span { font-size: 1.5em; }
|
|
| 25 |
- &:hover {
|
|
| 26 |
- color: $sidebar-link-color-subdued-hover; |
|
| 27 |
- text-decoration: none; |
|
| 28 |
- } |
|
| 29 |
- } |
|
| 30 |
- a[href*='twitter.com/search']{
|
|
| 31 |
- @extend .aside-alt-link; |
|
| 32 |
- } |
|
| 33 |
-} |
| 34 | 1 |
new file mode 100644 |
| ... | ... |
@@ -0,0 +1,139 @@ |
| 0 |
+$border: inline-image('dotted-border.png');
|
|
| 1 |
+#articles {
|
|
| 2 |
+ @media only screen and (max-width: 768px) {
|
|
| 3 |
+ ul, ol { margin-left: 1.4em; }
|
|
| 4 |
+ } |
|
| 5 |
+ > article {
|
|
| 6 |
+ padding-bottom: 1em; |
|
| 7 |
+ &:last-child { margin-bottom: 0; border-bottom: none; }
|
|
| 8 |
+ h2 {
|
|
| 9 |
+ padding-top: 0.8em; |
|
| 10 |
+ background: $border top left repeat-x; |
|
| 11 |
+ &:first-child {
|
|
| 12 |
+ background: none; |
|
| 13 |
+ padding-top: 0; |
|
| 14 |
+ } |
|
| 15 |
+ } |
|
| 16 |
+ .byline + time:before, time +time:before, .comments:before {
|
|
| 17 |
+ @extend .separator; |
|
| 18 |
+ } |
|
| 19 |
+ header {
|
|
| 20 |
+ position: relative; |
|
| 21 |
+ padding-top: 2em; |
|
| 22 |
+ margin-bottom: 1.5em; |
|
| 23 |
+ padding-bottom: 1em; |
|
| 24 |
+ background: $border bottom left repeat-x; |
|
| 25 |
+ h1 {
|
|
| 26 |
+ margin: 0; |
|
| 27 |
+ a { text-decoration: none;
|
|
| 28 |
+ &:hover { text-decoration: underline; } }
|
|
| 29 |
+ } |
|
| 30 |
+ p {
|
|
| 31 |
+ font-size: .9em; |
|
| 32 |
+ color: $text-color-light; |
|
| 33 |
+ margin: 0; |
|
| 34 |
+ @extend .sans; |
|
| 35 |
+ &.meta {
|
|
| 36 |
+ text-transform: uppercase; |
|
| 37 |
+ position: absolute; |
|
| 38 |
+ top: 0; |
|
| 39 |
+ } |
|
| 40 |
+ } |
|
| 41 |
+ @media only screen and (max-width: 768px) {
|
|
| 42 |
+ padding-bottom: 1em; |
|
| 43 |
+ margin-bottom: 1em; |
|
| 44 |
+ background: $border bottom left repeat-x; |
|
| 45 |
+ p.meta { position: static; }
|
|
| 46 |
+ } |
|
| 47 |
+ |
|
| 48 |
+ } |
|
| 49 |
+ h1.feature {
|
|
| 50 |
+ padding-top: .5em; |
|
| 51 |
+ margin-bottom: 1em; |
|
| 52 |
+ padding-bottom: 1em; |
|
| 53 |
+ background: $border bottom left repeat-x; |
|
| 54 |
+ font-size: 2.0em; font-style: italic; |
|
| 55 |
+ line-height: 1.3em; |
|
| 56 |
+ } |
|
| 57 |
+ .entry-content {
|
|
| 58 |
+ img, video { max-width: 100%; height: auto; }
|
|
| 59 |
+ video { display: block; margin-bottom: 1.5em;
|
|
| 60 |
+ padding: .8em; background: #fff; border: 1px solid #eee; |
|
| 61 |
+ @include box-sizing(border-box); |
|
| 62 |
+ } |
|
| 63 |
+ .flash-video {
|
|
| 64 |
+ max-width: 100%; |
|
| 65 |
+ padding: .8em; background: #fff; border: 1px solid #eee; |
|
| 66 |
+ > div {
|
|
| 67 |
+ position: relative; |
|
| 68 |
+ display: block; |
|
| 69 |
+ padding-bottom: 56.25%; |
|
| 70 |
+ padding-top: 1px; |
|
| 71 |
+ height: 0; |
|
| 72 |
+ overflow: hidden; |
|
| 73 |
+ iframe, object, embed {
|
|
| 74 |
+ position: absolute; |
|
| 75 |
+ top: 0; |
|
| 76 |
+ left: 0; |
|
| 77 |
+ width: 100%; |
|
| 78 |
+ height: 100%; |
|
| 79 |
+ } |
|
| 80 |
+ } |
|
| 81 |
+ } |
|
| 82 |
+ } |
|
| 83 |
+ #disqus_thread { }
|
|
| 84 |
+ |
|
| 85 |
+ iframe.twitter-share-button {
|
|
| 86 |
+ //display: block; |
|
| 87 |
+ //margin-top: .5em; |
|
| 88 |
+ //padding: .2em 0; |
|
| 89 |
+ position: relative; |
|
| 90 |
+ top: .3em; |
|
| 91 |
+ padding-left: .5em; |
|
| 92 |
+ } |
|
| 93 |
+ footer {
|
|
| 94 |
+ margin-top: 2em; |
|
| 95 |
+ padding-top: 1em; |
|
| 96 |
+ margin-bottom: 1.5em; |
|
| 97 |
+ background: $border top left repeat-x; |
|
| 98 |
+ time, .author { color: $text-color-light; @extend .sans; }
|
|
| 99 |
+ } |
|
| 100 |
+ } |
|
| 101 |
+} |
|
| 102 |
+article + article {
|
|
| 103 |
+ background: $border top left repeat-x; |
|
| 104 |
+} |
|
| 105 |
+#articles.blog-index {
|
|
| 106 |
+ article header { background: none; padding-bottom: 0; }
|
|
| 107 |
+ article h1 {
|
|
| 108 |
+ font-size: 2.2em; |
|
| 109 |
+ a { color: inherit; &:hover{ color: $link-color-hover; } }
|
|
| 110 |
+ } |
|
| 111 |
+ a[rel=full-article] {
|
|
| 112 |
+ background: darken($main-bg, 5); |
|
| 113 |
+ display: inline-block; |
|
| 114 |
+ padding: .4em .8em; |
|
| 115 |
+ margin-right: .5em; |
|
| 116 |
+ text-decoration: none; |
|
| 117 |
+ color: mix($text-color, $text-color-light); |
|
| 118 |
+ @extend .serif; |
|
| 119 |
+ @include transition(background-color, .5s); |
|
| 120 |
+ &:hover {
|
|
| 121 |
+ background: $link-color-hover; |
|
| 122 |
+ text-shadow: none; |
|
| 123 |
+ color: $main-bg; |
|
| 124 |
+ } |
|
| 125 |
+ } |
|
| 126 |
+ footer {
|
|
| 127 |
+ @extend .sans; |
|
| 128 |
+ margin-top: 1em; |
|
| 129 |
+ p.meta { color: $text-color-light; }
|
|
| 130 |
+ a { color: inherit; &:hover{ color: $link-color-hover;} }
|
|
| 131 |
+ } |
|
| 132 |
+} |
|
| 133 |
+ |
|
| 134 |
+.separator {
|
|
| 135 |
+ content: "\2022 "; |
|
| 136 |
+ padding: 0 .4em 0 .2em; |
|
| 137 |
+ display: inline-block; |
|
| 138 |
+} |
| 0 | 4 |
new file mode 100644 |
| ... | ... |
@@ -0,0 +1,19 @@ |
| 0 |
+body > footer {
|
|
| 1 |
+ @extend .sans; |
|
| 2 |
+ font-size: .8em; |
|
| 3 |
+ color: $footer-color; |
|
| 4 |
+ text-shadow: lighten($footer-bg, 5) 0 1px; |
|
| 5 |
+ background-color: $footer-bg; |
|
| 6 |
+ @include background(linear-gradient(lighten($footer-bg, 8), $footer-bg, darken($footer-bg, 11))); |
|
| 7 |
+ border-top: 1px solid $footer-border-top; |
|
| 8 |
+ position: relative; |
|
| 9 |
+ padding-top: 1em; |
|
| 10 |
+ padding-bottom: 1em; |
|
| 11 |
+ margin-bottom: 3em; |
|
| 12 |
+ @include border-bottom-radius(.4em); |
|
| 13 |
+ z-index: 1; |
|
| 14 |
+ a {
|
|
| 15 |
+ @include link-colors($footer-link-color, $footer-link-color-hover); |
|
| 16 |
+ } |
|
| 17 |
+ p:last-child { margin-bottom: 0; }
|
|
| 18 |
+} |
| 0 | 19 |
new file mode 100644 |
| ... | ... |
@@ -0,0 +1,18 @@ |
| 0 |
+body > header {
|
|
| 1 |
+ background-color: $header-bg; |
|
| 2 |
+ h1 {
|
|
| 3 |
+ display: inline-block; |
|
| 4 |
+ margin: 0; |
|
| 5 |
+ a, a:visited {
|
|
| 6 |
+ color: $title_color; |
|
| 7 |
+ text-decoration: none; |
|
| 8 |
+ } |
|
| 9 |
+ } |
|
| 10 |
+ h2 {
|
|
| 11 |
+ margin: .2em 0 0; |
|
| 12 |
+ @extend .sans; |
|
| 13 |
+ font-size: 1em; |
|
| 14 |
+ color: $subtitle-color; |
|
| 15 |
+ font-weight: normal; |
|
| 16 |
+ } |
|
| 17 |
+} |
| 0 | 18 |
new file mode 100644 |
| ... | ... |
@@ -0,0 +1,138 @@ |
| 0 |
+body > nav {
|
|
| 1 |
+ position: relative; |
|
| 2 |
+ background-color: $nav-bg; |
|
| 3 |
+ @include background(linear-gradient(lighten($nav-bg, 8), $nav-bg, darken($nav-bg, 11))); |
|
| 4 |
+ border: {
|
|
| 5 |
+ top: 1px solid $nav-border-top; |
|
| 6 |
+ bottom: 1px solid $nav-border-bottom; } |
|
| 7 |
+ padding-top: .35em; |
|
| 8 |
+ padding-bottom: .35em; |
|
| 9 |
+ //position: absolute; left: 0; right: 0; top: 0; |
|
| 10 |
+ form {
|
|
| 11 |
+ @include background-clip(padding-box); |
|
| 12 |
+ margin: 0; padding: 0; |
|
| 13 |
+ .search {
|
|
| 14 |
+ padding: .3em .5em 0; |
|
| 15 |
+ font-size: .85em; |
|
| 16 |
+ @extend .sans; |
|
| 17 |
+ line-height: 1.1em; |
|
| 18 |
+ width: 95%; |
|
| 19 |
+ @include border-radius(.5em); |
|
| 20 |
+ @include background-clip(padding-box); |
|
| 21 |
+ @include box-shadow(lighten($nav-bg, 2) 0 1px); |
|
| 22 |
+ background-color: lighten($nav-bg, 15); |
|
| 23 |
+ border: 1px solid $nav-border; |
|
| 24 |
+ color: #888; |
|
| 25 |
+ &:focus {
|
|
| 26 |
+ color: #444; |
|
| 27 |
+ border-color: #80b1df; |
|
| 28 |
+ @include box-shadow(#80b1df 0 0 4px, #80b1df 0 0 3px inset); |
|
| 29 |
+ background-color: #fff; |
|
| 30 |
+ outline: none; |
|
| 31 |
+ } |
|
| 32 |
+ } |
|
| 33 |
+ } |
|
| 34 |
+ fieldset[role=site-search]{ float: right; width: 48%; }
|
|
| 35 |
+ fieldset[role=mobile-nav]{ float: left; width: 48%;
|
|
| 36 |
+ select{ width: 100%; font-size: .8em; border: 1px solid #888;}
|
|
| 37 |
+ } |
|
| 38 |
+ ul { display: none; }
|
|
| 39 |
+ @media only screen and (min-width: 550px) {
|
|
| 40 |
+ font-size: .9em; |
|
| 41 |
+ ul {
|
|
| 42 |
+ @include horizontal-list(0); |
|
| 43 |
+ float: left; |
|
| 44 |
+ display: block; |
|
| 45 |
+ padding-top: .25em; |
|
| 46 |
+ } |
|
| 47 |
+ ul[role=subscription] {
|
|
| 48 |
+ margin-left: .8em; |
|
| 49 |
+ float: right; |
|
| 50 |
+ li:last-child a { padding-right: 0; }
|
|
| 51 |
+ } |
|
| 52 |
+ ul li {
|
|
| 53 |
+ margin: 0; |
|
| 54 |
+ } |
|
| 55 |
+ a {
|
|
| 56 |
+ @include link-colors($nav-color, $nav-color-hover, $visited: $nav-color); |
|
| 57 |
+ @extend .sans; |
|
| 58 |
+ text-shadow: lighten($nav-bg, 12) 0 1px; |
|
| 59 |
+ float: left; |
|
| 60 |
+ text-decoration: none; |
|
| 61 |
+ font-size: 1em; |
|
| 62 |
+ padding: .1em 0; |
|
| 63 |
+ line-height: 1.5em; |
|
| 64 |
+ } |
|
| 65 |
+ li + li {
|
|
| 66 |
+ border-left: 1px solid $nav-border-left; |
|
| 67 |
+ margin-left: .8em; |
|
| 68 |
+ a {
|
|
| 69 |
+ padding-left: .8em; |
|
| 70 |
+ border-left: 1px solid $nav-border-right; |
|
| 71 |
+ } |
|
| 72 |
+ } |
|
| 73 |
+ form {
|
|
| 74 |
+ float: right; |
|
| 75 |
+ text-align: left; |
|
| 76 |
+ padding-left: .8em; |
|
| 77 |
+ width: $sidebar-width-medium - $pad-medium*2 - $sidebar-pad-medium + 20px; |
|
| 78 |
+ .search {
|
|
| 79 |
+ width: 93%; |
|
| 80 |
+ font-size: .95em; |
|
| 81 |
+ line-height: 1.2em; |
|
| 82 |
+ } |
|
| 83 |
+ } |
|
| 84 |
+ ul[data-subscription$=email] + form {
|
|
| 85 |
+ width: $sidebar-width-medium - $pad-medium*2 - $sidebar-pad-medium - 58px; |
|
| 86 |
+ .search { width: 91%; }
|
|
| 87 |
+ } |
|
| 88 |
+ fieldset[role=mobile-nav] { display: none; }
|
|
| 89 |
+ fieldset[role=site-search]{ width: 100%; }
|
|
| 90 |
+ } |
|
| 91 |
+ |
|
| 92 |
+ @media only screen and (min-width: 992px) {
|
|
| 93 |
+ form {
|
|
| 94 |
+ width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 + 10px; |
|
| 95 |
+ } |
|
| 96 |
+ ul[data-subscription$=email] + form {
|
|
| 97 |
+ width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 - 58px; |
|
| 98 |
+ } |
|
| 99 |
+ } |
|
| 100 |
+} |
|
| 101 |
+.no-placeholder {
|
|
| 102 |
+ body > nav .search {
|
|
| 103 |
+ background: lighten($nav-bg, 15) image-url('search.png') .3em .25em no-repeat;
|
|
| 104 |
+ text-indent: 1.3em; |
|
| 105 |
+ } |
|
| 106 |
+} |
|
| 107 |
+@mixin mask-subscription-nav($feed: 'rss.png'){
|
|
| 108 |
+ position: relative; top: 0px; |
|
| 109 |
+ text-indent: -999999em; |
|
| 110 |
+ background-color: $nav-border-right; |
|
| 111 |
+ border: 0; |
|
| 112 |
+ padding: 0; |
|
| 113 |
+ &,&:after { @include mask-image($feed); }
|
|
| 114 |
+ &:after {
|
|
| 115 |
+ content: ""; |
|
| 116 |
+ position: absolute; top: -1px; left: 0; |
|
| 117 |
+ background-color: lighten($nav-color, 25); |
|
| 118 |
+ } |
|
| 119 |
+ &:hover:after { background-color: lighten($nav-color, 20); }
|
|
| 120 |
+} |
|
| 121 |
+.maskImage {
|
|
| 122 |
+ body > nav {
|
|
| 123 |
+ @media only screen and (min-width: 550px) {
|
|
| 124 |
+ ul[data-subscription$=email] + form {
|
|
| 125 |
+ width: $sidebar-width-medium - $pad-medium*2 - $sidebar-pad-medium - 32px; |
|
| 126 |
+ } |
|
| 127 |
+ } |
|
| 128 |
+ @media only screen and (min-width: 992px) {
|
|
| 129 |
+ ul[data-subscription$=email] + form {
|
|
| 130 |
+ width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 - 32px; |
|
| 131 |
+ } |
|
| 132 |
+ } |
|
| 133 |
+ } |
|
| 134 |
+ ul[role=subscription] { li, a { border: 0; padding: 0; }}
|
|
| 135 |
+ a[rel=subscribe-rss]{ @include mask-subscription-nav('rss.png'); }
|
|
| 136 |
+ a[rel=subscribe-email]{ @include mask-subscription-nav('email.png'); }
|
|
| 137 |
+} |
| 0 | 138 |
new file mode 100644 |
| ... | ... |
@@ -0,0 +1,18 @@ |
| 0 |
+html {
|
|
| 1 |
+ background: $page-bg inline-image('line-tile.png') top left;
|
|
| 2 |
+} |
|
| 3 |
+body {
|
|
| 4 |
+ border: 0 0 1px 0 solid darken($page-bg, 5); |
|
| 5 |
+ > div {
|
|
| 6 |
+ background-color: $sidebar-bg; |
|
| 7 |
+ border-bottom: 1px solid $page-border-bottom; |
|
| 8 |
+ > div {
|
|
| 9 |
+ background-color: $main-bg; |
|
| 10 |
+ border-right: 1px solid $sidebar-border; |
|
| 11 |
+ } |
|
| 12 |
+ } |
|
| 13 |
+} |
|
| 14 |
+ |
|
| 15 |
+@media only screen and (min-width: 1400px) {
|
|
| 16 |
+ body { border: 0 1px 0 solid darken($page-bg, 5); }
|
|
| 17 |
+} |
| 0 | 18 |
new file mode 100644 |
| ... | ... |
@@ -0,0 +1,12 @@ |
| 0 |
+#pinboard_linkroll {
|
|
| 1 |
+ .pin-title, .pin-description {
|
|
| 2 |
+ display: block; |
|
| 3 |
+ margin-bottom: .5em; |
|
| 4 |
+ } |
|
| 5 |
+ .pin-tag {
|
|
| 6 |
+ @include hover-link; |
|
| 7 |
+ @extend .aside-alt-link; |
|
| 8 |
+ &:after { content: ','; }
|
|
| 9 |
+ &:last-child:after { content: ''; }
|
|
| 10 |
+ } |
|
| 11 |
+} |
| 0 | 12 |
new file mode 100644 |
| ... | ... |
@@ -0,0 +1,59 @@ |
| 0 |
+.side-shadow-border {
|
|
| 1 |
+ @include box-shadow(lighten($sidebar-bg, 5) 0 1px); |
|
| 2 |
+} |
|
| 3 |
+#articles + aside {
|
|
| 4 |
+ color: $sidebar-color; |
|
| 5 |
+ padding-top: 1.2em; |
|
| 6 |
+ text-shadow: lighten($sidebar-bg, 8) 0 1px; |
|
| 7 |
+ section {
|
|
| 8 |
+ @extend .sans; |
|
| 9 |
+ font-size: .8em; |
|
| 10 |
+ line-height: 1.4em; |
|
| 11 |
+ margin-bottom: 1.5em; |
|
| 12 |
+ h1 {
|
|
| 13 |
+ margin: 1.5em 0 0; |
|
| 14 |
+ padding-bottom: .2em; |
|
| 15 |
+ border-bottom: 1px solid $sidebar-border; |
|
| 16 |
+ @extend .side-shadow-border; |
|
| 17 |
+ + p {
|
|
| 18 |
+ padding-top: .4em; |
|
| 19 |
+ } |
|
| 20 |
+ } |
|
| 21 |
+ } |
|
| 22 |
+ ul {
|
|
| 23 |
+ margin-bottom: 0.5em; |
|
| 24 |
+ } |
|
| 25 |
+ li {
|
|
| 26 |
+ list-style: none; |
|
| 27 |
+ padding: .5em 0; |
|
| 28 |
+ margin: 0; |
|
| 29 |
+ border-bottom: 1px solid $sidebar-border; |
|
| 30 |
+ @extend .side-shadow-border; |
|
| 31 |
+ p:last-child {
|
|
| 32 |
+ margin-bottom: 0; |
|
| 33 |
+ } |
|
| 34 |
+ } |
|
| 35 |
+ a {
|
|
| 36 |
+ color: inherit; |
|
| 37 |
+ @include transition(color, .5s); |
|
| 38 |
+ } |
|
| 39 |
+ &:hover a, &:hover #tweets a { color: $sidebar-link-color;
|
|
| 40 |
+ &:hover { color: $sidebar-link-color-hover; }
|
|
| 41 |
+ } |
|
| 42 |
+ #recent_posts {
|
|
| 43 |
+ time {
|
|
| 44 |
+ text-transform: uppercase; |
|
| 45 |
+ font-size: .9em; |
|
| 46 |
+ color: #666; |
|
| 47 |
+ } |
|
| 48 |
+ } |
|
| 49 |
+ @import "twitter"; |
|
| 50 |
+ @import "pinboard"; |
|
| 51 |
+ @import "delicious"; |
|
| 52 |
+} |
|
| 53 |
+.aside-alt-link {
|
|
| 54 |
+ color: $sidebar-link-color-subdued; |
|
| 55 |
+ &:hover {
|
|
| 56 |
+ color: $sidebar-link-color-subdued-hover; |
|
| 57 |
+ } |
|
| 58 |
+} |
| 0 | 59 |
new file mode 100644 |
| ... | ... |
@@ -0,0 +1,16 @@ |
| 0 |
+$base03: #002b36; //darkest blue |
|
| 1 |
+$base02: #073642; //dark blue |
|
| 2 |
+$base01: #586e75; //darkest gray |
|
| 3 |
+$base00: #657b83; //dark gray |
|
| 4 |
+$base0: #839496; //medium gray |
|
| 5 |
+$base1: #93a1a1; //medium light gray |
|
| 6 |
+$base2: #eee8d5; //cream |
|
| 7 |
+$base3: #fdf6e3; //white |
|
| 8 |
+$yellow: #b58900; |
|
| 9 |
+$orange: #cb4b16; |
|
| 10 |
+$red: #dc322f; |
|
| 11 |
+$magenta: #d33682; |
|
| 12 |
+$violet: #6c71c4; |
|
| 13 |
+$blue: #268bd2; |
|
| 14 |
+$cyan: #2aa198; |
|
| 15 |
+$green: #859900; |
| 0 | 16 |
new file mode 100644 |
| ... | ... |
@@ -0,0 +1,204 @@ |
| 0 |
+.highlight, html .gist .gist-file .gist-syntax .gist-highlight {
|
|
| 1 |
+ .line-numbers {
|
|
| 2 |
+ text-align: right; |
|
| 3 |
+ font-size: .8em; |
|
| 4 |
+ line-height: 1.45em; |
|
| 5 |
+ background: $base02 !important; |
|
| 6 |
+ border-right: 1px solid darken($base03, 2) !important; |
|
| 7 |
+ @include box-shadow(lighten($base02, 2) -1px 0 inset); |
|
| 8 |
+ text-shadow: darken($base02, 10) 0 -1px; |
|
| 9 |
+ span { color: $base01 !important; }
|
|
| 10 |
+ padding: .8em !important; |
|
| 11 |
+ } |
|
| 12 |
+} |
|
| 13 |
+html .gist .gist-file {
|
|
| 14 |
+ margin-bottom: 1.5em; |
|
| 15 |
+ position: relative; |
|
| 16 |
+ border: none; |
|
| 17 |
+ padding-top: image-height("code_bg.png") !important;
|
|
| 18 |
+ .gist-syntax {
|
|
| 19 |
+ border-bottom: 1px solid darken($base03, 2) !important; |
|
| 20 |
+ .gist-highlight{
|
|
| 21 |
+ background: $base03 !important; |
|
| 22 |
+ pre {
|
|
| 23 |
+ @extend .pre-code; |
|
| 24 |
+ } |
|
| 25 |
+ } |
|
| 26 |
+ } |
|
| 27 |
+ .gist-meta {
|
|
| 28 |
+ padding: .6em 0.8em; |
|
| 29 |
+ border: 1px solid lighten($base02, 2) !important; |
|
| 30 |
+ color: $base01; |
|
| 31 |
+ font-size: .7em !important; |
|
| 32 |
+ background: $base02; |
|
| 33 |
+ @extend .sans; |
|
| 34 |
+ line-height: 1.5em; |
|
| 35 |
+ a {
|
|
| 36 |
+ color: mix($base1, $base01) !important; |
|
| 37 |
+ @include hover-link; |
|
| 38 |
+ &:hover { color: $base1 !important; }
|
|
| 39 |
+ } |
|
| 40 |
+ a[href*='#file'] {
|
|
| 41 |
+ position: absolute; top: 0; left:0; right:-10px; |
|
| 42 |
+ color: #474747 !important; |
|
| 43 |
+ @extend .code-title; |
|
| 44 |
+ &:hover { color: $link-color !important; }
|
|
| 45 |
+ } |
|
| 46 |
+ a[href*=raw]{
|
|
| 47 |
+ @extend .download-source; |
|
| 48 |
+ top: .4em; |
|
| 49 |
+ } |
|
| 50 |
+ } |
|
| 51 |
+} |
|
| 52 |
+pre {
|
|
| 53 |
+ background: #fff; |
|
| 54 |
+ border: 1px solid #ddd; |
|
| 55 |
+ @include border-radius(.4em); |
|
| 56 |
+ @extend .mono; |
|
| 57 |
+ line-height: 1.45em; |
|
| 58 |
+ font-size: .8em; |
|
| 59 |
+ margin-bottom: 1.5em; |
|
| 60 |
+ padding: .4em .8em; |
|
| 61 |
+ color: #555; |
|
| 62 |
+ overflow: auto; |
|
| 63 |
+} |
|
| 64 |
+ |
|
| 65 |
+p code {
|
|
| 66 |
+ @extend .mono; |
|
| 67 |
+ display: inline-block; |
|
| 68 |
+ white-space: no-wrap; |
|
| 69 |
+ background: #fff; |
|
| 70 |
+ font-size: .9em; |
|
| 71 |
+ line-height: 1.5em; |
|
| 72 |
+ color: #555; |
|
| 73 |
+ border: 1px solid #ddd; |
|
| 74 |
+ @include border-radius(.4em); |
|
| 75 |
+ padding: 0 .3em; |
|
| 76 |
+ margin: -1px 0; |
|
| 77 |
+} |
|
| 78 |
+ |
|
| 79 |
+.pre-code {
|
|
| 80 |
+ @include selection(adjust-color($base03, $lightness: 23%, $saturation: -65%), $text-shadow: $base03 0 1px); |
|
| 81 |
+ overflow: scroll; |
|
| 82 |
+ overflow-y: hidden; |
|
| 83 |
+ display: block; |
|
| 84 |
+ padding: .8em !important; |
|
| 85 |
+ overflow-x: auto; |
|
| 86 |
+ line-height: 1.45em; |
|
| 87 |
+ background: $base03 !important; |
|
| 88 |
+ color: $base1 !important; |
|
| 89 |
+ span { color: $base1 !important; }
|
|
| 90 |
+ span { font-style: normal !important; font-weight: normal !important; }
|
|
| 91 |
+ |
|
| 92 |
+ .c { color: $base01 !important; font-style: italic !important; } /* Comment */
|
|
| 93 |
+ .cm { color: $base01 !important; font-style: italic !important; } /* Comment.Multiline */
|
|
| 94 |
+ .cp { color: $base01 !important; font-style: italic !important; } /* Comment.Preproc */
|
|
| 95 |
+ .c1 { color: $base01 !important; font-style: italic !important; } /* Comment.Single */
|
|
| 96 |
+ .cs { color: $base01 !important; font-weight: bold !important; font-style: italic !important; } /* Comment.Special */
|
|
| 97 |
+ .err { color: $red !important; background: none !important; } /* Error */
|
|
| 98 |
+ .k { color: $orange !important; } /* Keyword */
|
|
| 99 |
+ .o { color: $base1 !important; font-weight: bold !important; } /* Operator */
|
|
| 100 |
+ .p { color: $base1 !important; } /* Operator */
|
|
| 101 |
+ .ow { color: $cyan !important; font-weight: bold !important; } /* Operator.Word */
|
|
| 102 |
+ .gd { color: $base1 !important; background-color: mix($red, $base03, 25%) !important; display: inline-block; } /* Generic.Deleted */
|
|
| 103 |
+ .gd .x { color: $base1 !important; background-color: mix($red, $base03, 35%) !important; display: inline-block; } /* Generic.Deleted.Specific */
|
|
| 104 |
+ .ge { color: $base1 !important; font-style: italic !important; } /* Generic.Emph */
|
|
| 105 |
+ //.gr { color: #aa0000 } /* Generic.Error */
|
|
| 106 |
+ .gh { color: $base01 !important; } /* Generic.Heading */
|
|
| 107 |
+ .gi { color: $base1 !important; background-color: mix($green, $base03, 20%) !important; display: inline-block; } /* Generic.Inserted */
|
|
| 108 |
+ .gi .x { color: $base1 !important; background-color: mix($green, $base03, 40%) !important; display: inline-block; } /* Generic.Inserted.Specific */
|
|
| 109 |
+ //.go { color: #888888 } /* Generic.Output */
|
|
| 110 |
+ //.gp { color: #555555 } /* Generic.Prompt */
|
|
| 111 |
+ .gs { color: $base1 !important; font-weight: bold !important; } /* Generic.Strong */
|
|
| 112 |
+ .gu { color: $violet !important; } /* Generic.Subheading */
|
|
| 113 |
+ //.gt { color: #aa0000 } /* Generic.Traceback */
|
|
| 114 |
+ .kc { color: $green !important; font-weight: bold !important; } /* Keyword.Constant */
|
|
| 115 |
+ .kd { color: $blue !important; } /* Keyword.Declaration */
|
|
| 116 |
+ .kp { color: $orange !important; font-weight: bold !important; } /* Keyword.Pseudo */
|
|
| 117 |
+ .kr { color: $magenta !important; font-weight: bold !important; } /* Keyword.Reserved */
|
|
| 118 |
+ .kt { color: $cyan !important; } /* Keyword.Type */
|
|
| 119 |
+ .n { color: $blue !important; }
|
|
| 120 |
+ .na { color: $blue !important; } /* Name.Attribute */
|
|
| 121 |
+ .nb { color: $green !important; } /* Name.Builtin */
|
|
| 122 |
+ //.nc { color: #445588; font-weight: bold } /* Name.Class */
|
|
| 123 |
+ .no { color: $yellow !important; } /* Name.Constant */
|
|
| 124 |
+ //.ni { color: #800080 } /* Name.Entity */
|
|
| 125 |
+ .ne { color: $blue !important; font-weight: bold !important; } /* Name.Exception */
|
|
| 126 |
+ .nf { color: $blue !important; font-weight: bold !important; } /* Name.Function */
|
|
| 127 |
+ .nn { color: $yellow !important; } /* Name.Namespace */
|
|
| 128 |
+ .nt { color: $blue !important; font-weight: bold !important; } /* Name.Tag */
|
|
| 129 |
+ .nx { color: $yellow !Important; }
|
|
| 130 |
+ //.bp { color: #999999 } /* Name.Builtin.Pseudo */
|
|
| 131 |
+ //.vc { color: #008080 } /* Name.Variable.Class */
|
|
| 132 |
+ .vg { color: $blue !important; } /* Name.Variable.Global */
|
|
| 133 |
+ .vi { color: $blue !important; } /* Name.Variable.Instance */
|
|
| 134 |
+ .nv { color: $blue !important; } /* Name.Variable */
|
|
| 135 |
+ //.w { color: #bbbbbb } /* Text.Whitespace */
|
|
| 136 |
+ .mf { color: $cyan !important; } /* Literal.Number.Float */
|
|
| 137 |
+ .m { color: $cyan !important; } /* Literal.Number */
|
|
| 138 |
+ .mh { color: $cyan !important; } /* Literal.Number.Hex */
|
|
| 139 |
+ .mi { color: $cyan !important; } /* Literal.Number.Integer */
|
|
| 140 |
+ //.mo { color: #009999 } /* Literal.Number.Oct */
|
|
| 141 |
+ .s { color: $cyan !important; } /* Literal.String */
|
|
| 142 |
+ //.sb { color: #d14 } /* Literal.String.Backtick */
|
|
| 143 |
+ //.sc { color: #d14 } /* Literal.String.Char */
|
|
| 144 |
+ .sd { color: $cyan !important; } /* Literal.String.Doc */
|
|
| 145 |
+ .s2 { color: $cyan !important; } /* Literal.String.Double */
|
|
| 146 |
+ .se { color: $red !important; } /* Literal.String.Escape */
|
|
| 147 |
+ //.sh { color: #d14 } /* Literal.String.Heredoc */
|
|
| 148 |
+ .si { color: $blue !important; } /* Literal.String.Interpol */
|
|
| 149 |
+ //.sx { color: #d14 } /* Literal.String.Other */
|
|
| 150 |
+ .sr { color: $cyan !important; } /* Literal.String.Regex */
|
|
| 151 |
+ .s1 { color: $cyan !important; } /* Literal.String.Single */
|
|
| 152 |
+ //.ss { color: #990073 } /* Literal.String.Symbol */
|
|
| 153 |
+ //.il { color: #009999 } /* Literal.Number.Integer.Long */
|
|
| 154 |
+ div { .gd, .gd .x, .gi, .gi .x { display: block; }}
|
|
| 155 |
+} |
|
| 156 |
+ |
|
| 157 |
+.highlight, .gist-highlight {
|
|
| 158 |
+ pre { background: none; @include border-radius(none); border: none; padding: 0; margin-bottom: 0; }
|
|
| 159 |
+ margin-bottom: 1.5em; |
|
| 160 |
+ background: $base03; |
|
| 161 |
+ overflow-y: hidden; |
|
| 162 |
+ overflow-x: auto; |
|
| 163 |
+} |
|
| 164 |
+.highlight code { @extend .pre-code; background: #000;}
|
|
| 165 |
+figure {
|
|
| 166 |
+ margin-bottom: 1.5em; |
|
| 167 |
+ figcaption {
|
|
| 168 |
+ position: relative; |
|
| 169 |
+ @extend .code-title; |
|
| 170 |
+ a { @extend .download-source; }
|
|
| 171 |
+ } |
|
| 172 |
+ .highlight { margin-bottom: 0; border-bottom: 1px solid darken($base03, 2) !important; }
|
|
| 173 |
+} |
|
| 174 |
+h3.filename { @extend .code-title; }
|
|
| 175 |
+.code-title {
|
|
| 176 |
+ text-align: center; |
|
| 177 |
+ font-size: 13px; |
|
| 178 |
+ line-height: 2em; |
|
| 179 |
+ text-shadow: #cbcccc 0 1px 0; |
|
| 180 |
+ color: #474747; |
|
| 181 |
+ font-style: normal; |
|
| 182 |
+ margin-bottom: 0; |
|
| 183 |
+ |
|
| 184 |
+ @include border-top-radius(5px); |
|
| 185 |
+ font-family: "Helvetica Neue", Arial, "Lucida Grande", "Lucida Sans Unicode", Lucida, sans-serif; |
|
| 186 |
+ background: #aaaaaa image-url("code_bg.png") top repeat-x;
|
|
| 187 |
+ border: 1px solid #565656; |
|
| 188 |
+ border-top-color: #cbcbcb; |
|
| 189 |
+ border-left-color: #a5a5a5; |
|
| 190 |
+ border-right-color: #a5a5a5; |
|
| 191 |
+ border-bottom: 0; |
|
| 192 |
+} |
|
| 193 |
+ |
|
| 194 |
+.download-source {
|
|
| 195 |
+ position: absolute; right: .8em; |
|
| 196 |
+ @include hover-link; |
|
| 197 |
+ color: #666 !important; |
|
| 198 |
+ z-index: 1; |
|
| 199 |
+ font-size: 13px; |
|
| 200 |
+ text-shadow: #cbcccc 0 1px 0; |
|
| 201 |
+ padding-left: 3em; |
|
| 202 |
+} |
|
| 203 |
+ |
| 0 | 204 |
new file mode 100644 |
| ... | ... |
@@ -0,0 +1,33 @@ |
| 0 |
+#tweets {
|
|
| 1 |
+ .loading {
|
|
| 2 |
+ background: inline-image('bird_32_gray.png') no-repeat center .5em;
|
|
| 3 |
+ color: darken($sidebar-bg, 18); |
|
| 4 |
+ text-shadow: $main-bg 0 1px; |
|
| 5 |
+ text-align: center; |
|
| 6 |
+ padding: 2.5em 0 .5em; |
|
| 7 |
+ &.error {
|
|
| 8 |
+ background: inline-image('bird_32_gray_fail.png') no-repeat center .5em;
|
|
| 9 |
+ } |
|
| 10 |
+ } |
|
| 11 |
+ a { color: $sidebar-link-color-subdued; @include hover-link; }
|
|
| 12 |
+ p {
|
|
| 13 |
+ position: relative; |
|
| 14 |
+ padding-right: 1em; |
|
| 15 |
+ } |
|
| 16 |
+ a[href*=status]{
|
|
| 17 |
+ color: $twitter-status-link; |
|
| 18 |
+ float: right; |
|
| 19 |
+ padding: 0 0 .1em 1em; |
|
| 20 |
+ position: relative; right: -1.3em; |
|
| 21 |
+ text-shadow: #fff 0 1px; |
|
| 22 |
+ font-size: .7em; |
|
| 23 |
+ span { font-size: 1.5em; }
|
|
| 24 |
+ &:hover {
|
|
| 25 |
+ color: $sidebar-link-color-subdued-hover; |
|
| 26 |
+ text-decoration: none; |
|
| 27 |
+ } |
|
| 28 |
+ } |
|
| 29 |
+ a[href*='twitter.com/search']{
|
|
| 30 |
+ @extend .aside-alt-link; |
|
| 31 |
+ } |
|
| 32 |
+} |
| ... | ... |
@@ -1,2 +1,20 @@ |
| 1 | 1 |
@import "compass"; |
| 2 |
-@import "default/style"; |
|
| 2 |
+@include global-reset; |
|
| 3 |
+@include reset-html5; |
|
| 4 |
+ |
|
| 5 |
+@import "core/utilities"; |
|
| 6 |
+@import "partials/solarized"; |
|
| 7 |
+@import "custom/colors"; |
|
| 8 |
+@import "core/theme"; |
|
| 9 |
+@import "core/layout"; |
|
| 10 |
+@import "core/typography"; |
|
| 11 |
+ |
|
| 12 |
+/* layout partials */ |
|
| 13 |
+@import "partials/header"; |
|
| 14 |
+@import "partials/navigation"; |
|
| 15 |
+@import "partials/page"; |
|
| 16 |
+@import "partials/sidebar"; |
|
| 17 |
+@import "partials/blog"; |
|
| 18 |
+@import "partials/footer"; |
|
| 19 |
+@import "partials/syntax"; |
|
| 20 |
+@import "custom/styles"; |