From daaf5e68af7951f0da62eecbaf259294da8fb403 Mon Sep 17 00:00:00 2001 From: JT Date: Wed, 23 Jul 2014 15:36:51 -0700 Subject: [PATCH] add nav chevrons. try new btn color/opacity --- .../source/images/header-download-icon.png | Bin 3062 -> 2987 bytes .../source/images/header-download-icon@2x.png | Bin 3345 -> 3139 bytes website/source/images/header-github-icon.png | Bin 3135 -> 3042 bytes .../source/images/header-github-icon@2x.png | Bin 3512 -> 3283 bytes website/source/stylesheets/_buttons.less | 8 +-- website/source/stylesheets/_header.less | 56 +++++++-------- website/source/stylesheets/main.css | 65 +++++++++--------- 7 files changed, 64 insertions(+), 65 deletions(-) diff --git a/website/source/images/header-download-icon.png b/website/source/images/header-download-icon.png index 6d381a89eccd40d9c433f6be294b77503f3f30c2..0274e8b598daf1860a5820bcc8981566d647c9b2 100644 GIT binary patch delta 185 zcmV;q07n1z7poVr`wD-XNkl3L1zykh5Ks^>I1}1ER_{4^V24H}&0(g37EpdN@-fcP#D ze*$6`kQ^8QIm|#j3y48rCWQLG9!S50Vq=(E6dEYm48$OtVBj$xkfDmA2%Q5|kONhH n2}nz#%VXsO6?y7K9lDR<)=cde00000NkvXXu0mjf_AEtU delta 260 zcmV+f0sH=|7xovh`wD;NNkl3L1zygXbU;Qt#cwLW0ih&86AU?5Sp&`xq3~PbK za|e7LO*4MSUugN<45WsMn@zTonUQ%#swY??|=BIJ1Cnj@{+?@ZIi-%(^EH`+jC-#bZVGkQgVzQ!~Qnv9lE;+&gbBh;Fc1 zQM01x2BL(2@{0H$>w`})ihkz`g7nU(A80gWz6FYJ@Dzq7$)|tr!?Z&x9gtojzsn^g zLvR2-en=)k=@LKG`NwQRTRI=|8wMW50POsf^9Wu7fyB&yT_B$0dy0GpR-5NEwW=@A za_5pWe`&Ta0d)ozwofkob^pa%81}#h*m$Mr+J>vwg`RZ1qUTNR#4@$7?B#V`U-yn0ZBwbR7ef&RXa}(&z+@RKiD4neZXL}wCRAu8FI&T-5plJ!+>Th-xDPF0ZP+k#IA?aQ64{+uwKCb; z+Zf2~~ZK>N`4L)u*^uDSu@CD@@4ir6uMj1W|3=IWpbz!)) z*iL}(gwI?f;2(d9pZH4cPm%L3^|>B%(}3_PAR(f9bU$5rmIZ1tX@s`*?Wyos)A#_f zUVOwa@Ch!0YX0i?p1AV1xLG$eff=t7$JJZ4p5&><5+~KJTEbidq*;w|#$Mf1)A^6R zC%-VAd;!T072~xl$rt>G%>0BAcDWwcHUHcl?)QYQd0&6$(79}JsD1(Sk4?X=(v~0T zszU_#eivM-5%OOKlbMYTbT8d8&@@037p(F_1YB;-qorISwW9gW_Rs(k*u$kefa*CP z^^^$g5_xx@eCU_y30;u^qRv?5n+kASJ9$7;P9gPL*I|2G0b*dME7y?lB_Yk_-kWd3 lO#k{Wdz~Bnch{d7oCAPXoUHAtIc)#{002ovPDHLkV1nD?3ylB( diff --git a/website/source/images/header-github-icon.png b/website/source/images/header-github-icon.png index e65399373caacb01998e5f2cca1142e501397561..0b7d9024dc7b69dddcc36b16bc2f1f69b5a4dbab 100644 GIT binary patch delta 241 zcmVtJB`1*Hj5zd+7$BF1Q_nk^t390?hVB<}#yz=kA1h{*=h zaG8)QB>9_+K)3M$1?~W`D3Sy&W&z04+CXdt#1DZO7x)d7=mTkDCXj|aAg%>sHX!x@ z;>$n`13!R_93Ym3S;@l4$T$foa0n=%2*iJYSQ91*q(QOG1XS}FCI<2}2t)w!8z5!@ rVrC#l29n4e6gJQ%0U$;P?Z}D%Us>4flM%C!00000NkvXXu0mjf_xfFD delta 335 zcmV-V0kHn!7rz*=`U-ymFG)l}R45gFQL#z`Q4pNjcg9KuJo(&3!4&PtN?$Vl@u~GE8U*Hm1jOe|t5~xuF_)d{yY?_SQT2~~DZ3-|S=wk`DfB%%n!3D@ z$dAt;!KOX!YbyW22~QRKTPj}cY6(XvJGLkdkRJqX^Zjt}NK6Gz(H%Iti{DPF h@j>VNtC$-9@h?o$UA@993bX(K002ovPDHLkV1gI!o6!IO diff --git a/website/source/images/header-github-icon@2x.png b/website/source/images/header-github-icon@2x.png index d25c5977ba19c2fa7d25006b07a353cb35db5691..006bd6e0044be992640fb042ee89210313b1a009 100644 GIT binary patch delta 484 zcmVL5&i@7*K**Xf0S+M8U>J8w)`! ztOOw-QBXn9!XIF3A@~op5G%V>X~YlIUJ(%y1PQ1p(GV~`bKE9tk|T-Cz{AYW%)Z0z zY(o@`jT7wK1A0xx^WFG^vRos}0cj3eJASNKBb2NBGvG=?)zY{u4&baE7SmQy zBb*fx5e_h526rT}vc=6kNGJ;%xuoMA&j*>X$twDL84yG8Sy9xM%E=M6+8O0IBv&9$ zW>#6)$Yp|#<9vUyx-l7Le`kJ0X=Py}mp0GAD4A1}Rq_RN28&wUi$l<~y`s1TD0jfM z(u5Q`^5b!ZlPo5^I83|)IrxvgvS|yNU2#t|K|%y~O_DeUD{u^t;Aip$yahSlMUW3t zrBRp%v4!#~xlPDQv5LKrE8WQQ&GwqcGZ3LAh(Z_4fuCGBCD&56j&Drsl((T#muExi z%zY88Mqs;`U-yns7XXYR7efAR!eA8Q4pQEFEqANsD;F8E$GIDf`X8k#$QC* zO&5ZQ3l}2NO+m2cqZ>hYqV(sYLKXZi{GmHtsgO;Q3I^$-h~Pp*w67^Nwo1+C-Era;P_UKDInnjf%R1i zBOyrcfn4z_faqkO4Ox&@h&Ko7NTKkcjy*8yR%HR^TdFw7`!Dbc1fTb4(%WCr8#Wb!XfQKCL@yfr|DqO`^PaX_>Cyyi zOsG`RNYe9?r>gn}ON~KIbXQw@cGYHCAy6P=DepsM`%=au1^NWhehC3(h~o&ul@i4002ovPDHLkV1i&WRDl2h 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;