diff --git a/.gitignore b/.gitignore index e14553c..a9485d9 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,4 @@ _site .sass-cache .deploy .asset-cache +.jekyll-cache diff --git a/Gemfile b/Gemfile index ad0af0c..2bd11d3 100644 --- a/Gemfile +++ b/Gemfile @@ -11,6 +11,7 @@ gem "jekyll" group :jekyll_plugins do gem "jekyll-archives" gem "jekyll-assets" + gem "jekyll-inline-svg" gem "jekyll-paginate" gem "jekyll-picture-tag", git: "https://github.com/danbee/jekyll-picture-tag.git", diff --git a/Gemfile.lock b/Gemfile.lock index 49f2944..820cd64 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -11,6 +11,11 @@ GIT GEM remote: https://rubygems.org/ specs: + activesupport (5.2.1) + concurrent-ruby (~> 1.0, >= 1.0.2) + i18n (>= 0.7, < 2) + minitest (~> 5.1) + tzinfo (~> 1.1) addressable (2.5.2) public_suffix (>= 2.0.2, < 4.0) bourbon (5.1.0) @@ -18,7 +23,7 @@ GEM thor (~> 0.19) coderay (1.1.2) colorator (1.1.0) - concurrent-ruby (1.0.5) + concurrent-ruby (1.1.3) em-websocket (0.5.1) eventmachine (>= 0.12.9) http_parser.rb (~> 0.6.0) @@ -33,7 +38,7 @@ GEM http_parser.rb (0.6.0) i18n (0.9.5) concurrent-ruby (~> 1.0) - jekyll (3.8.4) + jekyll (3.8.5) addressable (~> 2.4) colorator (~> 1.0) em-websocket (~> 0.5) @@ -48,23 +53,34 @@ GEM safe_yaml (~> 1.0) jekyll-archives (2.1.1) jekyll (>= 2.4) - jekyll-assets (2.3.2) - concurrent-ruby (~> 1.0) + jekyll-assets (3.0.11) + activesupport (~> 5.0) + execjs (~> 2.7) extras (~> 0.2) fastimage (~> 2.0, >= 1.8) - jekyll (~> 3.1, >= 3.0) - pathutil (>= 0.8) - rack (~> 1.6) - sprockets (~> 3.3, < 3.8) + jekyll (>= 3.5, < 4.0) + jekyll-sanity (~> 1.2) + liquid-tag-parser (~> 1.0) + nokogiri (~> 1.8) + pathutil (~> 0.16) + sprockets (>= 3.3, < 4.1.beta) + jekyll-inline-svg (1.1.1) + jekyll (~> 3.3) + svg_optimizer (= 0.1.0) jekyll-paginate (1.1.0) + jekyll-sanity (1.2.0) + jekyll (~> 3.1) jekyll-sass-converter (1.5.2) sass (~> 3.4) jekyll-staging (1.0.6) jekyll-video-tag (0.1.0) - jekyll-watch (2.0.0) + jekyll-watch (2.1.2) listen (~> 3.0) kramdown (1.17.0) - liquid (4.0.0) + liquid (4.0.1) + liquid-tag-parser (1.9.0) + extras (~> 0.3) + liquid (>= 3.0, < 5.0) listen (3.1.5) rb-fsevent (~> 0.9, >= 0.9.4) rb-inotify (~> 0.9, >= 0.9.7) @@ -72,6 +88,10 @@ GEM mercenary (0.3.6) method_source (0.9.0) mini_magick (4.8.0) + mini_portile2 (2.3.0) + minitest (5.11.3) + nokogiri (1.8.5) + mini_portile2 (~> 2.3.0) octopress (3.0.12.pre.1) jekyll (>= 2.0) mercenary (~> 0.3.2) @@ -86,22 +106,22 @@ GEM jekyll (~> 3.0) octopress-hooks (2.6.2) jekyll (>= 2.0) - pathutil (0.16.1) + pathutil (0.16.2) forwardable-extended (~> 2.6) pry (0.11.3) coderay (~> 1.1.0) method_source (~> 0.9.0) public_suffix (3.0.3) - rack (1.6.10) + rack (2.0.6) rake (12.3.1) rb-fsevent (0.10.3) rb-inotify (0.9.10) ffi (>= 0.5.0, < 2) redcarpet (3.4.0) - rouge (3.2.1) + rouge (3.3.0) ruby_dep (1.5.0) safe_yaml (1.0.4) - sass (3.6.0) + sass (3.7.2) sass-listen (~> 4.0.0) sass-listen (4.0.0) rb-fsevent (~> 0.9, >= 0.9.4) @@ -109,8 +129,13 @@ GEM sprockets (3.7.2) concurrent-ruby (~> 1.0) rack (> 1, < 3) + svg_optimizer (0.1.0) + nokogiri thor (0.20.0) + thread_safe (0.3.6) titlecase (0.1.1) + tzinfo (1.2.5) + thread_safe (~> 0.1) uglifier (4.1.19) execjs (>= 0.3.0, < 3) @@ -124,6 +149,7 @@ DEPENDENCIES jekyll jekyll-archives jekyll-assets + jekyll-inline-svg jekyll-paginate jekyll-picture-tag! jekyll-staging diff --git a/_assets/images/logo.svg b/_assets/images/logo.svg index 364e113..e3ab7f5 100644 --- a/_assets/images/logo.svg +++ b/_assets/images/logo.svg @@ -1,4 +1,4 @@ - + Dan Barber diff --git a/_assets/stylesheets/components/_blog-post.scss b/_assets/stylesheets/components/_blog-post.scss new file mode 100644 index 0000000..607e671 --- /dev/null +++ b/_assets/stylesheets/components/_blog-post.scss @@ -0,0 +1,105 @@ +.blog-post { + border-bottom: 1px dashed $border-color; + padding-bottom: 2.5rem; + + @media (prefers-color-scheme: dark) { + border-bottom: 1px dashed $border-color-dark; + } + + img { + background-color: $white; + height: auto; + max-width: 100%; + + &.left { + float: left; + margin-right: 1em; + } + + &.right { + float: right; + margin-left: 1em; + } + } + + figure { + 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; + max-width: 100%; + + &.no-border { + box-shadow: none; + } + } +} + +.blog-post__header { + .meta { + text-transform: uppercase; + color: $meta-text-color; + font-size: 0.8em; + letter-spacing: 0.1em; + width: 100%; + text-rendering: optimizelegibility; + } + + h1 + .meta { + margin-top: -2.25rem; + } +} + +.blog-post__title { + font-size: 1.35rem; + + a { + color: $heading-color; + text-decoration: none; + + &:hover, &:focus { + color: $link-color-hover; + } + + @media (prefers-color-scheme: dark) { + color: $heading-color-dark; + } + } +} + +.blog-post__content { + > * { + @include container; + } +} + +.blog-post__read-on { + 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); + transition: background-color 0.5s; + + &:hover { + background: $link-color-hover; + text-shadow: none; + color: $background-color; + } + + @media (prefers-color-scheme: dark) { + background: lighten($background-color-dark, 8); + color: mix($text-color-dark, $text-color-light); + } +} diff --git a/_assets/stylesheets/components/_pagination.scss b/_assets/stylesheets/components/_pagination.scss new file mode 100644 index 0000000..ad62cf7 --- /dev/null +++ b/_assets/stylesheets/components/_pagination.scss @@ -0,0 +1,40 @@ +.pagination { + font-size: 0.95em; + height: 1.5em; + padding: { + bottom: 1.5em; + top: 1.5em; + }; + position: relative; + + &:after { + clear: both; + content: ""; + display: block; + } + + a { + color: $text-color-light; + text-decoration: none; + + &:hover { + color: $link-color-hover; + } + + &[href*=archive] { + &:before, + &:after { + content: "—"; + padding: 0 0.3em; + } + } + + &.prev { + float: left; + } + + &.next { + float: right; + } + } +} diff --git a/_assets/stylesheets/parts/photos.css.scss b/_assets/stylesheets/components/_photo.scss similarity index 82% rename from _assets/stylesheets/parts/photos.css.scss rename to _assets/stylesheets/components/_photo.scss index eebc612..996a818 100644 --- a/_assets/stylesheets/parts/photos.css.scss +++ b/_assets/stylesheets/components/_photo.scss @@ -1,13 +1,14 @@ $photo-wide-max-width: 1024px; -figure.photo-wide { +.photo--wide { padding-left: 0; padding-right: 0; } @media only screen and (max-width: 1048px) { - figure.photo-wide { + .photo--wide { max-width: 100%; + img { margin: -0.5em 0; padding: 0.5em 0; @@ -16,7 +17,7 @@ figure.photo-wide { } @media only screen and (min-width: 1049px) { - figure.photo-wide { + .photo--wide { max-width: $photo-wide-max-width; } } diff --git a/_assets/stylesheets/parts/footer.css.scss b/_assets/stylesheets/components/_site-footer.scss similarity index 91% rename from _assets/stylesheets/parts/footer.css.scss rename to _assets/stylesheets/components/_site-footer.scss index da9538a..62191d9 100644 --- a/_assets/stylesheets/parts/footer.css.scss +++ b/_assets/stylesheets/components/_site-footer.scss @@ -1,21 +1,25 @@ -body > footer { - text-align: center; +.site-footer { font-size: 0.8em; - position: relative; - padding-top: 1em; - padding-bottom: 1em; margin-bottom: 3em; - border-radius-bottom: 0.4em; + padding-bottom: 1em; + padding-top: 1em; + position: relative; + text-align: center; z-index: 1; a { color: $footer-link-color; + text-decoration: none; + &:hover { color: $footer-link-color-hover; } &:visited { color: $footer-link-color; } - text-decoration: none; } - p:last-child { margin-bottom: 0; } + p { + &:last-child { + margin-bottom: 0; + } + } fieldset { border: 0; diff --git a/_assets/stylesheets/components/_site-header.scss b/_assets/stylesheets/components/_site-header.scss new file mode 100644 index 0000000..f431cc9 --- /dev/null +++ b/_assets/stylesheets/components/_site-header.scss @@ -0,0 +1,46 @@ +.site-header { + background-color: $header-color; + padding: 1rem 0 1rem; +} + +.site-header__container { + display: flex; + justify-content: space-between; +} + +.site-header__logo-link { + color: $white; + line-height: 0; + text-decoration: none; +} + +.site-header__logo { + width: 6rem; +} + +.site-header__navigation { + display: inline; + position: relative; + + ul { + list-style: none; + display: block; + margin: 0; + padding: 0; + border: 0; + li { + padding-left: 1.25em; + float: left; + } + padding-top: 0.15em; + } + a { + color: white; + text-decoration: none; + transition: text-shadow 0.25s 0s ease; + &:hover, &:focus { + color: white; + text-shadow: 0 0 5px rgba(255, 255, 255, 0.6); + } + } +} diff --git a/_assets/stylesheets/elements/_abbr.scss b/_assets/stylesheets/elements/_abbr.scss new file mode 100644 index 0000000..001c05d --- /dev/null +++ b/_assets/stylesheets/elements/_abbr.scss @@ -0,0 +1,7 @@ +abbr { + border-bottom: 1px dotted $text-color-light; + font-size: 0.9em; + letter-spacing: 0.1em; + text-decoration: none; + text-transform: uppercase; +} diff --git a/_assets/stylesheets/elements/_blockquote.scss b/_assets/stylesheets/elements/_blockquote.scss new file mode 100644 index 0000000..534cc7d --- /dev/null +++ b/_assets/stylesheets/elements/_blockquote.scss @@ -0,0 +1,17 @@ +blockquote { + font-size: 1rem; + font-style: italic; + line-height: 1.6; + margin-left: 0; + margin-right: 0; +} + +blockquote:before { + content: "“"; + float: left; + font-family: $body-font-family; + font-size: 2.75em; + margin-top: 0.1em; + opacity: 0.3; + text-indent: -0.6em; +} diff --git a/_assets/stylesheets/elements/_body.scss b/_assets/stylesheets/elements/_body.scss new file mode 100644 index 0000000..e4bd89b --- /dev/null +++ b/_assets/stylesheets/elements/_body.scss @@ -0,0 +1,11 @@ +body { + color: $text-color; + font-family: $body-font-family; + font-weight: 300; + line-height: 1.5; + margin: 0; + + @media (prefers-color-scheme: dark) { + color: $text-color-dark; + } +} diff --git a/_assets/stylesheets/elements/_code.scss b/_assets/stylesheets/elements/_code.scss new file mode 100644 index 0000000..3d33d3f --- /dev/null +++ b/_assets/stylesheets/elements/_code.scss @@ -0,0 +1,14 @@ +pre, +code, +tt { + font-family: $mono; + font-weight: 500; +} + +code { + border-radius: 0.25rem; + display: inline-block; + font-size: 0.75rem; + line-height: 1.5; + padding: 0 0.3rem; +} diff --git a/_assets/stylesheets/elements/_dl.scss b/_assets/stylesheets/elements/_dl.scss new file mode 100644 index 0000000..3296e61 --- /dev/null +++ b/_assets/stylesheets/elements/_dl.scss @@ -0,0 +1,19 @@ +dl { + margin: 1.75em 0; +} + +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; +} diff --git a/_assets/stylesheets/elements/_headings.scss b/_assets/stylesheets/elements/_headings.scss new file mode 100644 index 0000000..78ece49 --- /dev/null +++ b/_assets/stylesheets/elements/_headings.scss @@ -0,0 +1,33 @@ +h1, h2, h3, +h4, h5, h6 { + font-weight: 600; + text-rendering: optimizelegibility; +} + +h1, +h2, +h3, +h4 { + font-family: $heading-font-family; +} + +h1 { + font-size: 2.5rem; + line-height: 1.333; + margin: 4rem 0 2.5rem; +} + +h2 { + font-size: 1.5rem; + line-height: 1.1; + margin: 2rem 0 0.5rem; +} + +h3 { + font-size: 1.125rem; + margin-top: 1.5rem; +} + +h4 { + font-size: 1rem; +} diff --git a/_assets/stylesheets/elements/_html.scss b/_assets/stylesheets/elements/_html.scss new file mode 100644 index 0000000..4e2045c --- /dev/null +++ b/_assets/stylesheets/elements/_html.scss @@ -0,0 +1,24 @@ +html { + background: $background-color; + font-size: 100%; + + @media (prefers-color-scheme: dark) { + background: $background-color-dark; + } + + @media only screen and (min-width: 450px) { + font-size: 110%; + } + + @media only screen and (min-width: 650px) { + font-size: 125%; + } + + @media only screen and (min-width: 768px) { + font-size: 135%; + } + + @media only screen and (min-width: 892px) { + font-size: 145%; + } +} diff --git a/_assets/stylesheets/elements/_links.scss b/_assets/stylesheets/elements/_links.scss new file mode 100644 index 0000000..58acc5f --- /dev/null +++ b/_assets/stylesheets/elements/_links.scss @@ -0,0 +1,12 @@ +a { + color: $link-color; + transition: color 0.25s 0s ease; + + &:hover { + color: $link-color-hover; + } + + @media (prefers-color-scheme: dark) { + color: $link-color-dark; + } +} diff --git a/_assets/stylesheets/elements/_lists.scss b/_assets/stylesheets/elements/_lists.scss new file mode 100644 index 0000000..179dbe1 --- /dev/null +++ b/_assets/stylesheets/elements/_lists.scss @@ -0,0 +1,20 @@ +ul, +ol { + margin: 1.5rem 0 1.5rem; +} + +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; +} diff --git a/_assets/stylesheets/elements/_p.scss b/_assets/stylesheets/elements/_p.scss new file mode 100644 index 0000000..ddf0968 --- /dev/null +++ b/_assets/stylesheets/elements/_p.scss @@ -0,0 +1,8 @@ +p { + hyphenate-after: 3; + hyphenate-before: 2; + hyphenate-lines: 3; + hyphenate: auto; + margin: 1.5rem 0; + orphans: 4; +} diff --git a/_assets/stylesheets/includes/layout.css.scss b/_assets/stylesheets/includes/layout.css.scss deleted file mode 100644 index 11fb534..0000000 --- a/_assets/stylesheets/includes/layout.css.scss +++ /dev/null @@ -1,80 +0,0 @@ -$max-width: 800px !default; -$pad-min: 8.5% !default; - -header[role=banner] { - padding: 1em 0 0.5em; - h1 { - font-size: 1em; - margin: 0.25em 0 0.5em; - a { - color: white; - line-height: 0; - text-decoration: none; - 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 header, -.entry-content > *, -.container, -footer, -.pagination { - padding-left: $pad-min; - padding-right: $pad-min; - margin-left: auto; - margin-right: auto; - max-width: $max-width; -} - -nav[role=navigation] { - font-size: 1em; -} - -header[role=banner] h1 img { - width: 4.6982758621em; - height: 3.4051724138em; -} - -@media only screen and (min-width: 450px) { - body { - font-size: 110%; - } -} - -@media only screen and (min-width: 650px) { - body { - font-size: 125%; - } -} - -@media only screen and (min-width: 768px) { - body { - font-size: 135%; - } -} - -@media only screen and (min-width: 892px) { - body { - font-size: 145%; - } -} diff --git a/_assets/stylesheets/includes/main.css.scss b/_assets/stylesheets/includes/main.css.scss deleted file mode 100644 index 9b9cc8a..0000000 --- a/_assets/stylesheets/includes/main.css.scss +++ /dev/null @@ -1,5 +0,0 @@ -body { - margin: 0; - font-size: 100%; - -webkit-text-size-adjust: 100%; -} diff --git a/_assets/stylesheets/includes/styles.css.scss b/_assets/stylesheets/includes/styles.css.scss deleted file mode 100644 index 9a8f09e..0000000 --- a/_assets/stylesheets/includes/styles.css.scss +++ /dev/null @@ -1,137 +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 { - background-color: $header-color; - padding-top: 0.9em; - padding-bottom: 0.9em; - h1 a { - //display: inline-block - margin-top: 0; - font-weight: 600; - //line-height: 0 - } -} - -a { - color: $link-color; - transition: color 0.25s 0s ease; - &: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 { - color: white; - text-decoration: none; - transition: text-shadow 0.25s 0s ease; - &: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.35em; -} - -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 { - 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 { - float: left; - } - &.next { - float: right; - } - } -} diff --git a/_assets/stylesheets/includes/typography.css.scss b/_assets/stylesheets/includes/typography.css.scss deleted file mode 100644 index 0023434..0000000 --- a/_assets/stylesheets/includes/typography.css.scss +++ /dev/null @@ -1,352 +0,0 @@ -// $blockquote: $type-border !default -$heading-font-family: "Sentinel SSm A", "Sentinel SSm B", Georgia, Times, "Times New Roman", serif; -$body-font-family: "Sentinel SSm A", "Sentinel SSm B", Georgia, Times, "Times New Roman", serif; -$mono: "source-code-pro", monospace !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: $body-font-family; -} - -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: $heading-font-family; -} - -/*Size & Vertical Rhythm */ -body { - font-size: 100%; - font-size: 14px; - line-height: 1.5em; -} - -/*Color */ -body { - color: $text-color; -} - -/*HTML Standard Elements */ -h1 { - font-size: 2.5em; - line-height: 1.333em; - margin: 5rem 0 2.5rem; -} - -h2 { - font-size: 1.5em; - 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: 600; - text-rendering: optimizelegibility; -} - -h4, h5, h6 { - font-weight: 600; - text-rendering: optimizelegibility; -} - -article h1 { - font-size: 1.5em; -} - -strong { - font-weight: 600; -} - -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.5rem 0 1.5rem; -} - -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-decoration: none; - text-transform: uppercase; - font-size: 0.9em; - letter-spacing: 0.1em; - border-bottom: 1px dotted $text-color-light; -} - -p { - 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/lib/solarized-dark.css.scss b/_assets/stylesheets/lib/_solarized-dark.scss similarity index 100% rename from _assets/stylesheets/lib/solarized-dark.css.scss rename to _assets/stylesheets/lib/_solarized-dark.scss diff --git a/_assets/stylesheets/lib/solarized.css.scss b/_assets/stylesheets/lib/_solarized.scss similarity index 100% rename from _assets/stylesheets/lib/solarized.css.scss rename to _assets/stylesheets/lib/_solarized.scss diff --git a/_assets/stylesheets/objects/_container.scss b/_assets/stylesheets/objects/_container.scss new file mode 100644 index 0000000..967c676 --- /dev/null +++ b/_assets/stylesheets/objects/_container.scss @@ -0,0 +1,3 @@ +.container { + @include container; +} diff --git a/_assets/stylesheets/objects/_highlight.scss b/_assets/stylesheets/objects/_highlight.scss new file mode 100644 index 0000000..cce9c10 --- /dev/null +++ b/_assets/stylesheets/objects/_highlight.scss @@ -0,0 +1,12 @@ +@import "lib/solarized-dark"; + +.highlight { + border-radius: 0.25em; + margin: 1.5em 0; + overflow: auto; + padding: 0.5em 0.75em; + + pre { + margin: 0; + } +} diff --git a/_assets/stylesheets/includes/video.css.scss b/_assets/stylesheets/objects/_video-container.scss similarity index 99% rename from _assets/stylesheets/includes/video.css.scss rename to _assets/stylesheets/objects/_video-container.scss index 460199a..a4e245c 100644 --- a/_assets/stylesheets/includes/video.css.scss +++ b/_assets/stylesheets/objects/_video-container.scss @@ -1,10 +1,11 @@ .video-container { + height: 0; position: relative; width: 100%; - height: 0; + iframe { + height: 100%; position: absolute; width: 100%; - height: 100%; } } diff --git a/_assets/stylesheets/parts/archive.css.scss b/_assets/stylesheets/parts/archive.css.scss deleted file mode 100644 index 518e971..0000000 --- a/_assets/stylesheets/parts/archive.css.scss +++ /dev/null @@ -1,116 +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: 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/post.css.scss b/_assets/stylesheets/parts/post.css.scss deleted file mode 100644 index f1f9d03..0000000 --- a/_assets/stylesheets/parts/post.css.scss +++ /dev/null @@ -1,77 +0,0 @@ -article { - border-bottom: 1px dashed $border-color; - padding-bottom: 2.5rem; - header { - .meta { - text-transform: uppercase; - color: $meta-text-color; - font-size: 0.8em; - letter-spacing: 0.1em; - width: 100%; - text-rendering: optimizelegibility; - } - h1 + .meta { - margin-top: -2.25rem; - } - } - 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; - &.no-border { - box-shadow: none; - } - } - > footer { - margin-top: 1.75em; - 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); - 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/includes/colors.css.scss b/_assets/stylesheets/settings/_colors.scss similarity index 64% rename from _assets/stylesheets/includes/colors.css.scss rename to _assets/stylesheets/settings/_colors.scss index bb576b4..8b2b748 100644 --- a/_assets/stylesheets/includes/colors.css.scss +++ b/_assets/stylesheets/settings/_colors.scss @@ -1,14 +1,21 @@ -$background-color: white; +$white: #fff; + +$background-color: $white; +$background-color-dark: #222; $text-color: #333; +$text-color-dark: #ddd; $text-color-light: lighten($text-color, 45%); $heading-color: #333; +$heading-color-dark: #ddd; $meta-text-color: lighten($text-color, 45%); $header-color: #518F00; $border-color: #ccc; +$border-color-dark: #666; $link-color: rgb(24, 99, 161); +$link-color-dark: lighten($link-color, 25%); $link-color-hover: lighten($link-color, 10%); $footer-link-color: lighten($text-color, 25%); diff --git a/_assets/stylesheets/settings/_global.scss b/_assets/stylesheets/settings/_global.scss new file mode 100644 index 0000000..5520128 --- /dev/null +++ b/_assets/stylesheets/settings/_global.scss @@ -0,0 +1,2 @@ +$max-width: 800px !default; +$pad-min: 8.5% !default; diff --git a/_assets/stylesheets/settings/_typography.scss b/_assets/stylesheets/settings/_typography.scss new file mode 100644 index 0000000..e9a0505 --- /dev/null +++ b/_assets/stylesheets/settings/_typography.scss @@ -0,0 +1,5 @@ +$heading-font-family: "Sentinel SSm A", "Sentinel SSm B", Georgia, Times, "Times New Roman", serif; +$body-font-family: "Sentinel SSm A", "Sentinel SSm B", Georgia, Times, "Times New Roman", serif; +$mono: "Source Code Pro", "Consolas", "Menlo", monospace !default; +$header-title-font-family: $heading-font-family !default; +$header-subtitle-font-family: $heading-font-family !default; diff --git a/_assets/stylesheets/styles.css.scss b/_assets/stylesheets/styles.css.scss deleted file mode 100644 index 6f4cbe4..0000000 --- a/_assets/stylesheets/styles.css.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import "bourbon"; - -@import "includes/main.css.scss"; -@import "includes/colors.css.scss"; -@import "includes/typography.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/photos.css.scss"; -@import "parts/post.css.scss"; -@import "parts/archive.css.scss"; -@import "parts/footer.css.scss"; diff --git a/_assets/stylesheets/styles.scss b/_assets/stylesheets/styles.scss new file mode 100644 index 0000000..53fe880 --- /dev/null +++ b/_assets/stylesheets/styles.scss @@ -0,0 +1,47 @@ +// 0. Vendor - Imported from other source +@import "bourbon"; + +// 1. Settings – used with preprocessors and contain font, +// colors definitions, etc. +@import "settings/global"; +@import "settings/colors"; +@import "settings/typography"; + +// 2. Tools – globally used mixins and functions. +// It’s important not to output any CSS in the first 2 layers. +@import "tools/container"; + +// 3. Generic – reset and/or normalize styles, box-sizing definition, etc. +// This is the first layer which generates actual CSS. + +// 4. Elements – styling for bare HTML elements (like H1, A, etc.). +// These come with default styling from the browser so we can redefine +// them here. +@import "elements/abbr"; +@import "elements/blockquote"; +@import "elements/body"; +@import "elements/code"; +@import "elements/dl"; +@import "elements/headings"; +@import "elements/html"; +@import "elements/links"; +@import "elements/lists"; +@import "elements/p"; + +// 5. Objects – class-based selectors which define undecorated design patterns, +// for example media object known from OOCSS +@import "objects/container"; +@import "objects/highlight"; +@import "objects/video-container"; + +// 6. Components – specific UI components. +// This is where majority of our work takes place and our UI components +// are often composed of Objects and Components +@import "components/site-header"; +@import "components/site-footer"; +@import "components/blog-post"; +@import "components/pagination"; +@import "components/photo"; + +// 7. Utilities – utilities and helper classes with ability to override +// anything which goes before in the triangle, eg. hide helper class diff --git a/_assets/stylesheets/tools/_container.scss b/_assets/stylesheets/tools/_container.scss new file mode 100644 index 0000000..b1bb7c5 --- /dev/null +++ b/_assets/stylesheets/tools/_container.scss @@ -0,0 +1,7 @@ +@mixin container { + margin-left: auto; + margin-right: auto; + max-width: $max-width; + padding-left: $pad-min; + padding-right: $pad-min; +} diff --git a/_includes/article.html b/_includes/article.html index 4d269c0..d9d5fe2 100644 --- a/_includes/article.html +++ b/_includes/article.html @@ -1,40 +1,27 @@ -{% unless page.no_header %} -
- {% if index %} - {% if post.external-url %} -

{% if site.titlecase %}{{ post.title | titlecase }} →{% else %}{{ post.title }}{% endif %}

- {% else %} -

{% if site.titlecase %}{{ post.title | titlecase }}{% else %}{{ post.title }}{% endif %}

- {% endif %} - {% if post.date %}

{% include post/date.html date=post.date %}{{ time }}

{% endif %} - {% else %} - {% if page.external-url %} -

{% if site.titlecase %}{{ page.title | titlecase }} →{% else %}{{ page.title }}{% endif %}

- {% else %} -

{% if site.titlecase %}{{ page.title | titlecase }}{% else %}{{ page.title }}{% endif %}

- {% endif %} - {% if page.date %}

{% include post/date.html date=page.date %}{{ time }}

{% endif %} - {% endif %} - -{% endunless %} -{% if index %} -
{{ post.excerpt }}
- {% if post.content contains site.excerpt_separator %} - +
+ {% if page.external-url %} +

{% if site.titlecase %}{{ page.title | titlecase }} →{% else %}{{ page.title }}{% endif %}

+ {% else %} +

{% if site.titlecase %}{{ page.title | titlecase }}{% else %}{{ page.title }}{% endif %}

{% endif %} -{% else %} -
{{ content }}
- -{% endif %} + + {% if page.date %}

{% include post/date.html date=page.date %}{{ time }}

{% endif %} +
+ +
+ {{ content }} +
+ + + {% if post.external-url %} -

Permalink

+
+

Permalink

{% endif %} diff --git a/_includes/footer.html b/_includes/footer.html index cc92493..5791598 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,6 +1,6 @@ -