From 20ad0d60d5a35dfc9162542466847dfbf1f9e539 Mon Sep 17 00:00:00 2001 From: JT Date: Tue, 8 Apr 2014 19:44:14 -0700 Subject: [PATCH] responsive cleanup --- website/source/layouts/_footer.erb | 6 +- website/source/layouts/_header.erb | 6 +- website/source/stylesheets/_buttons.less | 29 ++++++ website/source/stylesheets/_docs.less | 41 ++++++-- website/source/stylesheets/_global.less | 2 + website/source/stylesheets/_header.less | 23 ++++- website/source/stylesheets/_home.less | 6 +- website/source/stylesheets/_jumbotron.less | 18 ++-- website/source/stylesheets/_variables.less | 2 +- website/source/stylesheets/main.css | 109 ++++++++++++++++----- 10 files changed, 189 insertions(+), 53 deletions(-) diff --git a/website/source/layouts/_footer.erb b/website/source/layouts/_footer.erb index bb5c3e0acc..618e5a1e0b 100644 --- a/website/source/layouts/_footer.erb +++ b/website/source/layouts/_footer.erb @@ -2,9 +2,9 @@
    diff --git a/website/source/layouts/_header.erb b/website/source/layouts/_header.erb index 7e9f7eba96..fbc819216f 100644 --- a/website/source/layouts/_header.erb +++ b/website/source/layouts/_header.erb @@ -61,9 +61,9 @@
diff --git a/website/source/stylesheets/_buttons.less b/website/source/stylesheets/_buttons.less index 2c9d948c78..504158262d 100755 --- a/website/source/stylesheets/_buttons.less +++ b/website/source/stylesheets/_buttons.less @@ -25,3 +25,32 @@ } } } + +//dot animation on header main nav link hover +.li-under a::after { + position: absolute; + top: 68%; + left: 50%; + margin-left: -4px; + width: 8px; + height: 8px; + background-color: @white; + border-radius: 4px; + content: ''; + opacity: 0; + text-decoration: none; + -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s; + -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s; + transition: height 0.3s, opacity 0.3s, transform 0.3s; + -webkit-transform: translateY(-10px); + -moz-transform: translateY(-10px); + transform: translateY(-10px); +} + +.li-under a:hover::after, +.li-under a:focus::after { + opacity: .5; + -webkit-transform: translateY(0px); + -moz-transform: translateY(0px); + transform: translateY(0px); +} diff --git a/website/source/stylesheets/_docs.less b/website/source/stylesheets/_docs.less index 6d4a1d2358..946f140fe3 100755 --- a/website/source/stylesheets/_docs.less +++ b/website/source/stylesheets/_docs.less @@ -31,6 +31,8 @@ body.layout-intro{ } .docs-sidebar{ + position: relative; + z-index: 20; margin-bottom: 30px; margin-top: 50px; margin-right: 4%; @@ -38,7 +40,7 @@ body.layout-intro{ border-radius: @el-border-radius; a{ - color: @black; + color: @purple; } .docs-sidenav{ @@ -54,13 +56,14 @@ body.layout-intro{ position: relative; > a{ + color: @purple; .transition( color 0.5s ease ); } > a:hover, > a:focus { background-color: transparent !important; - color: @red-dark; + color: @black; .transition( color 0.5s ease ); } } @@ -69,7 +72,15 @@ body.layout-intro{ > li { padding: 10px 0; margin: 0 30px; - border-bottom: 1px solid #fff; + border-bottom: 2px solid #fff; + + >.nav{ + li{ + a{ + color: @black; + } + } + } &.active { &:before{ @@ -77,26 +88,25 @@ body.layout-intro{ position: absolute; width: 8px; height: 8px; - background-color: @red; + background-color: @purple; border-radius: 4px; top: 26px; left: -10px; } > a{ - font-weight: @font-weight-museo-xb; -webkit-font-smoothing: antialiased; } - > a:hover, + /*> a:hover, > a:focus { - color: @black; - } + font-weight: @font-weight-museo-xb; + }*/ .nav { display: block; li.active a { - color: @red; + font-weight: @font-weight-museo-xb; } } } @@ -154,13 +164,15 @@ body.layout-intro{ } a{ - color: @red-darker; + color: @purple; &:hover{ text-decoration: underline; } } h1{ + color: @purple; + text-transform: uppercase; padding-bottom: 24px; margin-top: 40px; margin-bottom: 24px; @@ -190,3 +202,12 @@ body.layout-intro{ } } } + +@media (max-width: 480px) { + .bs-docs-section{ + h1{ + font-size: 32px; + } + } +} + diff --git a/website/source/stylesheets/_global.less b/website/source/stylesheets/_global.less index f319371275..c3dec93f77 100755 --- a/website/source/stylesheets/_global.less +++ b/website/source/stylesheets/_global.less @@ -9,6 +9,8 @@ body { font-size: 15px; + color: @black; + font-weight: 300; } h1{ diff --git a/website/source/stylesheets/_header.less b/website/source/stylesheets/_header.less index 504e8dc4d2..d96e9c5df5 100755 --- a/website/source/stylesheets/_header.less +++ b/website/source/stylesheets/_header.less @@ -72,12 +72,18 @@ body.page-sub{ } } + .nav.li-under a::after { + + } + .nav > li > a:hover, .nav > li > a:focus { background-color: transparent; + /*color: @p; + .transition( color 0.3s ease );*/ } .main-links.navbar-nav{ - li + li a::before { + li + li::before { content: ""; position: absolute; left: 0; @@ -89,6 +95,10 @@ body.page-sub{ padding-right: 15px; } + /*li + li.li-under a::after{ + left: 15px; + }*/ + li > a { line-height: 62px; } @@ -136,6 +146,10 @@ body.page-sub{ float: none; display: inline-block; padding-top: 155px; + + .li-under a::after { + background-color: @purple; + } } .footer-hashi{ @@ -176,7 +190,7 @@ body.page-sub{ padding-top: 6px; padding-bottom: 6px; padding-left: 40px; - } + } } } @@ -218,8 +232,9 @@ body.page-sub{ li{ margin-top: 15px; } - - li + li a::before { + + .li-under a::after, + li + li::before { display: none; } diff --git a/website/source/stylesheets/_home.less b/website/source/stylesheets/_home.less index 5576819de0..b10276a397 100755 --- a/website/source/stylesheets/_home.less +++ b/website/source/stylesheets/_home.less @@ -172,6 +172,8 @@ body.page-home{ } } -@media (max-width: 768px) { - +@media (max-width: 480px) { + #features{ + text-align: center; + } } diff --git a/website/source/stylesheets/_jumbotron.less b/website/source/stylesheets/_jumbotron.less index ceea6a9cab..8c688f6031 100755 --- a/website/source/stylesheets/_jumbotron.less +++ b/website/source/stylesheets/_jumbotron.less @@ -63,14 +63,20 @@ } } -@media (min-width: 992px) { - .jumbotron .container .jumbo-logo{ - right: -150px; +@media (max-width: 992px) { + #jumbotron .container { + h2{ + text-align: center; + margin-left: 0; } + } } -@media (min-width: 1200px) { - .jumbotron .container .jumbo-logo{ - right: -120px; +@media (max-width: 480px) { + #jumbotron .container { + h2{ + margin-top: 130px; + font-size: 32px; } + } } diff --git a/website/source/stylesheets/_variables.less b/website/source/stylesheets/_variables.less index b7cd2e68c8..c2b5c51b43 100755 --- a/website/source/stylesheets/_variables.less +++ b/website/source/stylesheets/_variables.less @@ -48,7 +48,7 @@ @font-family-museo: 'museo-sans', "Helvetica Neue", Helvetica, Arial, sans-serif; @font-family-open-sans: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif; @font-weight-museo-xl: 100; -@font-weight-museo-reg: 500; +@font-weight-museo-reg: 300; @font-weight-museo-sb: 500; @font-weight-museo-xb: 700; @font-weight-open: @font-weight-museo-reg; diff --git a/website/source/stylesheets/main.css b/website/source/stylesheets/main.css index e10fbcde35..903f2e7a32 100644 --- a/website/source/stylesheets/main.css +++ b/website/source/stylesheets/main.css @@ -12,7 +12,7 @@ } .os { font-family: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 500; + font-weight: 300; } /*html{ text-rendering: optimizeLegibility; @@ -20,6 +20,8 @@ }*/ body { font-size: 15px; + color: #242424; + font-weight: 300; } h1 { font-size: 42px; @@ -163,9 +165,17 @@ body.page-sub #header { #footer .nav > li > a:focus, #header .nav > li > a:focus { background-color: transparent; + /*color: @p; + .transition( color 0.3s ease );*/ } -#footer .main-links.navbar-nav li + li a::before, -#header .main-links.navbar-nav li + li a::before { +#footer .main-links.navbar-nav, +#header .main-links.navbar-nav { + /*li + li.li-under a::after{ + left: 15px; + }*/ +} +#footer .main-links.navbar-nav li + li::before, +#header .main-links.navbar-nav li + li::before { content: ""; position: absolute; left: 0; @@ -178,8 +188,8 @@ body.page-sub #header { padding-right: 15px; } @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) { - #footer .main-links.navbar-nav li + li a::before, - #header .main-links.navbar-nav li + li a::before { + #footer .main-links.navbar-nav li + li::before, + #header .main-links.navbar-nav li + li::before { background-image: url("../images/nav-dotpipes@2x.png"); background-size: 4px 23px; } @@ -239,6 +249,9 @@ body.page-sub #header { display: inline-block; padding-top: 155px; } +#footer .main-links.navbar-nav .li-under a::after { + background-color: #69499a; +} #footer .footer-hashi { padding-top: 110px; } @@ -321,7 +334,8 @@ body.page-sub #header { #header .main-links.navbar-nav li { margin-top: 15px; } - #header .main-links.navbar-nav li + li a::before { + #header .main-links.navbar-nav .li-under a::after, + #header .main-links.navbar-nav li + li::before { display: none; } #header .main-links.navbar-nav li > a { @@ -435,14 +449,16 @@ body.page-sub #header { letter-spacing: 1px; margin-left: 40px; } -@media (min-width: 992px) { - .jumbotron .container .jumbo-logo { - right: -150px; +@media (max-width: 992px) { + #jumbotron .container h2 { + text-align: center; + margin-left: 0; } } -@media (min-width: 1200px) { - .jumbotron .container .jumbo-logo { - right: -120px; +@media (max-width: 480px) { + #jumbotron .container h2 { + margin-top: 130px; + font-size: 32px; } } .outline-btn { @@ -467,6 +483,32 @@ body.page-sub #header { .outline-btn:hover.purple { background-color: rgba(255, 255, 255, 0.5); } +.li-under a::after { + position: absolute; + top: 68%; + left: 50%; + margin-left: -4px; + width: 8px; + height: 8px; + background-color: #ffffff; + border-radius: 4px; + content: ''; + opacity: 0; + text-decoration: none; + -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s; + -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s; + transition: height 0.3s, opacity 0.3s, transform 0.3s; + -webkit-transform: translateY(-10px); + -moz-transform: translateY(-10px); + transform: translateY(-10px); +} +.li-under a:hover::after, +.li-under a:focus::after { + opacity: .5; + -webkit-transform: translateY(0px); + -moz-transform: translateY(0px); + transform: translateY(0px); +} body.page-home { background-color: #f8f8f8; } @@ -623,6 +665,11 @@ body.page-home { height: 200px; } } +@media (max-width: 480px) { + #features { + text-align: center; + } +} .people { margin-top: 30px; } @@ -661,13 +708,15 @@ body.layout-intro > .container .col-md-8[role=main] > div { z-index: 10; } .docs-sidebar { + position: relative; + z-index: 20; margin-bottom: 30px; margin-top: 50px; margin-right: 4%; border-radius: 6px; } .docs-sidebar a { - color: #242424; + color: #69499a; } .docs-sidebar .docs-sidenav { padding-top: 15px; @@ -680,44 +729,49 @@ body.layout-intro > .container .col-md-8[role=main] > div { position: relative; } .docs-sidebar .docs-sidenav li > a { + color: #69499a; -webkit-transition: color 0.5s ease; transition: color 0.5s ease; } .docs-sidebar .docs-sidenav li > a:hover, .docs-sidebar .docs-sidenav li > a:focus { background-color: transparent !important; - color: #c5454e; + color: #242424; -webkit-transition: color 0.5s ease; transition: color 0.5s ease; } .docs-sidebar .docs-sidenav > li { padding: 10px 0; margin: 0 30px; - border-bottom: 1px solid #fff; + border-bottom: 2px solid #fff; +} +.docs-sidebar .docs-sidenav > li > .nav li a { + color: #242424; +} +.docs-sidebar .docs-sidenav > li.active { + /*> a:hover, + > a:focus { + font-weight: @font-weight-museo-xb; + }*/ } .docs-sidebar .docs-sidenav > li.active:before { content: ''; position: absolute; width: 8px; height: 8px; - background-color: #dd4e58; + background-color: #69499a; border-radius: 4px; top: 26px; left: -10px; } .docs-sidebar .docs-sidenav > li.active > a { - font-weight: 700; -webkit-font-smoothing: antialiased; } -.docs-sidebar .docs-sidenav > li.active > a:hover, -.docs-sidebar .docs-sidenav > li.active > a:focus { - color: #242424; -} .docs-sidebar .docs-sidenav > li.active .nav { display: block; } .docs-sidebar .docs-sidenav > li.active .nav li.active a { - color: #dd4e58; + font-weight: 700; } .docs-sidebar .docs-sidenav > li > a { text-transform: uppercase; @@ -753,7 +807,7 @@ body.layout-intro > .container .col-md-8[role=main] > div { .bs-docs-section .alert { font-size: 20px; font-family: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 500; + font-weight: 300; line-height: 1.5em; margin: 0 0 18px; -webkit-font-smoothing: antialiased; @@ -762,12 +816,14 @@ body.layout-intro > .container .col-md-8[role=main] > div { margin: 0 0 18px; } .bs-docs-section a { - color: #b03c44; + color: #69499a; } .bs-docs-section a:hover { text-decoration: underline; } .bs-docs-section h1 { + color: #69499a; + text-transform: uppercase; padding-bottom: 24px; margin-top: 40px; margin-bottom: 24px; @@ -791,6 +847,11 @@ body.layout-intro > .container .col-md-8[role=main] > div { border-left: 9999px solid white; } } +@media (max-width: 480px) { + .bs-docs-section h1 { + font-size: 32px; + } +} .downloads { margin-top: 20px; }