diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..da0310f --- /dev/null +++ b/.editorconfig @@ -0,0 +1,13 @@ +# editorconfig.org +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.md] +trim_trailing_whitespace = false \ No newline at end of file diff --git a/.travis.yml b/.travis.yml index cd4bdd8..2251af8 100644 --- a/.travis.yml +++ b/.travis.yml @@ -7,7 +7,7 @@ before_install: script: - bundle exec jekyll build --drafts - - bundle exec htmlproof ./_site +# - bundle exec htmlproof ./_site notifications: email: false diff --git a/_includes/disqus_comments.html b/_includes/disqus-comments.html similarity index 100% rename from _includes/disqus_comments.html rename to _includes/disqus-comments.html diff --git a/_includes/footer.html b/_includes/footer.html index f696184..4003e7f 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,6 +1,6 @@ {% if site.owner.google.ad-client and site.owner.google.ad-slot %}{% include ad-footer.html %}{% endif %} -© {{ site.time | date: '%Y' }} {{ site.owner.name }}. Powered by Jekyll using the So Simple Theme. +© {{ site.time | date: '%Y' }} {{ site.owner.name }}. Powered by Jekyll using the So Simple Theme.
{% if site.owner.twitter %}{% endif %} {% if site.owner.facebook %}{% endif %} diff --git a/_includes/navigation.html b/_includes/navigation.html index 852e106..3aea0e6 100644 --- a/_includes/navigation.html +++ b/_includes/navigation.html @@ -18,18 +18,18 @@ {% if page.image.feature %}
{% if site.logo != null %}
- +
{% endif %}
{% else %}
- {% if site.logo != null %} - - {% endif %} -

{{ site.title }}

+ {% if site.logo != null %} + + {% endif %} +

{{ site.title }}

{{ site.description }}

{% endif %} -
\ No newline at end of file +
diff --git a/_layouts/page.html b/_layouts/page.html index 170e0e5..84b75c7 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -13,7 +13,7 @@
- {% if page.image.feature %}{{ page.title }}{% if page.image.credit %}

Photo Credit: {{ page.image.credit }}{% endif %}{% endif %} + {% if page.image.feature %}{{ page.title }}{% if page.image.credit %}

Photo Credit: {{ page.image.credit }}

{% endif %}{% endif %}

{% if page.headline %}{{ page.headline }}{% else %}{{ page.title }}

{% endif %} @@ -31,7 +31,7 @@
-{% include scripts.html %} +{% include scripts.html %} - \ No newline at end of file + diff --git a/_layouts/post.html b/_layouts/post.html index 4fef55b..b58ad3a 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -13,7 +13,7 @@
- {% if page.image.feature %}{{ page.title }}{% if page.image.credit %}

Photo Credit: {{ page.image.credit }}{% endif %}{% endif %} + {% if page.image.feature %}{{ page.title }}{% if page.image.credit %}

Image credit: {{ page.image.credit }}

{% endif %}{% endif %}
{% for tag in page.tags %}{{ tag }}{% unless forloop.last %} • {% endunless %}{% endfor %} @@ -43,7 +43,7 @@ {{ content }} {% if (site.owner.disqus-shortname and page.comments) or site.comments %}
- {% include disqus_comments.html %} + {% include disqus-comments.html %} {% endif %}
@@ -64,7 +64,7 @@
-{% include scripts.html %} +{% include scripts.html %} diff --git a/_sass/_animations.scss b/_sass/_animations.scss new file mode 100644 index 0000000..686a896 --- /dev/null +++ b/_sass/_animations.scss @@ -0,0 +1,338 @@ +/* ========================================================================== + Animations + ========================================================================== */ + +/* add .animated class to elements you wish to animate + * along with the type of animation (eg:
) + */ + +.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}@-webkit-keyframes fadeIn { + 0% {opacity: 0;} 100% {opacity: 1;} +} + +/* + Fade-in animation .fadeIn + ========================================================================== */ + +@-webkit-keyframes fadeIn { + 0% {opacity: 0;} + 100% {opacity: 1;} +} +@-moz-keyframes fadeIn { + 0% {opacity: 0;} + 100% {opacity: 1;} +} +@-o-keyframes fadeIn { + 0% {opacity: 0;} + 100% {opacity: 1;} +} +@keyframes fadeIn { + 0% {opacity: 0;} + 100% {opacity: 1;} +} + +.fadeIn { + -webkit-animation-name: fadeIn; + -moz-animation-name: fadeIn; + -o-animation-name: fadeIn; + animation-name: fadeIn; +} + +/* + Fade-in down animation .fadeInDown + ========================================================================== */ + +@-webkit-keyframes fadeInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-20px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + } +} +@-moz-keyframes fadeInDown { + 0% { + opacity: 0; + -moz-transform: translateY(-20px); + } + 100% { + opacity: 1; + -moz-transform: translateY(0); + } +} +@-o-keyframes fadeInDown { + 0% { + opacity: 0; + -o-transform: translateY(-20px); + } + 100% { + opacity: 1; + -o-transform: translateY(0); + } +} +@keyframes fadeInDown { + 0% { + opacity: 0; + transform: translateY(-20px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.fadeInDown { + -webkit-animation-name: fadeInDown; + -moz-animation-name: fadeInDown; + -o-animation-name: fadeInDown; + animation-name: fadeInDown; +} + +/* + Fade-in down big animation .fadeInDownBig + ========================================================================== */ + +@-webkit-keyframes fadeInDownBig { + 0% { + opacity: 0; + -webkit-transform: translateY(-2000px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + } +} +@-moz-keyframes fadeInDownBig { + 0% { + opacity: 0; + -moz-transform: translateY(-2000px); + } + 100% { + opacity: 1; + -moz-transform: translateY(0); + } +} +@-o-keyframes fadeInDownBig { + 0% { + opacity: 0; + -o-transform: translateY(-2000px); + } + 100% { + opacity: 1; + -o-transform: translateY(0); + } +} +@keyframes fadeInDownBig { + 0% { + opacity: 0; + transform: translateY(-2000px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.fadeInDownBig { + -webkit-animation-name: fadeInDownBig; + -moz-animation-name: fadeInDownBig; + -o-animation-name: fadeInDownBig; + animation-name: fadeInDownBig; +} + +/* + Bounce-in animation .bounceIn + ========================================================================== */ + +@-webkit-keyframes bounceIn { + 0% { + opacity: 0; + -webkit-transform: scale(.3); + } + 50% { + opacity: 1; + -webkit-transform: scale(1.05); + } + 70% { + -webkit-transform: scale(.9); + } + 100% { + -webkit-transform: scale(1); + } +} +@-moz-keyframes bounceIn { + 0% { + opacity: 0; + -moz-transform: scale(.3); + } + 50% { + opacity: 1; + -moz-transform: scale(1.05); + } + 70% { + -moz-transform: scale(.9); + } + 100% { + -moz-transform: scale(1); + } +} +@-o-keyframes bounceIn { + 0% { + opacity: 0; + -o-transform: scale(.3); + } + 50% { + opacity: 1; + -o-transform: scale(1.05); + } + 70% { + -o-transform: scale(.9); + } + 100% { + -o-transform: scale(1); + } +} +@keyframes bounceIn { + 0% { + opacity: 0; + transform: scale(.3); + } + 50% { + opacity: 1; + transform: scale(1.05); + } + 70% { + transform: scale(.9); + } + 100% { + transform: scale(1); + } +} + +.bounceIn { + -webkit-animation-name: bounceIn; + -moz-animation-name: bounceIn; + -o-animation-name: bounceIn; + animation-name: bounceIn; +} + +/* + Bounce-in down animation .bounceInDown + ========================================================================== */ + +@-webkit-keyframes bounceInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-2000px); + } + 60% { + opacity: 1; + -webkit-transform: translateY(30px); + } + 80% { + -webkit-transform: translateY(-10px); + } + 100% { + -webkit-transform: translateY(0); + } +} +@-moz-keyframes bounceInDown { + 0% { + opacity: 0; + -moz-transform: translateY(-2000px); + } + 60% { + opacity: 1; + -moz-transform: translateY(30px); + } + 80% { + -moz-transform: translateY(-10px); + } + 100% { + -moz-transform: translateY(0); + } +} +@-o-keyframes bounceInDown { + 0% { + opacity: 0; + -o-transform: translateY(-2000px); + } + 60% { + opacity: 1; + -o-transform: translateY(30px); + } + 80% { + -o-transform: translateY(-10px); + } + 100% { + -o-transform: translateY(0); + } +} +@keyframes bounceInDown { + 0% { + opacity: 0; + transform: translateY(-2000px); + } + 60% { + opacity: 1; + transform: translateY(30px); + } + 80% { + transform: translateY(-10px); + } + 100% { + transform: translateY(0); + } +} + +.bounceInDown { + -webkit-animation-name: bounceInDown; + -moz-animation-name: bounceInDown; + -o-animation-name: bounceInDown; + animation-name: bounceInDown; +} + +/* + Drop animation .drop + ========================================================================== */ + +@-webkit-keyframes drop { + 0% { + -webkit-transform: translateY(-500px); + } + 100% { + -webkit-transform: translateY(0); + } +} +@-moz-keyframes drop { + 0% { + -moz-transform: translateY(-500px); + } + 100% { + -moz-transform: translateY(0); + } +} +@-o-keyframes drop { + 0% { + -o-transform: translateY(-500px); + } + 100% { + -o-transform: translateY(0); + } +} +@keyframes drop { + 0% { + transform: translateY(-500px); + } + 100% { + transform: translateY(0); + } +} +.drop { + -webkit-animation-name: drop; + -moz-animation-name: drop; + -o-animation-name: drop; + animation-name: drop; +} diff --git a/_sass/_archives.scss b/_sass/_archives.scss new file mode 100644 index 0000000..7ee5a91 --- /dev/null +++ b/_sass/_archives.scss @@ -0,0 +1,77 @@ +/* ========================================================================== + Archive pages + ========================================================================== */ + + + + +/* + Post archive + ========================================================================== */ + +.post-list { + margin: 0; + padding: 0; + list-style-type: none; + li { + padding: 8px 0; + border-bottom: 1px solid lighten($black,80); + border-bottom: 1px solid rgba($black,.10); + @include font-size(18,no); + @include clearfix; + > a { + border-bottom-width: 0; /* remove underlines from items in post indexes */ + } + } + a > span { + float: right; + } + .entry-date { + @include font-size(14,no); + text-transform: uppercase; + display: none; + @include media($medium) { + display: inline; + } + } + /* post excerpt */ + .excerpt { + display: block; + float: none; + @include font-size(14, no, 16); + @include media($medium) { + width: 70%; + } + @include media($large) { + width: 60%; + } + } +} + +/* + Tag archive + ========================================================================== */ + +.tag-box { + list-style: none; + margin: 0; + padding: 4px 0; + overflow: hidden; + @include clearfix; + &.inline li { + float: left; + @include font-size(14); + line-height: 2.5; + } + a { + padding: 4px 6px; + margin: 2px; + background-color: lighten($black, 90); + @include rounded(4px); + text-decoration: none; + span { + vertical-align: super; + @include font-size(10); + } + } +} \ No newline at end of file diff --git a/_sass/_base.scss b/_sass/_base.scss new file mode 100644 index 0000000..6751da4 --- /dev/null +++ b/_sass/_base.scss @@ -0,0 +1,221 @@ +/* ========================================================================== + Base elements + ========================================================================== */ + +/* + Selections + ========================================================================== */ + +::-moz-selection { + background-color: lighten($base-color, 65%); + color: $base-color; + text-shadow: none; +} +::selection { + background-color: lighten($base-color, 65%); + color: $base-color; + text-shadow: none; +} + + +/* + Body + ========================================================================== */ + +body { + margin: 0; + padding: 0; + width: 100%; + font-family: $base-font; + color: $text-color; + background-color: $body-color; + border-top: 5px solid $black; +} + +/* + Typography + ========================================================================== */ + +body { + font-family: $base-font; + color: $text-color; + @include font-size(16); +} + +p { + @include font-size(18,yes,28); +} + +li { + @include font-size(16,12,24); +} + +/* headings */ + +h1, h2, h3, h4, h5, h6 { + font-family: $heading-font; + text-rendering: optimizeLegibility; // Fix the character spacing for headings +} +h1 { + @include font-size(36); +} +h2 { + @include font-size(32); +} +h3 { + @include font-size(28); +} +h4 { + @include font-size(24); +} +h5 { + @include font-size(20); +} +h6 { + @include font-size(18); +} + +/* underlined text */ + +u, +ins { + text-decoration: none; + border-bottom: 1px solid $text-color; +} + +/* + Links + ========================================================================== */ + +a { + text-decoration: none; + color: $link-color; + &:visited { + color: lighten($link-color, 20); + } + &:hover { + color: darken($link-color, 20); + } + &:focus { + outline: thin dotted; + color: darken($link-color, 20); + } + &:hover, + &:active { + outline: 0; + } +} + +/* + Horizontal rules + ========================================================================== */ + +hr { + display: block; + margin: 1em 0; + padding: 0; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + border-bottom: 1px solid #fff; +} + +/* + Figures and Images + ========================================================================== */ + +figure { + margin: 0; + padding-top: 10px; + padding-bottom: 10px; + @include clearfix; + img { + margin-bottom: 10px; + } + a { + img { + @include transform(translateY(0)); + -webkit-transition-duration: 0.25s; + -moz-transition-duration: 0.25s; + -o-transition-duration: 0.25s; + opacity: 0.7; + &:hover { + @include transform(translateY(-5px)); + @include box-shadow(0 0 10px rgba($black, .20)); + opacity: 1; + } + } + } +} + +svg:not(:root) { + overflow: hidden; +} + +// Figure captions + +figcaption { + padding-top: 10px; + @include font-size(14); + line-height: 1.3; + color: lighten($text-color, 10); +} + + + +// Tables +// -------------------------------------------------- +table { + width: 100%; +} + + +// Blockquotes +// -------------------------------------------------- + +blockquote { + font-family: $alt-font; + font-style: italic; + @include font-size(16); + padding-left: 20px; + border-left: 8px solid $black; +} + + + + + +// Code +// -------------------------------------------------- + +tt, code, kbd, samp, pre { + font-family: $code-font; +} +p, +li { + code { + @include font-size(14); + font-family: $code-font; + white-space: nowrap; + margin: 0 2px; + padding: 0 5px; + border: 1px solid lighten($black, 90); + background-color: lighten($black, 95); + @include rounded(3px); + } +} +pre { + @include font-size(14); + overflow-x: auto; +} + + + + + +// Global Transition +// --------------------------------------------------- + +b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a, .highlight { + @include transition(all .2s ease); +} diff --git a/_sass/_buttons.scss b/_sass/_buttons.scss new file mode 100644 index 0000000..3ab88ea --- /dev/null +++ b/_sass/_buttons.scss @@ -0,0 +1,39 @@ +/* ========================================================================== + Buttons + ========================================================================== */ + +/* + Default button + ========================================================================== */ + +.btn { + display: inline-block; + margin-bottom: 20px; + padding: 8px 20px; + @include font-size(14); + background-color: $black; + color: $white; + border: 2px solid $black !important; + border-radius: $border-radius; + &:visited { + color: $white; + } + &:hover { + background-color: $white; + color: $black; + } +} + +/* + Close button + ========================================================================== */ + +.close-btn { + position: absolute; + top: 0; + right: 0; + z-index: 1; + background-color: transparent; + border: 0 solid transparent; + color: $white; +} diff --git a/_sass/_footer.scss b/_sass/_footer.scss new file mode 100644 index 0000000..002fd80 --- /dev/null +++ b/_sass/_footer.scss @@ -0,0 +1,30 @@ +/* ========================================================================== + Site footer + ========================================================================== */ + +.footer-wrapper { + @include clearfix; + margin: 2em auto; + text-align: center; + font-family: $alt-font; + @include font-size(14); + font-style: italic; + color: lighten($text-color,20); + a { + color: lighten($text-color,20); + } +} + +/* + Social media icons + ========================================================================== */ + +.social-icons { + margin: 1em 0 2em; + a { + padding: 4px 8px; + &:hover { + color: $black; + } + } +} diff --git a/_sass/_footnotes.scss b/_sass/_footnotes.scss new file mode 100644 index 0000000..37266f3 --- /dev/null +++ b/_sass/_footnotes.scss @@ -0,0 +1,8 @@ +/* ========================================================================== + Footnotes (class generated by Kramdown) + ========================================================================== */ + +.footnotes { + @include font-size(14); + font-family: $base-font; +} \ No newline at end of file diff --git a/_sass/_helpers.scss b/_sass/_helpers.scss new file mode 100644 index 0000000..b178a1e --- /dev/null +++ b/_sass/_helpers.scss @@ -0,0 +1,116 @@ +/* ========================================================================== + Helpers and Utility Classes + ========================================================================== */ + +.wrap { + margin: 0 auto; +} + +/* + Typography + ========================================================================== */ + +/* capitalize all letters */ + +.all-caps { + text-transform: uppercase; +} + +/* center text */ + +.center { + text-align: center; +} + +/* remove bullets from list items */ + +/** + * + */ + +.unstyled-list { + list-style: none; + margin-left: 0; + padding-left: 0; + li { + list-style-type: none; + } +} + +/* + Image alignment + ========================================================================== */ + +/* float left */ + +.pull-left { + float: left; + padding-right: $gutter; +} + +/* float right */ + +.pull-right { + float: right; + padding-left: $gutter; +} + +/* + Image layout in
+ ========================================================================== */ + +figure { + + /* 2 images in a row. should be of equal height/width to maintain layout */ + + &.half { + @include media($large) { + img { + width: 47.5%; + float: left; + margin-right: 2.5%; + margin-bottom: 2.5%; + } + figcaption { + clear: left; + } + } + } + + /* 3 images in a row. should be of equal height/width to maintain layout */ + + &.third { + @include media($large) { + img { + width: 30.8%; + float: left; + margin-right: 2.5%; + margin-bottom: 2.5%; + } + figcaption { + clear: left; + } + } + } +} + +/* + No scrollbars + ========================================================================== */ + +.no-scroll { + overflow: hidden; +} + +/* + Link arrow (used in link post titles) + ========================================================================== */ + +.link-arrow { + font-weight: 100; + text-decoration: underline; + font-style: normal; +} diff --git a/_sass/_masthead.scss b/_sass/_masthead.scss new file mode 100644 index 0000000..f048d8f --- /dev/null +++ b/_sass/_masthead.scss @@ -0,0 +1,80 @@ +/* ========================================================================== + Masthead + ========================================================================== */ + +.masthead { + margin-top: 40px; + @include clearfix; + @include media($medium) { + margin-top: 0; + } + .wrap { + text-align: center; + max-width: em(440); + padding-right: 20px; + padding-left: 20px; + @include media($medium) { + max-width: em(728); + padding-right: 60px; + padding-left: 60px; + } + @include media($large) { + max-width: em(960); + } + } +} + +/* + Site logo + ========================================================================== */ + +.site-logo { + img { + width: 100px; + height: 100px; + @include animation-duration(1s); + @include animation-delay(.05s); + border: 4px solid $white; + @include rounded(100px); /* crops in a circle */ + @include media($medium) { + width: 150px; + height: 150px; + @include rounded(150px); /* crops in a circle */ + } + @include media($large) { + width: 200px; + height: 200px; + @include rounded(200px); /* crops in a circle */ + } + } +} + +/* + Site title/name + ========================================================================== */ + +.site-title { + margin-bottom: 0; + @include animation-duration(1s); + @include animation-delay(.75s); + a { + color: $black; + } +} + +/* + Site description text + ========================================================================== */ + +.site-description { + margin-top: 0; + font-family: $alt-font; + @include font-size(16); + font-weight: 400; + font-style: italic; + @include animation-duration(1s); + @include animation-delay(1s); + @include media($medium) { + @include font-size(20); + } +} diff --git a/_sass/_navigation.scss b/_sass/_navigation.scss new file mode 100644 index 0000000..a88fa16 --- /dev/null +++ b/_sass/_navigation.scss @@ -0,0 +1,99 @@ +/* ========================================================================== + Top navigation + ========================================================================== */ + +.navigation-wrapper { + text-align: center; + @include clearfix; + ul { + display: inline-block; + width: 100%; + vertical-align: top; + margin: 0 0 50px; + padding: 4px 20px; + background-color: $black; + @include media($medium) { + width: auto; + @include rounded(0 0 10px 10px); + } + @include clearfix; + } + li { + display: block; + float: left; + list-style: none; + text-align: center; + @include font-size(24,no); + text-transform: uppercase; + color: $white; + @include media($medium) { + @include font-size(14,no); + } + a:hover { + @include box-shadow($shadow: inset 0 0 1px $white); + } + } + a { + display: block; + margin-bottom: 10px; + padding: 12px 20px; + @include media($medium) { + margin-bottom: 0; + padding: 6px 10px; + } + color: $white; + @include rounded(4px); + &:hover { + background-color: lighten($black, 10); + } + } +} + +/* + Responsive navigation toggle + ========================================================================== */ + +#site-nav { + display: none; + z-index: 5; + @include media($medium) { + -webkit-animation-duration: 1s; + -moz-animation-duration: 1s; + -o-animation-duration: 1s; + animation-duration: 1s; + } + &.closed { + @include media($medium) { + display: block; + } + } + &.opened { + display: block; + max-height: 100%; + li { + float: none; + @include media($medium) { + float: left; + } + } + } +} + +/* display when JavaScript is disabled */ +.no-js #site-nav { + display: block; +} + +#nav-toggle { + z-index: 20; + display: block; + vertical-align: top; + margin: 0; + padding: 6px 20px; + background-color: $black; + height: 44px; + @include rounded(0); + @include media($medium) { + display: none; + } +} diff --git a/_sass/_notices.scss b/_sass/_notices.scss new file mode 100644 index 0000000..8b0ddc5 --- /dev/null +++ b/_sass/_notices.scss @@ -0,0 +1,26 @@ +/* ========================================================================== + Notices + ========================================================================== */ + +/* + Default notice + ========================================================================== */ + +.notice { + margin-top: 1.5em; + padding: .5em 1em; + text-indent: 0; + @include font-size(16); + background-color: lighten($black, 95); + border: 1px solid lighten($black, 90); + @include rounded(4px); +} + +/* + Browser upgrade notice + ========================================================================== */ + +.upgrade { + padding: 10px; + text-align: center; +} diff --git a/_sass/_page.scss b/_sass/_page.scss new file mode 100644 index 0000000..b5ccdd0 --- /dev/null +++ b/_sass/_page.scss @@ -0,0 +1,295 @@ +/* ========================================================================== + Page/post layout and styling + ========================================================================== */ + +/* + Main content + ========================================================================== */ + +#main { + @include clearfix; +} + +.entry, +.hentry { + @include clearfix; + border-bottom: 1px solid lighten($black,80); + border-bottom: 1px solid rgba($black,.10); +} + +/* feature image */ + +.entry-feature-image { + margin: 20px 0 0; + width: 100%; + @include media($medium) { + margin-top: -75px; /* move up to be overlapped by site logo */ + } + @include media($large) { + margin-top: -145px; /* move up further to be overlapped by site logo */ + } +} + +/* page header */ + +.entry-header { + @include fill-parent; +} + +/* tag listing in page header */ + +.entry-tags { + display: block; + margin-top: 2em; + text-transform: uppercase; + @include font-size(16); + font-weight: 600; + a { + color: $text-color; + } +} + +/* page title */ + +span + .entry-title { + margin-top: 0; +} + +.entry-title { + font-family: $alt-font; + font-style: italic; + @include font-size(36,yes,36); + font-weight: 400; + line-height: 1; + letter-spacing: -3px; + a { + color: $black; + text-decoration: underline; + } + @include media($medium) { + @include font-size(52,yes,54); + } + @include media($large) { + @include font-size(68,yes,72); + } +} + +/* page/post wrapper */ + +.entry-wrapper { + @include outer-container; + margin-top: 0; + margin-bottom: 3em; + padding-right: $gutter; + padding-left: $gutter; +} + +/* page/post meta content (date, author, etc) */ + +.entry-meta { + @include span-columns(12); + text-transform: uppercase; + @include font-size(14); + a { + color: $text-color; + } + @include media($large) { + @include span-columns(2.5); + } + & > span { + padding: 0 20px 10px 0; + display: inline-block; + @include media($large) { + display: block; + padding: 8px 0; + border-bottom: 1px solid lighten($black,80); + border-bottom: 1px solid rgba($black,.10); + } + } +} + +/* author avatar (circular) */ + +.bio-photo { + display: none; + @include media($large) { + display: block; + width: 150px; + height: 150px; + margin-bottom: 10px; + @include rounded(150px); + @include clearfix; + } +} + + +/* feature image credit */ + +.image-credit { + margin: 0 auto; + max-width: 440px; + padding-top: 5px; + padding-right: 20px; + padding-left: 20px; + text-align: right; + @include font-size(12, no); + line-height: 1.3; + color: lighten($text-color, 30); + @include clearfix(); + @include media($medium) { + max-width: 760px; + padding-right: 60px; + padding-left: 60px; + @include font-size(14, no); + } + @include media($large) { + max-width: 960px; + } + a { + color: lighten($text-color, 30); + } +} + +/* main content block */ + +.entry-content { + @include span-columns(12); + p:first-child { + margin-top: 0; + } + @include media($large) { + @include span-columns(9.5); + } + /* nice link underlines */ + p > a, + li > a { + border-bottom: 1px dotted lighten($link-color, 50); + &:hover { + border-bottom-style: solid; + } + } +} + +/* + Disqus + ========================================================================== */ + +#disqus_thread { + margin-top: 2em; +} + +/* + Pagination + ========================================================================== */ + +.pagination { + margin-top: 2em; + text-align: center; +} + +/* + Overrides + ========================================================================== */ + +/* adjust width for lack of meta/author column */ + +#home, +#page { + .entry-wrapper { + max-width: em(760); + } + .entry-title { + text-align: center; + max-width: 100%; + } + .entry-content { + @include span-columns(12); + } +} + +/* + Kramdown generated table of contents + ========================================================================== */ + +#markdown-toc { + font-family: $alt-font; + margin-top: $gutter; + margin-bottom: $gutter; + padding-left: 0; + border: 1px solid $border-color; + border-radius: $border-radius; + ul { + list-style-type: none; + padding-left: 0; + } + li { + @include font-size(16,no,18); + border-bottom: 1px solid $border-color; + list-style-type: none; + } + h6 { + margin: 0; + padding: (.25 * $gutter) (.5 * $gutter); + background: $table-stripe-color; + } + a { + display: block; + padding: (.25 * $gutter) (.5 * $gutter); + border-left: 2px solid transparent; + border-bottom: 0 solid transparent; + &:hover, + &:focus { + background: lighten($border-color,5); + } + } +} + +/* + Tables + ========================================================================== */ + +/** For nicer looking tables apply the .table class + * Example: + * + * + * + * + * + * + *
cell1cell2cell3
+*/ + +.table { + border-collapse: collapse; + margin: ((0px + $doc-line-height) / 2) 0; + margin: ((0rem + ($doc-line-height / $doc-font-size)) / 2) 0; + width: 100%; + tbody { + tr:hover > td, tr:hover > th { + background-color: $table-hover-color; + } + } + thead { + tr:first-child td { + border-bottom: 2px solid $table-border-color; + } + } + th { + padding: (0px + $doc-line-height) / 2; + padding: (0rem + ($doc-line-height / $doc-font-size)) / 2; + font-family: $alt-font; + font-weight: bold; + text-align: left; + background-color: $table-header-color; + border-bottom: 1px solid darken($border-color, 15%); + } + td { + border-bottom: 1px solid $border-color; + padding: (0px + $doc-line-height) / 2; + padding: (0rem + ($doc-line-height / $doc-font-size)) / 2; + @include font-size(18); + } + tr, td, th { + vertical-align: middle; + } +} diff --git a/_sass/_search.scss b/_sass/_search.scss new file mode 100644 index 0000000..0afcc2b --- /dev/null +++ b/_sass/_search.scss @@ -0,0 +1,40 @@ +/* ========================================================================== + Search + ========================================================================== */ + +.search-wrapper { + @include outer-container; + margin-top: 0; + padding-right: $gutter; + padding-left: $gutter; + height: 1px; +} + +/* + Google search form + ========================================================================== */ + +#goog-fixurl { + ul { + list-style: none; + margin-left: 0; + padding-left: 0; + li { + list-style-type: none; + } + } +} + +#goog-wm-qt { + width: auto; + margin-right: 10px; + padding: 8px 10px; + @include font-size(14); + border-width: 2px; + border-radius: $border-radius; +} + +/* button */ +#goog-wm-sb { + @extend .btn; +} diff --git a/_sass/_wells.scss b/_sass/_wells.scss new file mode 100644 index 0000000..9d35050 --- /dev/null +++ b/_sass/_wells.scss @@ -0,0 +1,11 @@ +/* ========================================================================== + Wells + ========================================================================== */ + +/* Used to call out text in a subtle manner */ + +.well { + padding: 20px; + border: 1px solid $comp-color; + @include rounded(4px); +} diff --git a/assets/css/main.scss b/assets/css/main.scss index ccb048f..17f2c39 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -11,18 +11,45 @@ sitemap: false * */ -// Partials @import "variables"; -@import "vendor/bourbon/bourbon"; -@import "grid-settings"; -@import "vendor/neat/neat"; + +/* + Vendor + ========================================================================== */ + +@import "vendor/bourbon/bourbon"; /* Bourbon mixins (bourbon.io) */ +@import "grid-settings"; /* Bourbon Neat settings */ +@import "vendor/neat/neat"; /* Bourbon Neat grid mixins (neat.bourbon.io) */ +@import "vendor/font-awesome/font-awesome"; /* Font Awesome icons */ +@import "vendor/magnific-popup/magnific-popup"; /* Magnific Popup lightbox */ + +/* + Global + ========================================================================== */ + @import "mixins"; @import "reset"; -@import "site"; +@import "base"; + +/* + Components + ========================================================================== */ + +@import "helpers"; +@import "buttons"; +@import "wells"; @import "syntax"; -@import "coderay"; -@import "elements"; @import "forms"; -@import "layout"; -@import "vendor/font-awesome/font-awesome"; -@import "vendor/magnific-popup/magnific-popup"; +@import "notices"; /* notices and alerts */ +@import "animations"; +@import "masthead"; +@import "navigation"; +@import "search"; +@import "footer"; + +/* + Page specific + ========================================================================== */ + +@import "page"; /* layout and styles that apply to posts and pages */ +@import "archives"; /* archive pages (post/tag lists, etc) */ diff --git a/theme-setup/index.md b/theme-setup/index.md index 49c13dd..f52e8cf 100644 --- a/theme-setup/index.md +++ b/theme-setup/index.md @@ -63,13 +63,13 @@ How So Simple is organized and what the various files are. All posts, layouts, i so-simple-theme/ ├── _includes/ | ├── browser-upgrade.html # prompt to install a modern browser for < IE9 -| ├── disqus_comments.html # Disqus comments script +| ├── disqus-comments.html # Disqus comments script +| ├── feed-footer.html # post footers in feed | ├── footer.html # site footer | ├── head.html # site head | ├── navigation.html # site top navigation -| ├── open-graph.html # Twitter Cards and Open Graph meta data +| ├── open-graph.html # meta data for Open Graph and Twitter cards | └── scripts.html # site scripts -| └── site-search.html # site search overlay ├── _layouts/ | ├── page.html # single column page layout | └── post.html # main content with sidebar for author/post details