From 2cd1f5fbed5421460537566a2748b23c16675b11 Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Tue, 28 Jun 2016 11:15:06 -0400 Subject: [PATCH 1/7] Update rouge to 1.11.1 --- Gemfile.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Gemfile.lock b/Gemfile.lock index a2ae49bf13..91d55cb0a7 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -38,7 +38,7 @@ GEM rb-fsevent (0.9.7) rb-inotify (0.9.7) ffi (>= 0.5.0) - rouge (1.10.1) + rouge (1.11.1) safe_yaml (1.0.4) sass (3.4.22) sawyer (0.7.0) From 641e9ebe910c4870e95c201d10d10438e04f0de3 Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Tue, 28 Jun 2016 11:36:25 -0400 Subject: [PATCH 2/7] Add shadow to menu trigger --- _sass/_dl-menu.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/_sass/_dl-menu.scss b/_sass/_dl-menu.scss index bb9fe22f88..1f9adc1bfb 100644 --- a/_sass/_dl-menu.scss +++ b/_sass/_dl-menu.scss @@ -30,6 +30,7 @@ outline: none; @include border-radius(0,3px,0,0); opacity: 0.6; + box-shadow: 0 12px 24px rgba($black,0.4); @media #{$medium} { @include border-radius(3px,3px,3px,3px); } From e4dece88d907c11add6f3960cc38ece593927af1 Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Tue, 28 Jun 2016 11:37:25 -0400 Subject: [PATCH 3/7] Improve menu height/scrolling when taller than viewport - Fixes #14 --- _sass/_dl-menu.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/_sass/_dl-menu.scss b/_sass/_dl-menu.scss index 1f9adc1bfb..8ae7d0d9d6 100644 --- a/_sass/_dl-menu.scss +++ b/_sass/_dl-menu.scss @@ -1,5 +1,6 @@ .dl-menuwrapper { width: 100%; + height: 100%; position: absolute; top: 0; left: 0; @@ -123,11 +124,11 @@ } .dl-menu { margin: 0; - position: absolute; + position: relative; width: 100%; - max-width: 400px; + max-height: 90%; overflow-y: auto; - max-height: 600px; + overflow-x: hidden; opacity: 0; pointer-events: none; box-shadow: 0 12px 24px rgba($black,0.4); @@ -140,7 +141,6 @@ z-index: inherit; @media #{$medium} { @include border-radius(3px,3px,3px,3px); - max-height: 650px; } } .dl-menu.dl-menu-toggle { From a152d5cbc13bf10cd6e2af373d32a3d87d51dca6 Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Tue, 28 Jun 2016 11:55:59 -0400 Subject: [PATCH 4/7] Remove unnecessary Gist CSS --- _sass/_gist.scss | 186 ------------------------------------------- assets/css/main.scss | 3 +- 2 files changed, 1 insertion(+), 188 deletions(-) delete mode 100644 _sass/_gist.scss diff --git a/_sass/_gist.scss b/_sass/_gist.scss deleted file mode 100644 index f6d62993a2..0000000000 --- a/_sass/_gist.scss +++ /dev/null @@ -1,186 +0,0 @@ -.gist { - - .highlight { - color:#000; - } - - .render-container .render-viewer-error, - .render-container .render-viewer-fatal, - .render-container .octospinner { - display:none; - } - - .gist-render iframe { - width:100%; - } - - .gist-file.gist-render .highlight { - border:none; - } - - .gist-file .gist-meta .highlight a { - font-weight:700; - color:#666; - text-decoration:none; - } - - .highlight { - background:#fff; - } - - .highlight .err { - color:#a61717; - background-color:#e3d2d2; - } - - .highlight .cp { - color:#999; - font-weight:700; - } - - .highlight .cs { - color:#999; - font-weight:700; - font-style:italic; - } - - .highlight .gd { - color:#000; - background-color:#fdd; - } - - .highlight .gd .x { - color:#000; - background-color:#faa; - } - - .highlight .ge { - color:#000; - font-style:italic; - } - - .highlight .gi { - color:#000; - background-color:#dfd; - } - - .highlight .gi .x { - color:#000; - background-color:#afa; - } - - .highlight .go { - color:#888; - } - - .highlight .gs { - font-weight:700; - } - - .highlight .gu { - color:#aaa; - } - - .highlight .nb { - color:#0086b3; - } - - .highlight .ni { - color:purple; - } - - .highlight .nt { - color:navy; - } - - .highlight .w { - color:#bbb; - } - - .highlight .sr { - color:#009926; - } - - .highlight .ss { - color:#990073; - } - - .highlight .c, - .highlight .cm, - .highlight .c1 { - color:#998; - font-style:italic; - } - - .highlight .k, - .highlight .o, - .highlight .kc, - .highlight .kd, - .highlight .kp, - .highlight .kr, - .highlight .ow, - .highlight .n, - .highlight .p { - color:#000; - font-weight:700; - } - - .highlight .gr, - .highlight .gt { - color:#a00; - } - - .highlight .gh, - .highlight .bp { - color:#999; - } - - .highlight .gp, - .highlight .nn { - color:#555; - } - - .highlight .kt, - .highlight .nc { - color:#458; - font-weight:700; - } - - .highlight .m, - .highlight .mf, - .highlight .mh, - .highlight .mi, - .highlight .mo, - .highlight .il { - color:#099; - } - - .highlight .s, - .highlight .sb, - .highlight .sc, - .highlight .sd, - .highlight .s2, - .highlight .se, - .highlight .sh, - .highlight .si, - .highlight .sx, - .highlight .s1 { - color:#d14; - } - - .highlight .na, - .highlight .no, - .highlight .nv, - .highlight .vc, - .highlight .vg, - .highlight .vi { - color:teal; - } - - .highlight .ne, - .highlight .nf { - color:#900; - font-weight:700; - } - -} \ No newline at end of file diff --git a/assets/css/main.scss b/assets/css/main.scss index 937ef6f054..83f780f31a 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -20,8 +20,7 @@ sitemap: false @import "site"; @import "typography"; @import "syntax"; -@import "coderay"; -@import "gist"; +// @import "coderay"; @import "grid"; @import "elements"; @import "animations"; From 3a4c61b270473b72dcd5a36153c848b4bfbe7544 Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Tue, 28 Jun 2016 11:56:27 -0400 Subject: [PATCH 5/7] Add Gist to sample post --- _posts/2013-08-16-code-highlighting-post.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/_posts/2013-08-16-code-highlighting-post.md b/_posts/2013-08-16-code-highlighting-post.md index ccf93da47c..e41a838aed 100644 --- a/_posts/2013-08-16-code-highlighting-post.md +++ b/_posts/2013-08-16-code-highlighting-post.md @@ -111,4 +111,10 @@ module Jekyll end end end -~~~ \ No newline at end of file +~~~ + +### GitHub Gist Embed + +An example of a Gist embed below. + + \ No newline at end of file From 7529dd22f161eaf0668d6804365b93b687e4754a Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Tue, 28 Jun 2016 12:20:07 -0400 Subject: [PATCH 6/7] Improve readability of CSS by adding white-space between lines --- _sass/_animations.scss | 143 +++++++++++++++- _sass/_coderay.scss | 4 + _sass/_dl-menu.scss | 179 +++++++------------- _sass/_elements.scss | 88 +++++++--- _sass/_grid.scss | 7 + _sass/_mixins.scss | 109 ++++++------ _sass/_page.scss | 186 +++++++++++++++++---- _sass/_reset.scss | 8 +- _sass/_site.scss | 40 ++++- _sass/_syntax.scss | 6 + _sass/_typography.scss | 77 +++++---- _sass/_variables.scss | 76 +++++---- _sass/vendor/magnific-popup/_settings.scss | 10 +- 13 files changed, 610 insertions(+), 323 deletions(-) diff --git a/_sass/_animations.scss b/_sass/_animations.scss index 2f68ea56f1..27e5061cb1 100644 --- a/_sass/_animations.scss +++ b/_sass/_animations.scss @@ -1,8 +1,12 @@ -.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;} +/* ========================================================================== + Animations + ========================================================================== */ +.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;} -// Fade in -// -------------------------------------------------- +/* + Fade in + ========================================================================== */ @-webkit-keyframes fadeIn { 0% {opacity: 0;} @@ -20,6 +24,7 @@ 0% {opacity: 0;} 100% {opacity: 1;} } + .fadeIn { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; @@ -67,6 +72,7 @@ transform: translateY(0); } } + .fadeInDown { -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; @@ -114,6 +120,7 @@ transform: translateY(0); } } + .fadeInDownBig { -webkit-animation-name: fadeInDownBig; -moz-animation-name: fadeInDownBig; @@ -121,9 +128,9 @@ animation-name: fadeInDownBig; } - -// Bounce -// -------------------------------------------------- +/* + Bounce + ========================================================================== */ @-webkit-keyframes bounceIn { 0% { @@ -189,12 +196,14 @@ transform: scale(1); } } + .bounceIn { -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn; } + @-webkit-keyframes bounceInDown { 0% { opacity: 0; @@ -282,9 +291,9 @@ animation-name: bounceInDown; } - -// Drop -// -------------------------------------------------- +/* + Drop + ========================================================================== */ @-webkit-keyframes drop { 0% { @@ -324,4 +333,120 @@ -moz-animation-name: drop; -o-animation-name: drop; animation-name: drop; +} + +/* + DL Menu In/Out + ========================================================================== */ + +@-webkit-keyframes MenuAnimOut { + 100% { + -webkit-transform: translateZ(300px); + opacity: 0; + } +} +@-moz-keyframes MenuAnimOut { + 100% { + -moz-transform: translateZ(300px); + opacity: 0; + } +} +@keyframes MenuAnimOut { + 100% { + transform: translateZ(300px); + opacity: 0; + } +} + +@-webkit-keyframes MenuAnimIn { + 0% { + -webkit-transform: translateZ(300px); + opacity: 0; + } + 100% { + -webkit-transform: translateZ(0px); + opacity: 1; + } +} +@-moz-keyframes MenuAnimIn { + 0% { + -moz-transform: translateZ(300px); + opacity: 0; + } + 100% { + -moz-transform: translateZ(0px); + opacity: 1; + } +} +@keyframes MenuAnimIn { + 0% { + transform: translateZ(300px); + opacity: 0; + } + 100% { + transform: translateZ(0px); + opacity: 1; + } +} + +@-webkit-keyframes SubMenuAnimIn { + 0% { + -webkit-transform: translateZ(-300px); + opacity: 0; + } + 100% { + -webkit-transform: translateZ(0px); + opacity: 1; + } +} +@-moz-keyframes SubMenuAnimIn { + 0% { + -moz-transform: translateZ(-300px); + opacity: 0; + } + 100% { + -moz-transform: translateZ(0px); + opacity: 1; + } +} +@keyframes SubMenuAnimIn { + 0% { + transform: translateZ(-300px); + opacity: 0; + } + 100% { + transform: translateZ(0px); + opacity: 1; + } +} + +@-webkit-keyframes SubMenuAnimOut { + 0% { + -webkit-transform: translateZ(0px); + opacity: 1; + } + 100% { + -webkit-transform: translateZ(-300px); + opacity: 0; + } +} +@-moz-keyframes SubMenuAnimOut { + 0% { + -moz-transform: translateZ(0px); + opacity: 1; + } + 100% { + -moz-transform: translateZ(-300px); + opacity: 0; + } +} +@keyframes SubMenuAnimOut { + 0% { + transform: translateZ(0px); + opacity: 1; + } + 100% { + transform: translateZ(-300px); + opacity: 0; + } } \ No newline at end of file diff --git a/_sass/_coderay.scss b/_sass/_coderay.scss index 2ebe93730a..f3f4329884 100644 --- a/_sass/_coderay.scss +++ b/_sass/_coderay.scss @@ -1,3 +1,7 @@ +/* ========================================================================== + CodeRay Syntax Highlighting + ========================================================================== */ + .CodeRay { font-family: $code-font; @include font(12); diff --git a/_sass/_dl-menu.scss b/_sass/_dl-menu.scss index 8ae7d0d9d6..5e5a2eb12a 100644 --- a/_sass/_dl-menu.scss +++ b/_sass/_dl-menu.scss @@ -1,3 +1,7 @@ +/* ========================================================================== + DL Menu + ========================================================================== */ + .dl-menuwrapper { width: 100%; height: 100%; @@ -11,12 +15,14 @@ -webkit-perspective-origin: 50% 200%; -moz-perspective-origin: 50% 200%; perspective-origin: 50% 200%; + @media #{$medium} { position: fixed; max-width: 175px; top: 25px; left: 25px; } + button { top: 0; left: 0; @@ -31,31 +37,36 @@ outline: none; @include border-radius(0,3px,0,0); opacity: 0.6; - box-shadow: 0 12px 24px rgba($black,0.4); + box-shadow: 0 12px 24px rgba(#000,0.4); + @media #{$medium} { @include border-radius(3px,3px,3px,3px); } } + button:hover, button.dl-active, ul { background: #aaa; } + button:after { content: ''; position: absolute; width: 68%; height: 5px; - background: $white; + background: #fff; top: 10px; left: 16%; box-shadow: - 0 10px 0 $white, - 0 20px 0 $white; + 0 10px 0 #fff, + 0 20px 0 #fff; } + button.dl-active { display: none; } + ul { padding: 0; list-style: none; @@ -63,28 +74,30 @@ -moz-transform-style: preserve-3d; transform-style: preserve-3d; } + li { position: relative; + h4 { margin:0; padding: 15px 20px 0; - color: rgba($white,0.9); + color: rgba(#fff,0.9); } + p { margin: 0; padding: 15px 20px; @include font-rem(14); - color: rgba($white,0.8); + color: rgba(#fff,0.8); font-weight: 300; + a { display: inline; padding: 0; @include font-rem(14); } } - i { - // display: inline-block; - } + a { display: block; position: relative; @@ -92,24 +105,27 @@ @include font-rem(14); line-height: 20px; font-weight: 400; - color: $white; + color: #fff; outline: none; } + &.dl-back > a { padding-left: 30px; background: rgba(0,0,0,0.2); } + &.dl-back:after, > a:not(:only-child):after { position: absolute; top: 0; line-height: 50px; - font-family: 'fontawesome'; - color: $white; + font-family: "fontawesome"; + color: #fff; speak: none; -webkit-font-smoothing: antialiased; content: "\f105"; } + &.dl-back:after { left: 10px; color: rgba(212,204,198,0.5); @@ -117,11 +133,13 @@ -moz-transform: rotate(180deg); transform: rotate(180deg); } + > a:after { right: 10px; color: rgba(0,0,0,0.15); } } + .dl-menu { margin: 0; position: relative; @@ -131,7 +149,7 @@ overflow-x: hidden; opacity: 0; pointer-events: none; - box-shadow: 0 12px 24px rgba($black,0.4); + box-shadow: 0 12px 24px rgba(#000,0.4); -webkit-transform: translateY(10px); -moz-transform: translateY(10px); transform: translateY(10px); @@ -139,15 +157,18 @@ -moz-backface-visibility: hidden; backface-visibility: hidden; z-index: inherit; + @media #{$medium} { @include border-radius(3px,3px,3px,3px); } } + .dl-menu.dl-menu-toggle { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } + .dl-menu.dl-menuopen { opacity: 1; pointer-events: auto; @@ -155,18 +176,22 @@ -moz-transform: translateY(0px); transform: translateY(0px); } + .dl-submenu { @include rounded(3px); - box-shadow: 0 12px 24px rgba($black,0.4); + box-shadow: 0 12px 24px rgba(#000,0.4); + .btn { margin-bottom: 0; } } + /* Hide the inner submenus */ li .dl-submenu { display: none; } } + /* When a submenu is openend, we will hide all li siblings. For that we give a class to the parent menu called "dl-subview". @@ -179,6 +204,7 @@ All this is done for any sub-level being entered. .dl-menu.dl-subview li.dl-subview > a { display: none; } + .dl-menu.dl-subview li.dl-subview, .dl-menu.dl-subview li.dl-subview .dl-submenu, .dl-menu.dl-subview li.dl-subviewopen, @@ -186,139 +212,37 @@ All this is done for any sub-level being entered. .dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li { display: block; } + /* Animation classes for moving out and in */ .dl-menu.dl-animate-out { -webkit-animation: MenuAnimOut 0.4s ease; -moz-animation: MenuAnimOut 0.4s ease; animation: MenuAnimOut 0.4s ease; } -@-webkit-keyframes MenuAnimOut { - 100% { - -webkit-transform: translateZ(300px); - opacity: 0; - } -} -@-moz-keyframes MenuAnimOut { - 100% { - -moz-transform: translateZ(300px); - opacity: 0; - } -} -@keyframes MenuAnimOut { - 100% { - transform: translateZ(300px); - opacity: 0; - } -} + .dl-menu.dl-animate-in { -webkit-animation: MenuAnimIn 0.4s ease; -moz-animation: MenuAnimIn 0.4s ease; animation: MenuAnimIn 0.4s ease; } -@-webkit-keyframes MenuAnimIn { - 0% { - -webkit-transform: translateZ(300px); - opacity: 0; - } - 100% { - -webkit-transform: translateZ(0px); - opacity: 1; - } -} -@-moz-keyframes MenuAnimIn { - 0% { - -moz-transform: translateZ(300px); - opacity: 0; - } - 100% { - -moz-transform: translateZ(0px); - opacity: 1; - } -} -@keyframes MenuAnimIn { - 0% { - transform: translateZ(300px); - opacity: 0; - } - 100% { - transform: translateZ(0px); - opacity: 1; - } -} + .dl-menuwrapper > .dl-submenu.dl-animate-in { -webkit-animation: SubMenuAnimIn 0.4s ease; -moz-animation: SubMenuAnimIn 0.4s ease; animation: SubMenuAnimIn 0.4s ease; } -@-webkit-keyframes SubMenuAnimIn { - 0% { - -webkit-transform: translateZ(-300px); - opacity: 0; - } - 100% { - -webkit-transform: translateZ(0px); - opacity: 1; - } -} -@-moz-keyframes SubMenuAnimIn { - 0% { - -moz-transform: translateZ(-300px); - opacity: 0; - } - 100% { - -moz-transform: translateZ(0px); - opacity: 1; - } -} -@keyframes SubMenuAnimIn { - 0% { - transform: translateZ(-300px); - opacity: 0; - } - 100% { - transform: translateZ(0px); - opacity: 1; - } -} + .dl-menuwrapper > .dl-submenu.dl-animate-out { -webkit-animation: SubMenuAnimOut 0.4s ease; -moz-animation: SubMenuAnimOut 0.4s ease; animation: SubMenuAnimOut 0.4s ease; } -@-webkit-keyframes SubMenuAnimOut { - 0% { - -webkit-transform: translateZ(0px); - opacity: 1; - } - 100% { - -webkit-transform: translateZ(-300px); - opacity: 0; - } -} -@-moz-keyframes SubMenuAnimOut { - 0% { - -moz-transform: translateZ(0px); - opacity: 1; - } - 100% { - -moz-transform: translateZ(-300px); - opacity: 0; - } -} -@keyframes SubMenuAnimOut { - 0% { - transform: translateZ(0px); - opacity: 1; - } - 100% { - transform: translateZ(-300px); - opacity: 0; - } -} + /* No Touch Fallback */ .no-touch .dl-menuwrapper li a:hover { background: rgba(255,248,213,0.1); } + /* No JS Fallback */ .no-js { .dl-trigger { @@ -326,10 +250,12 @@ All this is done for any sub-level being entered. } .dl-menuwrapper { position: initial; + @media #{$medium} { position: absolute; } } + .dl-menuwrapper .dl-menu { position: relative; opacity: 1; @@ -338,35 +264,44 @@ All this is done for any sub-level being entered. -moz-transform: none; transform: none; } + .dl-menuwrapper li .dl-submenu { display: block; } + .dl-menuwrapper li.dl-back { display: none; } + .dl-menuwrapper li > a:not(:only-child) { background: rgba(0,0,0,0.1); } + .dl-menuwrapper li > a:not(:only-child):after { content: ''; } + .dl-menu { max-height: 100%; } + .dl-menu li { display: block; } } + // Menu Color .dl-menuwrapper button:hover, .dl-menuwrapper button.dl-active, .dl-menuwrapper ul { background: $comp-color; } + // Fix for IE .dl-menu li { display: none } + .dl-menuopen li { display: block } diff --git a/_sass/_elements.scss b/_sass/_elements.scss index 48476101d1..51b7534ec8 100644 --- a/_sass/_elements.scss +++ b/_sass/_elements.scss @@ -1,3 +1,7 @@ +/* ========================================================================== + Base Elements and Components + ========================================================================== */ + hr { display: block; margin: 1em 0; @@ -8,141 +12,177 @@ hr { border-bottom: 1px solid #fff; } -// Figures and images -// -------------------------------------------------- +/* + Figures and images + ========================================================================== */ + figure { margin: 0; padding-top: 10px; padding-bottom: 10px; @include clearfix(); + img { margin-bottom: 10px; } + a { + img { @include translate(0, 0); -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; -o-transition-duration: 0.25s; + &:hover { @include translate(0, -5px); @include box-shadow(0 0 10px fade($base-color, 20)); } } } + + /* 2 columns */ &.half { @media #{$large} { + img { width: 310px; float: left; margin-right: 10px; } + figcaption { clear: left; } } } + + /* 3 columns */ &.third { @media #{$large} { + img { width: 200px; float: left; margin-right: 10px; } + figcaption { clear: left; } } } } + svg:not(:root) { overflow: hidden; } -// Buttons -// -------------------------------------------------- +/* + Buttons + ========================================================================== */ + .btn { display: inline-block; margin-bottom: 20px; padding: 8px 20px; @include font-rem(14); background-color: $primary; - color: $white; + color: #fff; border-width: 2px !important; border-style: solid !important; border-color: $primary; @include rounded(3px); + &:visited { - color: $white; + color: #fff; } + &:hover { - background-color: $white; + background-color: #fff; color: $primary; } } + .btn-inverse { - background-color: $white; + background-color: #fff; color: $primary; - border-color: $white; + border-color: #fff; + &:visited { color: $primary; } + &:hover { background-color: $primary; - color: $white; + color: #fff; } } + .btn-success { background-color: $success; - color: $white; + color: #fff; border-color: $success; + &:visited { - color: $white; + color: #fff; } + &:hover { - background-color: $white; + background-color: #fff; color: $success; } } + .btn-warning { background-color: $warning; - color: $white; + color: #fff; border-color: $warning; + &:visited { - color: $white; + color: #fff; } + &:hover { - background-color: $white; + background-color: #fff; color: $warning; } } + .btn-danger { background-color: $danger; - color: $white; + color: #fff; border-color: $danger; + &:visited { - color: $white; + color: #fff; } + &:hover { - background-color: $white; + background-color: #fff; color: $danger; } } + .btn-info { background-color: $info; - color: $white; + color: #fff; border-color: $info; + &:visited { - color: $white; + color: #fff; } + &:hover { - background-color: $white; + background-color: #fff; color: $info; } } -// Well -// -------------------------------------------------- +/* + Wells + ========================================================================== */ + .well { padding: 20px; border: 1px solid $comp-color; diff --git a/_sass/_grid.scss b/_sass/_grid.scss index ffb89e7ad2..1ae5df3b7d 100644 --- a/_sass/_grid.scss +++ b/_sass/_grid.scss @@ -1,3 +1,7 @@ +/* ========================================================================== + Grid + ========================================================================== */ + // Defining number of columns in the grid. // Common Values would be 12, 16 or 24 $width: 100%; @@ -23,14 +27,17 @@ $margin: 0; @mixin prefix($grid:$def_grid,$cols:''){ margin-left:(100%/$grid * $cols); } + // Allows for padding after element @mixin suffix($grid:$def_grid,$cols:''){ margin-right:(100%/$grid * $cols); } + // Removes left margin @mixin first(){ margin-left:0; } + // Removes right margin @mixin last(){ margin-right:0; diff --git a/_sass/_mixins.scss b/_sass/_mixins.scss index f8bfe8b29c..87c9536ba6 100644 --- a/_sass/_mixins.scss +++ b/_sass/_mixins.scss @@ -1,11 +1,15 @@ -// UTILITY MIXINS -// -------------------------------------------------- +/* ========================================================================== + Mixins + ========================================================================== */ -// Clearfix -// -------------------- -// For clearing floats like a boss h5bp.com/q +/* + Utility mixins + ========================================================================== */ + +/* clearfix */ @mixin clearfix { *zoom: 1; + &:before, &:after { display: table; @@ -14,13 +18,13 @@ // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 line-height: 0; } + &:after { clear: both; } } -// Webkit-style focus -// -------------------- +/* Webkit-style focus */ @mixin tab-focus() { // Default outline: thin dotted #333; @@ -29,19 +33,19 @@ outline-offset: -2px; } -// Center-align a block level element -// ---------------------------------- +/* Center-align a block level element */ + @mixin center-block() { display: block; margin-left: auto; margin-right: auto; } -// TYPOGRAPHY -// -------------------------------------------------- +/* + Typography mixins + ========================================================================== */ -// Full-fat vertical rhythm -// ------------------------ +/* Full-fat vertical rhythm */ @mixin font-size($size) { font-size: 0px + $size; font-size: 0rem + $size / $doc-font-size; @@ -50,31 +54,31 @@ margin-bottom: 0rem + ($doc-line-height / $doc-font-size); } -// Just the REMs -// ------------- +/* Just the REMs */ @mixin font-rem($size) { font-size: 0px + $size; font-size: 0rem + $size / $doc-font-size; } -// Just font-size and line-height -// ------------------------------ +/* Just font-size and line-height */ @mixin font($size) { font-size: 0px + $size; font-size: 0rem + $size / $doc-font-size; line-height: 0 + round($doc-line-height / $size*10000) / 10000; } +/* Ellipsis */ @mixin text-overflow() { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -// GRADIENTS -// -------------------------------------------------- +/* + Gradients + ========================================================================== */ -@mixin horizontal($startColor : $white, $endColor : $lightergrey) { +@mixin horizontal($startColor : #fff, $endColor : $lightergrey) { background-color: $endColor; background-image : -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+ background-image : -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+ @@ -85,7 +89,7 @@ background-repeat : repeat-x; } -@mixin vertical($startColor : $white, $endColor: $lightergrey) { +@mixin vertical($startColor : #fff, $endColor: $lightergrey) { background-image : -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+ background-image : -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+ background-color : $endColor; @@ -96,7 +100,7 @@ background-repeat : repeat-x; } -@mixin directional($startColor : $white, $endColor : $lightergrey, $deg : 45deg) { +@mixin directional($startColor : #fff, $endColor : $lightergrey, $deg : 45deg) { background-color : $endColor; background-image : -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+ background-image : -ms-linear-gradient($deg, $startColor, $endColor); // IE10 @@ -106,7 +110,7 @@ background-repeat : repeat-x; } -// .bordered(COLOR, COLOR, COLOR, COLOR); +/* .bordered(COLOR, COLOR, COLOR, COLOR); */ @mixin bordered($top-color: #eee, $right-color: #eee, $bottom-color: #eee, $left-color: #eee) { border-top : solid 1px $top-color; border-left : solid 1px $left-color; @@ -114,17 +118,18 @@ border-bottom : solid 1px $bottom-color; } -// ROUND CORNERS -// -------------------------------------------------- +/* + Rounded corners + ========================================================================== */ -// .rounded(VALUE); +/* .rounded(VALUE); */ @mixin rounded($radius:4px) { -webkit-border-radius : $radius; -moz-border-radius : $radius; border-radius : $radius; } -// .border-radius(VALUE,VALUE,VALUE,VALUE); +/* .border-radius(VALUE,VALUE,VALUE,VALUE); */ @mixin border-radius($topright: 0, $bottomright: 0, $bottomleft: 0, $topleft: 0) { -webkit-border-top-right-radius : $topright; -webkit-border-bottom-right-radius : $bottomright; @@ -143,29 +148,30 @@ background-clip : padding-box; } -// .box-shadow(HORIZONTAL VERTICAL BLUR COLOR)) +/* .box-shadow(HORIZONTAL VERTICAL BLUR COLOR)); */ @mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) { -webkit-box-shadow : $shadow; -moz-box-shadow : $shadow; box-shadow : $shadow; } -// .drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA); +/* .drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA); */ @mixin drop-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: 0.1) { -webkit-box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); -moz-box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); } -// .text-shadow(); +/* .text-shadow(); */ @mixin text-shadow($shadow: 0 2px 3px rgba(0,0,0,.25)) { text-shadow : $shadow; } -// TRANSFORMATIONS -// -------------------------------------------------- +/* + Transformations + ========================================================================== */ -// .rotate(VALUEdeg); +/* .rotate(VALUEdeg); */ @mixin rotate($deg) { -webkit-transform : rotate($deg); -moz-transform : rotate($deg); @@ -174,7 +180,7 @@ transform : rotate($deg); } -// .scale(VALUE); +/* .scale(VALUE); */ @mixin scale($ratio) { -webkit-transform : scale($ratio); -moz-transform : scale($ratio); @@ -183,7 +189,7 @@ transform : scale($ratio); } -// .skew(VALUE, VALUE); +/* .skew(VALUE, VALUE); */ @mixin skew($x: 0, $y: 0) { -webkit-transform : skew($x, $y); -moz-transform : skew($x, $y); @@ -192,7 +198,7 @@ transform : skew($x, $y); } -// .transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION); +/* .transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION); */ @mixin transition($transition) { -webkit-transition : $transition; -moz-transition : $transition; @@ -201,7 +207,7 @@ transition : $transition; } -// .translate(VALUE, VALUE) +/* .translate(VALUE, VALUE); */ @mixin translate($x: 0, $y: 0) { -webkit-transform : translate($x, $y); -moz-transform : translate($x, $y); @@ -224,15 +230,16 @@ -ms-animation: $name $duration $delay $ease; } -// BACKGROUND -// -------------------------------------------------- +/* + Background + ========================================================================== */ -// .background-alpha(VALUE VALUE); -@mixin background-alpha($color: $white, $alpha: 1) { +/* .background-alpha(VALUE VALUE); */ +@mixin background-alpha($color: #fff, $alpha: 1) { background-color : hsla(hue($color), saturation($color), lightness($color), $alpha); } -// .background-size(VALUE VALUE); +/* .background-size(VALUE VALUE); */ @mixin background-size($size){ -webkit-background-size : $size; -moz-background-size : $size; @@ -240,14 +247,14 @@ background-size : $size; } -// .background-clip(VALUE); (border-box, padding-box, content-box) +/* .background-clip(VALUE); (border-box, padding-box, content-box) */ @mixin background-clip($clip) { -webkit-background-clip : $clip; -moz-background-clip : $clip; background-clip : $clip; } -// .box-sizing(VALUE); (border-box, padding-box, content-box) +/* .box-sizing(VALUE); (border-box, padding-box, content-box) */ @mixin box-sizing($boxsize: border-box) { -webkit-box-sizing : $boxsize; -moz-box-sizing : $boxsize; @@ -255,14 +262,14 @@ box-sizing : $boxsize; } -// For image replacement +/* For image replacement */ @mixin hide-text() { text-indent : 100%; white-space : nowrap; overflow : hidden; } -// Hide from visual and speaking browsers +/* Hide from visual and speaking browsers */ @mixin hidden() { display : none !important; visibility : hidden; @@ -272,18 +279,18 @@ visibility: hidden; } -// Hide but maintain layout +/* Hide but maintain layout */ @mixin invisible() { visibility : hidden; } -// .resize(VALUE) (none, both, horizontal, vertical, inherit) +/* .resize(VALUE) (none, both, horizontal, vertical, inherit) */ @mixin resize($direction: both) { resize : $direction; overflow : auto; } -// .userselect(VALUE) (all, element, none, text) +/* .userselect(VALUE) (all, element, none, text) */ @mixin user-select($select) { -webkit-user-select : $select; -moz-user-select : $select; @@ -291,7 +298,7 @@ user-select : $select; } -// Hidden but available to speaking browsers +/* Hidden but available to speaking browsers */ @mixin visuallyhidden() { overflow : hidden; position : absolute; @@ -303,7 +310,7 @@ border : 0; } -// Make visuallyhidden focusable with a keyboard +/* Make visuallyhidden focusable with a keyboard */ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { position : static; diff --git a/_sass/_page.scss b/_sass/_page.scss index b877750ea2..3406330f9f 100644 --- a/_sass/_page.scss +++ b/_sass/_page.scss @@ -1,3 +1,7 @@ +/* ========================================================================== + Page layout + ========================================================================== */ + body { margin: 0; padding: 0; @@ -5,62 +9,88 @@ body { background-color: $body-color; } -// Main -// -------------------------------------------------- +/* + Main content + ========================================================================== */ + .entry, .hentry { @include clearfix; + h1, h2, h3, h4, h5, h6, p, li { word-wrap: break-word; } } + .entry-content { @include font-size(16); + // Dotted line underlines for links p > a, li > a { border-bottom: 1px dotted lighten($link-color, 50); + &:hover { border-bottom-style: solid; } } + + li { + margin-bottom: 7px; + } + + .footnotes { + ol, li, p { + @include font-size(14); + } + } } -// Entry Header -// -------------------------------------------------- +/* + Entry header + ========================================================================== */ + .entry-header { width: 100%; overflow: hidden; position: relative; } + .header-title { text-align: center; margin: 30px 0 0; + h1 { margin: 10px 20px; font-weight: 700; @include font-rem(32); color: lighten($base-color,20); + @media #{$medium} { @include font-rem(48); } + @media #{$large} { @include font-rem(60); } } + h2 { margin: 0; @include font-rem(18); text-transform: uppercase; color: lighten($base-color,40); + @media #{$medium} { @include font-rem(24); } } + p { color: lighten($base-color,20); } } + .feature .header-title { position: absolute; top: 0; @@ -69,38 +99,43 @@ body { width: 100%; height: $feature-image-height; overflow: hidden; + .header-title-wrap { display: table-cell; vertical-align: middle; margin: 0 auto; text-align: center; } + h1 { margin: 10px; font-weight: 700; margin: 10px 60px; - color: $white; + color: #fff; text-shadow: 1px 1px 4px rgba($base-color,0.6); + a { - color: $white; - } - @media #{$large} { + color: #fff; } } + h2 { margin: 0; - color: $white; + color: #fff; text-transform: uppercase; + @media #{$medium} { a { - color: $white; + color: #fff; } } } + p { - color: $white; + color: #fff; } } + .entry-image { position: relative; top: -50%; @@ -109,6 +144,7 @@ body { height: 200%; min-height: $feature-image-height; overflow: hidden; + &:after { content: ''; position: absolute; @@ -118,6 +154,7 @@ body { height: 100%; background-color: rgba($base-color,0.3); } + img { position: absolute; top: 0; @@ -129,18 +166,23 @@ body { min-height: $feature-image-height; // match .entry-image min-height } } + // Feature Image height on Front Page #post-index { + &.feature .header-title { height: $front-page-feature-image-height; } + .entry-image { min-height: $front-page-feature-image-height; + img { min-height: $front-page-feature-image-height; } } } + // Feature Image Caption .image-credit { position: absolute; @@ -150,134 +192,165 @@ body { max-width: 440px; padding: 10px 15px; background-color: rgba($base-color,0.5); - color: $white; + color: #fff; @include font-rem(12); text-align: right; @include border-radius(3px,0,0,3px); z-index: 10; + @media #{$medium} { max-width: 760px; } + @media #{$large} { max-width: 960px; } + a { - color: $white; + color: #fff; text-decoration: none; } } -// Single Post and Page -// -------------------------------------------------- +/* + Single post and page + ========================================================================== */ + .entry-meta { @include font-rem(12); text-transform: uppercase; color: lighten($base-color,60); + a { color: lighten($base-color,60); } + .vcard { + &:before { content: " by "; } } + .tag { display: inline-block; margin: 4px; - color: $white; + color: #fff; @include rounded(3px); background-color: lighten($base-color,50); + span { float: left; padding: 2px 6px; } + .count { background-color: lighten($base-color,40); @include border-radius(3px,3px,0,0); } + &:hover { background-color: lighten($base-color,40); } } + .entry-reading-time { float: right; } } + header .entry-meta { display: none; // hide header meta on small screens + @media #{$medium} { display: block; } } + #post, #page { + .entry-content { margin: 40px 2px 20px 2px; padding: 10px 15px; - background-color: $white; - box-shadow: 0 0 0 0, 0 6px 12px rgba($black,0.1); + background-color: #fff; + box-shadow: 0 0 0 0, 0 6px 12px rgba(#000,0.1); @include rounded(3px); + @media #{$medium} { margin-left: 10px; margin-right: 10px; padding: 20px 30px; } + @media #{$large} { max-width: 800px; margin: 50px auto 30px auto; padding: 50px 80px; + > p:first-child { @include font-size(20); } } } + #disqus_thread { margin: 40px 2px 20px 2px; padding: 10px 15px; - background-color: $white; - box-shadow: 0 0 0 1px rgba($border-color,0.1), 0 6px 12px rgba($black,0.1); + background-color: #fff; + box-shadow: 0 0 0 1px rgba($border-color,0.1), 0 6px 12px rgba(#000,0.1); @include rounded(3px); + @media #{$medium} { margin-left: 10px; margin-right: 10px; padding: 20px 30px; } + @media #{$large} { max-width: 800px; padding: 50px 80px; margin: 0 auto 30px auto; } } + .entry-meta { margin: 50px 30px 30px; text-align: center; } } + .entry-tags { display: block; margin-bottom: 6px; } + .tag-heading, .year-heading { margin-top: 0; } + // Permalink icon for link post .permalink { margin-right: 7px; } + // Post Pagination Module .pagination { margin: 20px 10px; text-align: center; + ul { display: inline; margin-left: 10px; margin-right: 10px; } + li { padding-left: 4px; padding-right: 4px; } + .current-page { font-weight: 700; } @@ -288,85 +361,106 @@ header .entry-meta { position: relative; margin: 40px 2px 20px 2px; padding: 40px 15px 25px; - background-color: $white; - box-shadow: 0 0 0 1px rgba($border-color,0.1), 0 6px 12px rgba($black,0.1); + background-color: #fff; + box-shadow: 0 0 0 1px rgba($border-color,0.1), 0 6px 12px rgba(#000,0.1); @include rounded(3px); + @media #{$medium} { margin: 50px 10px 20px 10px; padding: 50px 40px 25px; } + @media #{$large} { max-width: 800px; padding: 50px 80px; margin: 60px auto; } + text-align: center; @include clearfix; } + .read-more-header { position: absolute; top: -20px; left: 0; right: 0; height: 35px; + a { @extend .btn; } } + .read-more-content { @include font-size(16); + // Dotted line underlines for links p > a, li > a { border-bottom: 1px dotted lighten($link-color, 50); + &:hover { border-bottom-style: solid; } } + h3 { margin: 0; @include font-rem(28); + a { color: $text-color; } + @media #{$medium} { @include font-rem(36); } } } + .read-more-list { border-top: solid 2px lighten($base-color,80); } + .list-item { width: 100%; text-align: left; + h4 { @include font-rem(18); margin-bottom: 0; } + span { display: block; @include font-rem(14); color: lighten($base-color,50); } + @media #{$medium} { width: 49%; float: left; + &:nth-child(2) { text-align: right; } } } -// Post Index -// -------------------------------------------------- +/* + Post index + ========================================================================== */ + #post-index { #main { margin: 40px 2px 20px 2px; + @media #{$medium} { margin-left: 20px; margin-right: 20px; } + @media #{$large} { max-width: 800px; margin-top: 50px; @@ -374,63 +468,77 @@ header .entry-meta { margin-right: auto; } } + article { - background-color: $white; + background-color: #fff; box-shadow: 0 0 0 0, 0 6px 12px rgba($base-color,0.1); @include rounded(3px); margin-bottom: 20px; padding: 25px 15px; + @media #{$medium} { padding: 30px; } + @media #{$large} { margin-bottom: 30px; padding: 50px 80px; } } } + .entry-image-index { margin-top: -25px; margin-left: -15px; margin-right: -15px; margin-bottom: 10px; + @media #{$medium} { margin-top: -30px; margin-left: -30px; margin-right: -30px; margin-bottom: 15px; } + @media #{$large} { margin-top: -50px; margin-left: -80px; margin-right: -80px; margin-bottom: 20px; } + img { @include border-radius(3px,0,0,3px); // round image corners } } -// Footer -// -------------------------------------------------- +/* + Footer + ========================================================================== */ + .footer-wrapper { @include clearfix; margin: 2em auto; text-align: center; color: lighten($text-color,20); + a { color: lighten($text-color,20); } } -// Social Share -// -------------------------------------------------- +/* + Social share + ========================================================================== */ + .socialcount { @include font-rem(16); + li { padding-left: 10px; padding-right: 10px; } + p > a, li > a { border-bottom-width: 0; @@ -438,25 +546,32 @@ header .entry-meta { } -// Browser Upgrade -// -------------------------------------------------- +/* + Browser upgrade + ========================================================================== */ + .upgrade { padding: 10px; text-align: center; } -// Google Search -// -------------------------------------------------- +/* + Google Search + ========================================================================== */ + #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; @@ -464,13 +579,14 @@ header .entry-meta { padding: 8px 20px; display: inline-block; @include font-rem(14); - background-color: $white; + background-color: #fff; color: $text-color; border-width: 2px !important; border-style: solid !important; border-color: lighten($primary,50); @include rounded(3px); } + #goog-wm-sb { @extend .btn; -} +} \ No newline at end of file diff --git a/_sass/_reset.scss b/_sass/_reset.scss index 5674ada0d3..bbd61d3615 100644 --- a/_sass/_reset.scss +++ b/_sass/_reset.scss @@ -1,7 +1,7 @@ -// -// Reset CSS -// Adapted from http://github.com/necolas/normalize.css -// -------------------------------------------------- +/* ========================================================================== + Reset CSS + Adapted from http://github.com/necolas/normalize.css + ========================================================================== */ *, *:after, *:before { -webkit-box-sizing: border-box; diff --git a/_sass/_site.scss b/_sass/_site.scss index 68c2dd3c1d..f678fe35a2 100644 --- a/_sass/_site.scss +++ b/_sass/_site.scss @@ -1,56 +1,80 @@ -// Selection -// -------------------------------------------------- +/* ========================================================================== + Site utilities + ========================================================================== */ + +/* + Selection + ========================================================================== */ + ::-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; } -// Global Classes -// -------------------------------------------------- +/* + Global classes + ========================================================================== */ + +/* wrapper */ .wrap { margin: 0 auto; } + +/* capitalize */ .all-caps { text-transform: uppercase; } + +/* float image to the left */ .image-left { float: none; @media #{$medium} { float: left; } } + +/* float image to the right */ .image-right { float: none; @media #{$medium} { float: right; } } + +/* remove styling from a list element */ .unstyled-list { list-style: none; margin-left: 0; padding-left: 0; + li { list-style-type: none; } } + +/* inline a list */ .inline-list { list-style: none; margin-left: 0; padding-left: 0; + li { list-style-type: none; display: inline; } } -// Global Transition -// --------------------------------------------------- +/* + Global transition + ========================================================================== */ + b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a { - @include transition(all .2s ease); + @include transition(all 0.2s ease); } \ No newline at end of file diff --git a/_sass/_syntax.scss b/_sass/_syntax.scss index 388b4c1cd4..34cb79de5d 100644 --- a/_sass/_syntax.scss +++ b/_sass/_syntax.scss @@ -1,3 +1,7 @@ +/* ========================================================================== + Syntax Highlighting + ========================================================================== */ + pre.highlight { padding: 1em; } @@ -10,11 +14,13 @@ pre.highlight { border: 1px solid darken($body-color, 5); background-color: #272822; @include rounded(3px); + pre { position: relative; margin: 0; padding: 1em; } + .lineno { padding-right: 24px; color: #8f908a;} .hll { background-color: #49483e } .c { color: #75715e } /* Comment */ diff --git a/_sass/_typography.scss b/_sass/_typography.scss index 56406317b1..304e1008ee 100644 --- a/_sass/_typography.scss +++ b/_sass/_typography.scss @@ -1,37 +1,53 @@ -// Body -// -------------------------------------------------- +/* ========================================================================== + Typography + ========================================================================== */ + +/* + Body + ========================================================================== */ + body { font-family: $base-font; color: $text-color; } -// Headings -// -------------------------------------------------- +/* + Headings + ========================================================================== */ + h1, h2, h3, h4, h5, h6 { font-family: $heading-font; } + h1 { @include font-rem(28); + @media #{$medium} { @include font-rem(32); } } -// Links -// -------------------------------------------------- +/* + 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; @@ -44,8 +60,10 @@ a { font-style: normal; } -// Figures -// -------------------------------------------------- +/* + Captions + ========================================================================== */ + figcaption { padding-top: 10px; @include font(14); @@ -53,8 +71,10 @@ figcaption { color: lighten($text-color, 10); } -// Note text -// -------------------------------------------------- +/* + Notices + ========================================================================== */ + .notice { margin-top: 1.5em; padding: .5em 1em; @@ -65,61 +85,58 @@ figcaption { @include rounded(3px); } -// Blockquotes -// -------------------------------------------------- +/* + Blockquotes + ========================================================================== */ + blockquote { font-family: $alt-font; font-style: italic; border-left: 8px solid $border-color; padding-left: 20px; + @media #{$medium} { margin-left: -28px; } } -// List items -// -------------------------------------------------- -.entry-content li { - margin-bottom: 7px; -} - -// Footnotes -// -------------------------------------------------- -.entry-content .footnotes { - ol, li, p { - @include font-size(14); - } -} +/* + Code + ========================================================================== */ -// Code -// -------------------------------------------------- tt, code, kbd, samp, pre { font-family: $code-font; } + p, li { + code { @include font-rem(12); line-height: 1.5; white-space: nowrap; margin: 0 2px; padding: 0 5px; - border: 1px solid lighten($black, 90); - background-color: lighten($black, 95); + border: 1px solid lighten(#000, 90); + background-color: lighten(#000, 95); @include rounded(3px); } } + pre { + @include font-rem(12); line-height: 1.5; overflow-x: auto; + &::-webkit-scrollbar { height: 12px; background-color: #34362e; border-radius: 0 0 4px 4px; } + &::-webkit-scrollbar-thumb:horizontal { background-color: #6a6d5d; @include rounded(4px); } -} +} \ No newline at end of file diff --git a/_sass/_variables.scss b/_sass/_variables.scss index 2ee807ffa9..e0a47e72d2 100644 --- a/_sass/_variables.scss +++ b/_sass/_variables.scss @@ -1,50 +1,56 @@ -// Page -// -------------------------------------------------- +/* ========================================================================== + SCSS Variables + ========================================================================== */ -$feature-image-height: 400px; // min 150px recommended -$front-page-feature-image-height: 400px; // min 150px recommended +/* + Page + ========================================================================== */ -// Typography -// -------------------------------------------------- +$feature-image-height : 400px; // min 150px recommended +$front-page-feature-image-height : 400px; // min 150px recommended -$base-font: 'Lato', Calibri, Arial, sans-serif; -$heading-font: $base-font; -$caption-font: $base-font; -$code-font: monospace; -$alt-font: serif; +/* + Typography + ========================================================================== */ -$doc-font-size: 16; -$doc-line-height: 26; +$base-font : 'Lato', Calibri, Arial, sans-serif; +$heading-font : $base-font; +$caption-font : $base-font; +$code-font : monospace; +$alt-font : serif; + +$doc-font-size : 16; +$doc-line-height : 26; // set-up the body font-size / line-height body { - margin-top: 0px + $doc-line-height; - font-size: 0px + $doc-font-size; + margin-top: 0px + $doc-line-height; + font-size: 0px + $doc-font-size; } +/* + Colors + ========================================================================== */ -// Colors -// -------------------------------------------------- -$base-color : rgba(#222,0.8); -$body-color : #e8e8e8; -$text-color : rgba(#222,0.8); -$comp-color : complement(#222); -$border-color : lighten($base-color,60); -$white : #fff; -$black : #000; -$link-color : rgba(#222,0.8); +$base-color : rgba(#222,0.8); +$body-color : #e8e8e8; +$text-color : rgba(#222,0.8); +$comp-color : complement(#222); +$border-color : lighten($base-color,60); +$link-color : rgba(#222,0.8); -$primary : #222; -$success : #5cb85c; -$warning : #dd8338; -$danger : #C64537; -$info : #308cbc; +$primary : #222; +$success : #5cb85c; +$warning : #dd8338; +$danger : #C64537; +$info : #308cbc; -// Screen Size -// -------------------------------------------------- +/* + Screen sizes + ========================================================================== */ -$small : "only screen and (min-width: 30em)"; -$medium : "only screen and (min-width: 48em)"; -$large : "only screen and (min-width: 62.5em)"; \ No newline at end of file +$small : "only screen and (min-width: 30em)"; +$medium : "only screen and (min-width: 48em)"; +$large : "only screen and (min-width: 62.5em)"; \ No newline at end of file diff --git a/_sass/vendor/magnific-popup/_settings.scss b/_sass/vendor/magnific-popup/_settings.scss index 56bd6510a0..c0235078a7 100644 --- a/_sass/vendor/magnific-popup/_settings.scss +++ b/_sass/vendor/magnific-popup/_settings.scss @@ -3,7 +3,7 @@ //////////////////////// // overlay -$mfp-overlay-color: $black; // Color of overlay screen +$mfp-overlay-color: #000; // Color of overlay screen $mfp-overlay-opacity: 0.8; // Opacity of overlay screen $mfp-shadow: 0 0 8px rgba(0, 0, 0, 0.6); // Shadow on image or iframe @@ -16,11 +16,11 @@ $mfp-z-index-base: 1040; // Base z-inde // controls $mfp-include-arrows: true; // Include styles for nav arrows $mfp-controls-opacity: 1; // Opacity of controls -$mfp-controls-color: $white; // Color of controls -$mfp-controls-border-color: $white; // Border color of controls -$mfp-inner-close-icon-color: $white; // Color of close button when inside +$mfp-controls-color: #fff; // Color of controls +$mfp-controls-border-color: #fff; // Border color of controls +$mfp-inner-close-icon-color: #fff; // Color of close button when inside $mfp-controls-text-color: #CCC; // Color of preloader and "1 of X" indicator -$mfp-controls-text-color-hover: $white; // Hover color of preloader and "1 of X" indicator +$mfp-controls-text-color-hover: #fff; // Hover color of preloader and "1 of X" indicator $mfp-IE7support: true; // Very basic IE7 support // Iframe-type options From b6029f05ca78a51c2009bbc04f8a05fd4236b6cd Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Tue, 28 Jun 2016 12:54:14 -0400 Subject: [PATCH 7/7] Remove outdated vendor prefixes and mixins --- _sass/_coderay.scss | 2 +- _sass/_dl-menu.scss | 8 +- _sass/_elements.scss | 14 ++- _sass/_mixins.scss | 200 +---------------------------------------- _sass/_page.scss | 18 ++-- _sass/_reset.scss | 2 +- _sass/_site.scss | 2 +- _sass/_syntax.scss | 2 +- _sass/_typography.scss | 6 +- 9 files changed, 27 insertions(+), 227 deletions(-) diff --git a/_sass/_coderay.scss b/_sass/_coderay.scss index f3f4329884..1547094c09 100644 --- a/_sass/_coderay.scss +++ b/_sass/_coderay.scss @@ -7,7 +7,7 @@ @include font(12); color: #d0d0d0; margin-bottom: 1.5em; - @include rounded(3px); + border-radius: 3px; } .CodeRay .code pre { diff --git a/_sass/_dl-menu.scss b/_sass/_dl-menu.scss index 5e5a2eb12a..5c2c523d41 100644 --- a/_sass/_dl-menu.scss +++ b/_sass/_dl-menu.scss @@ -35,12 +35,12 @@ position: relative; cursor: pointer; outline: none; - @include border-radius(0,3px,0,0); + border-radius: 0 0 3px 0; opacity: 0.6; box-shadow: 0 12px 24px rgba(#000,0.4); @media #{$medium} { - @include border-radius(3px,3px,3px,3px); + border-radius: 3px; } } @@ -159,7 +159,7 @@ z-index: inherit; @media #{$medium} { - @include border-radius(3px,3px,3px,3px); + border-radius: 3px; } } @@ -178,7 +178,7 @@ } .dl-submenu { - @include rounded(3px); + border-radius: 3px; box-shadow: 0 12px 24px rgba(#000,0.4); .btn { diff --git a/_sass/_elements.scss b/_sass/_elements.scss index 51b7534ec8..370a8d6ca6 100644 --- a/_sass/_elements.scss +++ b/_sass/_elements.scss @@ -29,14 +29,12 @@ figure { a { img { - @include translate(0, 0); - -webkit-transition-duration: 0.25s; - -moz-transition-duration: 0.25s; - -o-transition-duration: 0.25s; + transform: translate(0, 0); + transition-duration: 0.25s; &:hover { - @include translate(0, -5px); - @include box-shadow(0 0 10px fade($base-color, 20)); + transform: translate(0, -5px); + box-shadow: 0 0 10px rgba($base-color, 0.2); } } } @@ -92,7 +90,7 @@ svg:not(:root) { border-width: 2px !important; border-style: solid !important; border-color: $primary; - @include rounded(3px); + border-radius: 3px; &:visited { color: #fff; @@ -186,5 +184,5 @@ svg:not(:root) { .well { padding: 20px; border: 1px solid $comp-color; - @include rounded(4px); + border-radius: 4px; } \ No newline at end of file diff --git a/_sass/_mixins.scss b/_sass/_mixins.scss index 87c9536ba6..01a8d16dbf 100644 --- a/_sass/_mixins.scss +++ b/_sass/_mixins.scss @@ -75,193 +75,9 @@ } /* - Gradients + Visibility ========================================================================== */ -@mixin horizontal($startColor : #fff, $endColor : $lightergrey) { - background-color: $endColor; - background-image : -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+ - background-image : -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+ - background-image : -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+ - background-image : -ms-linear-gradient(left, $startColor, $endColor); // IE10 - background-image : -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10 - background-image : linear-gradient(left, $startColor, $endColor); // W3C - background-repeat : repeat-x; -} - -@mixin vertical($startColor : #fff, $endColor: $lightergrey) { - background-image : -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+ - background-image : -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+ - background-color : $endColor; - background-image : -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+ - background-image : -ms-linear-gradient(top, $startColor, $endColor); // IE10 - background-image : -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10 - background-image : linear-gradient(top, $startColor, $endColor); // W3C - background-repeat : repeat-x; -} - -@mixin directional($startColor : #fff, $endColor : $lightergrey, $deg : 45deg) { - background-color : $endColor; - background-image : -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+ - background-image : -ms-linear-gradient($deg, $startColor, $endColor); // IE10 - background-image : -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+ - background-image : -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10 - background-image : linear-gradient($deg, $startColor, $endColor); // W3C - background-repeat : repeat-x; -} - -/* .bordered(COLOR, COLOR, COLOR, COLOR); */ -@mixin bordered($top-color: #eee, $right-color: #eee, $bottom-color: #eee, $left-color: #eee) { - border-top : solid 1px $top-color; - border-left : solid 1px $left-color; - border-right : solid 1px $right-color; - border-bottom : solid 1px $bottom-color; -} - -/* - Rounded corners - ========================================================================== */ - -/* .rounded(VALUE); */ -@mixin rounded($radius:4px) { - -webkit-border-radius : $radius; - -moz-border-radius : $radius; - border-radius : $radius; -} - -/* .border-radius(VALUE,VALUE,VALUE,VALUE); */ -@mixin border-radius($topright: 0, $bottomright: 0, $bottomleft: 0, $topleft: 0) { - -webkit-border-top-right-radius : $topright; - -webkit-border-bottom-right-radius : $bottomright; - -webkit-border-bottom-left-radius : $bottomleft; - -webkit-border-top-left-radius : $topleft; - -moz-border-radius-topright : $topright; - -moz-border-radius-bottomright : $bottomright; - -moz-border-radius-bottomleft : $bottomleft; - -moz-border-radius-topleft : $topleft; - border-top-right-radius : $topright; - border-bottom-right-radius : $bottomright; - border-bottom-left-radius : $bottomleft; - border-top-left-radius : $topleft; - -webkit-background-clip : padding-box; - -moz-background-clip : padding; - background-clip : padding-box; -} - -/* .box-shadow(HORIZONTAL VERTICAL BLUR COLOR)); */ -@mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) { - -webkit-box-shadow : $shadow; - -moz-box-shadow : $shadow; - box-shadow : $shadow; -} - -/* .drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA); */ -@mixin drop-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: 0.1) { - -webkit-box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); - -moz-box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); - box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha); -} - -/* .text-shadow(); */ -@mixin text-shadow($shadow: 0 2px 3px rgba(0,0,0,.25)) { - text-shadow : $shadow; -} - -/* - Transformations - ========================================================================== */ - -/* .rotate(VALUEdeg); */ -@mixin rotate($deg) { - -webkit-transform : rotate($deg); - -moz-transform : rotate($deg); - -ms-transform : rotate($deg); - -o-transform : rotate($deg); - transform : rotate($deg); -} - -/* .scale(VALUE); */ -@mixin scale($ratio) { - -webkit-transform : scale($ratio); - -moz-transform : scale($ratio); - -ms-transform : scale($ratio); - -o-transform : scale($ratio); - transform : scale($ratio); -} - -/* .skew(VALUE, VALUE); */ -@mixin skew($x: 0, $y: 0) { - -webkit-transform : skew($x, $y); - -moz-transform : skew($x, $y); - -ms-transform : skew($x, $y); - -o-transform : skew($x, $y); - transform : skew($x, $y); -} - -/* .transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION); */ -@mixin transition($transition) { - -webkit-transition : $transition; - -moz-transition : $transition; - -ms-transition : $transition; - -o-transition : $transition; - transition : $transition; -} - -/* .translate(VALUE, VALUE); */ -@mixin translate($x: 0, $y: 0) { - -webkit-transform : translate($x, $y); - -moz-transform : translate($x, $y); - -ms-transform : translate($x, $y); - -o-transform : translate($x, $y); - transform : translate($x, $y); -} - -@mixin translate3d($x: 0, $y: 0, $z: 0) { - -webkit-transform : translate($x, $y, $z); - -moz-transform : translate($x, $y, $z); - -ms-transform : translate($x, $y, $z); - -o-transform : translate($x, $y, $z); - transform : translate($x, $y, $z); -} - -@mixin animation($name, $duration: 300ms, $delay: 0, $ease: ease) { - -webkit-animation: $name $duration $delay $ease; - -moz-animation: $name $duration $delay $ease; - -ms-animation: $name $duration $delay $ease; -} - -/* - Background - ========================================================================== */ - -/* .background-alpha(VALUE VALUE); */ -@mixin background-alpha($color: #fff, $alpha: 1) { - background-color : hsla(hue($color), saturation($color), lightness($color), $alpha); -} - -/* .background-size(VALUE VALUE); */ -@mixin background-size($size){ - -webkit-background-size : $size; - -moz-background-size : $size; - -o-background-size : $size; - background-size : $size; -} - -/* .background-clip(VALUE); (border-box, padding-box, content-box) */ -@mixin background-clip($clip) { - -webkit-background-clip : $clip; - -moz-background-clip : $clip; - background-clip : $clip; -} - -/* .box-sizing(VALUE); (border-box, padding-box, content-box) */ -@mixin box-sizing($boxsize: border-box) { - -webkit-box-sizing : $boxsize; - -moz-box-sizing : $boxsize; - -ms-box-sizing : $boxsize; - box-sizing : $boxsize; -} - /* For image replacement */ @mixin hide-text() { text-indent : 100%; @@ -284,20 +100,6 @@ visibility : hidden; } -/* .resize(VALUE) (none, both, horizontal, vertical, inherit) */ -@mixin resize($direction: both) { - resize : $direction; - overflow : auto; -} - -/* .userselect(VALUE) (all, element, none, text) */ -@mixin user-select($select) { - -webkit-user-select : $select; - -moz-user-select : $select; - -o-user-select : $select; - user-select : $select; -} - /* Hidden but available to speaking browsers */ @mixin visuallyhidden() { overflow : hidden; diff --git a/_sass/_page.scss b/_sass/_page.scss index 3406330f9f..c6885a6035 100644 --- a/_sass/_page.scss +++ b/_sass/_page.scss @@ -195,7 +195,7 @@ body { color: #fff; @include font-rem(12); text-align: right; - @include border-radius(3px,0,0,3px); + border-radius: 3px 0 0 0; z-index: 10; @media #{$medium} { @@ -236,7 +236,7 @@ body { display: inline-block; margin: 4px; color: #fff; - @include rounded(3px); + border-radius: 3px; background-color: lighten($base-color,50); span { @@ -246,7 +246,7 @@ body { .count { background-color: lighten($base-color,40); - @include border-radius(3px,3px,0,0); + border-radius: 0 3px 3px 0; } &:hover { @@ -275,7 +275,7 @@ header .entry-meta { padding: 10px 15px; background-color: #fff; box-shadow: 0 0 0 0, 0 6px 12px rgba(#000,0.1); - @include rounded(3px); + border-radius: 3px; @media #{$medium} { margin-left: 10px; @@ -299,7 +299,7 @@ header .entry-meta { padding: 10px 15px; background-color: #fff; box-shadow: 0 0 0 1px rgba($border-color,0.1), 0 6px 12px rgba(#000,0.1); - @include rounded(3px); + border-radius: 3px; @media #{$medium} { margin-left: 10px; @@ -363,7 +363,7 @@ header .entry-meta { padding: 40px 15px 25px; background-color: #fff; box-shadow: 0 0 0 1px rgba($border-color,0.1), 0 6px 12px rgba(#000,0.1); - @include rounded(3px); + border-radius: 3px; @media #{$medium} { margin: 50px 10px 20px 10px; @@ -472,7 +472,7 @@ header .entry-meta { article { background-color: #fff; box-shadow: 0 0 0 0, 0 6px 12px rgba($base-color,0.1); - @include rounded(3px); + border-radius: 3px; margin-bottom: 20px; padding: 25px 15px; @@ -508,7 +508,7 @@ header .entry-meta { } img { - @include border-radius(3px,0,0,3px); // round image corners + border-radius: 3px 3px 0 0; // round image corners } } @@ -584,7 +584,7 @@ header .entry-meta { border-width: 2px !important; border-style: solid !important; border-color: lighten($primary,50); - @include rounded(3px); + border-radius: 3px; } #goog-wm-sb { diff --git a/_sass/_reset.scss b/_sass/_reset.scss index bbd61d3615..3dff727ec0 100644 --- a/_sass/_reset.scss +++ b/_sass/_reset.scss @@ -143,7 +143,7 @@ input[type="checkbox"] { cursor: pointer; // Improves usability and consistency of cursor style between image-type `input` and others. } input[type="search"] { // Appearance in Safari/Chrome - @include box-sizing(content-box); + box-sizing: content-box; -webkit-appearance: textfield; } input[type="search"]::-webkit-search-decoration, diff --git a/_sass/_site.scss b/_sass/_site.scss index f678fe35a2..a2f9069bec 100644 --- a/_sass/_site.scss +++ b/_sass/_site.scss @@ -76,5 +76,5 @@ ========================================================================== */ b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a { - @include transition(all 0.2s ease); + transition: all 0.2s ease; } \ No newline at end of file diff --git a/_sass/_syntax.scss b/_sass/_syntax.scss index 34cb79de5d..2203e2402a 100644 --- a/_sass/_syntax.scss +++ b/_sass/_syntax.scss @@ -13,7 +13,7 @@ pre.highlight { color: #d0d0d0; border: 1px solid darken($body-color, 5); background-color: #272822; - @include rounded(3px); + border-radius: 3px; pre { position: relative; diff --git a/_sass/_typography.scss b/_sass/_typography.scss index 304e1008ee..e87443ea3e 100644 --- a/_sass/_typography.scss +++ b/_sass/_typography.scss @@ -82,7 +82,7 @@ figcaption { @include font-rem(14); background-color: $body-color; border: 1px solid darken($body-color,20); - @include rounded(3px); + border-radius: 3px; } /* @@ -119,7 +119,7 @@ li { padding: 0 5px; border: 1px solid lighten(#000, 90); background-color: lighten(#000, 95); - @include rounded(3px); + border-radius: 3px; } } @@ -137,6 +137,6 @@ pre { &::-webkit-scrollbar-thumb:horizontal { background-color: #6a6d5d; - @include rounded(4px); + border-radius: 4px; } } \ No newline at end of file