Repository: couchdb-www Updated Branches: refs/heads/asf-site [created] e12cd94ec
http://git-wip-us.apache.org/repos/asf/couchdb-www/blob/e12cd94e/script/doc.js ---------------------------------------------------------------------- diff --git a/script/doc.js b/script/doc.js new file mode 100644 index 0000000..2a62617 --- /dev/null +++ b/script/doc.js @@ -0,0 +1,51 @@ +var scripts = [ + "http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js";, +]; + +for(i = 0; i < scripts.length; i++) { + document.write("<script src='" + scripts[i] + "'></script>"); +} + +function check_flag() { + if ($("body").hasClass("complete")) { + throw "Document processing is already complete."; + } +} + +function raise_flag() { + $("body").addClass("complete"); +} +function add_toc() { + var old_depth = 0; + var html = ""; + $("*/[id!='']").each(function(index) { + var id = $(this).attr("id"); + var name = $(this)[0].nodeName; + var text = $(this).text(); + if (name.length != 2 || name.slice(0, 1) != "H") { + return; + } + var new_depth = name.slice(1,2); + if (new_depth > old_depth) { + html += "<ul>"; + } else if (new_depth < old_depth) { + html += "</li></ul></li>"; + } else { + html += "</li>"; + } + html += "<li><a href='#" + id + "'>" + text + "</a>"; + old_depth = new_depth; + }); + html += "</li></ul>"; + $(".toc").append(html); +} + +document.onready = function() { + try { + check_flag(); + raise_flag(); + add_toc(); + } catch (error) { + // uh oh + } +} http://git-wip-us.apache.org/repos/asf/couchdb-www/blob/e12cd94e/script/smooth.js ---------------------------------------------------------------------- diff --git a/script/smooth.js b/script/smooth.js new file mode 100644 index 0000000..2e55852 --- /dev/null +++ b/script/smooth.js @@ -0,0 +1,131 @@ +/*-------------------------------------------------------------------------- + * Smooth Scroller Script, version 1.0.1 + * (c) 2007 Dezinerfolio Inc. <[email protected]> + * + * For details, please check the website : http://dezinerfolio.com/ + * + *--------------------------------------------------------------------------*/ + +/*jshint boss: true */ +/*jslint plusplus: true */ + + +var Scroller = (function () { + "use strict"; + + var onclickHandler = function () { + Scroller.end(this); + var l = this.hash.substr(1), + a = document.getElementsByTagName('a'), + i; + for (i = 0; i < a.length; i++) { + if (a[i].id === l) { + clearInterval(Scroller.interval); + Scroller.interval = setInterval( + 'Scroller.scroll(' + Scroller.gy(a[i]) + ')', + 10 + ); + } + } + }; + + return { + // control the speed of the scroller. + // don't change it here directly, please use Scroller.speed=50; + speed: 10, + + // returns the Y position of the div + gy: function (d) { + var gy = d.offsetTop; + while (d = d.offsetParent) { + gy += d.offsetTop; + } + return gy; + }, + + // returns the current scroll position + scrollTop: function () { + var body = document.body, + d = document.documentElement; + if (body && body.scrollTop) { + return body.scrollTop; + } + if (d && d.scrollTop) { + return d.scrollTop; + } + if (window.pageYOffset) { + return window.pageYOffset; + } + return 0; + }, + + // attach an event for an element + // (element, type, function) + add: function (event, body, d) { + if (event.addEventListener) { + return event.addEventListener(body, d, false); + } + if (event.attachEvent) { + return event.attachEvent('on' + body, d); + } + return null; + }, + + // kill an event of an element + end: function (e) { + if (e.preventDefault && e.stopPropagation) { + e.preventDefault(); + e.stopPropagation(); + } else if (window.event) { + window.event.cancelBubble = true; + window.event.returnValue = false; + } + }, + + // move the scroll bar to the particular div. + scroll: function (d) { + var a = Scroller.scrollTop(); + if (d > a) { // going down + a += Math.ceil((d - a) / Scroller.speed); + } else { // going up + a = a + (d - a) / Scroller.speed; + } + window.scrollTo(0, a); + if (a === d || Scroller.offsetTop === a) { + clearInterval(Scroller.interval); + } + Scroller.offsetTop = a; + }, + + // initializer that adds the renderer to the onload function of + // the window + init: function () { + Scroller.add(window, 'load', Scroller.render); + }, + + // this method extracts all the anchors and validates then as # + // and attaches the events. + render: function () { + Scroller.end(this); + var a = document.getElementsByTagName('a'); + for (var i = 0; i < a.length; i++) { + var l = a[i], + has_hash = l.href && l.href.indexOf('#') !== -1, + is_cur_loc = l.pathname === location.pathname; + is_cur_loc |= '/' + l.pathname === location.pathname; + if (has_hash && is_cur_loc) { + Scroller.add(l, 'click', Scroller.end); + l.onclick = onclickHandler; + } + } + } + }; + +}()); + +// invoke the initializer of the scroller +Scroller.init(); + +/*------------------------------------------------------------ + * END OF CODE + *-----------------------------------------------------------*/ http://git-wip-us.apache.org/repos/asf/couchdb-www/blob/e12cd94e/style/doc.css ---------------------------------------------------------------------- diff --git a/style/doc.css b/style/doc.css new file mode 100644 index 0000000..c701857 --- /dev/null +++ b/style/doc.css @@ -0,0 +1,30 @@ +html { + margin: 0; + padding: 0; + background-color: #FFF; +} + +body { + margin: 50px; + padding: 0; + font-size: 18px; + font-family: "Trebuchet MS", sans-serif; + line-height: 1.5em; + background-image: url(../image/logo.png); + background-repeat: no-repeat; + background-position: top right; +} + +p, ol, ul { + width: 800px; +} + +table { + border-spacing: 0px; + border-collapse: collapse; +} + +th, td { + border: 1px solid #EEE; + padding: 10px; +} http://git-wip-us.apache.org/repos/asf/couchdb-www/blob/e12cd94e/style/master.css ---------------------------------------------------------------------- diff --git a/style/master.css b/style/master.css new file mode 100644 index 0000000..f374ab0 --- /dev/null +++ b/style/master.css @@ -0,0 +1,815 @@ +* { + margin: 0; + padding: 0; + -webkit-text-size-adjust: none; +} +body, +a { + color: #291d1e; +} +/** LESS **/ +.animate-background { + -webkit-transition: background 0.25s linear; + -moz-transition: background 0.25s linear; + transition: background 0.25s linear; +} +.animate { + -webkit-transition: all 0.25s linear; + -moz-transition: all 0.25s linear; + transition: all 0.25s linear; +} +.secondary-bg { + background: url(../image/linen.jpg) #eeeeee 50% 0%; +} +.sprite { + background: url(../image/sprite.png) no-repeat; +} +.ellipsis { + overflow: hidden; + display: block; + text-overflow: ellipsis; + white-space: nowrap; +} +/*--------------------------------------------------- + Font +---------------------------------------------------*/ +body, +h1, +h2, +h3, +h4 { + font-size: 16px; + font-family: 'HelveticaNeue-Light', Helvetica, Arial, sans-serif; + font-weight: 300; +} +h1 { + font-size: 34px; +} +h2 { + font-size: 34px; + padding: 48px 0; +} +b, +strong { + font-family: 'HelveticaNeue-Bold', Helvetica, Arial, sans-serif; + font-weight: 900; +} +small, +label { + font-family: 'HelveticaNeue', Helvetica, Arial, sans-serif; + font-weight: 400; + font-size: 12px; +} +button { + font-size: 17px; + font-family: 'HelveticaNeue-Light', Helvetica, Arial, sans-serif; + font-weight: 300; +} +.feature { + font-size: 21px; +} +.platforms-list li, +.list-header.mini, +.more-header li { + font-family: 'HelveticaNeue-Medium', 'HelveticaNeue', Helvetica, Arial, sans-serif; + font-weight: 500; +} +/*--------------------------------------------------- + Generic +---------------------------------------------------*/ +a:hover { + color: #ff0000; +} +p { + line-height: 2em; + margin-bottom: 2em; +} +p + p { + margin-top: 2em; +} +.button-container { + position: absolute; + right: -5px; + background: url(../image/shadow.png); +} +.button { + display: block; + background: url(../image/sprite.png) no-repeat; + background-color: #ff0000; + background-position: 100% -171px; + width: 288px; + padding: 16px; + color: #fff; + font-size: 24px; + text-decoration: none; + position: relative; + top: -5px; + left: -5px; + -webkit-transition: background 0.25s linear; + -moz-transition: background 0.25s linear; + transition: background 0.25s linear; +} +.button:hover { + background-color: #ae2323; + color: #fff; +} +div.button, +div.button:hover { + background-color: #abafb0; +} +.button label { + display: block; + font-size: 0.5em; + height: 16px; +} +.clear { + clear: both; +} +/*--------------------------------------------------- + Layout +---------------------------------------------------*/ +#wrap, +.wrap, +#footer, +hr { + width: 1008px; + margin: 0 auto; + position: relative; +} +.grid { + background: url(../image/linen.jpg) #eeeeee 50% 0%; + padding: 32px 0; +} +hr { + border: none; + border-top: 1px solid #ddd; + margin-top: 64px; + margin-bottom: 32px; +} +blockquote { + width: 70%; + margin: 0 auto; + font-style: italic; +} +.cite { + text-align: right; +} +/*--------------------------------------------------- + Layout - Header +---------------------------------------------------*/ +.header-placeholder { + height: 90px; +} +#header { + height: 90px; + position: fixed; + z-index: 10; + left: 0; + right: 0; + background: #fff; + border-bottom: 1px solid #ddd; +} +#header .shadow { + position: absolute; + left: 0; + right: 0; + bottom: -3px; + height: 3px; + background: url(../image/shadow.png); +} +.logo, +.closing { + background: url(../image/sprite.png) no-repeat; + -webkit-transition: background 0.25s linear; + -moz-transition: background 0.25s linear; + transition: background 0.25s linear; + background-color: #ff0000; + background-position: 0 0px; + position: absolute; + left: 0; + top: 5px; + width: 220px; + height: 75px; +} +.logo:hover { + background-color: #ae2323; +} +.menu { + padding: 16px 0; + float: right; +} +.menu a { + text-decoration: none; + -webkit-transition: all 0.25s linear; + -moz-transition: all 0.25s linear; + transition: all 0.25s linear; + padding: 16px; + margin: 0 8px; + line-height: 55px; +} +.menu a:hover { + color: #ff0000; +} +.menu-dropdown { + display: none; + position: absolute; + right: 16px; + top: 32px; + width: 40%; +} +.menu-dropdown select { + width: 100%; +} +/*--------------------------------------------------- + Layout - Leadin +---------------------------------------------------*/ +.leadin { + margin-bottom: 32px; +} +.leadin .wrap { + height: 368px; +} +.leadin .text-block { + position: absolute; + left: 368px; + top: 64px; +} +.leadin img { + position: absolute; + top: 32px; + left: 24px; +} +.leadin li { + list-style: none; + margin: 9px 8px; +} +.leadin h1 { + background: #fff; + display: inline; + padding: 4px 8px; +} +.leadin .button-container { + bottom: 0; +} +/*--------------------------------------------------- + Layout - Contribution, Mailing List, + Download and More +---------------------------------------------------*/ +.container-box { + background: #fff; + padding: 8px; + position: relative; +} +.list-link { + position: absolute; + top: 0; + bottom: 0; + right: 0; +} +.list { + padding-top: 16px; +} +.list li { + background: #fff; + padding: 8px; + position: relative; + list-style: none; + margin-bottom: 16px; +} +.list-header { + background: #fff; + padding: 8px; + position: relative; + margin-top: 16px; +} +.list-header p { + margin-bottom: 0; +} +.list-container { + position: relative; +} +/**** Platforms ****/ +.platforms-list { + padding-top: 32px; + width: 456px; +} +.platforms-list.second { + position: absolute; + right: 0; + top: 0; +} +.platforms-list li a { + position: absolute; + top: 0; + bottom: 0; + right: 0; + -webkit-transition: background 0.25s linear; + -moz-transition: background 0.25s linear; + transition: background 0.25s linear; + width: 36px; + background: url(../image/sprite.png) no-repeat; + background-position: 3px -127px; + background-color: #ff0000; +} +.platforms-list li a:hover { + background-color: #ae2323; +} +.platforms-list li.first a { + width: 108px; +} +.platforms-list li a.link-apache { + right: 39px; + background-position: 2px -94px; +} +.platforms-list li.first a.link-apache { + width: 144px; + right: 111px; +} +/**** Mailing List ****/ +.mailing-list { + width: 752px; + margin-bottom: 24px; +} +.mailing-list a { + position: absolute; + top: 0; + bottom: 0; + right: 0; + -webkit-transition: all 0.25s linear; + -moz-transition: all 0.25s linear; + transition: all 0.25s linear; + backround: #fff; + padding: 8px; + width: 408px; + font-size: 14px; +} +.mailing-list a:hover { + color: #fff; + background: #ff0000; +} +.mailing-list a span { + position: absolute; + top: 0; + bottom: 0; + right: 0; + width: 36px; + background: url(../image/sprite.png) no-repeat; + background-position: -156px -95px; + background-color: #ff0000; +} +.mailing-list li { + margin-bottom: 3px; +} +/**** Download ****/ +.download-pane .button-container { + bottom: -70px; +} +.list-header.mini { + display: inline; +} +.download-list-container { + position: relative; +} +.download-list { + width: 100%; + margin-bottom: 24px; +} +.download-list li { + height: 18px; +} +.download-list .type { + position: absolute; + top: 0; + bottom: 0; + right: 0; + -webkit-transition: background 0.25s linear; + -moz-transition: background 0.25s linear; + transition: background 0.25s linear; + background: url(../image/sprite.png) no-repeat; + background-position: -160px -127px; + background-color: #ff0000; + color: #fff; + text-decoration: none; + right: auto; + left: 0; + padding: 8px; + padding-left: 32px; + width: 40%; +} +.download-list .type:hover { + background-color: #ae2323; +} +.download-list .info { + float: right; + font-size: 12px; + margin-top: 2px; +} +/**** More ****/ +.list-header.mini { + display: inline; +} +.more, +.more-header li { + float: left; + width: 320px; + margin-right: 24px; + list-style: none; + position: relative; +} +.more-header li { + margin-bottom: 24px; +} +.more.last, +.more-header li.last { + margin-right: 0; +} +.more li { + padding: 0; +} +.more a { + -webkit-transition: all 0.25s linear; + -moz-transition: all 0.25s linear; + transition: all 0.25s linear; + display: block; + text-decoration: none; + padding: 8px; +} +.more a:hover { + color: #fff; + background: #ff0000; +} +.more a span { + position: absolute; + top: 0; + bottom: 0; + right: 0; + width: 36px; + background: url(../image/sprite.png) no-repeat; + background-position: -156px -95px; + background-color: #ff0000; +} +/*--------------------------------------------------- + Layout - Footer +---------------------------------------------------*/ +#footer { + padding: 32px 0 64px; +} +#footer p { + font-size: 12px; + line-height: 1.5em; +} +.closing { + background-position: 0 -725px; + left: auto; + right: 0; + top: 20px; + width: 60px; + height: 65px; +} +.closing:hover { + background-color: #ae2323; +} +/*--------------------------------------------------- + Search Form +---------------------------------------------------*/ +#search-box { + border: none; + width: 716px; + padding: 8px; + font-size: 16px; + font-family: 'HelveticaNeue-Light', Helvetica, Arial, sans-serif; + font-weight: 300; +} +#search-box, +#search-button { + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + height: 32px; + vertical-align: bottom; +} +#search-button { + font-size: 16px; + margin-left: -1px; + padding: 5px; + border: none; + width: 36px; + background: url(../image/sprite.png) no-repeat; + background-position: -156px -95px; + background-color: #ff0000; +} +/*--------------------------------------------------- + Misc +---------------------------------------------------*/ +.icon { + background: url(../image/sprite.png) no-repeat; + background-position: 0 -220px; + padding-left: 78px; +} +.icon-about { + background-position: 0 -220px; +} +.icon-contribute { + background-position: 0 -316px; +} +.icon-mailing-list { + background-position: 0 -412px; +} +.icon-download { + background-position: 0 -508px; +} +.icon-more { + background-position: 0 -604px; +} +a.scroll-point { + display: block; + border-bottom: transparent 1px solid; +} +a.hash-target { + padding-top: 115px; +} +a.pt-top { + border: none; +} +a.pt-about { + margin: -100px 0 130px; + border: none; +} +.corner, +.more .corner { + background: url(../image/sprite.png) no-repeat; + background-position: 0 -808px; + position: absolute; + left: 0; + top: -32px; + width: 40px; + height: 40px; +} +.download-version { + display: block; +} +/*--------------------------------------------------- + Mobile +---------------------------------------------------*/ +@media all and (max-width: 1024px) { + #wrap, + .wrap, + #footer, + hr { + width: auto; + } + .wrap, + #footer { + margin-left: 24px; + margin-right: 24px; + } + .more, + .more-header li { + width: 30%; + } + .platforms-list { + width: 48%; + } + h1 { + font-size: 30px; + } + .button-container { + right: 16px; + } +} +@media all and (max-width: 950px) { + h1 { + font-size: 24px; + } + h2 { + font-size: 24px; + padding-top: 54px; + } + .leadin img { + top: 0; + width: 240px; + height: 270px; + } + .leadin .text-block { + top: 32px; + left: 290px; + } + .button { + width: 250px; + padding: 12px; + } + .leadin .wrap { + height: 300px; + } + .mailing-list { + width: auto; + } + .menu { + display: none; + } + .menu-dropdown { + display: block; + } +} +@media all and (max-width: 770px) { + body { + font-size: 14px; + } + h1 { + font-size: 22px; + } + h2 { + font-size: 22px; + padding-top: 54px; + } + .leadin img { + width: 192px; + height: 216px; + } + .leadin .text-block { + top: 32px; + left: 232px; + } + .button { + font-size: 20px; + background-position: 100% -177px; + width: 220px; + padding: 10px; + } + .leadin .wrap { + height: 280px; + } + .platforms-list li.first a.link-apache, + .platforms-list li.first a.link-github { + width: 36px; + } + .platforms-list li.first a.link-apache { + right: 39px; + } + .mailing-list li { + padding: 8px 4px; + } + .mailing-list a { + width: 56%; + padding-right: 42px; + overflow: hidden; + display: block; + text-overflow: ellipsis; + white-space: nowrap; + } + .download-list .version { + width: 28%; + } + .menu-dropdown { + top: 16px; + } + #header, + .header-placeholder { + height: 52px; + } + .logo { + top: 7px; + width: 110px; + height: 37px; + background-size: 112px 425px; + } + #footer { + padding-bottom: 28px; + padding-right: 72px; + } +} +@media all and (max-width: 675px) { + body { + /* font-size: 14px;*/ + } + .leadin img { + left: -4px; + width: 160px; + height: 180px; + } + .leadin .text-block { + left: 175px; + top: 11px; + } + .leadin .wrap { + height: 240px; + } + .leadin .button-container { + bottom: -10px; + } + .button { + font-size: 18px; + background-position: 100% -181px; + width: 200px; + padding: 8px; + } + .download-list .version { + width: 22%; + } +} +@media all and (max-width: 620px) { + h1 { + font-size: 16px; + } + .leadin img { + width: 128px; + height: 144px; + } + .leadin .text-block { + left: 130px; + } + .wrap, + #footer { + margin-left: 12px; + margin-right: 12px; + } + .leadin .wrap { + height: 200px; + } + .icon { + background-size: 112px 425px; + padding: 20px 48px 20px 48px; + overflow: hidden; + display: block; + text-overflow: ellipsis; + white-space: nowrap; + } + .icon-about { + background-position: 0 -110px; + } + .icon-contribute { + background-position: 0 -158px; + } + .icon-mailing-list { + background-position: 0 -206px; + } + .icon-download { + background-position: 0 -254px; + } + .icon-more { + background-position: 0 -302px; + } + .platforms-list, + .platforms-list.second { + width: auto; + position: static; + padding-bottom: 0; + } + .platforms-list.second { + padding-top: 0; + } + .mailing-list a { + width: 0; + padding-right: 30px; + } + .more-header { + display: none; + } + .more, + .more-header li { + float: none; + width: auto; + margin-right: 0; + } + .more .corner { + display: none; + } + .more { + padding-top: 0; + } + .download-list .type { + width: auto; + display: block; + position: static; + margin: -8px -8px 8px; + } + .download-list .info { + float: none; + } + .download-list li { + height: auto; + } +} +@media all and (max-width: 446px) { + .leadin .button-container { + right: auto; + left: 8px; + } + .leadin .text-block { + top: 110px; + left: -4px; + right: -2px; + } + .leadin .wrap { + height: 300px; + } + .icon { + padding: 22px 16px 20px 35px; + } + h2 { + font-size: 20px; + } + hr { + margin-top: 32px; + } +} http://git-wip-us.apache.org/repos/asf/couchdb-www/blob/e12cd94e/style/master.less ---------------------------------------------------------------------- diff --git a/style/master.less b/style/master.less new file mode 100644 index 0000000..1329820 --- /dev/null +++ b/style/master.less @@ -0,0 +1,869 @@ +* { + margin: 0; + padding: 0; + -webkit-text-size-adjust:none; +} + +body { +} + +body, a { + color: @main-color; +} + +/** LESS **/ +@column: 320px; +@gutter: 24px; +@padding: 16px; +@full-width: @column*3 + @gutter*2; +@gap: 32px; + +@background-half-size: 112px 425px; + +@main-color: #291d1e; +@key-color: #ff0000; +@key-color-hover: #ae2323; +@disable-color: #abafb0; + +.animate-background { + -webkit-transition: background 0.25s linear; + -moz-transition: background 0.25s linear; + transition: background 0.25s linear; +} + +.animate { + -webkit-transition: all 0.25s linear; + -moz-transition: all 0.25s linear; + transition: all 0.25s linear; +} + +.secondary-bg { + background: url(../image/linen.jpg) #EEE 50% 0%; +} + +.sprite { + background: url(../image/sprite.png) no-repeat +} + +.ellipsis { + overflow: hidden; + display: block; + text-overflow: ellipsis; + white-space: nowrap; +} + +/*--------------------------------------------------- + Font +---------------------------------------------------*/ + +body, h1, h2, h3, h4 { + font-size: 16px; + font-family: 'HelveticaNeue-Light', Helvetica, Arial, sans-serif; + font-weight: 300; +} + +h1 {font-size: 34px;} +h2 {font-size: 34px; padding: @gap+@padding 0;} + +b, strong { + font-family: 'HelveticaNeue-Bold', Helvetica, Arial, sans-serif; + font-weight: 900; +} + +small, label { + font-family: 'HelveticaNeue', Helvetica, Arial, sans-serif; + font-weight: 400; + font-size: 12px; +} + +button { + font-size: 17px; + font-family: 'HelveticaNeue-Light', Helvetica, Arial, sans-serif; + font-weight: 300; +} + +.feature { + font-size: 21px; +} + +.platforms-list li, .list-header.mini, .more-header li { + font-family: 'HelveticaNeue-Medium', 'HelveticaNeue', Helvetica, Arial, sans-serif; + font-weight: 500; +} + +/*--------------------------------------------------- + Generic +---------------------------------------------------*/ + +a:hover { + color: @key-color; +} + +p { + line-height: 2em; + margin-bottom: 2em; +} + +p + p { + margin-top: 2em; +} + + +.button-container { + position: absolute; + right: -5px; + background: url(../image/shadow.png); +} + +.button { + display: block; + .sprite; + background-color: @key-color; + background-position: 100% -171px; + width: @column - @padding*2; + padding: @padding; + color: #fff; + font-size: 24px; + text-decoration: none; + position: relative; + top: -5px; + left: -5px; + .animate-background +} + +.button:hover { + background-color: @key-color-hover; + color: #fff; +} + +div.button, div.button:hover { + background-color: @disable-color; +} + +.button label { + display: block; + font-size: 0.5em; + height: 16px; +} + +.clear { + clear: both; +} + +/*--------------------------------------------------- + Layout +---------------------------------------------------*/ + +#wrap, .wrap, #footer, hr { + width: @full-width; + margin: 0 auto; + position: relative; +} + +.grid { + .secondary-bg; + padding: @gap 0; +} + +hr { + border: none; + border-top: 1px solid #ddd; + margin-top: @gap*2; + margin-bottom: @gap; +} + +blockquote { + width: 70%; + margin: 0 auto; + font-style: italic; +} + +.cite { + text-align: right; +} + +/*--------------------------------------------------- + Layout - Header +---------------------------------------------------*/ + +.header-placeholder { + height: 90px; +} + +#header { + height: 90px; + position: fixed; + z-index: 10; + left: 0; + right: 0; + background: #fff; + border-bottom: 1px solid #ddd; +} + +#header .shadow { + position: absolute; + left: 0; + right: 0; + bottom: -3px; + height: 3px; + background: url(../image/shadow.png); +} + +.logo, .closing { + .sprite; + .animate-background; + background-color: @key-color; + background-position: 0 0px; + position: absolute; + left: 0; + top: 5px; + width: 220px; + height: 75px; +} + +.logo:hover { + background-color: @key-color-hover; +} + +.menu { + padding: @padding 0; + float: right; +} +.menu a { + text-decoration: none; + .animate; + padding: @padding; + margin: 0 @padding/2; + line-height: 55px; +} +.menu a:hover { + color: @key-color; +} + +.menu-dropdown { + display: none; + position: absolute; + right: @padding; + top: @gap; + width: 40%; +} + +.menu-dropdown select{ + width: 100%; +} + +/*--------------------------------------------------- + Layout - Leadin +---------------------------------------------------*/ + +.leadin { + margin-bottom: @gap; +} + +.leadin .wrap { + height: @column+@gap+@padding; +} + +.leadin .text-block { + position: absolute; + left: @padding*3 + @column; + top: @gap+@padding*2; +} + +.leadin img { + position: absolute; + top: @gap; + left: @gutter; +} + +.leadin li { + list-style: none; + margin: 9px 8px; +} + +.leadin h1 { + background: #fff; + display: inline; + padding: 4px 8px; +} + +.leadin .button-container { + bottom: 0; +} + +/*--------------------------------------------------- + Layout - Contribution, Mailing List, + Download and More +---------------------------------------------------*/ + +@link-box: 36px; +@link-box-gap: 3px; +.container-box { + background: #fff; + padding: @padding/2; + position: relative; +} + +.list-link { + position: absolute; + top: 0; + bottom: 0; + right: 0; +} + + +.list { + padding-top: @padding; +} + +.list li { + .container-box; + list-style: none; + margin-bottom: @padding; +} + +.list-header { + .container-box; + margin-top: @padding; +} + +.list-header p { + margin-bottom: 0; +} + +.list-container { + position: relative; +} + +/**** Platforms ****/ + +.platforms-list { + padding-top: @padding*2; + width: @full-width/2 - @gutter*2; +} + +.platforms-list.second { + position: absolute; + right: 0; + top: 0; +} + +.platforms-list li a { + .list-link; + .animate-background; + width: @link-box; + .sprite; + background-position: 3px -127px; + background-color: @key-color; +} + +.platforms-list li a:hover { + background-color: @key-color-hover; +} + +.platforms-list li.first a { + width: @link-box*3; +} + +.platforms-list li a.link-apache { + right: @link-box + @link-box-gap; + background-position: 2px -94px; +} + +.platforms-list li.first a.link-apache { + width: @link-box*4; + right: @link-box*3 + @link-box-gap; +} + +/**** Mailing List ****/ + +.mailing-list { + width: @column*2 + @gap*2 + @gutter*2; + margin-bottom: @gutter; +} + +.mailing-list a { + .list-link; + .animate; + backround: #fff; + padding: @padding/2; + width: @column + @gap*2 + @gutter; + font-size: 14px; +} + +.mailing-list a:hover { + color: #fff; + background: @key-color; +} + +.mailing-list a span { + .list-link; + width: @link-box; + .sprite; + background-position: -156px -95px; + background-color: @key-color; +} + +.mailing-list li { + margin-bottom: @link-box-gap; +} + + +/**** Download ****/ + +.download-pane .button-container{ + bottom: -70px; +} + +.list-header.mini { + display: inline; +} + +.download-list-container { + position: relative; +} + +.download-list { + width: 100%; + margin-bottom: @gutter; +} + +.download-list li { + height: 18px; +} + +.download-list .type { + .list-link; + .animate-background; + .sprite; + background-position: -160px -127px; + background-color: @key-color; + color: #fff; + text-decoration: none; + right: auto; + left: 0; + padding: @padding/2; + padding-left: 32px; + width: 40%; +} +.download-list .type:hover { + background-color: @key-color-hover; +} + +.download-list .info { + float: right; + font-size: 12px; + margin-top: 2px; +} + + +/**** More ****/ + + +.list-header.mini { + display: inline; +} + +.more, .more-header li { + float: left; + width: @column; + margin-right: @gutter; + list-style: none; + position: relative; +} + +.more-header li { + margin-bottom: @gutter; +} + +.more.last, .more-header li.last { + margin-right: 0; +} + +.more li { + padding: 0; +} + +.more a { + .animate; + display: block; + text-decoration: none; + padding: @padding/2; +} + +.more a:hover { + color: #fff; + background: @key-color; +} + +.more a span { + .list-link; + width: @link-box; + .sprite; + background-position: -156px -95px; + background-color: @key-color; +} + + +/*--------------------------------------------------- + Layout - Footer +---------------------------------------------------*/ + +#footer { + padding: @gap 0 @gap*2; +} + +#footer p { + font-size: 12px; + line-height: 1.5em; +} + +.closing { + background-position: 0 -725px; + left: auto; + right: 0; + top: 20px; + width: 60px; + height: 65px; +} + +.closing:hover { + background-color: @key-color-hover; +} + + +/*--------------------------------------------------- + Search Form +---------------------------------------------------*/ + +#search-box { + border: none; + width: 716px; + padding: 8px; + font-size: 16px; + font-family: 'HelveticaNeue-Light', Helvetica, Arial, sans-serif; + font-weight: 300; +} + +#search-box, +#search-button { + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + height: 32px; + vertical-align: bottom; +} + +#search-button { + font-size: 16px; + margin-left: -1px; + padding: 5px; + border: none; + width: 36px; + background: url(../image/sprite.png) no-repeat; + background-position: -156px -95px; + background-color: #ff0000; +} + +/*--------------------------------------------------- + Misc +---------------------------------------------------*/ + +@spacer-base: -220px; +@spacer: 96px; + +.icon { + .sprite; + background-position: 0 @spacer-base; + padding-left: 78px; +} +.icon-about { background-position: 0 @spacer-base;} +.icon-contribute { background-position: 0 @spacer-base - @spacer;} +.icon-mailing-list { background-position: 0 @spacer-base - @spacer*2;} +.icon-download { background-position: 0 @spacer-base - @spacer*3;} +.icon-more { background-position: 0 @spacer-base - @spacer*4;} + +a.scroll-point { + display: block; + border-bottom: transparent 1px solid; +} + +a.hash-target { + padding-top: 115px; +} + +a.pt-top { + border: none; +} + +a.pt-about { + margin: -100px 0 130px; + border:none +} + +.corner, .more .corner { + .sprite; + background-position: 0 -808px; + position: absolute; + left: 0; + top: -@gap; + width: 40px; + height: 40px; +} + +.more .corner { +} + +.download-version { + display: block; +} + +/*--------------------------------------------------- + Mobile +---------------------------------------------------*/ +@mobile-pad: 24px; + +@media all and (max-width:1024px) { + #wrap, .wrap, #footer, hr { + width: auto; + } + .wrap, #footer { + margin-left: @mobile-pad; + margin-right: @mobile-pad; + } + .more, .more-header li { + width: 30%; + } + .platforms-list { + width: 48%; + } + h1 { + font-size: 30px; + } + .button-container { + right: @padding; + } +} + +@media all and (max-width:950px) { + h1 { + font-size: 24px; + } + h2 { + font-size: 24px; + padding-top: 54px; + } + .leadin img { + top: 0; + width: 240px; + height: 270px; + } + .leadin .text-block { + top: 32px; + left: 290px; + } + .button { + width: 250px; + padding: 12px; + } + .leadin .wrap { + height: 300px; + } + .mailing-list { + width: auto; + } + .menu { + display: none; + } + .menu-dropdown { + display: block; + } +} + +@media all and (max-width:770px) { + body { + font-size: 14px; + } + h1 { + font-size: 22px; + } + h2 { + font-size: 22px; + padding-top: 54px; + } + .leadin img { + width: 192px; + height: 216px; + } + .leadin .text-block { + top: 32px; + left: 232px; + } + .button { + font-size: 20px; + background-position: 100% -177px; + width: 220px; + padding: 10px; + } + .leadin .wrap { + height: 280px; + } + .platforms-list li.first a.link-apache, .platforms-list li.first a.link-github { + width: @link-box; + } + .platforms-list li.first a.link-apache { + right: @link-box + @link-box-gap; + } + .mailing-list li { + padding: 8px 4px; + } + .mailing-list a { + width: 56%; + padding-right: 42px; + .ellipsis; + } + .download-list .version { + width: 28%; + } + .menu-dropdown { + top: @padding; + } + #header, .header-placeholder { + height: 52px; + } + .logo { + top: 7px; + width: 110px; + height: 37px; + background-size: @background-half-size; + } + #footer { + padding-bottom: 28px; + padding-right: 72px; + } +} + +@media all and (max-width:675px) { + body { +/* font-size: 14px;*/ + } + .leadin img { + left: -4px; + width: 160px; + height: 180px; + } + .leadin .text-block { + left: 175px; + top: 11px; + } + .leadin .wrap { + height: 240px; + } + .leadin .button-container { + bottom: -10px; + } + .button { + font-size: 18px; + background-position: 100% -181px; + width: 200px; + padding: 8px; + } + .download-list .version { + width: 22%; + } +} + +@media all and (max-width:620px) { + h1 { + font-size: 16px; + } + .leadin img { + width: 128px; + height: 144px; + } + .leadin .text-block { + left: 130px; + } + .wrap, #footer { + margin-left: 12px; + margin-right: 12px; + } + .leadin .wrap { + height: 200px; + } + .icon { + background-size: @background-half-size; + padding: 20px 48px 20px 48px; + .ellipsis; + } + @spacer-mini: @spacer/2; + @spacer-base-mini: @spacer-base/2; + .icon-about { background-position: 0 @spacer-base-mini;} + .icon-contribute { background-position: 0 @spacer-base-mini - @spacer-mini;} + .icon-mailing-list { background-position: 0 @spacer-base-mini - @spacer-mini*2;} + .icon-download { background-position: 0 @spacer-base-mini - @spacer-mini*3;} + .icon-more { background-position: 0 @spacer-base-mini - @spacer-mini*4;} + + .platforms-list, .platforms-list.second { + width: auto; + position: static; + padding-bottom: 0; + } + .platforms-list.second { + padding-top: 0; + } + .mailing-list a { + width: 0; + padding-right: 30px; + } + .more-header { + display: none; + } + .more, .more-header li { + float: none; + width: auto; + margin-right: 0; + } + .more .corner { + display: none; + } + .more { + padding-top: 0; + } + .download-list .type { + width: auto; + display: block; + position: static; + margin: -8px -8px 8px; + } + .download-list .info { + float: none; + } + .download-list li { + height: auto; + } +} + +@media all and (max-width:446px) { + .leadin .button-container { + right: auto; + left: 8px; + } + .leadin .text-block { + top: 110px; + left: -4px; + right: -2px; + } + .leadin .wrap { + height: 300px; + } + .icon { + padding: 22px 16px 20px 35px; + } + h2 { + font-size: 20px; + } + hr { + margin-top: 32px; + } +}
