diff --git a/website/source/images/header-download-icon.png b/website/source/images/header-download-icon.png index 46b48aa88..3bd5707db 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 ace072025..e1f52d89c 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 7da9fec49..0c4eb7f2f 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 40c14776c..b40d7b362 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/layouts/_header.erb b/website/source/layouts/_header.erb index 12fc605ff..dd5ac4a9f 100644 --- a/website/source/layouts/_header.erb +++ b/website/source/layouts/_header.erb @@ -49,14 +49,14 @@ diff --git a/website/source/stylesheets/_buttons.less b/website/source/stylesheets/_buttons.less index 960ea5139..c1fcdb015 100755 --- a/website/source/stylesheets/_buttons.less +++ b/website/source/stylesheets/_buttons.less @@ -26,31 +26,34 @@ } } +.terra-btn{ + background-color: white; +} + //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); + position: absolute; + top: 68%; + left: 50%; + margin-left: -4px; + width: 6px; + height: 6px; + background-color: white; + 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); + opacity: 1; + -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 2823b1b46..616455d00 100755 --- a/website/source/stylesheets/_header.less +++ b/website/source/stylesheets/_header.less @@ -82,6 +82,7 @@ body.page-sub{ } .main-links.navbar-nav{ + margin-top: 26px; li + li::before { content: ""; position: absolute; @@ -99,7 +100,8 @@ body.page-sub{ }*/ li > a { - line-height: 62px; + line-height: 30px; + padding: 0 15px; } } @@ -110,28 +112,52 @@ body.page-sub{ li{ &.first{ - margin-right: 12px; + margin-right: 16px; } &.download{ a{ - background: url(../images/icon-download.png) 8px 6px no-repeat; - .img-retina("../images/icon-download.png", "../images/icon-download@2x.png", 20px, 20px); + padding-left: 28px; + background: url(../images/header-download-icon.png) 8px 6px no-repeat; + .img-retina("../images/header-download-icon.png", "../images/header-download-icon@2x.png", 12px, 16px); } } &.github{ a{ - background: url(../images/icon-github.png) 8px 6px no-repeat; - .img-retina("../images/icon-github.png", "../images/icon-github@2x.png", 20px, 20px); + background: url(../images/header-github-icon.png) 8px 5px no-repeat; + .img-retina("../images/header-github-icon.png", "../images/header-github-icon@2x.png", 16px, 17px); } } } li > a { - padding-top: 6px; - padding-bottom: 6px; - padding-left: 40px; + color: black; + padding-top: 4px; + padding-bottom: 4px; + padding-left: 30px; + padding-right: 6px; + letter-spacing: 0.09em; + + &::before{ + content: ""; + position: absolute; + top: 0; + left: -8px; + width: 8px; + height: 100%; + background: linear-gradient(to right bottom, transparent 50%, white 50%) !important; + } + + &::after{ + content: ""; + position: absolute; + top: 0; + right: -8px; + width: 8px; + height: 100%; + background: linear-gradient(to right bottom, white 50%,transparent 50%) !important; + } } } } diff --git a/website/source/stylesheets/main.css b/website/source/stylesheets/main.css index 44d46c479..921c14c81 100644 --- a/website/source/stylesheets/main.css +++ b/website/source/stylesheets/main.css @@ -175,6 +175,7 @@ body.page-sub #header { } #footer .main-links.navbar-nav, #header .main-links.navbar-nav { + margin-top: 26px; /*li + li.li-under a::after{ left: 15px; }*/ @@ -201,7 +202,8 @@ body.page-sub #header { } #footer .main-links.navbar-nav li > a, #header .main-links.navbar-nav li > a { - line-height: 62px; + line-height: 30px; + padding: 0 15px; } #footer .buttons.navbar-nav, #header .buttons.navbar-nav { @@ -210,39 +212,63 @@ body.page-sub #header { } #footer .buttons.navbar-nav li.first, #header .buttons.navbar-nav li.first { - margin-right: 12px; + margin-right: 16px; } #footer .buttons.navbar-nav li.download a, #header .buttons.navbar-nav li.download a { - background: url(../images/icon-download.png) 8px 6px no-repeat; - background-image: url("../images/icon-download.png"); - background-size: 20px 20px; + padding-left: 28px; + background: url(../images/header-download-icon.png) 8px 6px no-repeat; + background-image: url("../images/header-download-icon.png"); + background-size: 12px 16px; } @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 .buttons.navbar-nav li.download a, #header .buttons.navbar-nav li.download a { - background-image: url("../images/icon-download@2x.png"); - background-size: 20px 20px; + background-image: url("../images/header-download-icon@2x.png"); + background-size: 12px 16px; } } #footer .buttons.navbar-nav li.github a, #header .buttons.navbar-nav li.github a { - background: url(../images/icon-github.png) 8px 6px no-repeat; - background-image: url("../images/icon-github.png"); - background-size: 20px 20px; + background: url(../images/header-github-icon.png) 8px 5px no-repeat; + background-image: url("../images/header-github-icon.png"); + background-size: 16px 17px; } @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 .buttons.navbar-nav li.github a, #header .buttons.navbar-nav li.github a { - background-image: url("../images/icon-github@2x.png"); - background-size: 20px 20px; + background-image: url("../images/header-github-icon@2x.png"); + background-size: 16px 17px; } } #footer .buttons.navbar-nav li > a, #header .buttons.navbar-nav li > a { - padding-top: 6px; - padding-bottom: 6px; - padding-left: 40px; + color: black; + padding-top: 4px; + padding-bottom: 4px; + padding-left: 30px; + padding-right: 6px; + letter-spacing: 0.09em; +} +#footer .buttons.navbar-nav li > a::before, +#header .buttons.navbar-nav li > a::before { + content: ""; + position: absolute; + top: 0; + left: -8px; + width: 8px; + height: 100%; + background: linear-gradient(to right bottom, transparent 50%, #ffffff 50%) !important; +} +#footer .buttons.navbar-nav li > a::after, +#header .buttons.navbar-nav li > a::after { + content: ""; + position: absolute; + top: 0; + right: -8px; + width: 8px; + height: 100%; + background: linear-gradient(to right bottom, #ffffff 50%, transparent 50%) !important; } #footer { height: 650px; @@ -499,15 +525,17 @@ body.page-sub #header { .outline-btn:hover.purple { background-color: rgba(255, 255, 255, 0.5); } +.terra-btn { + background-color: white; +} .li-under a::after { position: absolute; top: 68%; left: 50%; margin-left: -4px; - width: 8px; - height: 8px; - background-color: #ffffff; - border-radius: 4px; + width: 6px; + height: 6px; + background-color: white; content: ''; opacity: 0; text-decoration: none; @@ -520,10 +548,10 @@ body.page-sub #header { } .li-under a:hover::after, .li-under a:focus::after { - opacity: .5; - -webkit-transform: translateY(0px); - -moz-transform: translateY(0px); - transform: translateY(0px); + opacity: 1; + -webkit-transform: skewY(15deg) translateY(10px); + -moz-transform: skewY(15deg) translateY(10px); + transform: skewY(15deg) translateY(10px); } /*body.page-home{ background-color: #f8f8f8;