From 0406f6c8b54e1eef479648d03622c2e39c4b63da Mon Sep 17 00:00:00 2001 From: JT Date: Tue, 22 Jul 2014 20:49:44 -0700 Subject: [PATCH] nav --- .../source/images/header-download-icon.png | Bin 3190 -> 3033 bytes .../source/images/header-download-icon@2x.png | Bin 3514 -> 3156 bytes website/source/images/header-github-icon.png | Bin 3367 -> 3255 bytes .../source/images/header-github-icon@2x.png | Bin 3886 -> 3726 bytes website/source/layouts/_header.erb | 6 +- website/source/stylesheets/_buttons.less | 45 ++++++----- website/source/stylesheets/_header.less | 44 ++++++++--- website/source/stylesheets/main.css | 74 ++++++++++++------ 8 files changed, 113 insertions(+), 56 deletions(-) diff --git a/website/source/images/header-download-icon.png b/website/source/images/header-download-icon.png index 46b48aa8844c561b1e90ecad7e2ec8f1419cea32..3bd5707dbd8d0ea25192861de9c859169fbfa4cb 100644 GIT binary patch delta 267 zcmV+m0rdX%7}*ygiBL{Q4GJ0x0000DNk~Le0000C0000G2nGNE03u3L1zygXaUe|*#7AXc6Y=Vr8{~Ms*&;yp9w1Zy|G$4JeJ3U6fkTOjnPCe9 z!~bhQ2?MACka`9v+W;g7QNzFhwqOAySz`4$Mo delta 425 zcmV;a0apIm7xow-iBL{Q4GJ0x0000DNk~Le0000E0000J2nGNE0H6Rol(8Y%3V#7+ zNklpQ#N08D8|B5KG1M5d%Z9 z#jDxCV3PRrizR#FS)oT@jV!Ex{C|OpeL&$?Wcl(DkbMbRGf)f^rzs#YpxRwPYBD%* z9({g26UaFPl3@JL*zo`V|6mXs1b}7*fy6-U{|pR=p=uFvRBZfAgn^CaBv4)nqzDVR z$MB28y!R~M8;~5>Mi8U-tkj!-fByRY|IhFV#771oF_0Wg6G#rO5ya^~Eq-|w=$=TR zlm3GEAOL0q#lUh9Aux%e5hT)gQfwQ;|NmuBHQ#~$D+P-|1qf1wmT#ni_F+w@1U2JR zz*ubg(*6H`CJTIu(B+u_|2qy$08Gmm8UG8ROXB1IV_^VII$tw3V#7a zNkl?grQq6?SkK``@BqSltGDtLdIk?5wnq@^ zn4wKf)5b)x3m**#Y385rt7)h*R`LK>{>qO~&8`n^r{0>{RK~m#Sa-GBqH2q*J75j` z(^Iqh^3^j)FlCnupIM+iN0l@)a%R?=I`k#x0GL%hv zU`q^DA_Yr7>T&pn7t{AVHf@pz9GfYWBVa=;A<6t`th{i-0Cv1s7Xj|OBF1BY+WxV| z7~*Y|+_{8PIp&4g`q=pu*^Gb|O%je2cbWFWRa?u!DVP(`VzGoO#!(2TbX=i;3NJ{E z@TUSt$y2yhV3AniP69>pLvuM0r|M~u>)OQl478m3Oz4bej-sA@`#SKWK7HN>l+g(K lU&2pIrKRydi3B?$dAQ(5Kn>!2{cV>QK*8t+2?zcZJFK8ZgxY1m&_rV`QG=vZ|2SHY=RK6 z-OPMGFtmLrEwaDEJLToqCx1stfqzlRh4lI~Q0ygZCT(3Euyv_eo>&c=#|TSQJS%pC zzjw_9n&b&As94C4Xod!Ks0b!PdMR2o!zh`3xC29D66OjJes7`qWT`UoPUk!JFrREJ@_%JqBcvPw zWX**6Je#GME(q!iS2UuP90tUyDyJrL7$O??IHq6FnG^M`M;bq{YjZOi3GJMFki(F@ z%6k#JLqN9*>5c1d+&vbKaNRhUwxVMW!&V%waImfuRG*CHh2-X(2e*Mjx_J(m(;;4O z4Z&p{*UP8ye5!dG3EpyH4}a=J?tkM7d<3959p?mVL@>qt5f}c;B%FO*9bI$b`mo)f zPi z2VG}?_^enSxyq^e>F~CWD{Rw{4kvc5@k*;+nGeETrSUNnRlo|{Nq=uoH;+>sYkcIV zd~6hqfM3z1nTM-mjUZmY3fnSCU;$m=mHzZi#4+J?GZTGRLm`zaV;?Le-WRs@HjzSw z!!tP6&sp#dvxx}j4Mn~oO8qvIh43RaY7rLYIaGh21?+c2prjajepd9$m;kE=U&?tl i;J0~yo9v;1RQLy%qs%g??3tYa0000<65l% diff --git a/website/source/images/header-github-icon.png b/website/source/images/header-github-icon.png index 7da9fec49e3be8170290e23271dcac99655704d0..0c4eb7f2f43a46af6121a11c977eed7f9d3d1169 100644 GIT binary patch delta 491 zcmV5PkJ4<6h6#mZKn*_y2u|!2tjATKu*vc0+Dbzv`w6OLUXc0xU3xXC~EDPI< zjkTTc!bSwaLcvND5k-w!XpD)PJI8Y_D~2>C9)>xu?>o$$`wbvA0(Roa`Ck->5IvEXc?EWSKNkEKzX;p7Fh26uE)( zQpk#x)BZH<23txc`grDMId(4d9WpULnd(s8Av2y!9Pr}0&XGxMQ&w(Zp?^g3((j#c z%8W&iL)k~nFtAq40Ksig+KwyM4c1hR5~H^w6druYCSxL$A^DyGQB34>7@r7fOC+-V zXSa6!qwY&4-ktm>N(utbEbta3I4ja9{{V@NBtxBE{_j zqT(BV)P~yfi5knV0{-rYuRtnO;Z_T;Q`9`HwL%kx2MTNc!_Z>lh+f6*O?F&I*wBG$ hFdr-rC7qvZ{0<*vgNEsyqqhJ6002ovPDHLkV1iAm+syy~ delta 604 zcmV-i0;B!68K)W{iBL{Q4GJ0x0000DNk~Le0000H0000I2nGNE0KNG&RIwr13V#9@ zNkl4f25T1GOZnJnA4R_f@j1c8ap*9lF5G)L~7FPKKR$3Uj1cY<}35J-U zAR;Ki!qURlLa?wnPZWZp7K)Hah)LXdCh_$4?(I15c^g*q;(`OaGxNz_but%?o~ht*u5>jhvT#}%!QQh79db{K-AJ-IH!z8(*!x( zw|vf#drq~wxuJTa>JvgYAAfiIw%I^)NI2ntuAaa5dS6xZaA4p`s<(FZAyD{q`dP=M z28;cRCj`hxY_@6N2$7Ejr>DvtuOcYY<^wGDFX!2K%iw(=ng_(Q>>rCrF+Dn6@+M-w zG0jY_m%I;bT;Rkrd{Seq5C2VU`iE?|DWU^YC2xjT>0A%y9U{DHBQf)B+T_RM=2s90 q?z}u+AL(0K;g)9OxUrF2wa71x;i!4$@FST30000 zoD1-u8rpf=8lvvF)b~r06W#r#V}EwrT4ld)x&k3XrVt~ECO|T6)qr>> zmgi~pdn4ziM!6ce_K>71M)9y;4&zAxT;hNk)<1GTED57Ah~5Ok-M|iJ<9|oHkL8t# zIe44tXzO=?z+OR^;7M34%!H8WgpJIG!6H`JbzxU{R%-UnG$d=PiXerU5XYTiWmHPV zP9f$Me|L-+(Av?8!#YlW?@S}F|CN1ggC{`}=}<6K)T?llE7tI`gQSWJd4qN;K{aE= zoH$B#NmI*1&i*6HU7exg5r1RFOHyxgmM)3T=e$8_1~Dg&@}$XG2}vunh=qWBXX%pY z{GxL$V$OW?Nt3gZl+rk|iCvAKoux~n3xShLGl=;wlr%Xj5$GcpaYv|Vf|d8qQX1&f z?ojcNMQjX_yyrAACyhq|K)yNz`B>ud4Ff~vOsU-`fo4$tAcH_3QTVd^iu*|C#1J=jY2)IOQPvMcHMZ# z>W<{C*2aeFY*f3O3#>#_lgQijL#_M>|5hYbt~}{nu24&Zq2i~RNR_`u5NIM-Y$2*j zpGx(JCCYX|+9W}II|H8P@nihU)TB;&Rd;{Mr%aC4t`5A!IDe76x*R|U_|kp>Ajg>W z8IS!9sR|XE5bBj=Y!xOEWeLyDN!4sq4f&-X-<%jPpDiCFxGx5M}Bo!Ui`=z_09u&cwfSiewA_x-f}hU+H) zqZ z>G5@`nT$y)hc|d0DuGx+vTq>YJnY6uxQrf+WNE92;a@8AvYSmljcgUL&`R(u+ONQ! zs||*oP)tZY)u)OJ5J7|1yDEWE_v1WR;d1DlK|ztQtKYOyKox zv5J0SZF!#c`wsvivc@4?@_#GTipK_y`h5q0u$|KT77K}3fmmK8_jO8Qaiyp;@?b1T zh^{I!cI5Ku-*h}LBa7FIFT@B!$8I!P-qnmI4+uC7BvulU7rUOmaEA`+0O{+zREJZ$ zKUNff2fMp&uHjJ+$kMgDbm8bvZ|r0XwdtTvMii+{u_Gu4WJ8?TH-Bs7KSCm8SUR)= z#4tI=FKXzGmCSoUR_x?uOze4EL8$UB4cXTt0IVY5Bqx#4wIewl;m~#_@nS3oBMHM&~Ew zD%4^`87wP7H;u!gvig;AdgDBWxUTK8;)TH~7;Y8^~wQR&b$#eINEWg z6|K%rgSZEJPlVxdNscEJnzWJ31;4Bs@6^agLmRFdmK=oAJPz>T?)JhnVFP`W zLYuI2H4xekd+?;8XelZPZR2D_Gn%?P{&)}D^FG*X*p7Fu*U{(4hB8ZU?JL$>mO8)& ze+*fR){Q`C(SIR696`@f2>|KZKh>17OkGIp$_{kfxrnE7lT=o!HsAy{qsP@v*{T#c zzJuRwF2eW~Sh?q0%l{Dw9a-75MUPP^07M($4ZcDn`53kcjW_-2b28=QBe4cc57Gbt002ovPDHLkV1ip46} 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;