From ad78cb70d0e237a85776e78b140a59bcd5c3a96e Mon Sep 17 00:00:00 2001 From: Dan Barber Date: Tue, 6 Jan 2015 22:25:58 +0000 Subject: [PATCH] Convert to SCSS. --- _assets/stylesheets/includes/colors.css.sass | 15 - _assets/stylesheets/includes/colors.css.scss | 15 + _assets/stylesheets/includes/icons.css.sass | 33 -- _assets/stylesheets/includes/icons.css.scss | 40 ++ _assets/stylesheets/includes/layout.css.sass | 59 --- _assets/stylesheets/includes/layout.css.scss | 79 ++++ _assets/stylesheets/includes/main.css.sass | 4 - _assets/stylesheets/includes/main.css.scss | 5 + _assets/stylesheets/includes/styles.css.sass | 115 ------ _assets/stylesheets/includes/styles.css.scss | 151 ++++++++ .../stylesheets/includes/typography.css.sass | 300 --------------- .../stylesheets/includes/typography.css.scss | 353 ++++++++++++++++++ _assets/stylesheets/includes/video.css.sass | 8 - _assets/stylesheets/includes/video.css.scss | 10 + _assets/stylesheets/lib/solarized.css.scss | 58 +++ _assets/stylesheets/parts/archive.css.sass | 83 ---- _assets/stylesheets/parts/archive.css.scss | 116 ++++++ _assets/stylesheets/parts/footer.css.sass | 34 -- _assets/stylesheets/parts/footer.css.scss | 39 ++ _assets/stylesheets/parts/post.css.sass | 75 ---- _assets/stylesheets/parts/post.css.scss | 82 ++++ _assets/stylesheets/styles.css.sass | 14 - _assets/stylesheets/styles.css.scss | 14 + 23 files changed, 962 insertions(+), 740 deletions(-) delete mode 100644 _assets/stylesheets/includes/colors.css.sass create mode 100644 _assets/stylesheets/includes/colors.css.scss delete mode 100644 _assets/stylesheets/includes/icons.css.sass create mode 100644 _assets/stylesheets/includes/icons.css.scss delete mode 100644 _assets/stylesheets/includes/layout.css.sass create mode 100644 _assets/stylesheets/includes/layout.css.scss delete mode 100644 _assets/stylesheets/includes/main.css.sass create mode 100644 _assets/stylesheets/includes/main.css.scss delete mode 100644 _assets/stylesheets/includes/styles.css.sass create mode 100644 _assets/stylesheets/includes/styles.css.scss delete mode 100644 _assets/stylesheets/includes/typography.css.sass create mode 100644 _assets/stylesheets/includes/typography.css.scss delete mode 100644 _assets/stylesheets/includes/video.css.sass create mode 100644 _assets/stylesheets/includes/video.css.scss create mode 100644 _assets/stylesheets/lib/solarized.css.scss delete mode 100644 _assets/stylesheets/parts/archive.css.sass create mode 100644 _assets/stylesheets/parts/archive.css.scss delete mode 100644 _assets/stylesheets/parts/footer.css.sass create mode 100644 _assets/stylesheets/parts/footer.css.scss delete mode 100644 _assets/stylesheets/parts/post.css.sass create mode 100644 _assets/stylesheets/parts/post.css.scss delete mode 100644 _assets/stylesheets/styles.css.sass create mode 100644 _assets/stylesheets/styles.css.scss diff --git a/_assets/stylesheets/includes/colors.css.sass b/_assets/stylesheets/includes/colors.css.sass deleted file mode 100644 index 164e0e3..0000000 --- a/_assets/stylesheets/includes/colors.css.sass +++ /dev/null @@ -1,15 +0,0 @@ -$background-color: white - -$text-color: #333 -$text-color-light: lighten($text-color, 45%) -$heading-color: #333 -$meta-text-color: lighten($text-color, 45%) -$header-color: #518F00 - -$border-color: #ccc - -$link-color: rgb(24, 99, 161) -$link-color-hover: lighten($link-color, 10%) - -$footer-link-color: lighten($text-color, 25%) -$footer-link-color-hover: lighten($link-color, 10%) diff --git a/_assets/stylesheets/includes/colors.css.scss b/_assets/stylesheets/includes/colors.css.scss new file mode 100644 index 0000000..bb576b4 --- /dev/null +++ b/_assets/stylesheets/includes/colors.css.scss @@ -0,0 +1,15 @@ +$background-color: white; + +$text-color: #333; +$text-color-light: lighten($text-color, 45%); +$heading-color: #333; +$meta-text-color: lighten($text-color, 45%); +$header-color: #518F00; + +$border-color: #ccc; + +$link-color: rgb(24, 99, 161); +$link-color-hover: lighten($link-color, 10%); + +$footer-link-color: lighten($text-color, 25%); +$footer-link-color-hover: lighten($link-color, 10%); diff --git a/_assets/stylesheets/includes/icons.css.sass b/_assets/stylesheets/includes/icons.css.sass deleted file mode 100644 index b40a438..0000000 --- a/_assets/stylesheets/includes/icons.css.sass +++ /dev/null @@ -1,33 +0,0 @@ -@font-face - font-family: 'icomoon' - src: asset_url('icomoon.eot') - src: asset_url('icomoon.eot?#iefix') format("embedded-opentype"), asset_url('icomoon.woff') format("woff"), asset_url('icomoon.ttf') format("truetype"), asset_url('icomoon.svg#icomoon') format('svg') - font-weight: normal - font-style: normal - -[class^="icon-"]:before, [class*=" icon-"]:before - font-family: 'icomoon' - font-style: normal - speak: none - font-weight: normal - -webkit-font-smoothing: antialiased - -.icon-logomark:before - content: "\e000" - -.icon-twitter:before - position: relative - top: 0.1em - content: "\e001" - margin-right: 0.2em - color: #05ADE7 - -.icon-github:before - content: "\e002" - -.icon-app-net:before - position: relative - top: 0.1em - content: "\e003" - margin-right: 0.2em - color: #8A8E91 diff --git a/_assets/stylesheets/includes/icons.css.scss b/_assets/stylesheets/includes/icons.css.scss new file mode 100644 index 0000000..745c04e --- /dev/null +++ b/_assets/stylesheets/includes/icons.css.scss @@ -0,0 +1,40 @@ +@font-face { + font-family: "icomoon"; + src: asset_url("icomoon.eot"); + src: asset_url("icomoon.eot?#iefix") format("embedded-opentype"), asset_url("icomoon.woff") format("woff"), asset_url("icomoon.ttf") format("truetype"), asset_url("icomoon.svg#icomoon") format("svg"); + font-weight: normal; + font-style: normal; +} + + +[class^="icon-"]:before, [class*=" icon-"]:before { + font-family: "icomoon"; + font-style: normal; + speak: none; + font-weight: normal; + -webkit-font-smoothing: antialiased; +} + +.icon-logomark:before { + content: ""; +} + +.icon-twitter:before { + position: relative; + top: 0.1em; + content: ""; + margin-right: 0.2em; + color: #05ADE7; +} + +.icon-github:before { + content: ""; +} + +.icon-app-net:before { + position: relative; + top: 0.1em; + content: ""; + margin-right: 0.2em; + color: #8A8E91; +} diff --git a/_assets/stylesheets/includes/layout.css.sass b/_assets/stylesheets/includes/layout.css.sass deleted file mode 100644 index b9143b8..0000000 --- a/_assets/stylesheets/includes/layout.css.sass +++ /dev/null @@ -1,59 +0,0 @@ -$max-width: 800px !default -$pad-min: 8.5% !default - -header[role=banner] - padding: 0.52em 0 0.42em - h1 - font-size: 3.43em - margin: 0 - a - color: white - line-height: 0 - text-decoration: none - text-shadow: 0 0 10px rgba(0, 0, 0, 0.2) - span - width: 0 - font-size: 0 - overflow: hidden - -article img - max-width: 100% - height: auto - -article img.left - float: left - margin-right: 1em - -article img.right - float: right - margin-left: 1em - -#content, .container, footer - padding: 0 $pad-min - margin: 0 auto - max-width: $max-width - -nav[role=navigation] - font-size: 1em - -@media only screen and (min-width: 450px) - body - font-size: 110% - header[role=banner] h1 img - height: 50px - -@media only screen and (min-width: 650px) - body - font-size: 125% - header[role=banner] h1 img - height: 60px - -@media only screen and (min-width: 768px) - body - font-size: 135% - header[role=banner] h1 img - height: 80px - -@media only screen and (min-width: 892px) - body - font-size: 145% diff --git a/_assets/stylesheets/includes/layout.css.scss b/_assets/stylesheets/includes/layout.css.scss new file mode 100644 index 0000000..af69de5 --- /dev/null +++ b/_assets/stylesheets/includes/layout.css.scss @@ -0,0 +1,79 @@ +$max-width: 800px !default; +$pad-min: 8.5% !default; + +header[role=banner] { + padding: 0.52em 0 0.42em; + h1 { + font-size: 3.43em; + margin: 0; + a { + color: white; + line-height: 0; + text-decoration: none; + text-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + span { + width: 0; + font-size: 0; + overflow: hidden; + } + } + } +} + +article img { + max-width: 100%; + height: auto; +} + +article img.left { + float: left; + margin-right: 1em; +} + +article img.right { + float: right; + margin-left: 1em; +} + +#content, .container, footer { + padding: 0 $pad-min; + margin: 0 auto; + max-width: $max-width; +} + +nav[role=navigation] { + font-size: 1em; +} + +@media only screen and (min-width: 450px) { + body { + font-size: 110%; + } + header[role=banner] h1 img { + height: 50px; + } +} + +@media only screen and (min-width: 650px) { + body { + font-size: 125%; + } + header[role=banner] h1 img { + height: 60px; + } +} + +@media only screen and (min-width: 768px) { + body { + font-size: 135%; + } + header[role=banner] h1 img { + height: 80px; + } +} + +@media only screen and (min-width: 892px) { + body { + font-size: 145%; + } +} diff --git a/_assets/stylesheets/includes/main.css.sass b/_assets/stylesheets/includes/main.css.sass deleted file mode 100644 index ba70ec3..0000000 --- a/_assets/stylesheets/includes/main.css.sass +++ /dev/null @@ -1,4 +0,0 @@ -body - margin: 0 - font-size: 100% - -webkit-text-size-adjust: 100% diff --git a/_assets/stylesheets/includes/main.css.scss b/_assets/stylesheets/includes/main.css.scss new file mode 100644 index 0000000..9b9cc8a --- /dev/null +++ b/_assets/stylesheets/includes/main.css.scss @@ -0,0 +1,5 @@ +body { + margin: 0; + font-size: 100%; + -webkit-text-size-adjust: 100%; +} diff --git a/_assets/stylesheets/includes/styles.css.sass b/_assets/stylesheets/includes/styles.css.sass deleted file mode 100644 index dd9a262..0000000 --- a/_assets/stylesheets/includes/styles.css.sass +++ /dev/null @@ -1,115 +0,0 @@ -// This File is imported last, and will override other styles in the cascade -// Add styles here to make changes without digging in too much -html - background: $background-color - -body - font-weight: 300 - -body > div > div - border: none - -body > header - border-color: $header-color - +background(linear-gradient(top, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.15) 100%)) - background-color: $header-color - border-width: 0 0 1px - border-style: solid - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), inset 0 -1px 0px rgba(255, 255, 255, 0.4) - padding-top: 0.8em - padding-bottom: 0.9em - h1 a - //display: inline-block - margin-top: 0 - font-weight: 700 - //line-height: 0 - -a - +transition(color 0.25s 0s ease) - color: $link-color - &:hover - color: $link-color-hover - -header nav - display: inline - position: relative - ul - list-style: none - float: right - display: block - margin: 0 - padding: 0 - border: 0 - li - padding-left: 1.25em - float: left - padding-top: .15em - a - +transition(text-shadow 0.25s 0s ease) - text-shadow: 0 0 8px rgba(0, 0, 0, 0.2) - color: white - text-decoration: none - &:hover, &:focus - color: white - text-shadow: 0 0 5px rgba(255, 255, 255, 0.6) - -article > header - text-align: left - -article > header h1, #content .blog-index article h1 - font-size: 1.5em - -body > nav - border: none - -body > nav a - text-shadow: none - display: inline - -@media only screen and (max-width: 400px) - header - text-align: center - header nav - display: none - -blockquote - font-size: 1em - border: none - -#content div.pagination, #content div.navigation - text-align: center - font-size: .95em - height: 1.5em - position: relative - padding: - top: 1.5em - bottom: 1.5em - &:after - display: block - content: "" - clear: both - a - text-decoration: none - color: $text-color-light - &:hover - color: $link-color-hover - &[href*=archive] - &:before, &:after - content: '\2014' - padding: 0 .3em - -#content div.navigation - a - &.prev - float: left - &.next - float: right - -#content div.pagination - a - &.prev - position: absolute - left: 0 - &.next - position: absolute - right: 0 diff --git a/_assets/stylesheets/includes/styles.css.scss b/_assets/stylesheets/includes/styles.css.scss new file mode 100644 index 0000000..17629a6 --- /dev/null +++ b/_assets/stylesheets/includes/styles.css.scss @@ -0,0 +1,151 @@ +// This File is imported last, and will override other styles in the cascade +// Add styles here to make changes without digging in too much +html { + background: $background-color; +} + +body { + font-weight: 300; +} + +body > div > div { + border: none; +} + +body > header { + border-color: $header-color; + @include background(linear-gradient(top, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.15) 100%)); + background-color: $header-color; + border-width: 0 0 1px; + border-style: solid; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), inset 0 -1px 0px rgba(255, 255, 255, 0.4); + padding-top: 0.8em; + padding-bottom: 0.9em; + h1 a { + //display: inline-block + margin-top: 0; + font-weight: 700; + //line-height: 0 + + } +} + +a { + @include transition(color 0.25s 0s ease); + color: $link-color; + &:hover { + color: $link-color-hover; + } +} + +header nav { + display: inline; + position: relative; + ul { + list-style: none; + float: right; + display: block; + margin: 0; + padding: 0; + border: 0; + li { + padding-left: 1.25em; + float: left; + } + padding-top: 0.15em; + } + a { + @include transition(text-shadow 0.25s 0s ease); + text-shadow: 0 0 8px rgba(0, 0, 0, 0.2); + color: white; + text-decoration: none; + &:hover, &:focus { + color: white; + text-shadow: 0 0 5px rgba(255, 255, 255, 0.6); + } + } +} + +article > header { + text-align: left; +} + +article > header h1, #content .blog-index article h1 { + font-size: 1.5em; +} + +body > nav { + border: none; +} + +body > nav a { + text-shadow: none; + display: inline; +} + +@media only screen and (max-width: 400px) { + header { + text-align: center; + } + header nav { + display: none; + } +} + +blockquote { + font-size: 1em; + border: none; +} + +#content div.pagination, #content div.navigation { + text-align: center; + font-size: 0.95em; + height: 1.5em; + position: relative; + padding: { + top: 1.5em; + bottom: 1.5em; + }; + &:after { + display: block; + content: ""; + clear: both; + } + a { + text-decoration: none; + color: $text-color-light; + &:hover { + color: $link-color-hover; + } + &[href*=archive] { + &:before, &:after { + content: "—"; + padding: 0 0.3em; + } + } + } +} + +#content div.navigation { + a { + &.prev { + float: left; + } + &.next { + float: right; + } + } +} + +#content div.pagination { + a { + &.prev { + position: absolute; + left: 0; + } + &.next { + position: absolute; + right: 0; + } + } +} diff --git a/_assets/stylesheets/includes/typography.css.sass b/_assets/stylesheets/includes/typography.css.sass deleted file mode 100644 index e02e42a..0000000 --- a/_assets/stylesheets/includes/typography.css.sass +++ /dev/null @@ -1,300 +0,0 @@ -// $blockquote: $type-border !default -$sans: "adelle", sans-serif !default -$serif: "rooney-web", Georgia, Times, "Times New Roman", serif !default -$mono: "source-code-pro", monospace !default -$heading-font-family: "adelle", sans-serif !default -$header-title-font-family: $heading-font-family !default -$header-subtitle-font-family: $heading-font-family !default - -/* - *Type-A-File "Field Report" designed by Russ Maschmeyer, aka StrangeNative. - *http://www.strangenative.com - *@strangenative - * - *Creative Commons License by Attribution. - *Feel free to take it, adapt it, & use it on both commercial and non-commercial projects. - *Though I'd like a smidgeon of credit, so just leave this bit in here. K? - -/*Pick Your Fonts -body, h5, h6, .run-in, dt - font-family: $serif - -h1, h2, h3, h4, .pullquote, .sidenote h1, aside h1, .pullquote, .drop-cap, cite - font-family: $heading-font-family - -/*Nav Fonts -nav[role=navigation] - font-family: $sans - -/*Size & Vertical Rhythm -body - font-size: 100% - font-size: 16px - line-height: 1.5em - -/*Color -body - color: $text-color - -/*HTML Standard Elements -h1 - font-size: 2.5em - line-height: 1.333em - margin: .97em 0 0em - -h2 - font-size: 1.75em - line-height: 1.1em - margin: 2em 0 .5em - -h1 + img, h2 + img - margin-top: 1em - -h3 - font-size: 1.125em - -h4 - font-size: 1em - -h1, h2, h3 - font-weight: 500 - text-rendering: optimizelegibility - -h4, h5, h6 - font-weight: 700 - text-rendering: optimizelegibility - -article h1 - font-size: 1.5em - -strong - font-weight: 700 - -small - display: block - font-size: .75em - letter-spacing: .05em - margin: 2.2em 0 -0.2em - font-style: italic - line-height: 1.75em - -p, ul, ol, form - margin: 1.5em 0 1em - -h3 - margin-top: 1.5em - -ul - list-style-position: outside - list-style-type: disc - line-height: 1.5 - padding-left: 0 - -li - margin-bottom: .75em - -ol - list-style-position: outside - list-style-type: decimal - -blockquote - font-style: italic - line-height: 1.6em - margin-left: 0 - margin-right: 0 - -blockquote:before - font-family: Georgia, serif - content: "“" - font-size: 2.75em - text-indent: -0.6em - margin-top: .1em - float: left - opacity: .3 - -cite - display: block - text-transform: uppercase - letter-spacing: .2em - margin-top: 1.5em - margin-left: 1em - font-weight: 900 - font-style: normal - font-size: .8em - -cite:before - content: "— " - margin-left: -3.4em - margin-right: .9em - opacity: .3 - -pre,code,tt - font-family: $mono - font-weight: 500 - -code - border: 1px solid #ddd - border-radius: 0.25em - display: inline-block - font-size: 0.75em - line-height: 1.5em - padding: 0 0.3em - -.highlight - margin: 1.5em 0 - overflow: auto - padding: 0.5em 0.75em - border-radius: 0.25em - pre - margin: 0 - code - border: none - -dl - margin: 1.75em 0 1.75em - -dt - font-style: italic - margin-top: 1.25em - font-size: 1.13em - font-weight: 700 - border-bottom: 1px solid #999 - background: #DDD - -dd - font-style: italic - font-size: .85em - margin-top: 1em - line-height: 1.6em - -abbr - text-transform: uppercase - font-size: .9em - letter-spacing: .1em - border-bottom: 1px dotted $text-color-light - -p - margin-bottom: 0 - hyphenate: auto - hyphenate-before: 2 - hyphenate-after: 3 - hyphenate-lines: 3 - orphans: 4 - -p span.pullquote - text-indent: 0 - -/*Compositional Elements -.kicker - font-size: 1.25em - line-height: 1.693em - /*font-style:italic; - margin: -0.35em 0 -0.35em - -.kicker, .pullquote - font-weight: 100 - -.run-in - font-style: italic - font-weight: bold - -.superscript - font-family: arial, sans-serif - vertical-align: super - font-size: 75% - margin-right: .4em - text-transform: lowercase - font-variant: small-caps - letter-spacing: .1em - line-height: 0 - -.subscript - font-family: arial, sans-serif - vertical-align: sub - font-size: 75% - margin-right: .4em - text-transform: lowercase - font-variant: small-caps - letter-spacing: .1em - line-height: 0em - -a.superscript, a.subscript - text-decoration: none - -aside, .sidenote - font-size: .83em - font-style: italic - margin-top: 1.25em - -aside h1, .sidenote h1 - text-transform: uppercase - font-size: 1em - line-height: 1.5em - font-style: normal - font-weight: 900 - -aside p, .sidenote p - line-height: 1.7em - margin: 1.3em 0 - font-style: normal - -aside ul, aside ol, .sidenote ul, .sidenote ol - margin-top: 1.3em - line-height: 1.7em - -aside ul li, aside ol li, .sidenote ul li, .sidenote ol li - margin-bottom: 1.3em - -.pullquote - font-style: italic - letter-spacing: .05em - margin: .5em .7em .3em 0em - padding-top: .15em - line-height: 1.7em - display: block - float: left - font-size: 1.6em - width: 55% - -.pullquote:before - font-family: Georgia, serif - content: "“" - font-size: 2em - text-indent: -0.8em - margin-top: .05em - float: left - opacity: .3 - -.footnotes - border-top: 1px solid #999 - font-size: .75em - margin-top: 3.5em - -.footnotes li - margin: 1.5em 0 1.5em - word-spacing: .1em - line-height: 1.75em - -.caption - font-size: .8em - font-style: italic - margin: 0.6em 0 -0.2em - -.kicker .run-in - text-transform: uppercase - font-style: normal - letter-spacing: .25em - font-size: .9em - -.drop-cap - display: block - font-style: normal - font-size: 5.1em - float: left - margin: .13em .1em 0 0 - line-height: .67em - font-weight: 100 - -/*Tweaks -.kern - letter-spacing: -0.1em diff --git a/_assets/stylesheets/includes/typography.css.scss b/_assets/stylesheets/includes/typography.css.scss new file mode 100644 index 0000000..31f9df2 --- /dev/null +++ b/_assets/stylesheets/includes/typography.css.scss @@ -0,0 +1,353 @@ +// $blockquote: $type-border !default +$sans: "adelle", sans-serif !default; +$serif: "rooney-web", Georgia, Times, "Times New Roman", serif !default; +$mono: "source-code-pro", monospace !default; +$heading-font-family: "adelle", sans-serif !default; +$header-title-font-family: $heading-font-family !default; +$header-subtitle-font-family: $heading-font-family !default; + +/*Type-A-File "Field Report" designed by Russ Maschmeyer, aka StrangeNative. + *http://www.strangenative.com + *@strangenative + * + *Creative Commons License by Attribution. + *Feel free to take it, adapt it, & use it on both commercial and non-commercial projects. + *Though I'd like a smidgeon of credit, so just leave this bit in here. K? */ + +/*Pick Your Fonts */ +body, h5, h6, .run-in, dt { + font-family: $serif; +} + +h1, h2, h3, h4, .pullquote, .sidenote h1, aside h1, .pullquote, .drop-cap, cite { + font-family: $heading-font-family; +} + +/*Nav Fonts */ +nav[role=navigation] { + font-family: $sans; +} + +/*Size & Vertical Rhythm */ +body { + font-size: 100%; + font-size: 16px; + line-height: 1.5em; +} + +/*Color */ +body { + color: $text-color; +} + +/*HTML Standard Elements */ +h1 { + font-size: 2.5em; + line-height: 1.333em; + margin: 0.97em 0 0em; +} + +h2 { + font-size: 1.75em; + line-height: 1.1em; + margin: 2em 0 0.5em; +} + +h1 + img, h2 + img { + margin-top: 1em; +} + +h3 { + font-size: 1.125em; +} + +h4 { + font-size: 1em; +} + +h1, h2, h3 { + font-weight: 500; + text-rendering: optimizelegibility; +} + +h4, h5, h6 { + font-weight: 700; + text-rendering: optimizelegibility; +} + +article h1 { + font-size: 1.5em; +} + +strong { + font-weight: 700; +} + +small { + display: block; + font-size: 0.75em; + letter-spacing: 0.05em; + margin: 2.2em 0 -0.2em; + font-style: italic; + line-height: 1.75em; +} + +p, ul, ol, form { + margin: 1.5em 0 1em; +} + +h3 { + margin-top: 1.5em; +} + +ul { + list-style-position: outside; + list-style-type: disc; + line-height: 1.5; + padding-left: 0; +} + +li { + margin-bottom: 0.75em; +} + +ol { + list-style-position: outside; + list-style-type: decimal; +} + +blockquote { + font-style: italic; + line-height: 1.6em; + margin-left: 0; + margin-right: 0; +} + +blockquote:before { + font-family: Georgia, serif; + content: "“"; + font-size: 2.75em; + text-indent: -0.6em; + margin-top: 0.1em; + float: left; + opacity: 0.3; +} + +cite { + display: block; + text-transform: uppercase; + letter-spacing: 0.2em; + margin-top: 1.5em; + margin-left: 1em; + font-weight: 900; + font-style: normal; + font-size: 0.8em; +} + +cite:before { + content: "— "; + margin-left: -3.4em; + margin-right: 0.9em; + opacity: 0.3; +} + +pre, code, tt { + font-family: $mono; + font-weight: 500; +} + +code { + border: 1px solid #ddd; + border-radius: 0.25em; + display: inline-block; + font-size: 0.75em; + line-height: 1.5em; + padding: 0 0.3em; +} + +.highlight { + margin: 1.5em 0; + overflow: auto; + padding: 0.5em 0.75em; + border-radius: 0.25em; + pre { + margin: 0; + } + code { + border: none; + } +} + +dl { + margin: 1.75em 0 1.75em; +} + +dt { + font-style: italic; + margin-top: 1.25em; + font-size: 1.13em; + font-weight: 700; + border-bottom: 1px solid #999; + background: #DDD; +} + +dd { + font-style: italic; + font-size: 0.85em; + margin-top: 1em; + line-height: 1.6em; +} + +abbr { + text-transform: uppercase; + font-size: 0.9em; + letter-spacing: 0.1em; + border-bottom: 1px dotted $text-color-light; +} + +p { + margin-bottom: 0; + hyphenate: auto; + hyphenate-before: 2; + hyphenate-after: 3; + hyphenate-lines: 3; + orphans: 4; +} + +p span.pullquote { + text-indent: 0; +} + +/*Compositional Elements */ +.kicker { + font-size: 1.25em; + line-height: 1.693em; + /*font-style:italic; */ + margin: (-0.35em) 0 -0.35em; +} + +.kicker, .pullquote { + font-weight: 100; +} + +.run-in { + font-style: italic; + font-weight: bold; +} + +.superscript { + font-family: arial, sans-serif; + vertical-align: super; + font-size: 75%; + margin-right: 0.4em; + text-transform: lowercase; + font-variant: small-caps; + letter-spacing: 0.1em; + line-height: 0; +} + +.subscript { + font-family: arial, sans-serif; + vertical-align: sub; + font-size: 75%; + margin-right: 0.4em; + text-transform: lowercase; + font-variant: small-caps; + letter-spacing: 0.1em; + line-height: 0em; +} + +a.superscript, a.subscript { + text-decoration: none; +} + +aside, .sidenote { + font-size: 0.83em; + font-style: italic; + margin-top: 1.25em; +} + +aside h1, .sidenote h1 { + text-transform: uppercase; + font-size: 1em; + line-height: 1.5em; + font-style: normal; + font-weight: 900; +} + +aside p, .sidenote p { + line-height: 1.7em; + margin: 1.3em 0; + font-style: normal; +} + +aside ul, aside ol, .sidenote ul, .sidenote ol { + margin-top: 1.3em; + line-height: 1.7em; +} + +aside ul li, aside ol li, .sidenote ul li, .sidenote ol li { + margin-bottom: 1.3em; +} + +.pullquote { + font-style: italic; + letter-spacing: 0.05em; + margin: 0.5em 0.7em 0.3em 0em; + padding-top: 0.15em; + line-height: 1.7em; + display: block; + float: left; + font-size: 1.6em; + width: 55%; +} + +.pullquote:before { + font-family: Georgia, serif; + content: "“"; + font-size: 2em; + text-indent: -0.8em; + margin-top: 0.05em; + float: left; + opacity: 0.3; +} + +.footnotes { + border-top: 1px solid #999; + font-size: 0.75em; + margin-top: 3.5em; +} + +.footnotes li { + margin: 1.5em 0 1.5em; + word-spacing: 0.1em; + line-height: 1.75em; +} + +.caption { + font-size: 0.8em; + font-style: italic; + margin: 0.6em 0 -0.2em; +} + +.kicker .run-in { + text-transform: uppercase; + font-style: normal; + letter-spacing: 0.25em; + font-size: 0.9em; +} + +.drop-cap { + display: block; + font-style: normal; + font-size: 5.1em; + float: left; + margin: 0.13em 0.1em 0 0; + line-height: 0.67em; + font-weight: 100; +} + +/*Tweaks */ +.kern { + letter-spacing: -0.1em; +} diff --git a/_assets/stylesheets/includes/video.css.sass b/_assets/stylesheets/includes/video.css.sass deleted file mode 100644 index d0bd09d..0000000 --- a/_assets/stylesheets/includes/video.css.sass +++ /dev/null @@ -1,8 +0,0 @@ -.video-container - position: relative - width: 100% - height: 0 - iframe - position: absolute - width: 100% - height: 100% diff --git a/_assets/stylesheets/includes/video.css.scss b/_assets/stylesheets/includes/video.css.scss new file mode 100644 index 0000000..460199a --- /dev/null +++ b/_assets/stylesheets/includes/video.css.scss @@ -0,0 +1,10 @@ +.video-container { + position: relative; + width: 100%; + height: 0; + iframe { + position: absolute; + width: 100%; + height: 100%; + } +} diff --git a/_assets/stylesheets/lib/solarized.css.scss b/_assets/stylesheets/lib/solarized.css.scss new file mode 100644 index 0000000..4b4c9cc --- /dev/null +++ b/_assets/stylesheets/lib/solarized.css.scss @@ -0,0 +1,58 @@ +$base03: #002b36 !default; + +//darkest blue +$base02: #073642 !default; + +//dark blue +$base01: #586e75 !default; + +//darkest gray +$base00: #657b83 !default; + +//dark gray +$base0: #839496 !default; + +//medium gray +$base1: #93a1a1 !default; + +//medium light gray +$base2: #eee8d5 !default; + +//cream +$base3: #fdf6e3 !default; + +//white +$solar-yellow: #b58900 !default; +$solar-orange: #cb4b16 !default; +$solar-red: #dc322f !default; +$solar-magenta: #d33682 !default; +$solar-violet: #6c71c4 !default; +$solar-blue: #268bd2 !default; +$solar-cyan: #2aa198 !default; +$solar-green: #859900 !default; + +$solarized: dark !default; + +@if $solarized == light { + $_base03: $base03; + $_base02: $base02; + $_base01: $base01; + $_base00: $base00; + $_base0: $base0; + $_base1: $base1; + $_base2: $base2; + $_base3: $base3; + $base03: $_base3; + $base02: $_base2; + $base01: $_base1; + $base00: $_base0; + $base0: $_base00; + $base1: $_base01; + $base2: $_base02; + $base3: $_base03; +} + +/* non highlighted code colors */ +$pre-bg: $base03 !default; +$pre-border: darken($base02, 5) !default; +$pre-color: $base1 !default; diff --git a/_assets/stylesheets/parts/archive.css.sass b/_assets/stylesheets/parts/archive.css.sass deleted file mode 100644 index 3b0bc93..0000000 --- a/_assets/stylesheets/parts/archive.css.sass +++ /dev/null @@ -1,83 +0,0 @@ -#archive - #content > div - &, > article - padding-top: 0 - -#blog-archives - padding-top: 1em - article - padding: 0 0 1em - position: relative - &:last-child - border: none - footer - padding: 0 - margin: 0 - h1 - margin-top: 0 - color: $text-color - margin-bottom: .3em - h2 - display: none - h1 - font-size: 1.5em - a - color: inherit - text-decoration: none - &:hover - color: $link-color-hover - text-decoration: underline - font-weight: normal - display: inline-block - a.category, time - color: $text-color-light - color: $text-color-light - .entry-content - display: none - time - font-size: .9em - line-height: 1.2em - .month, .day - display: inline-block - .month - text-transform: uppercase - p - margin-bottom: 1em - &, .entry-content - a - color: inherit - &:hover - color: $link-color-hover - a:hover - color: $link-color-hover - @media only screen and (min-width: 550px) - article - margin-left: 5em - h2 - margin-top: 0 - margin-bottom: .3em - font-weight: normal - display: inline-block - position: relative - top: -1px - float: left - time - position: absolute - text-align: right - left: 0em - top: 0.3em - .year - display: none - article - padding: - left: 4.5em - bottom: .7em - a.category - line-height: 1.1em - -#content > .category - article - margin-left: 0 - padding-left: 6.8em - .year - display: inline diff --git a/_assets/stylesheets/parts/archive.css.scss b/_assets/stylesheets/parts/archive.css.scss new file mode 100644 index 0000000..518e971 --- /dev/null +++ b/_assets/stylesheets/parts/archive.css.scss @@ -0,0 +1,116 @@ +#archive { + #content > div { + &, > article { + padding-top: 0; + } + } +} + +#blog-archives { + padding-top: 1em; + article { + padding: 0 0 1em; + position: relative; + &:last-child { + border: none; + } + footer { + padding: 0; + margin: 0; + } + } + h1 { + margin-top: 0; + color: $text-color; + margin-bottom: 0.3em; + } + h2 { + display: none; + } + h1 { + font-size: 1.5em; + a { + color: inherit; + text-decoration: none; + &:hover { + color: $link-color-hover; + text-decoration: underline; + } + font-weight: normal; + display: inline-block; + } + } + a.category, time { + color: $text-color-light; + } + color: $text-color-light; + .entry-content { + display: none; + } + time { + font-size: 0.9em; + line-height: 1.2em; + .month, .day { + display: inline-block; + } + .month { + text-transform: uppercase; + } + } + p { + margin-bottom: 1em; + } + &, .entry-content { + a { + color: inherit; + &:hover { + color: $link-color-hover; + } + } + } + a:hover { + color: $link-color-hover; + } + @media only screen and (min-width: 550px) { + article { + margin-left: 5em; + } + h2 { + margin-top: 0; + margin-bottom: 0.3em; + font-weight: normal; + display: inline-block; + position: relative; + top: -1px; + float: left; + } + time { + position: absolute; + text-align: right; + left: 0em; + top: 0.3em; + } + .year { + display: none; + } + article { + padding: { + left: 4.5em; + bottom: 0.7em; + }; + } + a.category { + line-height: 1.1em; + } + } +} + +#content > .category { + article { + margin-left: 0; + padding-left: 6.8em; + } + .year { + display: inline; + } +} diff --git a/_assets/stylesheets/parts/footer.css.sass b/_assets/stylesheets/parts/footer.css.sass deleted file mode 100644 index 5a45e99..0000000 --- a/_assets/stylesheets/parts/footer.css.sass +++ /dev/null @@ -1,34 +0,0 @@ -body > footer - text-align: center - font-size: .8em - position: relative - padding-top: 1em - padding-bottom: 1em - margin-bottom: 3em - border-radius-bottom: .4em - z-index: 1 - a - color: $footer-link-color - &:hover - color: $footer-link-color-hover - &:visited - color: $footer-link-color - text-decoration: none - p:last-child - margin-bottom: 0 - - fieldset - border: 0 - input[type=search] - -webkit-appearance: none - font-family: $serif - font-size: 1em - color: $text-color - border-radius: 1em - border: - width: 1px - style: solid - color: #999 #bbb #bbb #999 - &:focus - outline: none - box-shadow: 0 0 5px $link-color diff --git a/_assets/stylesheets/parts/footer.css.scss b/_assets/stylesheets/parts/footer.css.scss new file mode 100644 index 0000000..e39ddde --- /dev/null +++ b/_assets/stylesheets/parts/footer.css.scss @@ -0,0 +1,39 @@ +body > footer { + text-align: center; + font-size: 0.8em; + position: relative; + padding-top: 1em; + padding-bottom: 1em; + margin-bottom: 3em; + border-radius-bottom: 0.4em; + z-index: 1; + + a { + color: $footer-link-color; + &:hover { color: $footer-link-color-hover; } + &:visited { color: $footer-link-color; } + text-decoration: none; + } + + p:last-child { margin-bottom: 0; } + + fieldset { + border: 0; + input[type=search] { + -webkit-appearance: none; + font-family: $serif; + font-size: 1em; + color: $text-color; + border-radius: 1em; + border: { + width: 1px; + style: solid; + color: #999 #bbb #bbb #999; + }; + &:focus { + outline: none; + box-shadow: 0 0 5px $link-color; + } + } + } +} diff --git a/_assets/stylesheets/parts/post.css.sass b/_assets/stylesheets/parts/post.css.sass deleted file mode 100644 index 12c75af..0000000 --- a/_assets/stylesheets/parts/post.css.sass +++ /dev/null @@ -1,75 +0,0 @@ -article - border-bottom: 1px dashed $border-color - padding-bottom: 0 - margin-bottom: 1em - - .entry-content - margin-bottom: 2em - - header - position: relative - margin-top: 2em - padding-top: 0.6em - - .meta - text-transform: uppercase - color: $meta-text-color - font-size: 0.8em - letter-spacing: 0.1em - width: 100% - text-rendering: optimizelegibility - position: absolute - top: 0 - margin-top: 0 - - header a - color: $heading-color - text-decoration: none - &:hover, &:focus - color: $link-color-hover - - figure - margin: 1.5em 0 0 0 - - figcaption - font-size: 0.7em - font-style: italic - text-align: right - opacity: 0.6 - - img, video, .flash-video - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) - padding: 0.5em - margin: -0.5em - - > footer - padding-left: 0 - padding-right: 0 - p.meta - margin-bottom: .8em - font-size: .85em - clear: both - overflow: hidden - .byline + time:before, time + time:before, .comments:before, .byline ~ .categories:before - @extend .separator - - footer - a[rel=full-article] - background: darken($background-color, 8) - border-radius: 2px - display: inline-block - padding: .4em .8em - margin-right: .5em - margin-bottom: 1.5em - text-decoration: none - color: mix($text-color, $text-color-light) - +transition(background-color 0.5s) - &:hover - background: $link-color-hover - text-shadow: none - color: $background-color - -.separator - content: "\2022 " - padding: 0 .4em 0 .2em - display: inline-block diff --git a/_assets/stylesheets/parts/post.css.scss b/_assets/stylesheets/parts/post.css.scss new file mode 100644 index 0000000..dd8aadf --- /dev/null +++ b/_assets/stylesheets/parts/post.css.scss @@ -0,0 +1,82 @@ +article { + border-bottom: 1px dashed $border-color; + padding-bottom: 0; + margin-bottom: 1em; + .entry-content { + margin-bottom: 2em; + } + header { + position: relative; + margin-top: 2em; + padding-top: 0.6em; + .meta { + text-transform: uppercase; + color: $meta-text-color; + font-size: 0.8em; + letter-spacing: 0.1em; + width: 100%; + text-rendering: optimizelegibility; + position: absolute; + top: 0; + margin-top: 0; + } + } + header a { + color: $heading-color; + text-decoration: none; + &:hover, &:focus { + color: $link-color-hover; + } + } + figure { + margin: 1.5em 0 0 0; + figcaption { + font-size: 0.7em; + font-style: italic; + text-align: right; + opacity: 0.6; + } + } + img, video, .flash-video { + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); + padding: 0.5em; + margin: -0.5em; + } + > footer { + padding-left: 0; + padding-right: 0; + p.meta { + margin-bottom: 0.8em; + font-size: 0.85em; + clear: both; + overflow: hidden; + } + .byline + time:before, time + time:before, .comments:before, .byline ~ .categories:before { + @extend .separator; + } + } + footer { + a[rel=full-article] { + background: darken($background-color, 8); + border-radius: 2px; + display: inline-block; + padding: 0.4em 0.8em; + margin-right: 0.5em; + margin-bottom: 1.5em; + text-decoration: none; + color: mix($text-color, $text-color-light); + @include transition(background-color 0.5s); + &:hover { + background: $link-color-hover; + text-shadow: none; + color: $background-color; + } + } + } +} + +.separator { + content: "•"; + padding: 0 0.4em 0 0.2em; + display: inline-block; +} diff --git a/_assets/stylesheets/styles.css.sass b/_assets/stylesheets/styles.css.sass deleted file mode 100644 index ad64424..0000000 --- a/_assets/stylesheets/styles.css.sass +++ /dev/null @@ -1,14 +0,0 @@ -@import 'bourbon' - -@import 'includes/main.css.sass' -@import 'includes/colors.css.sass' -@import 'includes/typography.css.sass' -@import 'includes/icons.css.sass' -@import 'includes/layout.css.sass' -@import 'includes/styles.css.sass' -@import 'includes/video.css.sass' -@import 'lib/solarized-dark.css.scss' - -@import 'parts/post.css.sass' -@import 'parts/archive.css.sass' -@import 'parts/footer.css.sass' diff --git a/_assets/stylesheets/styles.css.scss b/_assets/stylesheets/styles.css.scss new file mode 100644 index 0000000..53eb74f --- /dev/null +++ b/_assets/stylesheets/styles.css.scss @@ -0,0 +1,14 @@ +@import "bourbon"; + +@import "includes/main.css.scss"; +@import "includes/colors.css.scss"; +@import "includes/typography.css.scss"; +@import "includes/icons.css.scss"; +@import "includes/layout.css.scss"; +@import "includes/styles.css.scss"; +@import "includes/video.css.scss"; +@import "lib/solarized-dark.css.scss"; + +@import "parts/post.css.scss"; +@import "parts/archive.css.scss"; +@import "parts/footer.css.scss";