From 2195e5e469e1fa6c0fa4dbd62462250bc79ab986 Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Mon, 17 Nov 2014 14:48:34 -0500 Subject: [PATCH 1/2] use sass selector nesting for styles --- site/_sass/_style.scss | 990 ++++++++++++++++++++--------------------- 1 file changed, 484 insertions(+), 506 deletions(-) diff --git a/site/_sass/_style.scss b/site/_sass/_style.scss index 16cc902f..b9299283 100644 --- a/site/_sass/_style.scss +++ b/site/_sass/_style.scss @@ -31,7 +31,9 @@ body { /* Sections */ -header, section, footer { +header, +section, +footer { float: left; width: 100%; clear: both; @@ -39,97 +41,109 @@ header, section, footer { /* Header */ -header h1, header nav { - display: inline-block; +header { + + h1, + nav { display: inline-block; } + + h1 { + span { display: none; } + } } -header h1 span { - display: none; -} +nav { -nav ul { - padding: 0; - margin: 0; -} + ul { + padding: 0; + margin: 0; + } -nav li { - display: inline-block; + li { display: inline-block; } } .main-nav { margin-top: 52px; + + li { + margin-right: 10px; + + a { + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + font-weight: 900; + font-size: 14px; + padding: 0.5em 1em; + text-shadow: none; + text-transform: uppercase; + -webkit-transition: all .25s; + -moz-transition: all .25s; + -o-transition: all .25s; + transition: all .25s; + + &:hover { + background-color: #252525; + -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1); + -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1); + box-shadow: inset 0 1px 3px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1); + text-shadow: 0 1px 3px rgba(0,0,0,.5); + } + } + + &.current { + + a { + background-color: #fc0; + color: #222; + -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5); + -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5); + box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5); + text-shadow: 0 1px 0 rgba(255,255,255,.3); + } + } + } } -.main-nav li { - margin-right: 10px; -} +.mobile-nav { -.main-nav li a { - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - font-weight: 900; - font-size: 14px; - padding: 0.5em 1em; - text-shadow: none; - text-transform: uppercase; - -webkit-transition: all .25s; - -moz-transition: all .25s; - -o-transition: all .25s; - transition: all .25s; -} + ul { + overflow: hidden; + width: 100%; + display: table; + } -.main-nav li a:hover { - background-color: #252525; - -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1); - -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1); - box-shadow: inset 0 1px 3px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.1); - text-shadow: 0 1px 3px rgba(0,0,0,.5); -} + a { + float: left; + width: 100%; + background-color: #333; + color: #fc0; + text-align: center; + text-transform: uppercase; + font-size: 14px; + font-weight: 900; + padding: 5px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + } -.main-nav li.current a { - background-color: #fc0; - color: #222; - -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5); - -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5); - box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5); - text-shadow: 0 1px 0 rgba(255,255,255,.3); -} + li { + display: table-cell; + width: 20%; + padding: 8px 2px; + } -.mobile-nav ul { - overflow: hidden; - width: 100%; - display: table; -} + .current { -.mobile-nav a { - float: left; - width: 100%; - background-color: #333; - color: #fc0; - text-align: center; - text-transform: uppercase; - font-size: 14px; - font-weight: 900; - padding: 5px; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; -} - -.mobile-nav .current a { - background-color: #fc0; - color: #222; - -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5); - -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5); - box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5); - text-shadow: 0 1px 0 rgba(255,255,255,.3); -} - -.mobile-nav li { - display: table-cell; - width: 20%; - padding: 8px 2px; + a { + background-color: #fc0; + color: #222; + -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5); + -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5); + box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 5px rgba(0,0,0,.5); + text-shadow: 0 1px 0 rgba(255,255,255,.3); + } + } } @media (max-width: 768px) { @@ -138,11 +152,9 @@ nav li { } } @media (max-width: 830px) { - .main-nav .show-on-mobiles { - display: inline; - } - .main-nav .hide-on-mobiles { - display: none; + .main-nav { + .show-on-mobiles { display: inline; } + .hide-on-mobiles { display: none; } } } @@ -154,57 +166,57 @@ footer { padding-bottom: 5px; color: #888; margin-top: 40px; -} -footer a { - color: #fff; -} + a { + color: #fff; -footer .align-right p, footer img { - display: inline-block; -} + &:hover { -footer img { - position: relative; - top: 8px; - margin-left: 5px; - opacity: .8; - padding: 1px; - -webkit-transition: opacity .2s; - -moz-transition: opacity .2s; - -o-transition: opacity .2s; - transition: opacity .2s; -} + img { opacity: 1; } + } + } -footer a:hover img { - opacity: 1; + .align-right { + + p { display: inline-block; } + } + + img { + display: inline-block; + position: relative; + top: 8px; + margin-left: 5px; + opacity: .8; + padding: 1px; + -webkit-transition: opacity .2s; + -moz-transition: opacity .2s; + -o-transition: opacity .2s; + transition: opacity .2s; + } } @media (max-width: 568px) { - footer .one-third p { - margin-bottom: 0; - } - footer .two-thirds p { - margin-top: -20px; + footer { + .one-third p { margin-bottom: 0; } + .two-thirds p { margin-top: -20px; } } } /* Intro */ -.intro .unit { - padding: 10px 0 40px; -} +.intro { -.intro p { - font-size: 1.75em; - line-height: 1em; - margin: 0; + .unit { padding: 10px 0 40px; } + + p { + font-size: 1.75em; + line-height: 1em; + margin: 0; + } } @media (min-width: 569px) { - .intro p { - font-size: 3.2em; - } + .intro p { font-size: 3.2em; } } /* Quickstart */ @@ -216,175 +228,175 @@ footer a:hover img { -webkit-box-shadow: inset 0 3px 10px rgba(0,0,0,.4); -moz-box-shadow: inset 0 3px 10px rgba(0,0,0,.4); box-shadow: inset 0 3px 10px rgba(0,0,0,.4); -} -.quickstart .content { - padding: 0; -} + .content { padding: 0; } -.quickstart h4 { - font-size: 24px; - line-height: 24px; - margin-top: 20px; - text-shadow: 0 1px 3px rgba(0,0,0,.8); -} + h4 { + font-size: 24px; + line-height: 24px; + margin-top: 20px; + text-shadow: 0 1px 3px rgba(0,0,0,.8); + } -.quickstart .code { - font-size: 12px; - display: block; - margin: 0 0 -30px; + .code { + font-size: 12px; + display: block; + margin: 0 0 -30px; + } } @media (min-width: 768px) { - .quickstart .code { - font-size: 18px; - margin: -30px 0; - float: right; - } - .quickstart h4 { - margin: 50px 0 0; - text-align: center; + .quickstart { + + .code { + font-size: 18px; + margin: -30px 0; + float: right; + } + + h4 { + margin: 50px 0 0; + text-align: center; + } } } /* Code */ -.quickstart .code { - display: block; - padding: 0; - font-family: Menlo, Consolas, "Courier New", Courier, "Liberation Mono", monospace; - line-height: 1.3em; -} +.quickstart { -.quickstart .code .title { - display: block; - text-align: center; - margin: 0 20px; - padding: 5px 0; - -webkit-border-radius: 5px 5px 0 0; - -moz-border-radius: 5px 5px 0 0; - border-radius: 5px 5px 0 0; - -webkit-box-shadow: 0 3px 10px rgba(0,0,0,.5); - -moz-box-shadow: 0 3px 10px rgba(0,0,0,.5); - box-shadow: 0 3px 10px rgba(0,0,0,.5); - font: 400 16px/24px 'Helvetica Neue', Helvetica, Arial, sans-serif; - color: #444; - text-shadow: 0 1px 0 rgba(255,255,255,.5); - background-color: #f7f7f7; - background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y3ZjdmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjclIiBzdG9wLWNvbG9yPSIjY2ZjZmNmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); - background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), color-stop(7%, #cfcfcf), to(#aaaaaa)); - background-image: -webkit-linear-gradient(top, #f7f7f7 0%, #cfcfcf 7%, #aaaaaa 100%); - background-image: -moz-linear-gradient(top, #f7f7f7 0%, #cfcfcf 7%, #aaaaaa 100%); - background-image: -o-linear-gradient(top, #f7f7f7 0%, #cfcfcf 7%, #aaaaaa 100%); - background-image: linear-gradient(top, #f7f7f7 0%,#cfcfcf 7%,#aaaaaa 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#aaaaaa',GradientType=0 ); - border-bottom: 1px solid #111; -} + .code { + display: block; + padding: 0; + font-family: Menlo, Consolas, "Courier New", Courier, "Liberation Mono", monospace; + line-height: 1.3em; -.quickstart .code .shell { - padding: 20px; - text-shadow: none; - margin: 0 20px; - background-color: #3d3d3d; - -webkit-border-radius: 0 0 5px 5px; - -moz-border-radius: 0 0 5px 5px; - border-radius: 0 0 5px 5px; - -webkit-box-shadow: 0 5px 30px rgba(0,0,0,.3); - -moz-box-shadow: 0 5px 30px rgba(0,0,0,.3); - box-shadow: 0 5px 30px rgba(0,0,0,.3); -} + .title { + display: block; + text-align: center; + margin: 0 20px; + padding: 5px 0; + -webkit-border-radius: 5px 5px 0 0; + -moz-border-radius: 5px 5px 0 0; + border-radius: 5px 5px 0 0; + -webkit-box-shadow: 0 3px 10px rgba(0,0,0,.5); + -moz-box-shadow: 0 3px 10px rgba(0,0,0,.5); + box-shadow: 0 3px 10px rgba(0,0,0,.5); + font: 400 16px/24px 'Helvetica Neue', Helvetica, Arial, sans-serif; + color: #444; + text-shadow: 0 1px 0 rgba(255,255,255,.5); + background-color: #f7f7f7; + background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y3ZjdmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjclIiBzdG9wLWNvbG9yPSIjY2ZjZmNmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); + background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), color-stop(7%, #cfcfcf), to(#aaaaaa)); + background-image: -webkit-linear-gradient(top, #f7f7f7 0%, #cfcfcf 7%, #aaaaaa 100%); + background-image: -moz-linear-gradient(top, #f7f7f7 0%, #cfcfcf 7%, #aaaaaa 100%); + background-image: -o-linear-gradient(top, #f7f7f7 0%, #cfcfcf 7%, #aaaaaa 100%); + background-image: linear-gradient(top, #f7f7f7 0%,#cfcfcf 7%,#aaaaaa 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#aaaaaa',GradientType=0 ); + border-bottom: 1px solid #111; + } -.quickstart .code .line { - display: block; - margin: 0; - padding: 0; -} + .shell { + padding: 20px; + text-shadow: none; + margin: 0 20px; + background-color: #3d3d3d; + -webkit-border-radius: 0 0 5px 5px; + -moz-border-radius: 0 0 5px 5px; + border-radius: 0 0 5px 5px; + -webkit-box-shadow: 0 5px 30px rgba(0,0,0,.3); + -moz-box-shadow: 0 5px 30px rgba(0,0,0,.3); + box-shadow: 0 5px 30px rgba(0,0,0,.3); + } -.quickstart .code .line span { - display: inline-block; -} + .line { + display: block; + margin: 0; + padding: 0; -.quickstart .code .path { - color: #87ceeb; - -webkit-user-select: none; /* Chrome all / Safari all */ - -moz-user-select: none; /* Firefox all */ - -ms-user-select: none; /* IE 10+ */ - -o-user-select: none; - user-select: none; -} + span { display: inline-block; } + } -.quickstart .code .prompt { - color: #cd5c5c; - -webkit-user-select: none; /* Chrome all / Safari all */ - -moz-user-select: none; /* Firefox all */ - -ms-user-select: none; /* IE 10+ */ - -o-user-select: none; - user-select: none; -} + .path { + color: #87ceeb; + -webkit-user-select: none; /* Chrome all / Safari all */ + -moz-user-select: none; /* Firefox all */ + -ms-user-select: none; /* IE 10+ */ + -o-user-select: none; + user-select: none; + } -.quickstart .code .command { - color: #f0e68c; -} + .prompt { + color: #cd5c5c; + -webkit-user-select: none; /* Chrome all / Safari all */ + -moz-user-select: none; /* Firefox all */ + -ms-user-select: none; /* IE 10+ */ + -o-user-select: none; + user-select: none; + } -.quickstart .code .output { - color: #888; + .command { color: #f0e68c; } + + .output { color: #888; } + } } /* Free Hosting */ -.free-hosting .pane { - background-color: #444; - -webkit-border-radius: 10px; - -moz-border-radius: 10px; - border-radius: 10px; - text-shadow: none; - position: relative; - padding: 0 20px 30px; -} +.free-hosting { -.free-hosting img { - margin: -30px 0 0; - width: 180px; - height: 150px; -} + .pane { + background-color: #444; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; + text-shadow: none; + position: relative; + padding: 0 20px 30px; + } -.free-hosting h2 { - font-size: 28px; -} + img { + margin: -30px 0 0; + width: 180px; + height: 150px; + } -.free-hosting p, -.free-hosting a { - font-size: 16px; -} + h2 { font-size: 28px; } -.free-hosting p { - margin: .75em 0; + p, + a { font-size: 16px; } + + p { margin: .75em 0; } } @media (min-width: 768px) { - .free-hosting img { - float: left; - margin: -20px -30px -30px -50px; - width: 300px; - height: 251px; - } - .free-hosting .pane-content { - margin-top: 35px; - padding-right: 30px; - } - .free-hosting p, - .free-hosting a { - font-size: 18px; - } - .free-hosting .pane:after { - content: " "; - float: right; - background: url(../img/footer-arrow.png) top left no-repeat; - width: 73px; - height: 186px; - position: absolute; - right: 0; - bottom: -30px; + .free-hosting { + + img { + float: left; + margin: -20px -30px -30px -50px; + width: 300px; + height: 251px; + } + + .pane-content { + margin-top: 35px; + padding-right: 30px; + } + + p, + a { font-size: 18px; } + + .pane:after { + content: " "; + float: right; + background: url(../img/footer-arrow.png) top left no-repeat; + width: 73px; + height: 186px; + position: absolute; + right: 0; + bottom: -30px; + } } } @@ -405,15 +417,11 @@ article { } @media (max-width: 480px) { - article ul { - padding-left: 20px; - } + article ul { padding-left: 20px; } } @media (max-width: 568px) { - article { - margin: 0; - } + article { margin: 0; } } @media (min-width: 768px) { @@ -427,55 +435,52 @@ article { aside { padding-top: 30px; -} -aside h4 { - text-transform: uppercase; - font-size: 14px; - font-weight: 700; - padding: 0 0 10px 30px; - margin-left: -30px; - display: inline-block; - border-bottom: 1px solid #c00; -} + h4 { + text-transform: uppercase; + font-size: 14px; + font-weight: 700; + padding: 0 0 10px 30px; + margin-left: -30px; + display: inline-block; + border-bottom: 1px solid #c00; + } -aside ul { - padding-left: 0; -} + ul { + padding-left: 0; -aside ul:first-child { - margin-top: 0; -} + &:first-child { margin-top: 0; } + } -aside li { - list-style-type: none; -} + li { + list-style-type: none; -aside li a { - font-size: 16px; - position: relative -} + a { + font-size: 16px; + position: relative + } -aside li.current a:before { - content: ""; - border-color: transparent transparent transparent #444; - border-style: solid; - border-width: 10px; - width: 0; - height: 0; - position: absolute; - top: 0; - left: -30px; + &.current a:before { + content: ""; + border-color: transparent transparent transparent #444; + border-style: solid; + border-width: 10px; + width: 0; + height: 0; + position: absolute; + top: 0; + left: -30px; + } + } } /* Documentation */ -.docs article { - min-height: 800px; -} +.docs { -.docs .content { - padding: 0; + article { min-height: 800px; } + + .content { padding: 0; } } .section-nav { @@ -484,70 +489,64 @@ aside li.current a:before { position: relative; background: url(../img/article-footer.png) top center no-repeat; margin: 40px -20px 10px; -} -.section-nav > div { - width: 49.5%; -} + > div { width: 49.5%; } -.section-nav a, .section-nav span { - color: #fff; - font-size: 16px; - text-transform: uppercase; - font-weight: 700; - padding: 8px 12px 10px; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - /*border: 1px solid #333;*/ - -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.5); - -moz-box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.5); - box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.5); - background-color: #777; -} + a, + span { + color: #fff; + font-size: 16px; + text-transform: uppercase; + font-weight: 700; + padding: 8px 12px 10px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + /*border: 1px solid #333;*/ + -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.5); + -moz-box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.5); + box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.5); + background-color: #777; + } -.section-nav a:hover { - color: #fff; - background-color: #888; -} + a:hover { + color: #fff; + background-color: #888; + } -.section-nav .next, .section-nav .prev { - position: relative; -} + .next, + .prev { position: relative; } -.section-nav .next:after, .section-nav .prev:before { - font-size: 36px; - color: #222; - font-weight: 900; - text-shadow: 0 1px 0 rgba(255,255,255,.4); - position: absolute; - top: -7px; -} + .next:after, + .prev:before { + font-size: 36px; + color: #222; + font-weight: 900; + text-shadow: 0 1px 0 rgba(255,255,255,.4); + position: absolute; + top: -7px; + } -.section-nav .next:after { - content: '\203A'; - right: 10px; -} + .next:after { + content: '\203A'; + right: 10px; + } -.section-nav .prev:before { - content: '\2039'; - left: 10px; -} + .prev:before { + content: '\2039'; + left: 10px; + } -.section-nav .prev, .section-nav .prev:hover { - /*float: left;*/ - padding-left: 30px; -} + .prev, + .prev:hover { padding-left: 30px; } -.section-nav .next, .section-nav .next:hover { - /*float: right;*/ - padding-right: 30px; -} + .next, + .next:hover { padding-right: 30px; } -.section-nav .disabled { - opacity: .5; - /*filter: alpha*/ - cursor: default; + .disabled { + opacity: .5; + cursor: default; + } } .docs-nav-mobile select { @@ -557,9 +556,7 @@ aside li.current a:before { /* News */ -article h2:first-child { - margin-top: 0; -} +article h2:first-child { margin-top: 0; } .post-category, .post-meta { @@ -588,11 +585,21 @@ article h2:first-child { background-image: -o-linear-gradient(top, #9e2812 0%, #6f0d0d 100%); background-image: linear-gradient(to bottom, #9e2812 0%,#6f0d0d 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9e2812', endColorstr='#6f0d0d',GradientType=0 ); + + &:before { + content: ""; + position: absolute; + top: -10px; + left: 0; + border-color: transparent #6f0d0d #6f0d0d transparent; + border-style: solid; + border-width: 5px; + width: 0; + height: 0; + } } -.post-content img { - max-width: 100% -} +.post-content img { max-width: 100% } .label { float: left; @@ -602,27 +609,11 @@ article h2:first-child { } @media (max-width: 568px) { - .post-category { - padding-left: 30px; - } + .post-category { padding-left: 30px; } } @media (min-width: 768px) { - .post-category { - margin-left: -50px; - } -} - -.post-category:before { - content: ""; - position: absolute; - top: -10px; - left: 0; - border-color: transparent #6f0d0d #6f0d0d transparent; - border-style: solid; - border-width: 5px; - width: 0; - height: 0; + .post-category { margin-left: -50px; } } .avatar { @@ -641,9 +632,7 @@ article h2:first-child { } .post-date, -.post-author { - margin-left: 10px; -} +.post-author { margin-left: 10px; } .news article + article { margin-top: -10px; @@ -659,7 +648,8 @@ article h2:first-child { /* Code Highlighting */ -pre, code { +pre, +code { white-space: pre; display: inline-block; margin: 0; @@ -668,12 +658,16 @@ pre, code { } @media (min-width: 768px) { - pre, code { - font-size: 16px; - } + pre, code { font-size: 16px; } } -.highlight, p > pre, p > code, p > nobr > code, li > code, h5 > code, .note > code { +.highlight, +p > pre, +p > code, +p > nobr > code, +li > code, +h5 > code, +.note > code { background-color: #333; color: #fff; -webkit-border-radius: 5px; @@ -707,9 +701,7 @@ pre, code { /* HTML Elements */ -h1, h2, h3, h4, h5, h6 { - margin: 0; -} +h1, h2, h3, h4, h5, h6 { margin: 0; } a { color: #fc0; @@ -718,19 +710,13 @@ a { -moz-transition: all .25s; -o-transition: all .25s; transition: all .25s; + + &:hover { color: #f90; } } -a:hover { - color: #f90; -} +strong { font-weight: 700; } -strong { - font-weight: 700; -} - -p { - line-height: 1.5em; -} +p { line-height: 1.5em; } .left { float: left; } .right { float: right; } @@ -740,16 +726,25 @@ p { /* Article HTML */ -article h2, -article h3, -article h4, -article h5, -article h6 { - margin: 1em 0; -} +article { + + h2, h3, h4, h5, h6 { margin: 1em 0; } + + h4 { color: #fff; } + + ul li { + + p { margin: 0; } + + blockquote { margin: 10px 0; } + } + + ul li, + ol li { + line-height: 1.5em; + margin-bottom: 0.5em; + } -article h4 { - color: #fff; } h5, h6 { @@ -757,19 +752,6 @@ h5, h6 { font-style: italic; } -article ul li p { - margin: 0; -} - -article ul li, article ol li { - line-height: 1.5em; - margin-bottom: 0.5em; -} - -article ul li blockquote { - margin: 10px 0; -} - blockquote { border-left: 2px solid #777; padding-left: 20px; @@ -809,34 +791,30 @@ thead { background-image: -o-linear-gradient(top, #3a3a3a 0%, #1e1e1e 100%); background-image: linear-gradient(to bottom, #3a3a3a 0%,#1e1e1e 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a3a3a', endColorstr='#1e1e1e',GradientType=0 ); + + th { + position: relative; + -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1); + -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1); + box-shadow: inset 0 1px 0 rgba(255,255,255,.1); + + &:first-child { + -webkit-border-top-left-radius: 5px; + -moz-border-radius-topleft: 5px; + border-top-left-radius: 5px; + } + + &:last-child { + -webkit-border-top-right-radius: 5px; + -moz-border-radius-topright: 5px; + border-top-right-radius: 5px; + } + } } -thead th { - position: relative; - -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1); - -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1); - box-shadow: inset 0 1px 0 rgba(255,255,255,.1); -} +td { padding: .5em .75em; } -thead th:first-child { - -webkit-border-top-left-radius: 5px; - -moz-border-radius-topleft: 5px; - border-top-left-radius: 5px; -} - -thead th:last-child { - -webkit-border-top-right-radius: 5px; - -moz-border-radius-topright: 5px; - border-top-right-radius: 5px; -} - -td { - padding: .5em .75em; -} - -td p { - margin: 0; -} +td p { margin: 0; } th { text-transform: uppercase; @@ -859,25 +837,32 @@ tbody td { background-image: -o-linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%); background-image: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1affffff', endColorstr='#00ffffff',GradientType=0 ); + + p { + font-size: 16px; + + code { font-size: 14px; } + } } -td p { - font-size: 16px; -} - -td p code { - font-size: 14px; -} - -code.option, th .option, code.filter, th .filter { +code.option, +th .option, +code.filter, +th .filter { color: #50B600; } -code.flag, th .flag, code.output, th .output { +code.flag, +th .flag, +code.output, +th .output { color: #049DCE; } -code.option, code.flag, code.filter, code.output { +code.option, +code.flag, +code.filter, +code.output { margin-bottom: 2px; } @@ -906,43 +891,53 @@ code.option, code.flag, code.filter, code.output { } @media (max-width: 568px) { - .note { - margin-right: -30px; - } + .note { margin-right: -30px; } } @media (min-width: 768px) { - .note { - margin-left: -50px; + .note { margin-left: -50px; } +} + +.note { + &:before { + content: ""; + position: absolute; + top: -10px; + left: 0; + border-color: transparent #222 #222 transparent; + border-style: solid; + border-width: 5px; + width: 0; + height: 0; } -} -.note:before { - content: ""; - position: absolute; - top: -10px; - left: 0; - border-color: transparent #222 #222 transparent; - border-style: solid; - border-width: 5px; - width: 0; - height: 0; -} + h5, + p { + margin: 0; + color: #fff; + } -.note h5, .note p { - margin: 0; - color: #fff; -} + h5 { + line-height: 1.5em; + font-weight: 900; + font-style: normal; + } -.note h5 { - line-height: 1.5em; - font-weight: 900; - font-style: normal; -} + p { + font-weight: 400; + font-size: .75em; + } -.note p { - font-weight: 400; - font-size: .75em; + &:after { + content: '\2605'; + color: #fc0; + position: absolute; + top: 14px; + left: 14px; + font-size: 28px; + font-weight: 700; + text-shadow: 0 -1px 0 rgba(0,0,0,.5); + } } .info { @@ -978,28 +973,11 @@ code.option, code.flag, code.filter, code.output { filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cd9239', endColorstr='#a27528',GradientType=0 ); } -.info:before { - border-color: transparent #00617f #00617f transparent; -} +.info:before { border-color: transparent #00617f #00617f transparent; } -.warning:before { - border-color: transparent #6f0d0d #6f0d0d transparent; -} +.warning:before { border-color: transparent #6f0d0d #6f0d0d transparent; } -.unreleased:before { - border-color: transparent #664719 #664719 transparent; -} - -.note:after { - content: '\2605'; - color: #fc0; - position: absolute; - top: 14px; - left: 14px; - font-size: 28px; - font-weight: 700; - text-shadow: 0 -1px 0 rgba(0,0,0,.5); -} +.unreleased:before { border-color: transparent #664719 #664719 transparent; } .info:after { content: '\24D8'; From 6f9d28f398e3f93fcad4c72f425ac0cb6c526cfc Mon Sep 17 00:00:00 2001 From: Joel Glovier Date: Mon, 17 Nov 2014 14:55:32 -0500 Subject: [PATCH 2/2] use sass selector nesting in pygments --- site/_sass/_pygments.scss | 150 ++++++++++++++++++++------------------ 1 file changed, 78 insertions(+), 72 deletions(-) diff --git a/site/_sass/_pygments.scss b/site/_sass/_pygments.scss index 5fe679f4..2858bcd2 100644 --- a/site/_sass/_pygments.scss +++ b/site/_sass/_pygments.scss @@ -1,72 +1,78 @@ -/*.highlight { background: #333333; color: #ffffff}*/ -.highlight .hll { background-color: #ffffcc } -.highlight .c { color: #87ceeb} /* Comment */ -.highlight .err { color: #ffffff} /* Error */ -.highlight .g { color: #ffffff} /* Generic */ -.highlight .k { color: #f0e68c} /* Keyword */ -.highlight .l { color: #ffffff} /* Literal */ -.highlight .n { color: #ffffff} /* Name */ -.highlight .o { color: #ffffff} /* Operator */ -.highlight .x { color: #ffffff} /* Other */ -.highlight .p { color: #ffffff} /* Punctuation */ -.highlight .cm { color: #87ceeb} /* Comment.Multiline */ -.highlight .cp { color: #cd5c5c} /* Comment.Preproc */ -.highlight .c1 { color: #87ceeb} /* Comment.Single */ -.highlight .cs { color: #87ceeb} /* Comment.Special */ -.highlight .gd { color: #0000c0; font-weight: bold; background-color: #008080 } /* Generic.Deleted */ -.highlight .ge { color: #c000c0; text-decoration: underline} /* Generic.Emph */ -.highlight .gr { color: #c0c0c0; font-weight: bold; background-color: #c00000 } /* Generic.Error */ -.highlight .gh { color: #cd5c5c} /* Generic.Heading */ -.highlight .gi { color: #ffffff; background-color: #0000c0 } /* Generic.Inserted */ -.highlight span.go { color: #add8e6; font-weight: bold; background-color: #4d4d4d } /* Generic.Output, qualified with span to prevent applying this style to the Go language, see #1153. */ -.highlight .gp { color: #ffffff} /* Generic.Prompt */ -.highlight .gs { color: #ffffff} /* Generic.Strong */ -.highlight .gu { color: #cd5c5c} /* Generic.Subheading */ -.highlight .gt { color: #c0c0c0; font-weight: bold; background-color: #c00000 } /* Generic.Traceback */ -.highlight .kc { color: #f0e68c} /* Keyword.Constant */ -.highlight .kd { color: #f0e68c} /* Keyword.Declaration */ -.highlight .kn { color: #f0e68c} /* Keyword.Namespace */ -.highlight .kp { color: #f0e68c} /* Keyword.Pseudo */ -.highlight .kr { color: #f0e68c} /* Keyword.Reserved */ -.highlight .kt { color: #bdb76b} /* Keyword.Type */ -.highlight .ld { color: #ffffff} /* Literal.Date */ -.highlight .m { color: #ffffff} /* Literal.Number */ -.highlight .s { color: #ffffff} /* Literal.String */ -.highlight .na { color: #ffffff} /* Name.Attribute */ -.highlight .nb { color: #ffffff} /* Name.Builtin */ -.highlight .nc { color: #ffffff} /* Name.Class */ -.highlight .no { color: #ffa0a0} /* Name.Constant */ -.highlight .nd { color: #ffffff} /* Name.Decorator */ -.highlight .ni { color: #ffdead} /* Name.Entity */ -.highlight .ne { color: #ffffff} /* Name.Exception */ -.highlight .nf { color: #ffffff} /* Name.Function */ -.highlight .nl { color: #ffffff} /* Name.Label */ -.highlight .nn { color: #ffffff} /* Name.Namespace */ -.highlight .nx { color: #ffffff} /* Name.Other */ -.highlight .py { color: #ffffff} /* Name.Property */ -.highlight .nt { color: #f0e68c} /* Name.Tag */ -.highlight .nv { color: #98fb98} /* Name.Variable */ -.highlight .ow { color: #ffffff} /* Operator.Word */ -.highlight .w { color: #ffffff} /* Text.Whitespace */ -.highlight .mf { color: #ffffff} /* Literal.Number.Float */ -.highlight .mh { color: #ffffff} /* Literal.Number.Hex */ -.highlight .mi { color: #ffffff} /* Literal.Number.Integer */ -.highlight .mo { color: #ffffff} /* Literal.Number.Oct */ -.highlight .sb { color: #ffffff} /* Literal.String.Backtick */ -.highlight .sc { color: #ffffff} /* Literal.String.Char */ -.highlight .sd { color: #ffffff} /* Literal.String.Doc */ -.highlight .s2 { color: #ffffff} /* Literal.String.Double */ -.highlight .se { color: #ffffff} /* Literal.String.Escape */ -.highlight .sh { color: #ffffff} /* Literal.String.Heredoc */ -.highlight .si { color: #ffffff} /* Literal.String.Interpol */ -.highlight .sx { color: #ffffff} /* Literal.String.Other */ -.highlight .sr { color: #ffffff} /* Literal.String.Regex */ -.highlight .s1 { color: #ffffff} /* Literal.String.Single */ -.highlight .ss { color: #ffffff} /* Literal.String.Symbol */ -.highlight .bp { color: #ffffff} /* Name.Builtin.Pseudo */ -.highlight .vc { color: #98fb98} /* Name.Variable.Class */ -.highlight .vg { color: #98fb98} /* Name.Variable.Global */ -.highlight .vi { color: #98fb98} /* Name.Variable.Instance */ -.highlight .il { color: #ffffff} /* Literal.Number.Integer.Long */ - -.highlight .bash .nv {-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } +.highlight { + .hll { background-color: #ffffcc } + .c { color: #87ceeb} /* Comment */ + .err { color: #ffffff} /* Error */ + .g { color: #ffffff} /* Generic */ + .k { color: #f0e68c} /* Keyword */ + .l { color: #ffffff} /* Literal */ + .n { color: #ffffff} /* Name */ + .o { color: #ffffff} /* Operator */ + .x { color: #ffffff} /* Other */ + .p { color: #ffffff} /* Punctuation */ + .cm { color: #87ceeb} /* Comment.Multiline */ + .cp { color: #cd5c5c} /* Comment.Preproc */ + .c1 { color: #87ceeb} /* Comment.Single */ + .cs { color: #87ceeb} /* Comment.Special */ + .gd { color: #0000c0; font-weight: bold; background-color: #008080 } /* Generic.Deleted */ + .ge { color: #c000c0; text-decoration: underline} /* Generic.Emph */ + .gr { color: #c0c0c0; font-weight: bold; background-color: #c00000 } /* Generic.Error */ + .gh { color: #cd5c5c} /* Generic.Heading */ + .gi { color: #ffffff; background-color: #0000c0 } /* Generic.Inserted */ + span.go { color: #add8e6; font-weight: bold; background-color: #4d4d4d } /* Generic.Output, qualified with span to prevent applying this style to the Go language, see #1153. */ + .gp { color: #ffffff} /* Generic.Prompt */ + .gs { color: #ffffff} /* Generic.Strong */ + .gu { color: #cd5c5c} /* Generic.Subheading */ + .gt { color: #c0c0c0; font-weight: bold; background-color: #c00000 } /* Generic.Traceback */ + .kc { color: #f0e68c} /* Keyword.Constant */ + .kd { color: #f0e68c} /* Keyword.Declaration */ + .kn { color: #f0e68c} /* Keyword.Namespace */ + .kp { color: #f0e68c} /* Keyword.Pseudo */ + .kr { color: #f0e68c} /* Keyword.Reserved */ + .kt { color: #bdb76b} /* Keyword.Type */ + .ld { color: #ffffff} /* Literal.Date */ + .m { color: #ffffff} /* Literal.Number */ + .s { color: #ffffff} /* Literal.String */ + .na { color: #ffffff} /* Name.Attribute */ + .nb { color: #ffffff} /* Name.Builtin */ + .nc { color: #ffffff} /* Name.Class */ + .no { color: #ffa0a0} /* Name.Constant */ + .nd { color: #ffffff} /* Name.Decorator */ + .ni { color: #ffdead} /* Name.Entity */ + .ne { color: #ffffff} /* Name.Exception */ + .nf { color: #ffffff} /* Name.Function */ + .nl { color: #ffffff} /* Name.Label */ + .nn { color: #ffffff} /* Name.Namespace */ + .nx { color: #ffffff} /* Name.Other */ + .py { color: #ffffff} /* Name.Property */ + .nt { color: #f0e68c} /* Name.Tag */ + .nv { color: #98fb98} /* Name.Variable */ + .ow { color: #ffffff} /* Operator.Word */ + .w { color: #ffffff} /* Text.Whitespace */ + .mf { color: #ffffff} /* Literal.Number.Float */ + .mh { color: #ffffff} /* Literal.Number.Hex */ + .mi { color: #ffffff} /* Literal.Number.Integer */ + .mo { color: #ffffff} /* Literal.Number.Oct */ + .sb { color: #ffffff} /* Literal.String.Backtick */ + .sc { color: #ffffff} /* Literal.String.Char */ + .sd { color: #ffffff} /* Literal.String.Doc */ + .s2 { color: #ffffff} /* Literal.String.Double */ + .se { color: #ffffff} /* Literal.String.Escape */ + .sh { color: #ffffff} /* Literal.String.Heredoc */ + .si { color: #ffffff} /* Literal.String.Interpol */ + .sx { color: #ffffff} /* Literal.String.Other */ + .sr { color: #ffffff} /* Literal.String.Regex */ + .s1 { color: #ffffff} /* Literal.String.Single */ + .ss { color: #ffffff} /* Literal.String.Symbol */ + .bp { color: #ffffff} /* Name.Builtin.Pseudo */ + .vc { color: #98fb98} /* Name.Variable.Class */ + .vg { color: #98fb98} /* Name.Variable.Global */ + .vi { color: #98fb98} /* Name.Variable.Instance */ + .il { color: #ffffff} /* Literal.Number.Integer.Long */ + .bash .nv { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; + } +} \ No newline at end of file