diff options
Diffstat (limited to '')
-rw-r--r-- | sass/screen.scss (renamed from source/sass/screen.scss) | 2 | ||||
-rw-r--r-- | sass/themes/classic/_partials.scss (renamed from source/sass/themes/classic/_partials.scss) | 10 | ||||
-rw-r--r-- | sass/themes/classic/_style.scss (renamed from source/sass/themes/classic/_style.scss) | 4 | ||||
-rw-r--r-- | sass/themes/classic/core/_layout.scss | 94 | ||||
-rw-r--r-- | sass/themes/classic/core/_theme.scss (renamed from source/sass/themes/classic/core/_theme.scss) | 0 | ||||
-rw-r--r-- | sass/themes/classic/core/_typography.scss (renamed from source/sass/themes/classic/core/_typography.scss) | 21 | ||||
-rw-r--r-- | sass/themes/classic/media/_480.scss | 16 | ||||
-rw-r--r-- | sass/themes/classic/media/_768.scss | 16 | ||||
-rw-r--r-- | sass/themes/classic/media/_992.scss | 3 | ||||
-rw-r--r-- | sass/themes/classic/partials/_blog.scss (renamed from source/sass/themes/classic/partials/_blog.scss) | 3 | ||||
-rw-r--r-- | sass/themes/classic/partials/_footer.scss (renamed from source/sass/themes/classic/partials/_footer.scss) | 0 | ||||
-rw-r--r-- | sass/themes/classic/partials/_header.scss (renamed from source/sass/themes/classic/partials/_header.scss) | 6 | ||||
-rw-r--r-- | sass/themes/classic/partials/_navigation.scss | 67 | ||||
-rw-r--r-- | sass/themes/classic/partials/_page.scss (renamed from source/sass/themes/classic/partials/_page.scss) | 4 | ||||
-rw-r--r-- | sass/themes/classic/partials/_search.scss | 0 | ||||
-rw-r--r-- | sass/themes/classic/partials/_shared.scss (renamed from source/sass/themes/classic/partials/_shared.scss) | 0 | ||||
-rw-r--r-- | sass/themes/classic/partials/_sidebar.scss | 20 | ||||
-rw-r--r-- | sass/themes/classic/partials/_syntax.scss (renamed from source/sass/themes/classic/partials/_syntax.scss) | 0 | ||||
-rw-r--r-- | sass/themes/classic/partials/_twitter.scss (renamed from source/sass/themes/classic/partials/_twitter.scss) | 0 |
19 files changed, 238 insertions, 28 deletions
diff --git a/source/sass/screen.scss b/sass/screen.scss index 4edf7422..c090c3b5 100644 --- a/source/sass/screen.scss +++ b/sass/screen.scss @@ -1,5 +1,5 @@ @import "compass"; -@import "compass/layout"; + @include global-reset; diff --git a/source/sass/themes/classic/_partials.scss b/sass/themes/classic/_partials.scss index c88faaac..e1e72490 100644 --- a/source/sass/themes/classic/_partials.scss +++ b/sass/themes/classic/_partials.scss @@ -1,8 +1,8 @@ -@import "partials/shared"; -@import "partials/syntax"; -@import "partials/search"; -@import "partials/sidebar"; -@import "partials/twitter"; +//@import "partials/shared"; +//@import "partials/syntax"; +//@import "partials/search"; +//@import "partials/sidebar"; +//@import "partials/twitter"; /* layout partials */ @import "partials/header"; diff --git a/source/sass/themes/classic/_style.scss b/sass/themes/classic/_style.scss index f36aaa18..70421360 100644 --- a/source/sass/themes/classic/_style.scss +++ b/sass/themes/classic/_style.scss @@ -1,4 +1,4 @@ -@import "core/layout"; @import "core/theme"; +@import "core/layout"; @import "core/typography"; -//@import "partials"; +@import "partials"; diff --git a/sass/themes/classic/core/_layout.scss b/sass/themes/classic/core/_layout.scss new file mode 100644 index 00000000..b245fd1f --- /dev/null +++ b/sass/themes/classic/core/_layout.scss @@ -0,0 +1,94 @@ +a { + color: $link_color; + &:hover, &:focus { + color: saturate(darken($link_color, 15), 20); } + &:visited { + color: darken(adjust_hue($link_color, 70), 10); + } +} + +$min-width: 320px; +$max-width: 1440px; +$default-border-radius: 4px; + +.group { @include pie-clearfix; } +.core-layout { > div { @extend .inner-wrap; } } + +body { + > header, > nav, > footer { + @extend .core-layout; + min-width: $min-width; + } +} + + +@mixin media-layout($page-pad, $sidebar-width, $sidebar-pad) { + $side-nav: $sidebar-width - $page-pad - $sidebar-pad; + + .inner-wrap { + padding: 0 $page-pad; + position: relative; + margin: 0 auto; + max-width: $max-width; + @extend .group; + } + + body > nav + div { + @extend .group; + padding: 0; + max-width: $max-width + $page-pad*2; + margin: 0 auto; + > div { + @extend .group; + margin-right: $sidebar-width; + } + } + body > nav > div > div { width: $side-nav; + .search { width: $side-nav - 70px; } + } + + #articles { + float: left; + width: 100%; + padding-top: 25px; + padding-bottom: 25px; + > * { + padding-right: $page-pad; + padding-left: $page-pad; + } + > article { + margin-bottom: 1.5em; + padding-bottom: 1.5em; + padding-right: $page-pad; + padding-left: $page-pad; + } + + aside { + display: block; + float: left; + width: $sidebar-width - $sidebar-pad*2; + margin: 0 -100% 0 0; + padding: $sidebar-pad; + } + } +} + +@media only screen and (min-width: 320px) { + @import "../media/480"; +} + +@media only screen and (min-width: 768px) { + @include media-layout(15px, 240px, 15px); + @import "../media/768"; +} + +@media only screen and (min-width: 992px) { + @include media-layout(40px, 320px, 30px); + @import "../media/992"; +} + + +//*{ + //transition: width .5s; + //-moz-transition: width .5s; + //-webkit-transition: margin .5s; +//} diff --git a/source/sass/themes/classic/core/_theme.scss b/sass/themes/classic/core/_theme.scss index a69b11d7..a69b11d7 100644 --- a/source/sass/themes/classic/core/_theme.scss +++ b/sass/themes/classic/core/_theme.scss diff --git a/source/sass/themes/classic/core/_typography.scss b/sass/themes/classic/core/_typography.scss index 473f0744..5916c82e 100644 --- a/source/sass/themes/classic/core/_typography.scss +++ b/sass/themes/classic/core/_typography.scss @@ -7,6 +7,7 @@ $blockquote: $type-border !default; //darken($type-border, 20) !default; // Fonts @include font-face("Adelle", font-files("adellebasic_bold-webfont.woff", woff, "adellebasic_bold-webfont.ttf", truetype, "adellebasic_bold-webfont.svg#webfontKykxqSyz", svg), $eot: "adellebasic_bold-webfont.eot" ); .heading-font { font-family: Adelle, "Helvetica Neue", Helvetica, Arial, sans; } +.sans-font { font-family: "Helvetica Neue", Helvetica, Arial, sans; } body > header h1 { font-size: 3em; @@ -24,17 +25,17 @@ body { } article { - margin-bottom: 1.5em; - padding-bottom: 1.5em; - padding-top: 1em; - + article { border-top: 3px solid $type-color-light; } &:last-child { border-bottom: none; } h2 { padding-top: 0.8em; border-top: 3px double $type-border; } - .author, time { text-transform: uppercase; } - .updated { font-size: .8em; color: $type-color-light; } + .byline + time:before, .byline + time +time:before { + content: "\2022 "; + padding: 0 .3em 0 .2em; + display: inline-block; + @include opacity(.5); + } time span { font-size: .7em; line-height: 0; @@ -47,13 +48,7 @@ article { font-size: .8em; color: $type-color-light; font-family: Palatino, Times, "Times New Roman"; - //margin-top: -1.2em; - //border: { - top-width: 1px; - //bottom-width: 1px; - //style: dashed; - //color: $type-border; - //} + margin-top: -1.4em; } } } diff --git a/sass/themes/classic/media/_480.scss b/sass/themes/classic/media/_480.scss new file mode 100644 index 00000000..e6f0613a --- /dev/null +++ b/sass/themes/classic/media/_480.scss @@ -0,0 +1,16 @@ +body { + > header, > nav, > footer { + > div { + padding-left: .5em; + padding-right: .5em; + } + } + > header { font-size: .7em; padding: .5em 0; } +} +#articles { font-size: .9em; line-height: 1.5em; + > article { padding: .5em; } + + aside { display: none; } +} +body > nav > div > div { width: 180px; + .search { width: 110px; } +} diff --git a/sass/themes/classic/media/_768.scss b/sass/themes/classic/media/_768.scss new file mode 100644 index 00000000..d8c61d57 --- /dev/null +++ b/sass/themes/classic/media/_768.scss @@ -0,0 +1,16 @@ +body > header, body #articles { + font-size: .95em; +} + +//body { + //> header, > nav, > footer { + //> div { padding: 0 15px; } + //} +//} +//#page > div { + //margin-right: 0; + //#main { float: none; } + //> aside { margin: 0; float: none; } +//} +//page > div > aside { float: none; } +//#main > * { padding-left: 15px; padding-right: 15px; } diff --git a/sass/themes/classic/media/_992.scss b/sass/themes/classic/media/_992.scss new file mode 100644 index 00000000..f7c643b6 --- /dev/null +++ b/sass/themes/classic/media/_992.scss @@ -0,0 +1,3 @@ +body > header, body #articles { + font-size: 1.05em; +} diff --git a/source/sass/themes/classic/partials/_blog.scss b/sass/themes/classic/partials/_blog.scss index 47b48878..1dd255dd 100644 --- a/source/sass/themes/classic/partials/_blog.scss +++ b/sass/themes/classic/partials/_blog.scss @@ -1,7 +1,4 @@ article { - h2 { - padding-top: 0; - margin-bottom: 0.1em; } .title { text-decoration: none; &:hover { diff --git a/source/sass/themes/classic/partials/_footer.scss b/sass/themes/classic/partials/_footer.scss index 08e6138c..08e6138c 100644 --- a/source/sass/themes/classic/partials/_footer.scss +++ b/sass/themes/classic/partials/_footer.scss diff --git a/source/sass/themes/classic/partials/_header.scss b/sass/themes/classic/partials/_header.scss index a4964af9..ba7993a8 100644 --- a/source/sass/themes/classic/partials/_header.scss +++ b/sass/themes/classic/partials/_header.scss @@ -1,11 +1,13 @@ body > header { background-color: $header_bg; border-bottom: 1px solid $header_border; - padding: 25px 0; h1 { display: inline-block; margin: 0; a, a:visited { font-weight: normal; color: $title_color; - text-decoration: none; } } } + text-decoration: none; + } + } +} diff --git a/sass/themes/classic/partials/_navigation.scss b/sass/themes/classic/partials/_navigation.scss new file mode 100644 index 00000000..30685034 --- /dev/null +++ b/sass/themes/classic/partials/_navigation.scss @@ -0,0 +1,67 @@ +body > nav { + > div > div { + float: right; + position: relative; + padding: .45em 0 0 0; + a { + float: right; + @include replace-text-with-dimensions('rss.png'); + } + form { + margin: 0; padding: 0; + @include background-clip(padding-box); + input[type='text']{ + margin: 0; + @include border-radius(1em); + float: left; + border: 1px solid #ccc; + color: #888; + background: image-url('search.png') no-repeat .5em .4em #f6f6f6; + padding: .4em .8em .1em 1.8em; + line-height: 1.35em; + font-size: .85em; + &:focus { + color: #444; + border-color: #80b1df; + @include box-shadow(#80b1df 0 0 4px, #80b1df 0 0 3px inset); + background-color: #fff; + outline: none; + } + } + } + } + @extend .group; + position: relative; + z-index: 1; + background-color: $nav-bg; + @include background-image(linear-gradient(#fcfcfc, #f4f4f4 0.3, #dddddd)); + border: { + top: 1px solid $nav-border-top; + bottom: 1px solid $nav-border-bottom; }; + ul { + position: relative; + @include horizontal-list; + margin: 0 auto; + padding: .5em 0; + } + ul li { + padding: 0 1em; + margin: 0; + border-left: 1px solid $nav-border-left; + border-right: 1px solid $nav-border-right; + &:first-child { + border-left: none; + padding-left: 0; } + &:last-child { + border-right: 0; } + a { + display: inline-block; + color: $nav-color; + line-height: 150%; + text-decoration: none; + &:hover { + color: $nav-color-hover; + } + } + } +} diff --git a/source/sass/themes/classic/partials/_page.scss b/sass/themes/classic/partials/_page.scss index 2a1503b4..414a37e9 100644 --- a/source/sass/themes/classic/partials/_page.scss +++ b/sass/themes/classic/partials/_page.scss @@ -2,7 +2,7 @@ body { background-color: $sidebar_bg; } -#page > div { +body > div > div { background-color: $main_bg; border-right: 1px solid $sidebar_border; - @include box-shadow(rgba(#000, .1) 0 0 18px); + //@include box-shadow(rgba(#000, .1) 0 0 18px); } diff --git a/sass/themes/classic/partials/_search.scss b/sass/themes/classic/partials/_search.scss new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/sass/themes/classic/partials/_search.scss diff --git a/source/sass/themes/classic/partials/_shared.scss b/sass/themes/classic/partials/_shared.scss index a97b6051..a97b6051 100644 --- a/source/sass/themes/classic/partials/_shared.scss +++ b/sass/themes/classic/partials/_shared.scss diff --git a/sass/themes/classic/partials/_sidebar.scss b/sass/themes/classic/partials/_sidebar.scss new file mode 100644 index 00000000..faab4152 --- /dev/null +++ b/sass/themes/classic/partials/_sidebar.scss @@ -0,0 +1,20 @@ +#articles + aside { + section { + @extend .sans-font; + font-size: .8em; + line-height: 1.5em; + margin-bottom: 1.5em; + } + ul { + margin-bottom: 0.5em; + } + li { + list-style: none; + padding: .5em 0; + margin: 0; + border-bottom: 1px solid #ddd; + p:last-child { + margin-bottom: 0; + } + } +} diff --git a/source/sass/themes/classic/partials/_syntax.scss b/sass/themes/classic/partials/_syntax.scss index b06a5a10..b06a5a10 100644 --- a/source/sass/themes/classic/partials/_syntax.scss +++ b/sass/themes/classic/partials/_syntax.scss diff --git a/source/sass/themes/classic/partials/_twitter.scss b/sass/themes/classic/partials/_twitter.scss index 5d8b7d97..5d8b7d97 100644 --- a/source/sass/themes/classic/partials/_twitter.scss +++ b/sass/themes/classic/partials/_twitter.scss |