diff --git a/website/source/images/header-download-icon.png b/website/source/images/header-download-icon.png index 6d381a89ec..0274e8b598 100644 Binary files a/website/source/images/header-download-icon.png and b/website/source/images/header-download-icon.png differ diff --git a/website/source/images/header-download-icon@2x.png b/website/source/images/header-download-icon@2x.png index 05c87114b9..734b2d1fa4 100644 Binary files a/website/source/images/header-download-icon@2x.png and b/website/source/images/header-download-icon@2x.png differ diff --git a/website/source/images/header-github-icon.png b/website/source/images/header-github-icon.png index e65399373c..0b7d9024dc 100644 Binary files a/website/source/images/header-github-icon.png and b/website/source/images/header-github-icon.png differ diff --git a/website/source/images/header-github-icon@2x.png b/website/source/images/header-github-icon@2x.png index d25c5977ba..006bd6e004 100644 Binary files a/website/source/images/header-github-icon@2x.png and b/website/source/images/header-github-icon@2x.png differ diff --git a/website/source/stylesheets/_buttons.less b/website/source/stylesheets/_buttons.less index e67378235d..59bcc23478 100755 --- a/website/source/stylesheets/_buttons.less +++ b/website/source/stylesheets/_buttons.less @@ -27,7 +27,7 @@ } .terra-btn{ - background-color: white; + background-color: rgba(130, 47, 247, 0.36); } //dot animation on header main nav link hover @@ -53,7 +53,7 @@ .li-under a:hover::after, .li-under a:focus::after { opacity: 1; - -webkit-transform: skewY(15deg) translateY(18px); - -moz-transform: skewY(15deg) translateY(18px); - transform: skewY(15deg) translateY(18px); + -webkit-transform: skewY(15deg) translateY(10px); + -moz-transform: skewY(15deg) translateY(10px); + transform: skewY(15deg) translateY(10px); } diff --git a/website/source/stylesheets/_header.less b/website/source/stylesheets/_header.less index 78e8d04b7c..03dcdd64aa 100755 --- a/website/source/stylesheets/_header.less +++ b/website/source/stylesheets/_header.less @@ -3,6 +3,11 @@ // -------------------------------------------------- body.page-sub{ + + .terra-btn{ + background-color: rgba(130, 47, 247, 1); + } + #header{ height: 90px; background-color: @purple; @@ -20,23 +25,6 @@ body.page-sub{ li > a { color: black; } - - li + li{ - padding-left: 6px; - } - - li + li::before { - content: ""; - position: absolute; - left: 0; - top: 9px; - width: 6px; - height: 8px; - background-color: @purple; - .skewY(24deg); - padding-right: 8px; - } - } } } @@ -111,14 +99,26 @@ body.page-sub{ } .main-links.navbar-nav{ - margin-top: 26px; + margin-top: 28px; + + li + li{ + padding-left: 6px; + } - /*li + li.li-under a::after{ - left: 15px; - }*/ + li + li::before { + content: ""; + position: absolute; + left: 0; + top: 9px; + width: 6px; + height: 8px; + background-color: @purple; + .skewY(24deg); + padding-right: 8px; + } li > a { - border-bottom: 2px solid rgba(255, 255, 255, .2); + //border-bottom: 2px solid rgba(255, 255, 255, .2); line-height: 26px; margin: 0 12px; padding: 0 0 0 4px; @@ -137,26 +137,26 @@ body.page-sub{ &.download{ a{ - padding-left: 28px; - background: url(../images/header-download-icon.png) 10px 7px no-repeat; + padding-left: 30px; + background: url(../images/header-download-icon.png) 12px 7px no-repeat; .img-retina("../images/header-download-icon.png", "../images/header-download-icon@2x.png", 12px, 13px); } } &.github{ a{ - background: url(../images/header-github-icon.png) 10px 6px no-repeat; + background: url(../images/header-github-icon.png) 12px 6px no-repeat; .img-retina("../images/header-github-icon.png", "../images/header-github-icon@2x.png", 12px, 13px); } } } li > a { - color: black; + color: white; padding-top: 3px; padding-bottom: 3px; - padding-left: 30px; - padding-right: 10px; + padding-left: 32px; + padding-right: 12px; letter-spacing: 0.05em; } } diff --git a/website/source/stylesheets/main.css b/website/source/stylesheets/main.css index 03ea733ac5..dd5cc39ea5 100644 --- a/website/source/stylesheets/main.css +++ b/website/source/stylesheets/main.css @@ -77,6 +77,9 @@ pre { .center { text-align: center; } +body.page-sub .terra-btn { + background-color: #822ff7; +} body.page-sub #header { height: 90px; background-color: #822ff7; @@ -91,24 +94,6 @@ body.page-sub #header .main-links.navbar-nav { body.page-sub #header .main-links.navbar-nav li > a { color: black; } -body.page-sub #header .main-links.navbar-nav li + li { - padding-left: 6px; -} -body.page-sub #header .main-links.navbar-nav li + li::before { - content: ""; - position: absolute; - left: 0; - top: 9px; - width: 6px; - height: 8px; - background-color: #822ff7; - -webkit-transform: skewY(24deg); - -moz-transform: skewY(24deg); - -ms-transform: skewY(24deg); - -o-transform: skewY(24deg); - transform: skewY(24deg); - padding-right: 8px; -} #header { -webkit-font-smoothing: antialiased; position: relative; @@ -175,13 +160,27 @@ body.page-sub #header .main-links.navbar-nav li + li::before { .transition( color 0.3s ease );*/ } #header .main-links.navbar-nav { - margin-top: 26px; - /*li + li.li-under a::after{ - left: 15px; - }*/ + margin-top: 28px; +} +#header .main-links.navbar-nav li + li { + padding-left: 6px; +} +#header .main-links.navbar-nav li + li::before { + content: ""; + position: absolute; + left: 0; + top: 9px; + width: 6px; + height: 8px; + background-color: #822ff7; + -webkit-transform: skewY(24deg); + -moz-transform: skewY(24deg); + -ms-transform: skewY(24deg); + -o-transform: skewY(24deg); + transform: skewY(24deg); + padding-right: 8px; } #header .main-links.navbar-nav li > a { - border-bottom: 2px solid rgba(255, 255, 255, 0.2); line-height: 26px; margin: 0 12px; padding: 0 0 0 4px; @@ -194,8 +193,8 @@ body.page-sub #header .main-links.navbar-nav li + li::before { margin-right: 16px; } #header .buttons.navbar-nav li.download a { - padding-left: 28px; - background: url(../images/header-download-icon.png) 10px 7px no-repeat; + padding-left: 30px; + background: url(../images/header-download-icon.png) 12px 7px no-repeat; background-image: url("../images/header-download-icon.png"); background-size: 12px 13px; } @@ -206,7 +205,7 @@ body.page-sub #header .main-links.navbar-nav li + li::before { } } #header .buttons.navbar-nav li.github a { - background: url(../images/header-github-icon.png) 10px 6px no-repeat; + background: url(../images/header-github-icon.png) 12px 6px no-repeat; background-image: url("../images/header-github-icon.png"); background-size: 12px 13px; } @@ -217,11 +216,11 @@ body.page-sub #header .main-links.navbar-nav li + li::before { } } #header .buttons.navbar-nav li > a { - color: black; + color: white; padding-top: 3px; padding-bottom: 3px; - padding-left: 30px; - padding-right: 10px; + padding-left: 32px; + padding-right: 12px; letter-spacing: 0.05em; } @media (max-width: 992px) { @@ -562,7 +561,7 @@ body.page-home #footer { background-color: rgba(255, 255, 255, 0.5); } .terra-btn { - background-color: white; + background-color: rgba(130, 47, 247, 0.36); } .li-under a::after { position: absolute; @@ -585,9 +584,9 @@ body.page-home #footer { .li-under a:hover::after, .li-under a:focus::after { opacity: 1; - -webkit-transform: skewY(15deg) translateY(18px); - -moz-transform: skewY(15deg) translateY(18px); - transform: skewY(15deg) translateY(18px); + -webkit-transform: skewY(15deg) translateY(10px); + -moz-transform: skewY(15deg) translateY(10px); + transform: skewY(15deg) translateY(10px); } /*body.page-home{ background-color: #f8f8f8;