diff --git a/sass/_button.scss b/sass/_button.scss index 519a70c..af76f13 100644 --- a/sass/_button.scss +++ b/sass/_button.scss @@ -25,6 +25,7 @@ // use .btn on any element to give it the styling of a button .btn { @extend %no-underline; + @extend outline-0; @include btn-style(#999, #888, #777); border: 0; border-radius: 10px; // rounded corners @@ -32,8 +33,7 @@ cursor: pointer; display: inline-block; // Enables non-inline-block elements like s to be buttons font-size: 2.5em; - margin: .3em .2em 0 0; - outline: 0; // when the button is focused, don't show an outline + margin: .2em .3em .2em 0; padding: 15px 40px 16px; } diff --git a/sass/_general.scss b/sass/_general.scss index 62b1050..4a91f74 100644 --- a/sass/_general.scss +++ b/sass/_general.scss @@ -27,9 +27,9 @@ body, textarea { // shared styling between btn and links in nav bars -%nav-btn-shared { +%outline-0 { outline: 0; - // when button or navbar is focused don't show an outline + // when button or nav bar is focused don't show an outline } %no-underline { diff --git a/sass/_navbar.scss b/sass/_navbar.scss index 9a313c9..deb9d9f 100644 --- a/sass/_navbar.scss +++ b/sass/_navbar.scss @@ -14,54 +14,43 @@ .nav { @extend %nav-global; height: 1.5em; - line-height: 1.5em; - // max-height: 1.5em; // needed for animations, uncomment to use padding: .7em 0 .95em; + // max-height: 1.5em; // needed for animations, uncomment to use a { @extend %no-underline; + @extend %nav-global; color: #aaa; font-size: 14px; padding-right: 1em; - - &:hover { - color: #fff; - } + position: relative; + top: -1px; } .pagename { - color: #fff; + @extend %nav-global; font-size: 22px; - position: relative; top: 1px; } .current { - color: #fff; - } - - input, .btn { - margin-top: -20px; - // This ensures that any buttons and inputs in the - // .nav will not mess up its vertical alignment + @extend %nav-global; } } - -.btn-close { +.btn.btn-close { @extend %nav-global; - border: 0; float: right; font-size: 25px; - margin-top: -44px; + margin-top: -54px; visibility: hidden; } // Update styling of .nav for small screens -@media(max-width:500px) { - .btn-close { +@media (max-width:500px) { + .btn.btn-close { visibility: visible; } @@ -77,18 +66,15 @@ height: auto; } - &:before { + & div:before { background: #000; border-bottom: 10px double; content: '_'; float: right; - font-size: 32px; - font-weight: bold; + font: bold 32px/0 sans-serif; // bold, 32px sans-serif text with a line-height of zero height: 21px; - line-height: 0; - margin-right: 10px; - margin-top: -10px; position: relative; + top: 1px; } a {