Repository: couchdb-www Updated Branches: refs/heads/asf-site d3e3eb8a4 -> fe7e15631
reinvent the contribution section ermouth <[email protected]> (@ermouth), Nolan Lawson <[email protected]> (@nolanlawson) and I teamed up to highlight the many different ways you can get involved with CouchDB. The new section gives a quick overview where and how you can get involved with CouchDB. Project: http://git-wip-us.apache.org/repos/asf/couchdb-www/repo Commit: http://git-wip-us.apache.org/repos/asf/couchdb-www/commit/f750d15e Tree: http://git-wip-us.apache.org/repos/asf/couchdb-www/tree/f750d15e Diff: http://git-wip-us.apache.org/repos/asf/couchdb-www/diff/f750d15e Branch: refs/heads/asf-site Commit: f750d15ec09faf38f5def19fedd0a75ed95d5546 Parents: d3e3eb8 Author: Robert Kowalski <[email protected]> Authored: Mon May 11 01:39:11 2015 +0200 Committer: Robert Kowalski <[email protected]> Committed: Tue May 19 01:42:44 2015 +0200 ---------------------------------------------------------------------- Makefile | 3 + image/contribute-icons.png | Bin 0 -> 6949 bytes index.html | 142 +++++++++++++++++++++++++++++++++++----- style/master.css | 123 ++++++++++++++++++++++++++++++---- style/master.less | 110 ++++++++++++++++++++++++++++++- 5 files changed, 349 insertions(+), 29 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/couchdb-www/blob/f750d15e/Makefile ---------------------------------------------------------------------- diff --git a/Makefile b/Makefile index c1cb128..438e365 100644 --- a/Makefile +++ b/Makefile @@ -2,3 +2,6 @@ all: style/master.css style/master.css: style/master.less lessc $< > $@ + +clean: + rm style/master.css http://git-wip-us.apache.org/repos/asf/couchdb-www/blob/f750d15e/image/contribute-icons.png ---------------------------------------------------------------------- diff --git a/image/contribute-icons.png b/image/contribute-icons.png new file mode 100644 index 0000000..7604c70 Binary files /dev/null and b/image/contribute-icons.png differ http://git-wip-us.apache.org/repos/asf/couchdb-www/blob/f750d15e/index.html ---------------------------------------------------------------------- diff --git a/index.html b/index.html index 73ee8e5..8b05c3e 100644 --- a/index.html +++ b/index.html @@ -106,28 +106,138 @@ This fabulous linen texture was integrated into the site design. <hr> - <div class="wrap feature"> - - <h2 class="icon icon-contribute">Want to Contribute?</h2> - - <p>CouchDB is an open source project. That means everything, from this website to the core of the database itself, has been contributed by helpful individuals such as yourself. The time and attention of our contributors is our most precious resource, and we always need more of it. <strong>If you have time and attention you’d like to donate, we welcome your contributions.</strong> It doesn’t matter how familiar you are with CouchDB, or whether you know how to program Erlang. There are plenty of ways to be helpful! Just ask! - - <p><strong>Any activity that enriches the project or the community is welcome.</strong> You do not have to contribute code to be a part of our community. Anyone who shows a commitment (in the sense of being loyal to the project’s interests) will be given decision-making authority. <strong>Our primary goal is to build a welcoming, supportive, inclusive, and diverse community.</strong> We abide by a <a href="http://couchdb.apache.org/conduct.html";>code of conduct</a> and a set of <a href="http://couchdb.apache.org/bylaws.html";>project bylaws</a>. - - <p>Because a healthy community is our most valuable asset, this is a good place to start contributing. Learn how CouchDB is used and why people love it. <strong>Read about it, promote it, and talk about it.</strong> Arrange or attend a <a href="https://cwiki.apache.org/confluence/display/COUCHDB/Meetups";>meetup</a>, give a talk, or write about your adventures with CouchDB. If you write a blog post about CouchDB (or find a blog post worth sharing) drop a mail to the <a href="mailto:[email protected]";>marketing list</a> (or <a href="twitter.com/CouchDB">send a tweet</a>) and we’ll include it in the <a href="http://blog.couchdb.org/";>weekly news</a>. You could also help out on the <a href="#user-mailing-list">user mailing list</a>, on <a href="irc://irc.freenode.net/couchdb">IRC</a>, or on <a href="http://stackoverflow.com/questions/tagged/couchdb";>StackOverflow</a>. Or come join us on the <a href="#developer-mailing-list">developer mailing list</a> and let us know how else you’d like to help. - - <p><strong>We do content marketing and advocate marketing.</strong> If you want to help out with this, or any other aspect of marketing, join us on the <a href="#mailing-lists">marketing list</a> and announce yourself. <strong>We’re looking for contributions to our web administration console, Fauxton. We would appreciate help with web design, development, user experience, and testing.</strong> Check out the <a href="http://s.apache.org/fauxton-issues";>list of issues</a> to get started.</p> - - <p>Why don’t you help us triage <a href="http://s.apache.org/Bni";>JIRA</a> issues? <strong>Be the first person someone interacts with when they have a problem. This is a great way to help out while learning the project.</strong> Or maybe you’d like to help us keep the <a href="http://wiki.apache.org/couchdb/";>wiki</a> up-to-date? If you want to help with translations, join us on the <a href="#mailing-lists">localisation list</a> and specify which languages you want to help with. If you’re looking for something a little more technical, you could help us with our documentation, QA, packaging, or release efforts. Just drop by on the <a href="#developer-mailing-list">developer list</a> and let us know what you want to do. <strong>There’s enough room for any sort of contribution!</strong></p> + <div class="feature"> + <div class="wrap"> + <h2 class="icon icon-contribute">Want to Contribute?</h2> - <p><strong>Do you want to contribute code? Great!</strong> There’s lots of stuff to work on. You can use JIRA to find <a href="http://s.apache.org/couchdb-easy-issues2";>easy</a>, <a href="http://s.apache.org/couchdb-medium-issues2";>medium</a>, and <a href="http://s.apache.org/couchdb-hard-issues2";>hard</a> issues to work on. Or, if you’d prefer, just open a new issue, and attach your patch. Don’t want to use JIRA? <a href="https://github.com/apache?query=couchdb";>Fork us on GitHub</a> and send a pull request. Why don’t you check out the <a href="https://cwiki.apache.org/confluence/display/COUCHDB/Git+workflow";>Git workflow</a> guide? + <p><strong>We welcome your contributions. </strong>CouchDB is an open source project. Everything, from this website to the core of the database itself, has been contributed by helpful individuals. The time and attention of our contributors is our most precious resource, and we always need more of it. Our primary goal is to build a welcoming, supporting, inclusive and diverse community. We abide by <a href="http://couchdb.apache.org/conduct.html";>Code of Conduct</a> and a set of <a href="http://couchdb.apache.org/bylaws.html";>Project Bylaws</a>. Come join us! + </p> + </div> + <div class="grid contribute"> + <div class="wrap cf"> + <div class="skill-card"> + <div class="stripe"></div> + <div class="skill-card-content"> + <h3> + <span class="core card-icon"></span> + <span class="skill-card-heading-text">CouchDB Core</span> + </h3> + <p class="skill-card-slogan"> + Help shape the future of CouchDB! Thereâs still plenty of work to be + done on the core database. We use JIRA to track issues and Github for + pull requests. + </p> + <ul> + + <li>— <a href="https://github.com/apache?query=couchdb";>CouchDB on GitHub</a></li> + <li>— <a href="https://issues.apache.org/jira/browse/COUCHDB/?selectedTab=com.atlassian.jira.jira-projects-plugin:issues-panel";>Issue tracker</a></li> + <li>— <a href="http://mail-archives.apache.org/mod_mbox/couchdb-dev/";>Dev mailing list</a></li> + </ul> + </div> + </div> + + <div class="skill-card"> + <div class="stripe"></div> + <div class="skill-card-content"> + <h3> + <span class="fauxton card-icon"></span> + <span class="skill-card-heading-text">Fauxton</span> + </h3> + <p class="skill-card-slogan"> + Lend your JavaScript skills to the next-generation web UI for CouchDB. + Fauxton is the âkiller appâ that makes CouchDB so powerful and easy to manage. + </p> + <ul> + <li>— <a href="https://github.com/apache/couchdb-fauxton";>Fauxton on GitHub</a></li> + <li>— <a href="http://docs.couchdb.org/en/latest/fauxton/addons.html";>Writing an Addon</a></li> + </ul> + </div> + </div> + + <div class="skill-card"> + <div class="stripe"></div> + <div class="skill-card-content"> + <h3> + <span class="marketing card-icon"></span> + <span class="skill-card-heading-text">Marketing</span> + </h3> + <p class="skill-card-slogan"> + Weâre not just building a database â weâre crafting the CouchDB story. + Help us promote CouchDB: plan meetups, make video tutorials, write blog posts. + </p> + <ul> + <li>— <a href="https://cwiki.apache.org/confluence/display/COUCHDB/Meetups";>CouchDB Meetups</a></li> + <li>— <a href="http://mail-archives.apache.org/mod_mbox/couchdb-marketing/";>Marketing Mailing List</a></li> + <li>— <a href="https://twitter.com/CouchDB";>Tweet us a link</a></li> + </ul> + </div> + </div> + </div> + <div class="wrap cf"> + + <div class="skill-card"> + <div class="stripe"></div> + <div class="skill-card-content"> + <h3> + <span class="website card-icon"></span> + <span class="skill-card-heading-text">Website</span> + </h3> + <p class="skill-card-slogan"> + Got a few suggestions for the very website youâre reading right now? + Think the UX, copy, or layout could be better? Welcome! Weâd love to hear from you. + </p> + <ul> + <li>— <a href="https://github.com/apache/couchdb-www";>Website on GitHub</a></li> + <li>— <a href="http://mail-archives.apache.org/mod_mbox/couchdb-marketing/";>Marketing mailing list</a></li> + <li>— <a href="http://mail-archives.apache.org/mod_mbox/couchdb-www/";>Website mailing list</a></li> + </ul> + </div> + </div> + + <div class="skill-card"> + <div class="stripe"></div> + <div class="skill-card-content"> + <h3> + <span class="documentation card-icon"></span> + <span class="skill-card-heading-text">Documentation</span> + </h3> + <p class="skill-card-slogan"> + Docs can be improved indefinitely. If youâve got a flair for technical writing, + help us make the docs clearer, better structured, or even translate them. + </p> + <ul> + <li>— <a href="https://cwiki.apache.org/confluence/display/COUCHDB/Apache+CouchDB+Wiki";>CouchDB wiki</a></li> + <li>— <a href="https://github.com/apache/couchdb-documentation";>Docs on GitHub</a></li> + <li>— <a href="https://cwiki.apache.org/confluence/display/COUCHDB/Translation+Guide";>More informations</a></li> + </ul> + </div> + </div> + + <div class="skill-card"> + <div class="stripe"></div> + <div class="skill-card-content"> + <h3> + <span class="guidance card-icon"></span> + <span class="skill-card-heading-text">Guidance</span> + </h3> + <p class="skill-card-slogan"> + You can be the first person someone interacts with when they have a question. + Giving guidance is a great way to help others while learning CouchDB. + </p> + <ul> + <li>— <a href="http://webchat.freenode.net/?channels=#couchdb";>Official CouchDB chat</a></li> + <li>— <a href="http://stackoverflow.com/questions/tagged/couchdb";>Stackoverflow questions</a></li> + <li>— <a href="https://issues.apache.org/jira/browse/COUCHDB/?selectedTab=com.atlassian.jira.jira-projects-plugin:issues-panel";>Jira issues</a></li> + </ul> + </div> + </div> + </div> + </div> </div> <a class="scroll-point" id="mailing-lists"></a> - <hr> - <div class="wrap"> <h2 class="icon icon-mailing-lists">Mailing Lists</h2> </div> http://git-wip-us.apache.org/repos/asf/couchdb-www/blob/f750d15e/style/master.css ---------------------------------------------------------------------- diff --git a/style/master.css b/style/master.css index f374ab0..e4f12f2 100644 --- a/style/master.css +++ b/style/master.css @@ -24,6 +24,9 @@ a { .sprite { background: url(../image/sprite.png) no-repeat; } +.sprite-contribution-icons { + background: url(../image/contribute-icons.png) no-repeat; +} .ellipsis { overflow: hidden; display: block; @@ -31,7 +34,7 @@ a { white-space: nowrap; } /*--------------------------------------------------- - Font + Font ---------------------------------------------------*/ body, h1, @@ -75,7 +78,7 @@ button { font-weight: 500; } /*--------------------------------------------------- - Generic + Generic ---------------------------------------------------*/ a:hover { color: #ff0000; @@ -122,11 +125,19 @@ div.button:hover { font-size: 0.5em; height: 16px; } +.cf:before, +.cf:after { + content: " "; + /* 1 */ + display: table; + /* 2 */ +} +.cf:after, .clear { clear: both; } /*--------------------------------------------------- - Layout + Layout ---------------------------------------------------*/ #wrap, .wrap, @@ -155,7 +166,7 @@ blockquote { text-align: right; } /*--------------------------------------------------- - Layout - Header + Layout - Header ---------------------------------------------------*/ .header-placeholder { height: 90px; @@ -221,7 +232,7 @@ blockquote { width: 100%; } /*--------------------------------------------------- - Layout - Leadin + Layout - Leadin ---------------------------------------------------*/ .leadin { margin-bottom: 32px; @@ -252,8 +263,8 @@ blockquote { bottom: 0; } /*--------------------------------------------------- - Layout - Contribution, Mailing List, - Download and More + Layout - Contribution, Mailing List, + Download and More ---------------------------------------------------*/ .container-box { background: #fff; @@ -449,7 +460,7 @@ blockquote { background-color: #ff0000; } /*--------------------------------------------------- - Layout - Footer + Layout - Footer ---------------------------------------------------*/ #footer { padding: 32px 0 64px; @@ -470,7 +481,7 @@ blockquote { background-color: #ae2323; } /*--------------------------------------------------- - Search Form + Search Form ---------------------------------------------------*/ #search-box { border: none; @@ -499,7 +510,7 @@ blockquote { background-color: #ff0000; } /*--------------------------------------------------- - Misc + Misc ---------------------------------------------------*/ .icon { background: url(../image/sprite.png) no-repeat; @@ -546,10 +557,10 @@ a.pt-about { height: 40px; } .download-version { - display: block; + display: block; } /*--------------------------------------------------- - Mobile + Mobile ---------------------------------------------------*/ @media all and (max-width: 1024px) { #wrap, @@ -813,3 +824,91 @@ a.pt-about { margin-top: 32px; } } +.skill-card { + background-color: #fff; + float: left; + width: 320px; + margin-right: 24px; + margin-bottom: 24px; + position: relative; + height: 340px; +} +.skill-card .stripe { + height: 5px; +} +.skill-card .skill-card-slogan { + height: 125px; +} +.skill-card .skill-card-content { + padding: 15px 20px 20px 20px; +} +.skill-card .skill-card-heading-text { + margin-top: 0.4em; + position: absolute; +} +.skill-card .card-icon { + background: url(../image/contribute-icons.png) no-repeat; + height: 40px; + width: 50px; + display: inline-block; + margin-right: 15px; + margin-left: -7px; +} +.skill-card .card-icon.core { + background-position: 0 0; +} +.skill-card .card-icon.fauxton { + background-position: -50px 0; +} +.skill-card .card-icon.marketing { + background-position: -100px 0; +} +.skill-card .card-icon.website { + background-position: -150px 0; +} +.skill-card .card-icon.documentation { + background-position: -200px 0; +} +.skill-card .card-icon.guidance { + background-position: -250px 0; +} +.skill-card h3 { + font-size: 23px; + line-height: 1.1em; + margin-bottom: 20px; +} +.skill-card p { + font-size: 18px; + line-height: 1.4em; + margin-bottom: 20px; +} +.skill-card ul, +.skill-card li { + margin-right: 7px; + font-size: 16px; + line-height: 1.8em; + list-style: none; + color: #ff0000; +} +.skill-card ul a, +.skill-card li a { + color: #291d1e; + text-decoration: none; +} +.skill-card li.last { + margin-right: 0; +} +.skill-card:last-child { + margin-right: 0; +} +.skill-card:hover a { + text-decoration: underline; +} +.skill-card:hover .stripe { + height: 5px; + background-color: #ff0000; +} +.skill-card a:hover { + color: #ff0000; + text-decoration: underline; +} http://git-wip-us.apache.org/repos/asf/couchdb-www/blob/f750d15e/style/master.less ---------------------------------------------------------------------- diff --git a/style/master.less b/style/master.less index 0ca9581..23cc8b2 100644 --- a/style/master.less +++ b/style/master.less @@ -25,6 +25,9 @@ body, a { @key-color-hover: #ae2323; @disable-color: #abafb0; +@contribute-icon-sprite-width: 50px; +@contribute-icon-sprite-height: 40px; + .animate-background { -webkit-transition: background 0.25s linear; -moz-transition: background 0.25s linear; @@ -45,6 +48,10 @@ body, a { background: url(../image/sprite.png) no-repeat } +.sprite-contribution-icons { + background: url(../image/contribute-icons.png) no-repeat +} + .ellipsis { overflow: hidden; display: block; @@ -146,10 +153,17 @@ div.button, div.button:hover { height: 16px; } -.clear { +.cf:before, +.cf:after { + content: " "; /* 1 */ + display: table; /* 2 */ +} + +.cf:after, .clear { clear: both; } + /*--------------------------------------------------- Layout ---------------------------------------------------*/ @@ -867,3 +881,97 @@ a.pt-about { margin-top: 32px; } } + +.skill-card { + background-color: #fff; + float: left; + width: @column; + margin-right: @gutter; + margin-bottom: @gutter; + position: relative; + height: 340px; + .stripe { + height: 5px; + } + .skill-card-slogan { + height: 125px; + } + .skill-card-content { + padding: 15px 20px 20px 20px; + } + .skill-card-heading-text { + margin-top: 0.4em; + position: absolute; + } + .card-icon { + .sprite-contribution-icons; + height: @contribute-icon-sprite-height; + width: @contribute-icon-sprite-width; + display: inline-block; + margin-right: 15px; + margin-left: -7px; + } + .card-icon.core { + background-position: 0 0; + } + .card-icon.fauxton { + background-position: -@contribute-icon-sprite-width 0; + } + .card-icon.marketing { + background-position: -@contribute-icon-sprite-width * 2 0; + } + .card-icon.website { + background-position: -@contribute-icon-sprite-width * 3 0; + } + .card-icon.documentation { + background-position: -@contribute-icon-sprite-width * 4 0; + } + .card-icon.guidance { + background-position: -@contribute-icon-sprite-width * 5 0; + } + h3 { + font-size: 23px; + line-height: 1.1em; + margin-bottom: 20px; + } + p { + font-size: 18px; + line-height: 1.4em; + margin-bottom: 20px; + } + ul, li { + margin-right: 7px; + font-size: 16px; + line-height: 1.8em; + list-style: none; + color: @key-color; + a { + color: @main-color; + text-decoration: none; + } + } + li.last { + margin-right: 0; + } + +} + +.skill-card:last-child { + margin-right: 0; +} + +.skill-card:hover { + a { + text-decoration: underline; + } + .stripe { + height: 5px; + background-color: @key-color; + } +} + +.skill-card a:hover { + color: @key-color; + text-decoration: underline; +} +
