aboutsummaryrefslogtreecommitdiff
path: root/.themes/classic/sass
diff options
context:
space:
mode:
authorBrandon Mathis <brandon@imathis.com>2011-07-12 19:40:57 -0400
committerBrandon Mathis <brandon@imathis.com>2011-07-12 19:40:57 -0400
commit5d1d04c52c014171b911c3d7c23108e64f0ee9df (patch)
tree21a58dcdfb8def51d69d4f180fce134cf4ecc9ec /.themes/classic/sass
parent67c5edb2f6eb8747a659109fe160b4c54f6e2917 (diff)
downloadmy_new_personal_website-5d1d04c52c014171b911c3d7c23108e64f0ee9df.tar.xz
my_new_personal_website-5d1d04c52c014171b911c3d7c23108e64f0ee9df.zip
1. Made default layout more generic.
2. Added a page layout and improved html on post layout. 3. Improved flexibility of stylesheets for different layout types. 4. Collapsing sidebar now moves it to the bottom of the page and floats content into columns. 5. Improved sharing settings, added Google plus one.
Diffstat (limited to '.themes/classic/sass')
-rw-r--r--.themes/classic/sass/_partials.scss1
-rw-r--r--.themes/classic/sass/base/_layout.scss118
-rw-r--r--.themes/classic/sass/partials/_archive.scss6
-rw-r--r--.themes/classic/sass/partials/_blog.scss25
-rw-r--r--.themes/classic/sass/partials/_sharing.scss7
-rw-r--r--.themes/classic/sass/partials/_syntax.scss6
-rw-r--r--.themes/classic/sass/partials/sidebar/_base.scss4
7 files changed, 101 insertions, 66 deletions
diff --git a/.themes/classic/sass/_partials.scss b/.themes/classic/sass/_partials.scss
index 2ffed5ba..99c28b63 100644
--- a/.themes/classic/sass/_partials.scss
+++ b/.themes/classic/sass/_partials.scss
@@ -1,6 +1,7 @@
@import "partials/header";
@import "partials/navigation";
@import "partials/blog";
+@import "partials/sharing";
@import "partials/syntax";
@import "partials/archive";
@import "partials/sidebar";
diff --git a/.themes/classic/sass/base/_layout.scss b/.themes/classic/sass/base/_layout.scss
index b24e1b29..b1b44738 100644
--- a/.themes/classic/sass/base/_layout.scss
+++ b/.themes/classic/sass/base/_layout.scss
@@ -19,7 +19,7 @@ body {
max-width: $max-width;
position: relative;
margin: 0 auto;
- > header, > nav, > footer, #articles > article, #articles > nav {
+ > header, > nav, > footer, #content > article, #content > div > article {
@extend .group;
padding-left: $pad-min;
padding-right: $pad-min;
@@ -43,64 +43,77 @@ body {
}
}
-.toggle-sidebar { display: none; }
-#articles { width: 100%;
- + aside {
+#content {
+ > div, > article { width: 100%; }
+ > aside {
float: none;
padding: 0 $pad-min 1px;
- background-color: $sidebar-bg;
+ background-color: lighten($sidebar-bg, 2);
border-top: 1px solid $sidebar-border;
}
}
+.toggle-sidebar { display: none; }
+
@media only screen and (min-width: 550px) {
body > header { font-size: 1em; }
+ #content aside {
+ @extend .group;
+ section {
+ &.odd, &.even { float: left; width: 48%; }
+ &.odd { margin-left: 0; }
+ &.even { margin-left: 4%; }
+ }
+ }
}
@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;
- }
- }
+ #main {
+ @extend .group;
+ padding: 0;
+ margin: 0 auto;
}
- #articles {
- padding-top: $pad-medium/2;
- padding-bottom: $pad-medium/2;
- float: left;
- + aside {
+ #content {
+ @extend .group;
+ margin-right: $sidebar-width-medium;
+ position: relative;
+ > div, > article {
+ 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;
+ section, section.even { width: auto; margin: 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);
+ .collapse-sidebar & {
+ margin-right: 10px;
+ > aside {
+ float: none;
+ clear: left;
+ width: auto;
+ margin: 0;
+ padding: 0 $pad-medium 1px;
+ background-color: lighten($sidebar-bg, 2);
+ border-top: 1px solid lighten($sidebar-border, 4);
+ section {
+ &.odd, &.even { float: left; width: 48%; }
+ &.odd { margin-left: 0; }
+ &.even { margin-left: 4%; }
+ }
+ }
+ > aside.thirds section {
+ width: 30%;
+ margin-left: 5%;
+ &.first { margin-left: 0; }
+ }
}
}
-
.toggle-sidebar {
outline: none;
position: absolute; right: -21px; top: 0;
@@ -117,18 +130,37 @@ body {
border-bottom: 1px solid $sidebar-border;
border-right: 1px solid $sidebar-border;
display: inline-block;
+ .collapse-sidebar & {
+ right: -11px;
+ width: 24px;
+ bottom: 0;
+ background-color: $sidebar-bg;
+ border-right-width: 0;
+ text-indent: 0px;
+ border-left: 1px solid $sidebar-border;
+ @include link-colors(#aaa, #888);
+ &:hover {
+ background: $sidebar-border;
+ }
+ }
}
}
@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 {
+ #content { margin-right: $sidebar-width-wide; }
+ #content {
+ > div, > article {
+ 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;
}
+ .collapse-sidebar & aside {
+ padding: { left: $pad-wide; right: $pad-wide; }
+ @extend .group;
+ }
}
}
diff --git a/.themes/classic/sass/partials/_archive.scss b/.themes/classic/sass/partials/_archive.scss
index fbf0dac6..3a19af5d 100644
--- a/.themes/classic/sass/partials/_archive.scss
+++ b/.themes/classic/sass/partials/_archive.scss
@@ -1,4 +1,4 @@
-#articles .blog-archives {
+#blog-archives {
article {
padding: 1em 0 1em;
position: relative;
@@ -57,13 +57,11 @@
padding:{left: 4.5em; bottom: .7em;}
}
a.category {
- //text-align: right;
line-height: 1.1em;
- //float: right;
}
}
}
-#articles .blog-archives.category {
+#content > .category {
article {
margin-left: 0;
padding-left: 6.8em;
diff --git a/.themes/classic/sass/partials/_blog.scss b/.themes/classic/sass/partials/_blog.scss
index 50fef177..c2c598ff 100644
--- a/.themes/classic/sass/partials/_blog.scss
+++ b/.themes/classic/sass/partials/_blog.scss
@@ -1,16 +1,17 @@
-#articles {
- overflow: hidden;
- ul, ol { margin-left: 1.4em; }
+#content {
+ article { ul, ol { margin-left: 1.4em; }}
@media only screen and (min-width: 768px) {
ul, ol { margin-left: 0; }
}
- > article {
+ > article, > div > article {
+ overflow: hidden;
padding-bottom: 1em;
&:last-child { margin-bottom: 0; }
h2 {
padding-top: 0.8em;
background: $img-border top left repeat-x;
- &:first-child { background: none; padding-top: 0; }
+ .entry-content &:first-child { padding-top: 0; }
+ &:first-child { background: none; }
}
.byline + time:before, time +time:before, .comments:before, .byline ~ .categories:before {
@extend .separator;
@@ -80,24 +81,20 @@
}
}
}
- iframe.twitter-share-button {
- position: relative;
- top: .3em;
- padding-left: .5em;
- }
- > article > footer {
- margin-top: 2em;
- padding-top: 1em;
+ > div > article > footer {
margin-bottom: 1.5em;
background: $img-border top left repeat-x;
+ margin-top: 2em;
+ padding-top: 1em;
@extend .sans;
+ p.meta { display: inline-block; font-size: .8em; }
}
}
article + article {
background: $img-border top left repeat-x;
}
-#articles.blog-index {
+#content .blog-index {
article header { background: none; padding-bottom: 0; }
article h1 {
font-size: 2.2em;
diff --git a/.themes/classic/sass/partials/_sharing.scss b/.themes/classic/sass/partials/_sharing.scss
new file mode 100644
index 00000000..58a4c30b
--- /dev/null
+++ b/.themes/classic/sass/partials/_sharing.scss
@@ -0,0 +1,7 @@
+footer .sharing {
+ display: inline-block;
+ position: relative;
+ top: .3em;
+ padding-left: .5em;
+ &:first-child { padding-left: 0; }
+}
diff --git a/.themes/classic/sass/partials/_syntax.scss b/.themes/classic/sass/partials/_syntax.scss
index 523010bd..02ad74ba 100644
--- a/.themes/classic/sass/partials/_syntax.scss
+++ b/.themes/classic/sass/partials/_syntax.scss
@@ -1,7 +1,7 @@
.highlight, html .gist .gist-file .gist-syntax .gist-highlight {
.line-numbers {
text-align: right;
- font-size: .8em;
+ font-size: 13px;
line-height: 1.45em;
background: $base02 $noise-bg !important;
border-right: 1px solid darken($base03, 2) !important;
@@ -57,7 +57,7 @@ pre {
@extend .mono;
border: 1px solid $pre-border;
line-height: 1.45em;
- font-size: .8em;
+ font-size: 13px;
margin-bottom: 1.5em;
padding: .8em 1em;
color: $pre-color;
@@ -73,7 +73,7 @@ p code {
display: inline-block;
white-space: no-wrap;
background: #fff;
- font-size: .9em;
+ font-size: .8em;
line-height: 1.5em;
color: #555;
border: 1px solid #ddd;
diff --git a/.themes/classic/sass/partials/sidebar/_base.scss b/.themes/classic/sass/partials/sidebar/_base.scss
index 861efc91..6499611f 100644
--- a/.themes/classic/sass/partials/sidebar/_base.scss
+++ b/.themes/classic/sass/partials/sidebar/_base.scss
@@ -1,9 +1,9 @@
.side-shadow-border {
@include box-shadow(lighten($sidebar-bg, 5) 0 1px);
}
-#articles + aside {
+#content > aside {
color: $sidebar-color;
- padding-top: 1.2em;
+ //padding-top: 1.2em;
text-shadow: lighten($sidebar-bg, 8) 0 1px;
section {
@extend .sans;