diff --git a/source/stylesheets/_variables.scss b/source/stylesheets/_variables.scss index b518e86..6d01b56 100644 --- a/source/stylesheets/_variables.scss +++ b/source/stylesheets/_variables.scss @@ -28,7 +28,7 @@ $examples-bg: #393939 !default; $code-bg: #292929 !default; $code-annotation-bg: #1c1c1c !default; $nav-subitem-bg: #262626 !default; -$nav-active-bg: #2467af !default; +$nav-active-bg: #0F75D4 !default; $lang-select-border: #000 !default; $lang-select-bg: #222 !default; $lang-select-active-bg: $examples-bg !default; // feel free to change this to blue or something @@ -86,11 +86,7 @@ $phone-width: $tablet-width - $nav-width !default; // min width before reverting // OTHER //////////////////// -$nav-active-shadow: #000 !default; $nav-footer-border-color: #666 !default; -$nav-embossed-border-top: #000 !default; -$nav-embossed-border-bottom: #939393 !default; -$main-embossed-text-shadow: 0px 1px 0px #fff !default; $search-box-border-color: #666 !default; diff --git a/source/stylesheets/screen.css.scss b/source/stylesheets/screen.css.scss index 0287e6f..02516a4 100644 --- a/source/stylesheets/screen.css.scss +++ b/source/stylesheets/screen.css.scss @@ -46,15 +46,6 @@ html, body { width: 20px; } -@mixin embossed-bg { - background: - linear-gradient(to bottom, rgba(#000, 0.2), rgba(#000, 0) 8px), - linear-gradient(to top, rgba(#000, 0.2), rgba(#000, 0) 8px), - linear-gradient(to bottom, rgba($nav-embossed-border-top, 1), rgba($nav-embossed-border-top, 0) 1.5px), - linear-gradient(to top, rgba($nav-embossed-border-bottom, 1), rgba($nav-embossed-border-bottom, 0) 1.5px), - $nav-subitem-bg; -} - .toc-wrapper { transition: left 0.3s ease-in-out; @@ -123,13 +114,12 @@ html, body { transition-property: height, margin; transition-duration: 180ms; transition-timing-function: ease-in-out; + background: $nav-subitem-bg; &.visible { height: 30%; margin-bottom: 1em; } - @include embossed-bg; - li { margin: 1em $nav-padding; line-height: 1; @@ -156,9 +146,15 @@ html, body { line-height: 28px; } + li { + color: $nav-text; + transition-property: background; + transition-timing-function: linear; + transition-duration: 200ms; + } + // This is the currently selected ToC entry .toc-link.active { - box-shadow: 0px 1px 0px $nav-active-shadow; background-color: $nav-active-bg; color: $nav-active-text; } @@ -167,12 +163,6 @@ html, body { display: none; background-color: $nav-subitem-bg; font-weight: 500; - - // for embossed look: - @include embossed-bg; - &>li:last-child { - box-shadow: none; // otherwise it'll overflow out of the subheader - } } .toc-h2 { @@ -337,7 +327,6 @@ html, body { padding: 0 $main-padding; box-sizing: border-box; display: block; - text-shadow: $main-embossed-text-shadow; @extend %left-col; } @@ -353,14 +342,14 @@ html, body { h1 { @extend %header-font; - font-size: 30px; + font-size: 25px; padding-top: 0.5em; padding-bottom: 0.5em; border-bottom: 1px solid #ccc; margin-bottom: $h1-margin-bottom; margin-top: 2em; border-top: 1px solid #ddd; - background-image: linear-gradient(to bottom, #fff, #f9f9f9); + background-image: linear-gradient(to bottom, #fff, #fbfbfb); } h1:first-child, div:first-child + h1 { @@ -370,13 +359,13 @@ html, body { h2 { @extend %header-font; - font-size: 20px; + font-size: 19px; margin-top: 4em; margin-bottom: 0; border-top: 1px solid #ccc; padding-top: 1.2em; padding-bottom: 1.2em; - background-image: linear-gradient(to bottom, rgba(#fff, 0.4), rgba(#fff, 0)); + background-image: linear-gradient(to bottom, rgba(#fff, 0.2), rgba(#fff, 0)); } // h2s right after h1s should bump right up @@ -468,7 +457,6 @@ html, body { aside { padding-top: 1em; padding-bottom: 1em; - text-shadow: 0 1px 0 lighten($aside-notice-bg, 15%); margin-top: 1.5em; margin-bottom: 1.5em; background: $aside-notice-bg; @@ -476,12 +464,10 @@ html, body { &.warning { background-color: $aside-warning-bg; - text-shadow: 0 1px 0 lighten($aside-warning-bg, 15%); } &.success { background-color: $aside-success-bg; - text-shadow: 0 1px 0 lighten($aside-success-bg, 15%); } } @@ -508,7 +494,6 @@ html, body { margin: -2px; border-radius: 4px; border: 1px solid #F7E633; - text-shadow: 1px 1px 0 #666; background: linear-gradient(to top left, #F7E633 0%, #F1D32F 100%); } } @@ -523,7 +508,6 @@ html, body { background-color: $code-bg; color: #fff; - padding: 2em $main-padding; margin: 0; width: $examples-width; @@ -531,7 +515,6 @@ html, body { clear:right; box-sizing: border-box; - text-shadow: 0px 1px 2px rgba(0,0,0,0.4); @extend %right-col; @@ -546,16 +529,16 @@ html, body { pre { @extend %code-font; + padding-top: 2em; + padding-bottom: 2em; + padding: 2em $main-padding; } blockquote { &>p { background-color: $code-annotation-bg; - border-radius: 5px; - padding: $code-annotation-padding; - color: #ccc; - border-top: 1px solid #000; - border-bottom: 1px solid #404040; + padding: $code-annotation-padding 2em; + color: #eee; } } }