aboutsummaryrefslogtreecommitdiff
path: root/.themes/classic/sass/base
diff options
context:
space:
mode:
authorBrandon Mathis <brandon@imathis.com>2011-06-29 14:01:06 -0400
committerBrandon Mathis <brandon@imathis.com>2011-06-29 14:01:06 -0400
commitea349cdfbfa4d42110099e49a8ff23f7213cd5b6 (patch)
treeaca4c6c7646207fe295197695b0cf87ee2a46913 /.themes/classic/sass/base
parentce6621724c8d13530681724528b22e1c381f0dc2 (diff)
downloadmy_new_personal_website-ea349cdfbfa4d42110099e49a8ff23f7213cd5b6.tar.xz
my_new_personal_website-ea349cdfbfa4d42110099e49a8ff23f7213cd5b6.zip
Moved themes to .themes to get it out of the way. Updated Rakefile to support .themes dir and remove duplication. Improved deploy task. Renamed init_deploy to cofig_deploy and rewrote it to update configurations in the Rakefile for easier deploy use
Diffstat (limited to '.themes/classic/sass/base')
-rw-r--r--.themes/classic/sass/base/_layout.scss134
-rw-r--r--.themes/classic/sass/base/_solarized.scss16
-rw-r--r--.themes/classic/sass/base/_theme.scss76
-rw-r--r--.themes/classic/sass/base/_typography.scss130
-rw-r--r--.themes/classic/sass/base/_utilities.scss21
5 files changed, 377 insertions, 0 deletions
diff --git a/.themes/classic/sass/base/_layout.scss b/.themes/classic/sass/base/_layout.scss
new file mode 100644
index 00000000..b24e1b29
--- /dev/null
+++ b/.themes/classic/sass/base/_layout.scss
@@ -0,0 +1,134 @@
+$max-width: 1200px !default;
+
+// Padding used for layout margins
+$pad-min: 18px !default;
+$pad-narrow: 25px !default;
+$pad-medium: 35px !default;
+$pad-wide: 55px !default;
+
+// Sidebar widths used in media queries
+$sidebar-width-medium: 240px !default;
+$sidebar-pad-medium: 15px !default;
+$sidebar-pad-wide: 20px !default;
+$sidebar-width-wide: 300px !default;
+
+.group { @include pie-clearfix; }
+
+body {
+ -webkit-text-size-adjust: none;
+ max-width: $max-width;
+ position: relative;
+ margin: 0 auto;
+ > header, > nav, > footer, #articles > article, #articles > nav {
+ @extend .group;
+ padding-left: $pad-min;
+ padding-right: $pad-min;
+ @media only screen and (min-width: 480px) {
+ padding-left: $pad-narrow;
+ padding-right: $pad-narrow;
+ }
+ @media only screen and (min-width: 768px) {
+ padding-left: $pad-medium;
+ padding-right: $pad-medium;
+ }
+ @media only screen and (min-width: 992px) {
+ padding-left: $pad-wide;
+ padding-right: $pad-wide;
+ }
+ }
+ > header {
+ font-size: 1em;
+ padding-top: 1.5em;
+ padding-bottom: 1.5em;
+ }
+}
+
+.toggle-sidebar { display: none; }
+#articles { width: 100%;
+ + aside {
+ float: none;
+ padding: 0 $pad-min 1px;
+ background-color: $sidebar-bg;
+ border-top: 1px solid $sidebar-border;
+ }
+}
+
+@media only screen and (min-width: 550px) {
+ body > header { font-size: 1em; }
+}
+@media only screen and (min-width: 768px) {
+ body { -webkit-text-size-adjust: auto; }
+ body > header { font-size: 1.2em; }
+ body > nav {
+ + div {
+ @extend .group;
+ padding: 0;
+ margin: 0 auto;
+ > div {
+ @extend .group;
+ margin-right: $sidebar-width-medium;
+ }
+ }
+ }
+ #articles {
+ padding-top: $pad-medium/2;
+ padding-bottom: $pad-medium/2;
+ float: left;
+ + aside {
+ width: $sidebar-width-medium - $sidebar-pad-medium*2;
+ padding: 0 $sidebar-pad-medium $sidebar-pad-medium;
+ background: none;
+ float: left;
+ margin: 0 -100% 0 0;
+ }
+ }
+ body > div > div { position: relative; }
+
+ .collapse-sidebar {
+ > div > div { margin-right: 10px; }
+ #articles + aside {
+ display: none;
+ }
+ .toggle-sidebar {
+ right: -1px;
+ background-color: $sidebar-bg;
+ border-right-width: 0;
+ text-indent: 2px;
+ border-left: 1px solid $sidebar-border;
+ @include border-bottom-right-radius(0);
+ @include border-bottom-left-radius(.3em);
+ @include link-colors(#aaa, #888);
+ }
+ }
+
+ .toggle-sidebar {
+ outline: none;
+ position: absolute; right: -21px; top: 0;
+ width: 20px;
+ font-size: 1.2em;
+ line-height: 1.1em;
+ padding-bottom: .1em;
+ text-indent: -1px;
+ text-decoration: none;
+ @include link-colors(#ccc, #999);
+ @include border-bottom-right-radius(.3em);
+ text-align: center;
+ background: $main-bg;
+ border-bottom: 1px solid $sidebar-border;
+ border-right: 1px solid $sidebar-border;
+ display: inline-block;
+ }
+}
+
+@media only screen and (min-width: 992px) {
+ body > header { font-size: 1.3em; }
+ body > nav + div > div { margin-right: $sidebar-width-wide; }
+ #articles {
+ padding-top: $pad-wide/2;
+ padding-bottom: $pad-wide/2;
+ + aside {
+ width: $sidebar-width-wide - $sidebar-pad-wide*2;
+ padding: 1.2em $sidebar-pad-wide $sidebar-pad-wide;
+ }
+ }
+}
diff --git a/.themes/classic/sass/base/_solarized.scss b/.themes/classic/sass/base/_solarized.scss
new file mode 100644
index 00000000..4952120d
--- /dev/null
+++ b/.themes/classic/sass/base/_solarized.scss
@@ -0,0 +1,16 @@
+$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;
diff --git a/.themes/classic/sass/base/_theme.scss b/.themes/classic/sass/base/_theme.scss
new file mode 100644
index 00000000..42fdb6f2
--- /dev/null
+++ b/.themes/classic/sass/base/_theme.scss
@@ -0,0 +1,76 @@
+$img-border: inline-image('dotted-border.png');
+
+// Main Link Colors
+$link-color: lighten(#165b94, 3) !default;
+$link-color-hover: adjust-hue($link-color, -200) !default;
+$link-color-visited: darken(adjust_hue($link_color, 70), 10) !default;
+$link-color-active: darken($link-color-hover, 15) !default;
+
+// Main Section Colors
+$main-bg: #f8f8f8 !default;
+$page-bg: #252525 !default;
+$article-border: #eeeeee !default;
+
+$header-bg: #333 !default;
+$header-border: lighten($header-bg, 15) !default;
+$title-color: #f2f2f2 !default;
+$subtitle-color: #aaa !default;
+
+$text-color: #222 !default;
+$text-color-light: #aaa !default;
+$type-border: #ddd !default;
+
+
+/* Navigation */
+$nav-bg: #ccc !default;
+$nav-color: darken($nav-bg, 38) !default;
+$nav-color-hover: darken($nav-color, 25) !default;
+$nav-placeholder: desaturate(darken($nav-bg, 10), 15) !default;
+$nav-border: darken($nav-bg, 10) !default;
+$nav-border-top: lighten($nav-bg, 15) !default;
+$nav-border-bottom: darken($nav-bg, 25) !default;
+$nav-border-left: darken($nav-bg, 11) !default;
+$nav-border-right: lighten($nav-bg, 7) !default;
+
+/* Sidebar colors */
+$sidebar-bg: #eee !default;
+$sidebar-link-color: $link-color !default;
+$sidebar-link-color-hover: $link-color-hover !default;
+$sidebar-color: change-color(mix($text-color, $sidebar-bg, 80), $hue: hue($sidebar-bg), $saturation: saturation($sidebar-bg)/2) !default;
+$sidebar-border: desaturate(darken($sidebar-bg, 7), 10) !default;
+$sidebar-border: darken($sidebar-bg, 7) !default;
+$sidebar-link-color-subdued: lighten($sidebar-color, 20) !default;
+$sidebar-link-color-subdued-hover: $sidebar-link-color-hover !default;
+$twitter-status-link: lighten($sidebar-link-color-subdued, 15) !default;
+
+$footer-color: #888 !default;
+$footer-bg: #ccc !default;
+$footer-color: darken($footer-bg, 38) !default;
+$footer-color-hover: darken($footer-color, 10) !default;
+$footer-border-top: lighten($footer-bg, 15) !default;
+$footer-border-bottom: darken($footer-bg, 15) !default;
+$footer-link-color: darken($footer-bg, 38) !default;
+$footer-link-color-hover: darken($footer-color, 25) !default;
+$page-border-bottom: darken($footer-bg, 5) !default;
+
+
+/* Core theme application */
+
+article a, #articles + aside a {
+ @include link-colors($link-color, $hover: $link-color-hover, $focus: $link-color-hover, $visited: $link-color-visited, $active: $link-color-active);
+}
+a { @include transition(color, .5s); }
+
+html {
+ background: $page-bg image-url('line-tile.png') top left;
+}
+body {
+ > div {
+ background: $sidebar-bg image-url('noise.png') top left;
+ border-bottom: 1px solid $page-border-bottom;
+ > div {
+ background: $main-bg image-url('noise.png') top left;
+ border-right: 1px solid $sidebar-border;
+ }
+ }
+}
diff --git a/.themes/classic/sass/base/_typography.scss b/.themes/classic/sass/base/_typography.scss
new file mode 100644
index 00000000..8ab0e657
--- /dev/null
+++ b/.themes/classic/sass/base/_typography.scss
@@ -0,0 +1,130 @@
+$blockquote: $type-border !default;
+$mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
+
+// Fonts
+.heading {
+ font-family: "PT Serif", "Georgia", "Helvetica Neue", Arial, sans-serif;
+}
+.sans { font-family: "PT Sans", "Helvetica Neue", Arial, sans-serif; }
+.serif { font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; }
+.mono { font-family: $mono; }
+
+body > header h1 {
+ font-size: 2.6em;
+ @extend .heading;
+ font-weight: normal;
+ line-height: 1.2em;
+ margin-bottom: 0.6667em;
+}
+
+body {
+ line-height: 1.5em;
+ color: $text-color;
+ @extend .serif;
+}
+
+#{headings()}{
+ @extend .heading;
+ text-rendering: optimizelegibility;
+ margin-bottom: 1em;
+ font-weight: bold;
+}
+h1 {
+ font-size: 3.2em;
+ line-height: 1.2em;
+ @media only screen and (max-width: 768px) { font-size: 2.2em; }
+}
+
+
+h2, section h1 {
+ font-size: 1.5em;
+}
+h3, section h2, section section h1 {
+ font-size: 1.3em;
+}
+h4, section h3, section section h2, section section section h1 {
+ font-size: 1em;
+}
+h5, section h4, section section h3 {
+ font-size: .9em;
+}
+h6, section h5, section section h4, section section section h3 {
+ font-size: .8em;
+}
+p, blockquote, ul, ol { margin-bottom: 1.5em; }
+
+ul{ list-style-type: circle; }
+
+ol{ list-style-type: decimal; ol { list-style-type: lower-alpha; } }
+ul ul, ol ol { margin-left: 1.75em; }
+
+strong { font-weight: bold; }
+
+em { font-style: italic; }
+
+sup, sub { font-size: 0.8em; position: relative; display: inline-block; }
+sup { top: -.5em; }
+sub { bottom: -.5em; }
+
+q { font-style: italic;
+ &:before { content: "\201C"; }
+ &:after { content: "\201D"; }
+}
+
+em, dfn { font-style: italic; }
+
+strong, dfn { font-weight: bold; }
+
+del, s { text-decoration: line-through; }
+
+abbr, acronym { border-bottom: 1px dotted; cursor: help; }
+
+pre, code, tt { @extend .mono-font; }
+
+sub, sup { line-height: 0; }
+
+hr { margin-bottom: 0.2em; }
+
+small { font-size: .8em; }
+
+big { font-size: 1.2em; }
+
+blockquote {
+ $bq-margin: 1.2em;
+ font-style: italic;
+ position: relative;
+ font-size: 1.2em;
+ line-height: 1.5em;
+ padding-left: 1em;
+ border-left: 4px solid rgba($text-color-light, .5);
+ cite {
+ font-style: italic;
+ a { color: $text-color-light !important; word-wrap: break-word; }
+ &:before { content: '–'; padding:{right: .3em; left: .3em;} color: $text-color-light; }
+ }
+ @media only screen and (min-width: 992px) {
+ padding-left: 1.5em;
+ border-left-width: 4px;
+ }
+}
+
+.has-pullquote:before {
+ /* Reset metrics. */
+ padding: 0;
+ border: none;
+
+ /* Content */
+ content: attr(data-pullquote);
+
+ /* Pull out to the right, modular scale based margins. */
+ float: right;
+ width: 45%;
+ margin: .5em 0 1em 1.5em;
+
+ /* Baseline correction */
+ position: relative;
+ top: 7px;
+ font-size: 1.4em;
+ line-height: 1.45em;
+}
+
diff --git a/.themes/classic/sass/base/_utilities.scss b/.themes/classic/sass/base/_utilities.scss
new file mode 100644
index 00000000..8b718cdc
--- /dev/null
+++ b/.themes/classic/sass/base/_utilities.scss
@@ -0,0 +1,21 @@
+@mixin mask-image($img, $repeat: no-repeat){
+ @include experimental(mask-image, image-url($img), -webkit, -moz, -o, -ms);
+ @include experimental(mask-repeat, $repeat, -webkit, -moz, -o, -ms);
+ width: image-width($img);
+ height: image-height($img);
+}
+
+@mixin selection($bg, $color: inherit, $text-shadow: none){
+ * {
+ &::-moz-selection { background: $bg; color: $color; text-shadow: $text-shadow; }
+ &::-webkit-selection { background: $bg; color: $color; text-shadow: $text-shadow; }
+ &::selection { background: $bg; color: $color; text-shadow: $text-shadow; }
+ }
+}
+
+@function text-color($color, $dark: dark, $light: light){
+ $text-color: ( (red($color)*299) + (green($color)*587) + (blue($color)*114) ) / 1000;
+ $text-color: if($text-color >= 150, $dark, $light);
+ @return $text-color;
+}
+