diff --git a/_includes/license.html b/_includes/license.html index 6c47303ad..454aae6ca 100644 --- a/_includes/license.html +++ b/_includes/license.html @@ -1,3 +1 @@ -
- Shared with the community under a Creative Commons license -
+Shared with the community under a Creative Commons license diff --git a/_includes/navigation.html b/_includes/navigation.html index 474ca31b0..c8d85ac8a 100644 --- a/_includes/navigation.html +++ b/_includes/navigation.html @@ -1,14 +1,29 @@ -
- -
+
+
+

+ GitHub Training +

+ +
+
diff --git a/_layouts/bare.html b/_layouts/bare.html index 5d4e4440b..d9b8835ce 100644 --- a/_layouts/bare.html +++ b/_layouts/bare.html @@ -43,9 +43,7 @@ {% endif %} - {% if page.path != "index.html" %} - {% include navigation.html %} - {% endif %} + {% include navigation.html %} {{ content }} diff --git a/_layouts/license.html b/_layouts/license.html new file mode 100644 index 000000000..03335d808 --- /dev/null +++ b/_layouts/license.html @@ -0,0 +1,21 @@ +--- +layout: bare +--- + +
+
+
+

{{ page.title }}

+

 

+
+
+
+ + +
+
+ {{ content }} +
+
+ +{% include footer.html %} diff --git a/_layouts/workbook.html b/_layouts/workbook.html index 7c4a4547c..0869e6f98 100644 --- a/_layouts/workbook.html +++ b/_layouts/workbook.html @@ -3,16 +3,12 @@ theme: workbook --- -
+
- -

{{ page.title }}

- {% include license.html %} - - {% if page.description %} -
-
{{ page.description }}
- {% endif %} +
+

{{ page.title }}

+

{% include license.html %}

+
diff --git a/_stylesheets/core.scss b/_stylesheets/core.scss index 8cff2521e..9d58769b4 100644 --- a/_stylesheets/core.scss +++ b/_stylesheets/core.scss @@ -1,278 +1,3 @@ -h1{ - font-size: 300%; - font-weight: 200; - text-rendering: optimizeLegibility; -} -h2{ - font-size: 250%; - font-weight: 200; - margin: 0 0 0 0; - color: lighten($mono-dark, 10%); -} -h2+p{ - // font-size: 112.5%; - font-weight: 200; - text-rendering: optimizeLegibility; - line-height: 150%; - color: lighten($mono-dark, 30%); - margin: 10px auto 20px; -} -h3{ - font-size: 125%; - margin: 0; -} -p{ - text-rendering: optimizeLegibility; - line-height: 150%; -} -a{ - color: lighten($mono-dark, 15%); -} -section{ - width: 100%; - float: left; - - & .container{ - padding: 30px 0 30px 0; - } - - /* Layout */ - .hero{ - // height: 485px; - - & .container{ - padding: 0; - margin: 0 0 0 0; - } - - hgroup{ - margin-top: 60px; - } - - p{ - font-size: 112.5%; - color: darken($color-dark, 20%); - margin-bottom: 30px; - } - - .octicon{ - font-size: 300px; - } - } -} - -code{ - font-family: "Courier New", Courier, monospace; - color: #63b83e; - border-radius: 3px; -} -pre{ - width: 100%; - // background: #222; - background: rgba(0,0,0,.04); - border-radius: 3px; - padding: 0 10px; - - code{ - } -} -table{ - width: 100%; - background: #eee; - line-height: 140%; - margin: 30px 0; - padding: 20px; - border-radius: 3px; - border-spacing:0; - - th{ - font-size: 18px; - font-weight: 200; - text-align: left; - border-bottom: solid 1px #bfbfbf; - opacity: .5; - padding: 0 0 10px; - } - td{ - - } -} - -ul{ - margin: 0 0 0 1.5em -} - -nav{ - height: 46px; - width: $width-desktop; - margin: 18px auto 0 auto; - - a{ - text-decoration: none; - } - - hgroup{ - float: left; - } - - .button{ - padding: 8px; - - } - - ul{ - float: right; - margin: 0; - padding: 0; - height: 26px; - font-size: 14px; - line-height: 26px; - - li{ - display: inline-block; - margin-left: 16px; - } - - a{ - color: inherit; - font-weight: 500; - - &:hover{ - color: $mono-bright; - border-bottom: solid 2px $mono-bright; - } - &.button:hover{ - border: none; - box-shadow: 0 0 0 1px $mono-bright; - } - } - } -} - -.container{ - width: $width-desktop; - margin: 0 auto auto; - position: relative; - - header &{ - margin: 0 auto; - } -} - -.center{ - text-align: center; -} - -.license{ - color: $color-bright; - font-size: 12px; - - a{ - color: lighten($color-dark, 20%); - } - .container{ - margin: 0 auto; - padding: 5px; - } -} - -.tab-panel{ - background: #fff; - position: block; - margin: 30px auto 0 auto; - height: 3em; - width: 360px; - position: relative; - - label{ - background: #f5f5f5; - -webkit-transition: background 250ms ease-in-out; - - &:hover{ - background: #fff; - } - } - - .column-2up{ - width: 50%; - } - .column-3up{ - width: 33%; - } - .column-4up{ - width: 25%; - } - - .tab{ - float: left; - box-shadow: 0 0 0 1px #dfdfdf; - - &.first{ - border-top-left-radius: 5px; - border-bottom-left-radius: 5px; - border-right: none; - } - &.last{ - border-top-right-radius: 5px; - border-bottom-right-radius: 5px; - border-left: none; - } - & > span{ - display: block; - text-align: center; - margin: 10px; - font-size: 80%; - } - } - - .panel-content{ - width: 200%; - visibility: hidden; - position: absolute; - left: -50%; - - -webkit-transition: opacity 400ms; - transition: opacity 400ms; - - .octicon-hero{ - display: inline-block; - padding: 0 10px; - color: #ddd; - } - p{ - font-size: 80%; - text-align: center; - margin: 20px 0; - font-weight: 200; - } - ul{ - text-align: center; - } - li{ - display: inline-block; - } - } - - input.material-type{ - position: absolute; - left: -999px; - - &:checked + label{ - background: $color-bright; - - & > span{ - color: #fff; - opacity: 1; - } - } - - &:checked + label.tab > div.panel-content{ - visibility: visible; - } - } -} - - /* Colorization */ .colorful{ background: $color-dark; @@ -312,70 +37,27 @@ nav{ border-bottom: solid 1px $mono-light; } -/* Alignment */ -.left{ - float:left; - clear:left; -} -.right{ - float:right; - clear:right; -} - - - -.segment-content{ - width: $width-desktop*.66; - display: inline-block; -} - -.segment-icon{ - width: $width-desktop*0.31; - padding: $width-desktop*0.01; - display: inline-block; - text-align: left; - font-size: 80%; - color: lighten($mono-dark, 20%); - - a{ - display: block; - text-decoration: none; - -webkit-transition: box-shadow 150ms, color 150ms, background 150ms; - transition: box-shadow 150ms, color 150ms, background 150ms; - - color: $color-bright; - } - - .octicon{ - height: 50px; - width: 50px; - font-size: 30px; - border-radius: 50%; - text-align: center; - } -} - .button{ + display: inline; border-radius: 3px; box-shadow: 0 0 0 1px $color-bright; text-align: center; - padding: 20px; + padding: 10px; text-decoration: none; &:hover{ box-shadow: 0 0 0 1px $color-dark; color: $mono-bright; background: $color-dark; + + a{ + color: $mono-bright; + } } -} -.big-link{ - display: block; - text-align: center; - font-size: 120%; - text-decoration: none; - color: $color-dark; - font-weight: 200; + a{ + color: $color-bright; + } } .logo-training{ @@ -392,49 +74,3 @@ nav{ display: block; } } - -.see-thru{ - opacity: .9; -} - -#floating-nav{ - position: fixed; - display: none; - z-index: 100; -} - -.mild{ - border-top: solid 2px $color-mild; - - h3,.octicon{ - color: $color-mild; - } - h3{ - - padding: 20px 0 0 0; - } -} - -.medium{ - border-top: solid 2px $color-medium; - - h3,.octicon{ - color: $color-medium; - } - h3{ - - padding: 20px 0 0 0; - } -} - -.hot{ - border-top: solid 2px $color-hot; - - h3,.octicon{ - color: $color-hot; - } - h3{ - - padding: 20px 0 0 0; - } -} diff --git a/_stylesheets/footer.scss b/_stylesheets/footer.scss index 5ce883984..5f11814a2 100644 --- a/_stylesheets/footer.scss +++ b/_stylesheets/footer.scss @@ -1,3 +1,13 @@ +// .site-footer-links{ +// +// .align-left{ +// float:left; +// } +// .align-right{ +// float:right; +// } +// } + footer { float: left; position: relative; @@ -6,10 +16,23 @@ footer { color: #777; clear: both; width: 100%; + height: 40px; margin: 0 auto 0 auto; padding: 20px 0 20px 0; border-top: 1px solid #eee; + ul{ + li{ + margin: 0; + padding: 0; + font-size: 12px; + } + } + + .left{ + float: left; + margin: 0; + } .right { float: right; margin: 0; @@ -33,11 +56,19 @@ footer { } } -.site-footer-links li { - display: inline-block; - margin-left: 10px; +ul.site-footer-links{ + padding: 0 10px; + li { + display: inline-block; + margin-left: 5px; + } + li:first-child { + margin-left: 0; + } } -.site-footer-links li:first-child { - margin-left: 0; +@media screen and (max-width: 568px) { + ul.site-footer-links{ + display: none; + } } diff --git a/_stylesheets/general.scss b/_stylesheets/general.scss new file mode 100644 index 000000000..0d5233c62 --- /dev/null +++ b/_stylesheets/general.scss @@ -0,0 +1,57 @@ +/* General */ + +html, body { + height: 100%; +} + +body { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + color: $mono-medium; + font-size: 14px; + line-height: 1.6em; +} + +header, section, footer { + float: left; + width: 100%; + margin: 0; + padding: 0; +} + +.content { + padding: 20px; +} + +.center{ + text-align: center; +} + +section.main { + padding: 30px 0 10px; +} + +/* Sticky footer */ + +.page { + clear: both; + min-height: 100%; + height: auto !important; + height: 100%; + margin-bottom: -100px; +} + +footer, .push { + margin: 0; + padding: 20px 0 0; + clear: both; + position: relative; +} + +@media screen and (max-width: 380px){ + .page { + margin-bottom: -154px; + } + footer, .push { + height: 154px; + } +} diff --git a/_stylesheets/grid.css b/_stylesheets/grid.css new file mode 100644 index 000000000..ac3a69eb1 --- /dev/null +++ b/_stylesheets/grid.css @@ -0,0 +1,76 @@ +/* Grid */ + +.container { + width: 960px; + margin: 0 auto; +/* overflow: hidden;*/ +} + +@media screen and (max-width: 960px){ + .container { + width: auto; + } +} + +.container .container { + width: 100%; +} + +.container .whole, +.container .half, +.container .third, +.container .two-thirds, +.container .golden-small, +.container .golden-large, +.container .quarter, +.container .three-quarters, +.container .fifth, +.container .two-fifths, +.container .three-fifths, +.container .four-fifths +{ + float: left; +} + +.container .whole { width: 100%; } +.container .half { width: 50%; } +.container .third { width: 33.3333%; } +.container .two-thirds { width: 66.6666%; } +.container .golden-small { width: 38.2716%; } +.container .golden-large { width: 61.7283% } +.container .quarter { width: 25%; } +.container .three-quarters { width: 75%; } +.container .fifth { width: 20%; } +.container .two-fifths { width: 40%; } +.container .three-fifths { width: 60%; } +.container .four-fifths { width: 80%; } + +@media screen and (max-width: 568px) { + + /* Expand anything lower than .whole to full-width on smaller screens */ + .container .half, + .container .third, + .container .two-thirds, + .container .golden-small, + .container .golden-large, + .container .quarter, + .container .three-quarters, + .container .fifth, + .container .two-fifths, + .container .three-fifths, + .container .four-fifths { + width: 100%; + } + + /* ... and give them some better margins */ + .container .content { + margin-left: 20px; + margin-right: 20px; + } + + /* Sometimes, you want things centered on small screens */ + .center-on-mobiles { + text-align: center !important; + } + +} diff --git a/_stylesheets/header.css b/_stylesheets/header.css new file mode 100644 index 000000000..ba81aa69c --- /dev/null +++ b/_stylesheets/header.css @@ -0,0 +1,123 @@ +/* Header */ + +#logo { + position: relative; + height: 30px; + width: 183px; + margin: 0 auto; + padding-top: 8px; +} + +#logo a { + display: block; + height: 30px; + width: 183px; + text-indent: -999px; + overflow: hidden; + background: url('../images/gh-training-logo-1x.png') no-repeat; + + -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; + filter: alpha(opacity=85); + opacity: 0.90; +} + +@media +only screen and (-webkit-min-device-pixel-ratio: 2), +only screen and ( min--moz-device-pixel-ratio: 2), +only screen and ( -o-min-device-pixel-ratio: 2/1), +only screen and ( min-device-pixel-ratio: 2), +only screen and ( min-resolution: 192dpi), +only screen and ( min-resolution: 2dppx) { + #logo a { + background: url('../images/gh-training-logo-2x.png') no-repeat; + background-size: 183px 30px; + } +} + +#logo a:hover { + -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + filter: alpha(opacity=100); + opacity: 1; +} + +header { + text-align: center; +} + +header .container { + padding: 22px 0 0px; +} + +header .content { + padding: 0px 10px; +} + +nav ul { + margin: 0; + padding: 0; + display: inline-block; +} + +#nav li { + display: inline-block; + margin: .4em .15em; +} + +#nav li a { + text-decoration: none; + color: #ffffff; + font-weight: bold; + font-size: 13px; + margin: 0 .6em 0; +} + +#nav li a:hover { + border-bottom: solid 2px #ffffff; +} + +#nav li.current a, #nav li.current a:hover { + border-bottom: solid 2px #ffffff; + border-bottom-color: #0383c0; +} + +@media screen and (min-width: 960px) { + #logo { + float: left; + width: 20%; + } + #nav { + float: right; + width: 75%; + margin-top: 2px; + text-align: right; + } + header .content { + padding: 0 20px; + } + header { + text-align: left; + } +} + +@media screen and (max-width: 568px) { + #logo { + margin: 0 auto; + } + + #nav .content { + margin-left: 0; + margin-right: 0; + } + #nav li { + margin: .4em 0; + } + #nav li a { + font-size: 11px; + } +} + +@media screen and (max-width: 320px) { + #nav li a { + font-size: 12px; + } +} diff --git a/_stylesheets/hero.css b/_stylesheets/hero.css new file mode 100644 index 000000000..14b4b8515 --- /dev/null +++ b/_stylesheets/hero.css @@ -0,0 +1,132 @@ +/* Hero Block */ + +.hero { + background: #1875c6; + color: #fff; + font-size: 1.4em; +} + +.hero h2 { + font-size: 2.1em; + font-weight: 300; + line-height: 1.1em; + margin: 0; +} + +.hero p { + font-weight: 300; + margin: 0 0 1em; + opacity: .7; +} + +.hero p a{ + color: #ffffff; +} + +.hero .content { + padding: 10px 20px; +} + +/* Overview hero block */ + +.overview .hero .container { + overflow: visible; +} + +.overview .hero .content { + padding: 30px 20px; +} + +.overview .hero h2 { + font-size: 1.8em; + margin: .83em 0; +} + +.overview .image { + position: relative; + padding: 0; +} + +.overview .intro, .overview .image { + float: left; +} + +@media screen and (min-width: 960px){ + .overview .image { + width: 460px; + } + .overview .intro { + width: 500px; + } +} + +.overview .image img { + margin: 0 0 -60px -20px; +} + +@media screen and (max-width: 959px){ + .overview .image, .overview .intro { + text-align: center; + width: 100%; + } + .overview .hero .content { + padding-top: 10px; + } + .overview .image img { + margin: 0 auto -20px; + } + .overview .hero p { + max-width: 560px; + margin: .5em auto 1em; + } + .hero { + text-align: center; + } +} + +@media screen and (max-width: 568px){ + .overview .intro { + font-size: .85em; + } + .overview .image{ + display: none; + } + .overview .image img { + width: 364px; + height: 238px; + } + .pagehead .content { + padding-left: 0; + padding-right: 0; + margin-left: 0; + margin-right: 0; + } + .pagehead { + font-size: 1em; + } +} + +@media screen and (max-width: 320px){ + .overview .intro h2 { + line-height: 1.2em; + } + .overview .intro p { + font-size: .95em; + line-height: 1.5em; + font-weight: 500; + } + .overview .image{ + display: none; + } + .overview .image img { + width: 320px; + height: 209px; + margin-bottom: -60px; + } + .pagehead { + font-size: .9em; + } + .pagehead p { + font-weight: 500; + } +} diff --git a/_stylesheets/home.css b/_stylesheets/home.css index d1dd6e504..a286fdf65 100644 --- a/_stylesheets/home.css +++ b/_stylesheets/home.css @@ -1 +1 @@ -section{width:100%;float:left}section .container{padding:50px 0 50px 0}section .hero{height:445px;padding:20px 0 0 0}section .hero hgroup{margin-top:60px}section .hero a{text-decoration:none}section .hero p{font-size:112.5%;color:#0d3f6b;margin-bottom:30px}section .hero .octicon{font-size:200px;margin-top:52px}.figures{background:url(../images/hero-home.png) no-repeat bottom center #1875c6;background-size:1350px}.screen-shot{background:url(../images/screen-shot-slide.png) no-repeat bottom center;background-size:800px;padding-bottom:350px}.workbook{background:url(../images/screen-shot-workbook.png) no-repeat bottom center #f5f5f6;background-size:700px;padding-bottom:400px}.downloads{background:url(../images/screen-shot-pdf.png) no-repeat bottom center;background-size:800px;padding-bottom:400px} +.figures{background:url(../images/hero-home.png) no-repeat bottom center #1875c6;background-size:1350px}.screen-shot{background:url(../images/screen-shot-slidedeck.png) no-repeat bottom center;background-size:contain;padding-bottom:300px}.workbook{background:url(../images/screen-shot-workbook.png) no-repeat 0px 25px #f5f5f6;background-size:contain;padding-bottom:270px}.downloads{background:url(../images/screen-shot-pdf.png) no-repeat 0px 25px;background-size:contain;padding-bottom:230px} diff --git a/_stylesheets/home.scss b/_stylesheets/home.scss index af3191c34..e9f1c27c7 100644 --- a/_stylesheets/home.scss +++ b/_stylesheets/home.scss @@ -1,60 +1,25 @@ /* Imports */ @import "variables.scss"; -section{ - width: 100%; - float: left; - - & .container{ - padding: 50px 0 50px 0; - } - - /* Layout */ - .hero{ - height: 445px; - padding: 20px 0 0 0; - - - hgroup{ - margin-top: 60px; - } - - a{ - text-decoration: none; - } - - p{ - font-size: 112.5%; - color: darken($color-dark, 20%); - margin-bottom: 30px; - } - - .octicon{ - font-size: 200px; - margin-top: 52px; - } - } -} - .figures{ background: url(../images/hero-home.png) no-repeat bottom center $color-dark; background-size: 1350px; } .screen-shot{ - background: url(../images/screen-shot-slide.png) no-repeat bottom center; - background-size: 800px; - padding-bottom: 350px; + background: url(../images/screen-shot-slidedeck.png) no-repeat bottom center; + background-size: contain; + padding-bottom: 300px; } .workbook{ - background: url(../images/screen-shot-workbook.png) no-repeat bottom center lighten($mono-light, 5%); - background-size: 700px; - padding-bottom: 400px; + background: url(../images/screen-shot-workbook.png) no-repeat 0px 25px lighten($mono-light, 5%); + background-size: contain; + padding-bottom: 270px; } .downloads{ - background: url(../images/screen-shot-pdf.png) no-repeat bottom center; - background-size: 800px; - padding-bottom: 400px; + background: url(../images/screen-shot-pdf.png) no-repeat 0px 25px; + background-size: contain; + padding-bottom: 230px; } diff --git a/_stylesheets/normalize.css b/_stylesheets/normalize.css new file mode 100644 index 000000000..06b892691 --- /dev/null +++ b/_stylesheets/normalize.css @@ -0,0 +1,500 @@ +/*! normalize.css 2012-07-07T09:50 UTC - http://github.com/necolas/normalize.css */ + +/* ========================================================================== + HTML5 display definitions + ========================================================================== */ + +/* + * Corrects `block` display not defined in IE6/7/8/9 & FF3. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section, +summary { + display: block; +} + +/* + * Corrects `inline-block` display not defined in IE6/7/8/9 & FF3. + */ + +audio, +canvas, +video { + display: inline-block; + *display: inline; + *zoom: 1; +} + +/* + * Prevents modern browsers from displaying `audio` without controls. + * Remove excess height in iOS5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/* + * Addresses styling for `hidden` attribute not present in IE7/8/9, FF3, S4. + * Known issue: no IE6 support. + */ + +[hidden] { + display: none; +} + +/* ========================================================================== + Base + ========================================================================== */ + +/* + * 1. Corrects text resizing oddly in IE6/7 when body `font-size` is set using + * `em` units. + * 2. Prevents iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-size: 100%; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + -ms-text-size-adjust: 100%; /* 2 */ +} + +/* + * Addresses `font-family` inconsistency between `textarea` and other form + * elements. + */ + +html, +button, +input, +select, +textarea { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif +} + +/* + * Addresses margins handled incorrectly in IE6/7. + */ + +body { + margin: 0; +} + +/* ========================================================================== + Links + ========================================================================== */ + +/* + * Addresses `outline` inconsistency between Chrome and other browsers. + */ + +a:focus { + outline: thin dotted; +} + +/* + * Improves readability when focused and also mouse hovered in all browsers. + * people.opera.com/patrickl/experiments/keyboard/test + */ + +a:active, +a:hover { + outline: 0; +} + +/* ========================================================================== + Typography + ========================================================================== */ + +/* + * Addresses font sizes and margins set differently in IE6/7. + * Addresses font sizes within `section` and `article` in FF4+, Chrome, S5. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +h2 { + font-size: 1.5em; + margin: 0.83em 0; +} + +h3 { + font-size: 1.17em; + margin: 1em 0; +} + +h4 { + font-size: 1em; + margin: 1.33em 0; +} + +h5 { + font-size: 0.83em; + margin: 1.67em 0; +} + +h6 { + font-size: 0.75em; + margin: 2.33em 0; +} + +/* + * Addresses styling not present in IE7/8/9, S5, Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/* + * Addresses style set to `bolder` in FF3+, S4/5, Chrome. + */ + +b, +strong { + font-weight: bold; +} + +blockquote { + margin: 1em 40px; +} + +/* + * Addresses styling not present in S5, Chrome. + */ + +dfn { + font-style: italic; +} + +/* + * Addresses styling not present in IE6/7/8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/* + * Addresses margins set differently in IE6/7. + */ + +p, +pre { + margin: 1em 0; +} + +/* + * Corrects font family set oddly in IE6, S4/5, Chrome. + * en.wikipedia.org/wiki/User:Davidgothberg/Test59 + */ + +code, +kbd, +pre, +samp { + font-family: monospace, serif; + _font-family: 'courier new', monospace; + font-size: 1em; +} + +/* + * Improves readability of pre-formatted text in all browsers. + */ + +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} + +/* + * Addresses CSS quotes not supported in IE6/7. + */ + +q { + quotes: none; +} + +/* + * Addresses `quotes` property not supported in S4. + */ + +q:before, +q:after { + content: ''; + content: none; +} + +small { + font-size: 75%; +} + +/* + * Prevents `sub` and `sup` affecting `line-height` in all browsers. + * gist.github.com/413930 + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* ========================================================================== + Lists + ========================================================================== */ + +/* + * Addresses margins set differently in IE6/7. + */ + +dl, +menu, +ol, +ul { + margin: 1em 0; +} + +dd { + margin: 0 0 0 40px; +} + +/* + * Addresses paddings set differently in IE6/7. + */ + +menu, +ol, +ul { + padding: 0 0 0 40px; +} + +/* + * Corrects list images handled incorrectly in IE7. + */ + +nav ul, +nav ol { + list-style: none; + list-style-image: none; +} + +/* ========================================================================== + Embedded content + ========================================================================== */ + +/* + * 1. Removes border when inside `a` element in IE6/7/8/9, FF3. + * 2. Improves image quality when scaled in IE7. + * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ + */ + +img { + border: 0; /* 1 */ + -ms-interpolation-mode: bicubic; /* 2 */ +} + +/* + * Corrects overflow displayed oddly in IE9. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* ========================================================================== + Figures + ========================================================================== */ + +/* + * Addresses margin not present in IE6/7/8/9, S5, O11. + */ + +figure { + margin: 0; +} + +/* ========================================================================== + Forms + ========================================================================== */ + +/* + * Corrects margin displayed oddly in IE6/7. + */ + +form { + margin: 0; +} + +/* + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/* + * 1. Corrects color not being inherited in IE6/7/8/9. + * 2. Corrects text not wrapping in FF3. + * 3. Corrects alignment displayed oddly in IE6/7. + */ + +legend { + border: 0; /* 1 */ + padding: 0; + white-space: normal; /* 2 */ + *margin-left: -7px; /* 3 */ +} + +/* + * 1. Corrects font size not being inherited in all browsers. + * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome. + * 3. Improves appearance and consistency in all browsers. + */ + +button, +input, +select, +textarea { + font-size: 100%; /* 1 */ + margin: 0; /* 2 */ + vertical-align: baseline; /* 3 */ + *vertical-align: middle; /* 3 */ +} + +/* + * Addresses FF3/4 setting `line-height` on `input` using `!important` in the + * UA stylesheet. + */ + +button, +input { + line-height: normal; +} + +/* + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Corrects inability to style clickable `input` types in iOS. + * 3. Improves usability and consistency of cursor style between image-type + * `input` and others. + * 4. Removes inner spacing in IE7 without affecting normal text inputs. + * Known issue: inner spacing remains in IE6. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ + *overflow: visible; /* 4 */ +} + +/* + * Re-set default cursor for disabled elements. + */ + +button[disabled], +input[disabled] { + cursor: default; +} + +/* + * 1. Addresses box sizing set to content-box in IE8/9. + * 2. Removes excess padding in IE8/9. + * 3. Removes excess padding in IE7. + * Known issue: excess padding remains in IE6. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + *height: 13px; /* 3 */ + *width: 13px; /* 3 */ +} + +/* + * 1. Addresses `appearance` set to `searchfield` in S5, Chrome. + * 2. Addresses `box-sizing` set to `border-box` in S5, Chrome (include `-moz` + * to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/* + * Removes inner padding and search cancel button in S5, Chrome on OS X. + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* + * Removes inner padding and border in FF3+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/* + * 1. Removes default vertical scrollbar in IE6/7/8/9. + * 2. Improves readability and alignment in all browsers. + */ + +textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} + +/* ========================================================================== + Tables + ========================================================================== */ + +/* + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/_stylesheets/page.css b/_stylesheets/page.css index 044cf1e60..193e8ba85 100644 --- a/_stylesheets/page.css +++ b/_stylesheets/page.css @@ -1 +1 @@ -@import url(octicons.css);html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-size:16px;background:#fff;color:#222}h1{font-size:300%;font-weight:200;text-rendering:optimizeLegibility}h2{font-size:250%;font-weight:200;margin:0 0 0 0;color:#3c3c3c}h2+p{font-weight:200;text-rendering:optimizeLegibility;line-height:150%;color:#6f6f6f;margin:10px auto 20px}h3{font-size:125%;margin:0}p{text-rendering:optimizeLegibility;line-height:150%}a{color:#484848}section{width:100%;float:left}section .container{padding:30px 0 30px 0}section .hero .container{padding:0;margin:0 0 0 0}section .hero hgroup{margin-top:60px}section .hero p{font-size:112.5%;color:#0d3f6b;margin-bottom:30px}section .hero .octicon{font-size:300px}code{font-family:"Courier New", Courier, monospace;color:#63b83e;border-radius:3px}pre{width:100%;background:rgba(0,0,0,0.04);border-radius:3px;padding:0 10px}table{width:100%;background:#eee;line-height:140%;margin:30px 0;padding:20px;border-radius:3px;border-spacing:0}table th{font-size:18px;font-weight:200;text-align:left;border-bottom:solid 1px #bfbfbf;opacity:.5;padding:0 0 10px}ul{margin:0 0 0 1.5em}nav{height:46px;width:930px;margin:18px auto 0 auto}nav a{text-decoration:none}nav hgroup{float:left}nav .button{padding:8px}nav ul{float:right;margin:0;padding:0;height:26px;font-size:14px;line-height:26px}nav ul li{display:inline-block;margin-left:16px}nav ul a{color:inherit;font-weight:500}nav ul a:hover{color:#fff;border-bottom:solid 2px #fff}nav ul a.button:hover{border:none;box-shadow:0 0 0 1px #fff}.container{width:930px;margin:0 auto auto;position:relative}header .container{margin:0 auto}.center{text-align:center}.license{color:#00a5ea;font-size:12px}.license a{color:#59a7eb}.license .container{margin:0 auto;padding:5px}.tab-panel{background:#fff;position:block;margin:30px auto 0 auto;height:3em;width:360px;position:relative}.tab-panel label{background:#f5f5f5;-webkit-transition:background 250ms ease-in-out}.tab-panel label:hover{background:#fff}.tab-panel .column-2up{width:50%}.tab-panel .column-3up{width:33%}.tab-panel .column-4up{width:25%}.tab-panel .tab{float:left;box-shadow:0 0 0 1px #dfdfdf}.tab-panel .tab.first{border-top-left-radius:5px;border-bottom-left-radius:5px;border-right:none}.tab-panel .tab.last{border-top-right-radius:5px;border-bottom-right-radius:5px;border-left:none}.tab-panel .tab>span{display:block;text-align:center;margin:10px;font-size:80%}.tab-panel .panel-content{width:200%;visibility:hidden;position:absolute;left:-50%;-webkit-transition:opacity 400ms;transition:opacity 400ms}.tab-panel .panel-content .octicon-hero{display:inline-block;padding:0 10px;color:#ddd}.tab-panel .panel-content p{font-size:80%;text-align:center;margin:20px 0;font-weight:200}.tab-panel .panel-content ul{text-align:center}.tab-panel .panel-content li{display:inline-block}.tab-panel input.material-type{position:absolute;left:-999px}.tab-panel input.material-type:checked+label{background:#00a5ea}.tab-panel input.material-type:checked+label>span{color:#fff;opacity:1}.tab-panel input.material-type:checked+label.tab>div.panel-content{visibility:visible}.colorful{background:#1875c6;color:#fff}.colorful a{color:#fff}.invert{background:#222;border-bottom:solid 1px #e8e8ea;color:#fff}.invert h2{color:#b3b3b9}.invert h3,.invert p{color:#fff}.invert a{color:#cdcdd2}.invert a:hover{color:#fff}.grey{background:#f5f5f6;border-top:solid 1px #e8e8ea;border-bottom:solid 1px #e8e8ea}.left{float:left;clear:left}.right{float:right;clear:right}.segment-content{width:613.8px;display:inline-block}.segment-icon{width:288.3px;padding:9.3px;display:inline-block;text-align:left;font-size:80%;color:#555}.segment-icon a{display:block;text-decoration:none;-webkit-transition:box-shadow 150ms, color 150ms, background 150ms;transition:box-shadow 150ms, color 150ms, background 150ms;color:#00a5ea}.segment-icon .octicon{height:50px;width:50px;font-size:30px;border-radius:50%;text-align:center}.button{border-radius:3px;box-shadow:0 0 0 1px #00a5ea;text-align:center;padding:20px;text-decoration:none}.button:hover{box-shadow:0 0 0 1px #1875c6;color:#fff;background:#1875c6}.big-link{display:block;text-align:center;font-size:120%;text-decoration:none;color:#1875c6;font-weight:200}.logo-training{display:inline-block;height:26px;width:108px}.logo-training:before{content:"";background:url(../images/training-materials-dark-2x.png) no-repeat top left;background-size:contain;height:32px;width:237px;display:block}.see-thru{opacity:.9}#floating-nav{position:fixed;display:none;z-index:100}.mild{border-top:solid 2px #56c7e3}.mild h3,.mild .octicon{color:#56c7e3}.mild h3{padding:20px 0 0 0}.medium{border-top:solid 2px #53cda4}.medium h3,.medium .octicon{color:#53cda4}.medium h3{padding:20px 0 0 0}.hot{border-top:solid 2px #99d487}.hot h3,.hot .octicon{color:#99d487}.hot h3{padding:20px 0 0 0}footer{float:left;position:relative;font-size:12px;line-height:1.5;color:#777;clear:both;width:100%;margin:0 auto 0 auto;padding:20px 0 20px 0;border-top:1px solid #eee}footer .right{float:right;margin:0}footer .octicon-mark-github{position:absolute;left:50%;color:#ccc;height:24px;width:24px;margin-left:-12px;font-size:24px;line-height:1}footer a{color:#1875c6;text-decoration:none}.site-footer-links li{display:inline-block;margin-left:10px}.site-footer-links li:first-child{margin-left:0} +@import url(octicons.css);@import url(normalize.css);@import url(grid.css);@import url(header.css);@import url(hero.css);@import url(testimonials.css);@import url(subpage-list.css);.colorful{background:#1875c6;color:#fff}.colorful a{color:#fff}.invert{background:#222;border-bottom:solid 1px #e8e8ea;color:#fff}.invert h2{color:#b3b3b9}.invert h3,.invert p{color:#fff}.invert a{color:#cdcdd2}.invert a:hover{color:#fff}.grey{background:#f5f5f6;border-top:solid 1px #e8e8ea;border-bottom:solid 1px #e8e8ea}.button{display:inline;border-radius:3px;box-shadow:0 0 0 1px #00a5ea;text-align:center;padding:10px;text-decoration:none}.button:hover{box-shadow:0 0 0 1px #1875c6;color:#fff;background:#1875c6}.button:hover a{color:#fff}.button a{color:#00a5ea}.logo-training{display:inline-block;height:26px;width:108px}.logo-training:before{content:"";background:url(../images/training-materials-dark-2x.png) no-repeat top left;background-size:contain;height:32px;width:237px;display:block}footer{float:left;position:relative;font-size:12px;line-height:1.5;color:#777;clear:both;width:100%;height:40px;margin:0 auto 0 auto;padding:20px 0 20px 0;border-top:1px solid #eee}footer ul li{margin:0;padding:0;font-size:12px}footer .left{float:left;margin:0}footer .right{float:right;margin:0}footer .octicon-mark-github{position:absolute;left:50%;color:#ccc;height:24px;width:24px;margin-left:-12px;font-size:24px;line-height:1}footer a{color:#1875c6;text-decoration:none}ul.site-footer-links{padding:0 10px}ul.site-footer-links li{display:inline-block;margin-left:5px}ul.site-footer-links li:first-child{margin-left:0}@media screen and (max-width: 568px){ul.site-footer-links{display:none}}html,body{height:100%}body{font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;color:#5a5a5a;font-size:14px;line-height:1.6em}header,section,footer{float:left;width:100%;margin:0;padding:0}.content{padding:20px}.center{text-align:center}section.main{padding:30px 0 10px}.page{clear:both;min-height:100%;height:auto !important;height:100%;margin-bottom:-100px}footer,.push{margin:0;padding:20px 0 0;clear:both;position:relative}@media screen and (max-width: 380px){.page{margin-bottom:-154px}footer,.push{height:154px}}.trainer{overflow:hidden}.trainer .fifth .content{padding-right:0}.trainer .content{padding-top:10px;padding-bottom:20px}.trainer .avatar{width:160px;height:160px;border-radius:50%}@media screen and (max-width: 959px){.trainer .avatar{width:130px;height:130px}}@media screen and (max-width: 568px){.trainer .content,.trainer .fifth .content{padding:0 20px}.trainer{margin-bottom:30px}.trainer .testimonial{padding:0;margin:0}.trainer .social{display:block}}.main .trainer h3{margin:.5em 0 0;font-weight:300;font-size:1.8em}.trainer .social a{display:inline-block;position:relative;top:2px;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";filter:alpha(opacity=70);opacity:.7}.trainer .social a:hover{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1}.trainer .testimonial{margin-top:10px}p.more{margin-bottom:0}a{color:#00a5ea;text-decoration:none;-webkit-transition:all .25s;-moz-transition:all .25s;-o-transition:all .25s;-ms-transition:all .25s;transition:all .25s}a:hover{color:#0383c0}ul{padding-left:20px}.main h2{color:#333}.main h3{margin:0;color:#222;font-size:1.4em;font-weight:normal}.main h4{margin:0}.help-box p{margin-bottom:0}.resource-list{padding:0;list-style:none;margin-bottom:0}.resource{margin-bottom:30px;float:left;width:100%}.resource:last-child{margin-bottom:0}.resource h4,.resource p{margin:0}.class-list .class{margin:15px 0;padding:0;background:#F1F1F1;background:-webkit-linear-gradient(#fafafa, #f1f1f1);background:-moz-linear-gradient(#fafafa, #f1f1f1);background:-o-linear-gradient(#fafafa, #f1f1f1);background:-ms-linear-gradient(#fafafa, #f1f1f1);background:linear-gradient(#fafafa, #f1f1f1);border:1px solid #DDD;border-bottom:1px solid #CCC;border-radius:3px;box-shadow:inset 0 1px 0 white, 0 1px 5px #F1F1F1}.class h4{font-size:1.25em;font-weight:500;margin:.25em 0}.class .summary{padding:10px 12px}.class .details{padding:6px 12px;font-weight:bold;font-size:12px}.details .icon{position:relative;top:3px}.details span:first-child{margin-right:5px}.class .actions{float:right;text-align:center;margin-left:20px}.small-class .actions{margin-top:3px}.actions .cost{font-size:1em;font-weight:700;margin:0}p.register{text-align:right}.resource .container .summary{padding:20px;float:left}.resource img{border:3px solid #ccc;width:85%;max-width:200px;border-radius:3px}.video,.repo,.book,.other{margin:15px 0;background:#F1F1F1;background:-webkit-linear-gradient(#fafafa, #f1f1f1);background:-moz-linear-gradient(#fafafa, #f1f1f1);background:-o-linear-gradient(#fafafa, #f1f1f1);background:-ms-linear-gradient(#fafafa, #f1f1f1);background:linear-gradient(#fafafa, #f1f1f1);border:1px solid #DDD;border-bottom:1px solid #CCC;border-radius:3px;box-shadow:inset 0 1px 0 white, 0 1px 5px #F1F1F1}.resource h4{font-size:1.25em;font-weight:500;margin:.25em 0}.repo img,.class img{border:none;width:auto}.repo img{float:left;margin-right:8px;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";filter:alpha(opacity=70);opacity:.7;-webkit-transition:all .25s;-moz-transition:all .25s;-o-transition:all .25s;-ms-transition:all .25s;transition:all .25s}.repo:hover img{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1}.repo .summary{display:inline-block}.repo .name{font-size:1.2em;margin:.15em 0}.book img{max-width:120px}.tab-panel{background:#fff;position:block;margin:30px auto 0 auto;height:3em;width:360px;position:relative}.tab-panel label{background:#f5f5f5;-webkit-transition:background 250ms ease-in-out}.tab-panel label:hover{background:#fff}.tab-panel .column-2up{width:50%}.tab-panel .column-3up{width:33%}.tab-panel .column-4up{width:25%}.tab-panel .tab{float:left;box-shadow:0 0 0 1px #dfdfdf}.tab-panel .tab.first{border-top-left-radius:5px;border-bottom-left-radius:5px;border-right:none}.tab-panel .tab.last{border-top-right-radius:5px;border-bottom-right-radius:5px;border-left:none}.tab-panel .tab>span{display:block;text-align:center;margin:10px;font-size:80%}.tab-panel .panel-content{width:200%;visibility:hidden;position:absolute;left:-50%;-webkit-transition:opacity 400ms;transition:opacity 400ms}.tab-panel .panel-content .octicon-hero{display:inline-block;padding:0 10px;color:#ddd}.tab-panel .panel-content p{font-size:80%;text-align:center;margin:20px 0;font-weight:200}.tab-panel .panel-content ul{text-align:center}.tab-panel .panel-content li{display:inline-block}.tab-panel input.material-type{position:absolute;left:-999px}.tab-panel input.material-type:checked+label{background:#00a5ea}.tab-panel input.material-type:checked+label>span{color:#fff;opacity:1}.tab-panel input.material-type:checked+label.tab>div.panel-content{visibility:visible}@media screen and (max-width: 568px){.video,.book,.other{text-align:center}}@media screen and (max-width: 320px){.repo img{width:16px;height:16px;margin-top:6px}.repo .name{font-size:1em}}.pres-wrapper{padding-right:10px}.pres-wrapper .container{background:#F1F1F1;background:-webkit-linear-gradient(#fafafa, #f1f1f1);background:-moz-linear-gradient(#fafafa, #f1f1f1);background:-o-linear-gradient(#fafafa, #f1f1f1);background:-ms-linear-gradient(#fafafa, #f1f1f1);background:linear-gradient(#fafafa, #f1f1f1);border:1px solid #DDD;border-bottom:1px solid #CCC;border-radius:3px;box-shadow:inset 0 1px 0 white, 0 1px 5px #F1F1F1}.pres-wrapper .container .inner-padding{padding:10px 12px}.pres-wrapper .inner-padding img{width:95%}@media screen and (min-width: 361px) and (max-width: 568px){.pres-wrapper .inner-padding img{width:36%;float:left;margin:0 10px 10px 0}.pres-wrapper .inner-padding h4{margin-top:5px}}@media screen and (max-width: 360px){.pres-wrapper .inner-padding{text-align:center}}.contact .main{padding-top:10px}@media screen and (max-width: 480px){.email-button{font-size:1.25em}.email-button img{width:24px;height:17px}.day{display:block}.class-list .class{text-align:center}.class .actions{float:none;margin:0;text-align:center}p.register{text-align:center}.date:nth-child(n+2){border-top:solid 1px #ccc}}@media screen and (max-width: 480px){.email-button{font-weight:normal}}.try-git-banner{text-align:center;margin:20px 0;background-color:#EFEFEF;background-image:-o-linear-gradient(#efefef, #fcfcfc);background-image:-moz-linear-gradient(#efefef, #fcfcfc);background-image:-webkit-linear-gradient(#efefef, #fcfcfc);background-image:-ms-linear-gradient(#efefef, #fcfcfc);background-image:linear-gradient(#efefef, #fcfcfc);-moz-box-shadow:inset 0px 1px 5px 0 rgba(0,0,0,0.2);-webkit-box-shadow:inset 0px 1px 5px 0 rgba(0,0,0,0.2);box-shadow:inset 0px 1px 5px 0 rgba(0,0,0,0.2)}.try-git-banner span,.try-git-banner a{padding:5px 12px;line-height:32px}.try-git-banner span{color:#666;text-shadow:0 1px 0 #FFFFFF}.try-git-banner a{margin:0 0 10px}.try-git-banner img{vertical-align:middle}@media screen and (min-width: 460px){.try-git-banner span,.try-git-banner a{font-size:21px}}@media screen and (max-width: 568px){.container .content.try-git-banner{margin:10px 0}}@media screen and (min-width: 768px){.try-git-banner a{margin:0;font-size:18px}}@media screen and (min-width: 960px){.try-git-banner{border-radius:5px}.try-git-banner span{font-size:28px}.try-git-banner a{font-size:21px}}.align-left{text-align:left}.align-right{text-align:right}.align-center{text-align:center} diff --git a/_stylesheets/page.scss b/_stylesheets/page.scss index 769961e1f..5e9b58f6c 100644 --- a/_stylesheets/page.scss +++ b/_stylesheets/page.scss @@ -1,6 +1,553 @@ /* Imports */ @import "variables.scss"; -@import "reset.scss"; +// @import "reset.scss"; @import "core.scss"; @import "footer.scss"; @import "octicons.css"; +// @import "responsive.scss"; + +/* V1.0 Artifacts */ +@import "normalize.css"; +@import "grid.css"; +@import "general.scss"; +@import "header.css"; +@import "hero.css"; +@import "testimonials.css"; +@import "subpage-list.css"; + +/* Trainers */ + +.trainer { + overflow: hidden; +} + +.trainer .fifth .content { + padding-right: 0; +} + +.trainer .content { + padding-top: 10px; + padding-bottom: 20px; +} + +.trainer .avatar { + width: 160px; + height: 160px; + border-radius: 50%; +} + +@media screen and (max-width: 959px){ + .trainer .avatar { + width: 130px; + height: 130px; + } +} + +@media screen and (max-width: 568px){ + .trainer .content, + .trainer .fifth .content { + padding: 0 20px; + } + .trainer { + margin-bottom: 30px; + } + .trainer .testimonial { + padding: 0; + margin: 0; + } + .trainer .social { + display: block; + } +} + +.main .trainer h3 { + margin: .5em 0 0; + font-weight: 300; + font-size: 1.8em; +} + +.trainer .social a { + display: inline-block; + position: relative; + top: 2px; + -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; + filter: alpha(opacity=70); + opacity: .7; +} + +.trainer .social a:hover { + -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + filter: alpha(opacity=100); + opacity: 1; +} + +.trainer .testimonial { + margin-top: 10px; +} + +/* HTML Elements */ + +p.more { + margin-bottom: 0; +} + +a { + color: #00a5ea; + text-decoration: none; + -webkit-transition: all .25s; + -moz-transition: all .25s; + -o-transition: all .25s; + -ms-transition: all .25s; + transition: all .25s; +} + +a:hover { + color: #0383c0; +} + +ul { + padding-left: 20px; +} + +.main h2 { + color: #333; +} + +.main h3 { + margin: 0; + color: $mono-dark; + font-size: 1.4em; + font-weight: normal; +} + +.main h4 { + margin: 0; +} + +/* Classes and resources */ + +.help-box p { + margin-bottom: 0; +} + +.resource-list { + padding: 0; + list-style: none; + margin-bottom: 0; +} + +.resource { + margin-bottom: 30px; + float: left; + width: 100%; + + &:last-child { + margin-bottom: 0; + } + + h4, p { + margin: 0; + } +} + +.class-list .class { + margin: 15px 0; + padding: 0; + background: #F1F1F1; + background: -webkit-linear-gradient(#FAFAFA, #F1F1F1); + background: -moz-linear-gradient(#FAFAFA, #F1F1F1); + background: -o-linear-gradient(#FAFAFA, #F1F1F1); + background: -ms-linear-gradient(#FAFAFA, #F1F1F1); + background: linear-gradient(#FAFAFA, #F1F1F1); + border: 1px solid #DDD; + border-bottom: 1px solid #CCC; + border-radius: 3px; + box-shadow: inset 0 1px 0 white, 0 1px 5px #F1F1F1; +} + +.class h4 { + font-size: 1.25em; + font-weight: 500; + margin: .25em 0; +} + + +.class .summary { + padding: 10px 12px; +} + +.class .details { + padding: 6px 12px; + font-weight: bold; + font-size: 12px; +} + +.details .icon { + position: relative; + top: 3px; +} + +.details span { + &:first-child{ + margin-right: 5px; + } +} + +.class .actions { + float: right; + text-align: center; + margin-left: 20px; +} + +.small-class .actions { + margin-top: 3px; +} + +.actions .cost { + font-size: 1em; + font-weight: 700; + margin: 0; +} + +p.register { + text-align: right; +} + + +.resource .container .summary{ + padding: 20px; + float: left; +} +.resource img { + border: 3px solid #ccc; + width: 85%; + max-width: 200px; + border-radius: 3px; +} + +.video, .repo, .book, .other { + margin: 15px 0; + // padding: 10px 12px; + background: #F1F1F1; + background: -webkit-linear-gradient(#FAFAFA, #F1F1F1); + background: -moz-linear-gradient(#FAFAFA, #F1F1F1); + background: -o-linear-gradient(#FAFAFA, #F1F1F1); + background: -ms-linear-gradient(#FAFAFA, #F1F1F1); + background: linear-gradient(#FAFAFA, #F1F1F1); + border: 1px solid #DDD; + border-bottom: 1px solid #CCC; + border-radius: 3px; + box-shadow: inset 0 1px 0 white, 0 1px 5px #F1F1F1; +} + +.resource h4 { + font-size: 1.25em; + font-weight: 500; + margin: .25em 0; +} + +.repo img, .class img { + border: none; + width: auto; +} + +.repo img { + float: left; + margin-right: 8px; + -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; + filter: alpha(opacity=70); + opacity: .7; + -webkit-transition: all .25s; + -moz-transition: all .25s; + -o-transition: all .25s; + -ms-transition: all .25s; + transition: all .25s; +} + +.repo:hover img { + -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + filter: alpha(opacity=100); + opacity: 1; +} + +.repo .summary { + display: inline-block; + // width: 80%; +} + +.repo .name { + font-size: 1.2em; + margin: .15em 0; +} + +.book img { + max-width: 120px; +} + +.tab-panel{ + background: #fff; + position: block; + margin: 30px auto 0 auto; + height: 3em; + width: 360px; + position: relative; + + label{ + background: #f5f5f5; + -webkit-transition: background 250ms ease-in-out; + + &:hover{ + background: #fff; + } + } + + .column-2up{ + width: 50%; + } + .column-3up{ + width: 33%; + } + .column-4up{ + width: 25%; + } + + .tab{ + float: left; + box-shadow: 0 0 0 1px #dfdfdf; + + &.first{ + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + border-right: none; + } + &.last{ + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + border-left: none; + } + & > span{ + display: block; + text-align: center; + margin: 10px; + font-size: 80%; + } + } + + .panel-content{ + width: 200%; + visibility: hidden; + position: absolute; + left: -50%; + + -webkit-transition: opacity 400ms; + transition: opacity 400ms; + + .octicon-hero{ + display: inline-block; + padding: 0 10px; + color: #ddd; + } + p{ + font-size: 80%; + text-align: center; + margin: 20px 0; + font-weight: 200; + } + ul{ + text-align: center; + } + li{ + display: inline-block; + } + } + + input.material-type{ + position: absolute; + left: -999px; + + &:checked + label{ + background: $color-bright; + + & > span{ + color: #fff; + opacity: 1; + } + } + + &:checked + label.tab > div.panel-content{ + visibility: visible; + } + } +} + +@media screen and (max-width: 568px){ + .video, .book, .other { + text-align: center; + } +} + +@media screen and (max-width: 320px){ + .repo img { + width: 16px; + height: 16px; + margin-top: 6px; + } + .repo .name { + font-size: 1em; + } +} + +.pres-wrapper { + padding-right: 10px; +} + +.pres-wrapper .container { + background: #F1F1F1; + background: -webkit-linear-gradient(#FAFAFA, #F1F1F1); + background: -moz-linear-gradient(#FAFAFA, #F1F1F1); + background: -o-linear-gradient(#FAFAFA, #F1F1F1); + background: -ms-linear-gradient(#FAFAFA, #F1F1F1); + background: linear-gradient(#FAFAFA, #F1F1F1); + border: 1px solid #DDD; + border-bottom: 1px solid #CCC; + border-radius: 3px; + box-shadow: inset 0 1px 0 white, 0 1px 5px #F1F1F1; +} + +.pres-wrapper .container .inner-padding { + padding: 10px 12px; +} + +.pres-wrapper .inner-padding img { + width: 95%; +} + +@media screen and (min-width: 361px) and (max-width: 568px){ + .pres-wrapper .inner-padding img { + width: 36%; + float: left; + margin: 0 10px 10px 0; + } + .pres-wrapper .inner-padding h4 { + margin-top: 5px; + } +} + +@media screen and (max-width: 360px){ + .pres-wrapper .inner-padding { + text-align: center; + } +} + +/* Contact page */ + +.contact .main { + padding-top: 10px; +} + +@media screen and (max-width: 480px){ + .email-button { + font-size: 1.25em; + } + .email-button img { + width: 24px; + height: 17px; + } + + .day{ + display: block; + } + + .class-list .class{ + text-align: center; + } + + .class .actions{ + float: none; + margin: 0; + text-align: center; + } + + p.register{ + text-align: center; + } + + .date:nth-child(n+2){ + border-top: solid 1px #ccc; + } +} + +@media screen and (max-width: 480px){ + .email-button { + font-weight: normal; + } +} + +.try-git-banner { + text-align: center; + margin: 20px 0; + background-color: #EFEFEF; + background-image: -o-linear-gradient(#EFEFEF, #FCFCFC); + background-image: -moz-linear-gradient(#EFEFEF, #FCFCFC); + background-image: -webkit-linear-gradient(#EFEFEF, #FCFCFC); + background-image: -ms-linear-gradient(#EFEFEF, #FCFCFC); + background-image: linear-gradient(#EFEFEF, #FCFCFC); + -moz-box-shadow: inset 0px 1px 5px 0 rgba(0,0,0,.2); + -webkit-box-shadow: inset 0px 1px 5px 0 rgba(0,0,0,.2); + box-shadow: inset 0px 1px 5px 0 rgba(0,0,0,.2); +} + +.try-git-banner span, .try-git-banner a { + padding: 5px 12px; + line-height: 32px; +} + +.try-git-banner span { + color: #666; + text-shadow: 0 1px 0 #FFFFFF; +} + +.try-git-banner a { + margin: 0 0 10px; +} + +.try-git-banner img { + vertical-align: middle; +} + +@media screen and (min-width: 460px){ + .try-git-banner span, .try-git-banner a { + font-size: 21px; + } +} + +@media screen and (max-width: 568px){ + .container .content.try-git-banner { + margin: 10px 0; + } +} + +@media screen and (min-width: 768px){ + .try-git-banner a { + margin: 0; + font-size: 18px; + } +} + +@media screen and (min-width: 960px){ + .try-git-banner { + border-radius: 5px; + } + .try-git-banner span { + font-size: 28px; + } + .try-git-banner a { + font-size: 21px; + } +} + +/* Utility classes */ + +.align-left { text-align: left; } +.align-right { text-align: right; } +.align-center { text-align: center; } diff --git a/_stylesheets/responsive.scss b/_stylesheets/responsive.scss new file mode 100644 index 000000000..90712f890 --- /dev/null +++ b/_stylesheets/responsive.scss @@ -0,0 +1,87 @@ +@media screen and (max-width: 760px){ + .try-git-banner{ + display: none; + a{ + display: block; + } + } + .golden-small{ + text-align: center; + } + + .testimonial{ + display: none; + } +} + + +@media screen and (max-width: 960px){ + nav{ + width: 96%; + height: auto; + margin: 0 0 10px 0; + text-align: center; + height: auto; + overflow: hidden; + + hgroup{ + width: 202px; + float: none; + display: block; + text-align: center; + margin: 15px auto 0; + padding: 0; + } + ul{ + text-align: center; + width: 100%; + float: none; + height: auto; + + a{ + &:hover{ + border: none; + } + &.button{ + border-radius: 0; + width: 100%; + box-shadow: none; + margin: 0; + padding: 0; + &:hover{ + box-shadow: none; + } + } + } + } + .current a.button{ + border-bottom: solid 2px #ffffff; + } + } + + .hero{ + padding: 0; + display: none; + } + + section.main { + padding: 0px 0 10px; + } + + .container{ + width: 96%; + + .third{ + text-align: center; + } + } + + .class-list .class .actions{ + float: none; + margin: 0 0 15px; + } + + footer{ + display: none; + } +} diff --git a/_stylesheets/style.css b/_stylesheets/style.css new file mode 100644 index 000000000..05bcd17e2 --- /dev/null +++ b/_stylesheets/style.css @@ -0,0 +1,526 @@ +@import "normalize.css"; +@import "grid.css"; +@import "general.css"; +@import "header.css"; +@import "footer.css"; +@import "hero.css"; +@import "testimonials.css"; +@import "subpage-list.css"; + +/* Trainers */ + +.trainer { + overflow: hidden; +} + +.trainer .fifth .content { + padding-right: 0; +} + +.trainer .content { + padding-top: 10px; + padding-bottom: 20px; +} + +.trainer .avatar { + width: 160px; + height: 160px; + border-radius: 50%; +} + +@media screen and (max-width: 959px){ + .trainer .avatar { + width: 130px; + height: 130px; + } +} + +@media screen and (max-width: 568px){ + .trainer .content, + .trainer .fifth .content { + padding: 0 20px; + } + .trainer { + margin-bottom: 30px; + } + .trainer .testimonial { + padding: 0; + margin: 0; + } + .trainer .social { + display: block; + } +} + +.main .trainer h3 { + margin: .5em 0 0; + font-weight: 300; + font-size: 1.8em; +} + +.trainer .social a { + display: inline-block; + position: relative; + top: 2px; + -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; + filter: alpha(opacity=70); + opacity: .7; +} + +.trainer .social a:hover { + -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + filter: alpha(opacity=100); + opacity: 1; +} + +.trainer .testimonial { + margin-top: 10px; +} + +/* HTML Elements */ + +p.more { + margin-bottom: 0; +} + +a { + color: #00a5ea; + text-decoration: none; + -webkit-transition: all .25s; + -moz-transition: all .25s; + -o-transition: all .25s; + -ms-transition: all .25s; + transition: all .25s; +} + +a:hover { + color: #0383c0; +} + +ul { + padding-left: 20px; +} + +.main h2 { + color: #333; +} + +.main h3 { + margin: 0; + color: #333; + font-size: 1.2em; +} + +.main h4 { + margin: 0; +} + +/* Classes and resources */ + +.help-box p { + margin-bottom: 0; +} + +.resource-list { + padding: 0; + list-style: none; + margin-bottom: 0; +} + +.resource { + margin-bottom: 30px; +} + +.resource:last-child { + margin-bottom: 0; +} + +.resource h4, +.resource p { + margin: 0; +} + +.class-list .class { + margin: 15px 0; + padding: 0; + background: #F1F1F1; + background: -webkit-linear-gradient(#FAFAFA, #F1F1F1); + background: -moz-linear-gradient(#FAFAFA, #F1F1F1); + background: -o-linear-gradient(#FAFAFA, #F1F1F1); + background: -ms-linear-gradient(#FAFAFA, #F1F1F1); + background: linear-gradient(#FAFAFA, #F1F1F1); + border: 1px solid #DDD; + border-bottom: 1px solid #CCC; + border-radius: 3px; + text-shadow: 0 1px 0 white; + box-shadow: inset 0 1px 0 white, 0 1px 5px #F1F1F1; +} + +.class h4 { + font-size: 1.25em; + font-weight: 500; + margin: .25em 0; +} + + +.class .summary { + padding: 10px 12px; +} + +.class .details { + padding: 6px 12px; + font-weight: bold; + font-size: 12px; +} + +.details .icon { + position: relative; + top: 3px; +} + +.details span { + margin-right: 5px; +} + +.button { + border-radius: 3px; + padding: 0 10px 0 10px; + line-height: 24px; + display: inline-block; + background: #0acef2; + background: -webkit-linear-gradient(#0acef2, #059ce5); + background: -moz-linear-gradient(#0acef2, #059ce5); + background: -o-linear-gradient(#0acef2, #059ce5); + background: -ms-linear-gradient(#0acef2, #059ce5); + background: linear-gradient(#0acef2, #059ce5); + border: 1px solid #0071B9; + -webkit-box-shadow: 0 1px 0 #FFFFFF, inset 0 1px 0 rgba(255,255,255,.5); + box-shadow: 0 1px 0 #FFFFFF, inset 0 1px 0 rgba(255,255,255,.5); + color: #fff; + text-shadow: 0 -1px 0 rgba(0,0,0,.5); +} + +.button:hover { + color: #fff; + background: -webkit-linear-gradient(#07d7ff, #059ce5); +} + +.button:active { + position: relative; + top: 1px; +} + +.class .actions { + float: right; + text-align: center; + margin-left: 20px; +} + +.small-class .actions { + margin-top: 3px; +} + +.actions .cost { + font-size: 1em; + font-weight: 700; + margin: 0; +} + +p.register { + text-align: right; +} + + + +.resource img { + border: 3px solid #ccc; + width: 85%; + max-width: 200px; + border-radius: 3px; +} + +.video, .repo, .book, .other { + margin: 15px 0; + padding: 10px 12px; + background: #F1F1F1; + background: -webkit-linear-gradient(#FAFAFA, #F1F1F1); + background: -moz-linear-gradient(#FAFAFA, #F1F1F1); + background: -o-linear-gradient(#FAFAFA, #F1F1F1); + background: -ms-linear-gradient(#FAFAFA, #F1F1F1); + background: linear-gradient(#FAFAFA, #F1F1F1); + border: 1px solid #DDD; + border-bottom: 1px solid #CCC; + border-radius: 3px; + text-shadow: 0 1px 0 white; + box-shadow: inset 0 1px 0 white, 0 1px 5px #F1F1F1; +} + +.resource h4 { + font-size: 1.25em; + font-weight: 500; + margin: .25em 0; +} + +.repo img, .class img { + border: none; + width: auto; +} + +.repo img { + float: left; + margin-right: 8px; + -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; + filter: alpha(opacity=70); + opacity: .7; + -webkit-transition: all .25s; + -moz-transition: all .25s; + -o-transition: all .25s; + -ms-transition: all .25s; + transition: all .25s; +} + +.repo:hover img { + -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + filter: alpha(opacity=100); + opacity: 1; +} + +.repo .summary { + display: inline-block; + width: 80%; +} + +.repo .name { + font-size: 1.2em; + margin: .15em 0; +} + +.book img { + max-width: 120px; +} + +@media screen and (max-width: 568px){ + .video, .book, .other { + text-align: center; + } +} + +@media screen and (max-width: 320px){ + .repo img { + width: 16px; + height: 16px; + margin-top: 6px; + } + .repo .name { + font-size: 1em; + } +} + +.pres-wrapper { + padding-right: 10px; +} + +.pres-wrapper .container { + background: #F1F1F1; + background: -webkit-linear-gradient(#FAFAFA, #F1F1F1); + background: -moz-linear-gradient(#FAFAFA, #F1F1F1); + background: -o-linear-gradient(#FAFAFA, #F1F1F1); + background: -ms-linear-gradient(#FAFAFA, #F1F1F1); + background: linear-gradient(#FAFAFA, #F1F1F1); + border: 1px solid #DDD; + border-bottom: 1px solid #CCC; + border-radius: 3px; + text-shadow: 0 1px 0 white; + box-shadow: inset 0 1px 0 white, 0 1px 5px #F1F1F1; +} + +.pres-wrapper .container .inner-padding { + padding: 10px 12px; +} + +.pres-wrapper .inner-padding img { + width: 95%; +} + +@media screen and (min-width: 361px) and (max-width: 568px){ + .pres-wrapper .inner-padding img { + width: 36%; + float: left; + margin: 0 10px 10px 0; + } + .pres-wrapper .inner-padding h4 { + margin-top: 5px; + } +} + +@media screen and (max-width: 360px){ + .pres-wrapper .inner-padding { + text-align: center; + } +} + +/* Contact page */ + +.contact .main { + padding-top: 10px; +} + +.email-button { + display: inline-block; + padding: .5em .8em .6em; + border-radius: 5px; + font-size: 1.8em; + font-weight: 300; + background: #0acef2; + background: -webkit-linear-gradient(#0acef2, #059ce5); + background: -moz-linear-gradient(#0acef2, #059ce5); + background: -o-linear-gradient(#0acef2, #059ce5); + background: -ms-linear-gradient(#0acef2, #059ce5); + background: linear-gradient(#0acef2, #059ce5); + border: 1px solid #0071B9; + -webkit-box-shadow: 0 1px 0 #FFFFFF, inset 0 1px 0 rgba(255,255,255,.5); + box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.5); + color: #fff; + text-shadow: 0 -1px 0 rgba(0,0,0,.5); + -webkit-animation-name: buttonglow; + -moz-animation-name: buttonglow; + -ms-animation-name: buttonglow; + -o-animation-name: buttonglow; + animation-name: buttonglow; + -webkit-animation-duration: 3s; + -webkit-animation-iteration-count: infinite; + -moz-animation-iteration-count: infinite; + -ms-animation-iteration-count: infinite; + -o-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} + +@-webkit-keyframes buttonglow { + from { -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.5); } + 36% { -webkit-box-shadow: 0 0 20px #00b1ff, inset 0 1px 0 rgba(255,255,255,.5); } + to { -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.5); } +} + +.email-button:hover { + color: #fff; + background: -webkit-linear-gradient(#07d7ff, #059ce5); +} + +.email-button:active { + position: relative; + top: 1px; +} + +.email-button img { + position: relative; + top: 2px; + left: -3px; + margin-right: 8px; +} + +@media screen and (max-width: 480px){ + .email-button { + font-size: 1.25em; + } + .email-button img { + width: 24px; + height: 17px; + } + + .day{ + display: block; + } + + .class-list .class{ + text-align: center; + } + + .class .actions{ + float: none; + margin: 0; + text-align: center; + } + + p.register{ + text-align: center; + } + + .date:nth-child(n+2){ + border-top: solid 1px #ccc; + } +} + +@media screen and (max-width: 480px){ + .email-button { + font-weight: normal; + } +} + +.try-git-banner { + text-align: center; + margin: 20px 0; + background-color: #EFEFEF; + background-image: -o-linear-gradient(#EFEFEF, #FCFCFC); + background-image: -moz-linear-gradient(#EFEFEF, #FCFCFC); + background-image: -webkit-linear-gradient(#EFEFEF, #FCFCFC); + background-image: -ms-linear-gradient(#EFEFEF, #FCFCFC); + background-image: linear-gradient(#EFEFEF, #FCFCFC); + -moz-box-shadow: inset 0px 1px 5px 0 rgba(0,0,0,.2); + -webkit-box-shadow: inset 0px 1px 5px 0 rgba(0,0,0,.2); + box-shadow: inset 0px 1px 5px 0 rgba(0,0,0,.2); +} + +.try-git-banner span, .try-git-banner a { + padding: 5px 12px; + line-height: 32px; +} + +.try-git-banner span { + color: #666; + text-shadow: 0 1px 0 #FFFFFF; +} + +.try-git-banner a { + margin: 0 0 10px; +} + +.try-git-banner img { + vertical-align: middle; +} + +@media screen and (min-width: 460px){ + .try-git-banner span, .try-git-banner a { + font-size: 21px; + } +} + +@media screen and (max-width: 568px){ + .container .content.try-git-banner { + margin: 10px 0; + } +} + +@media screen and (min-width: 768px){ + .try-git-banner a { + margin: 0; + font-size: 18px; + } +} + +@media screen and (min-width: 960px){ + .try-git-banner { + border-radius: 5px; + } + .try-git-banner span { + font-size: 28px; + } + .try-git-banner a { + font-size: 21px; + } +} + +/* Utility classes */ + +.align-left { text-align: left; } +.align-right { text-align: right; } +.align-center { text-align: center; } diff --git a/_stylesheets/variables.scss b/_stylesheets/variables.scss index c67a7e13b..d9be9a97e 100644 --- a/_stylesheets/variables.scss +++ b/_stylesheets/variables.scss @@ -3,10 +3,11 @@ $color-dark: #1875c6; $color-bright: #00a5ea; $mono-dark: #222222; $mono-light: #E8E8EA; +$mono-medium: #5a5a5a; $mono-bright: #ffffff; $color-mild: #56c7e3; $color-medium: #53cda4; $color-hot: #99d487; -$width-desktop: 930px; +$width-desktop: 960px; diff --git a/_stylesheets/workbook.css b/_stylesheets/workbook.css index ab8447839..455eae7c4 100644 --- a/_stylesheets/workbook.css +++ b/_stylesheets/workbook.css @@ -1 +1 @@ -.outline h2+p,.outline h2+p ~ p,.outline h2+p ~ blockquote,.outline h2+p ~ ul,.outline h2+p ~ pre,.outline h2+p ~ h3{display:none}.outline h3{display:none}.outline h3+*,.outline h3>*{display:none}.outline h4{display:none}.outline h4+*,.outline h4>*{display:none}.outline pre{display:none}.outline p{display:none}.outline ul{display:none}.outline table{display:none}.summary h3{display:none}.summary h4{display:none}.summary h4+*,.summary h4>*{display:none}.summary h4+p+ul{display:none}.summary pre{display:none}.summary p{display:none}.summary table{display:none}.details h3{display:none}.details h4{display:none}.hero{background:#1875c6;color:#fff}.hero .octicon{color:#fff;background:rgba(0,0,0,0.15);border-radius:50%;height:1em;width:1em;padding:16px;margin-right:20px;font-size:26px;text-align:center;float:left}.booklink,.githublink,.weblink,.videolink{font:normal normal 1em octicons;text-decoration:none;color:#1875c6}.booklink:hover,.githublink:hover,.weblink:hover,.videolink:hover{color:#00a5ea}.booklink:before{content:"\f007";margin-right:5px}.githublink:before{content:"\f008";margin-right:5px}.weblink:before{content:"\f0b6";margin-right:5px}.videolink:before{content:"\f0b9";margin-right:5px}h2{padding-top:15px}h2:before{padding:5px;color:#CCCCCC;content:"\f078";font:normal normal 40px octicons}pre{padding-top:10px;padding-bottom:10px;margin-top:10px;margin-bottom:10px;margin-left:25px;overflow:auto;word-wrap:normal;white-space:pre}pre:before{content:"\f0c8";font:normal normal 32px octicons;float:right;font-size:50px;opacity:.4}ul{padding-top:10px;padding-bottom:10px;margin-left:40px}p{text-indent:5px;margin-left:30px;margin-bottom:20px}blockquote{width:80%;line-height:140%;margin:30px 10%;text-align:justify}blockquote:before{content:"\f063";font:normal normal 32px octicons;position:absolute;font-size:76px;opacity:.1;left:0;margin-top:-.5em}blockquote:after{content:"\f063";font:normal normal 32px octicons;position:absolute;font-size:76px;opacity:.1;right:0;margin-top:-.25em;-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg)} +.outline h2+p,.outline h2+p ~ p,.outline h2+p ~ blockquote,.outline h2+p ~ ul,.outline h2+p ~ pre,.outline h2+p ~ h3{display:none}.outline h3{display:none}.outline h3+*,.outline h3>*{display:none}.outline h4{display:none}.outline h4+*,.outline h4>*{display:none}.outline pre{display:none}.outline p{display:none}.outline ul{display:none}.outline table{display:none}.summary h3{display:none}.summary h4{display:none}.summary h4+*,.summary h4>*{display:none}.summary h4+p+ul{display:none}.summary pre{display:none}.summary p{display:none}.summary table{display:none}.details h3{display:none}.details h4{display:none}.details table th,.details table td{padding:10px}.booklink,.githublink,.weblink,.videolink{font:normal normal 1em octicons;text-decoration:none;color:#1875c6}.booklink:hover,.githublink:hover,.weblink:hover,.videolink:hover{color:#00a5ea}.booklink:before{content:"\f007";margin-right:5px}.githublink:before{content:"\f008";margin-right:5px}.weblink:before{content:"\f0b6";margin-right:5px}.videolink:before{content:"\f0b9";margin-right:5px}.summary h2:before,.outline h2:before,.details h2:before{padding:5px;color:#CCCCCC;content:"\f078";font:normal normal 20px octicons}table,pre{background:#e8e8ea;padding:20px;display:block}pre{padding-top:10px;padding-bottom:10px;margin-top:10px;margin-bottom:10px;width:auto;overflow:auto;word-wrap:normal;white-space:pre}pre:before{content:"\f0c8";font:normal normal 22px octicons;float:right;opacity:.4}ul{padding-top:10px;padding-bottom:10px;margin-left:40px}p{text-indent:5px;margin-left:30px;margin-bottom:20px}blockquote{width:80%;line-height:140%;margin:30px 10%;text-align:justify}blockquote:before{content:"\f063";font:normal normal 32px octicons;position:absolute;font-size:76px;opacity:.1;left:0;margin-top:-.5em}blockquote:after{content:"\f063";font:normal normal 32px octicons;position:absolute;font-size:76px;opacity:.1;right:0;margin-top:-.25em;-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg)} diff --git a/_stylesheets/workbook.scss b/_stylesheets/workbook.scss index c36037f8d..637e57df8 100644 --- a/_stylesheets/workbook.scss +++ b/_stylesheets/workbook.scss @@ -19,6 +19,7 @@ @include hidden; } } + h3{ display: none; @@ -90,23 +91,10 @@ h4{ display: none; } -} - -.hero{ - background: $color-dark; - color: #fff; - - .octicon{ - color: #fff; - background: rgba(0,0,0,.15); - border-radius: 50%; - height: 1em; - width: 1em; - padding: 16px; - margin-right: 20px; - font-size: 26px; - text-align: center; - float: left; + table{ + th, td{ + padding: 10px; + } } } @@ -149,14 +137,19 @@ } -h2{ - padding-top: 15px; +.summary, .outline, .details{ + h2:before{ + padding: 5px; + color: #CCCCCC; + content: "\f078"; + font: normal normal 20px octicons; + } } -h2:before{ - padding: 5px; - color: #CCCCCC; - content: "\f078"; - font: normal normal 40px octicons; + +table, pre{ + background: $mono-light; + padding: 20px; + display: block; } pre{ @@ -164,7 +157,7 @@ pre{ padding-bottom: 10px; margin-top: 10px; margin-bottom: 10px; - margin-left: 25px; + width: auto; /* To ensure scrolling of long code lines */ overflow: auto; @@ -174,9 +167,8 @@ pre{ pre:before { content: "\f0c8"; - font: normal normal 32px octicons; + font: normal normal 22px octicons; float: right; - font-size: 50px; opacity: .4; } diff --git a/images/gh-training-logo-1x.png b/images/gh-training-logo-1x.png new file mode 100644 index 000000000..abf87a39c Binary files /dev/null and b/images/gh-training-logo-1x.png differ diff --git a/images/gh-training-logo-2x.png b/images/gh-training-logo-2x.png new file mode 100644 index 000000000..0923cdde3 Binary files /dev/null and b/images/gh-training-logo-2x.png differ diff --git a/images/screen-shot-slidedeck.png b/images/screen-shot-slidedeck.png new file mode 100644 index 000000000..3fd8d763a Binary files /dev/null and b/images/screen-shot-slidedeck.png differ diff --git a/index.html b/index.html index eca344db3..2c998f511 100644 --- a/index.html +++ b/index.html @@ -5,141 +5,122 @@ description: Open source kit for teaching GitHub and Git skills. --- -