changes

3 files changed, 79 insertions, 32 deletions

diff --git a/contribute/contribute_contents.php b/contribute/contribute_contents.php
index 23d09769f..f68fdfbd0 100644
--- a/contribute/contribute_contents.php
+++ b/contribute/contribute_contents.php
@@ -17,10 +17,16 @@
                         you if needed so you bring your best to the project!</p>
 
                     <p>Check what you could do below!</p>
+                    
+                    <ul id="contrib-sel">
+                        <li id=""><a href="#by-role">browse by role</a></li>
+                        <li id=""><a href="#by-time">browse by time</a></li>
+                    </ul>
 
-                    <ul id="contrib-areas">
+                    <h2 id="by-role">Roles</h2>
+                    <ul id="contrib-roles" class="contrib-list">
                         <li id="support">
-                            <h2>Helping users &amp; advocating the project</h2>
+                            <h3>Helping users &amp; advocating the project</h3>
                             <p>Want to welcome and help new users or share tips with experienced ones?
                                 In <a href="/wiki/doku.php?id=irc">IRC channels</a>,
                                 <a href="http://forums.mageia.org/">forums</a>,
@@ -28,7 +34,7 @@
                                 local events and places? Just get in touch with us there and share the fun!</p>
                         </li>
                         <li id="docu">
-                            <h2><a href="/wiki/doku.php?id=documentation">Writing, copywriting and documenting</a></h2>
+                            <h3><a href="/wiki/doku.php?id=documentation">Writing, copywriting and documenting</a></h3>
                             <p>You have a taste for practical, clear, concise, proofread, nice writing?
                                 You like to take the challenge of explaining clearly
                                 complex ideas or systems and teach others?
@@ -36,7 +42,7 @@
                                 Get in touch with our <a href="/wiki/doku.php?id=documentation">Documentation team</a>!</p>
                         </li>
                         <li id="i18n">
-                            <h2><a href="/wiki/doku.php?id=translators">Translating</a></h2>
+                            <h3><a href="/wiki/doku.php?id=translators">Translating</a></h3>
                             <p>Mageia is localized in more than 180 languages!
                                 Clarifying, completing, improving
                                 translations of software, guides, tutorials, Web sites, marketing material,
@@ -44,7 +50,7 @@
                                 Join <a href="/wiki/doku.php?id=translators">them</a>!</p>
                         </li>
                         <li id="triage">
-                            <h2><a href="/wiki/doku.php?id=triage">Triaging</a></h2>
+                            <h3><a href="/wiki/doku.php?id=triage">Triaging</a></h3>
                             <p>Bugs happen! Some get reported. And need to be triaged before reaching
                                 the person that can fix them: validated, informed, properly assigned.
                                 <a href="/wiki/doku.php?id=triage">Grow the Triage team</a> and be the link between users who report bugs
@@ -52,35 +58,35 @@
                                 used by developers.</p>
                         </li>
                         <li id="qa">
-                            <h2><a href="/wiki/doku.php?id=qateam">Testing &amp; <abbr title="Quality Assurance">QA</abbr></a></h2>
+                            <h3><a href="/wiki/doku.php?id=qateam">Testing &amp; <abbr title="Quality Assurance">QA</abbr></a></h3>
                             <p>We can't ship software if we are not confident enough in it!
                                 <a href="/wiki/doku.php?id=qateam">Testers and QA</a>
                                 people make sure what we do (software, packages, ISO, Web sites)
                                 match our expectations for quality before they reach most users.</p>
                         </li>
                         <li id="marketing">
-                            <h2>Marketing, Communication &amp; Evangelism</h2>
+                            <h3>Marketing, Communication &amp; Evangelism</h3>
                             <p>Better understanding who use and contribute to the project
                                 to help them even more, making sure the Mageia voice is consistent and heard,
                                 that's a job for the <a href="http://mageia.org/wiki/doku.php?id=marketing">marcomm' team</a>
                                 (Marketing and Communication), on global and local scales.</p>
                         </li>
                         <li id="graphic">
-                            <h2>Graphic &amp; UI design</h2>
+                            <h3>Graphic &amp; UI design</h3>
                             <p>Software isn't only about code and Mageia about technology.
                                 So make it human, practical and beautiful!
                                 If you have a talent and experience in graphic design, ergonomics
                                 <a href="/wiki/doku.php?id=designers">join the artwork team</a>!</p>
                         </li>
                         <li id="dev">
-                            <h2><a href="/wiki/doku.php?id=packagers">Coding &amp; packaging</a></h2>
+                            <h3><a href="/wiki/doku.php?id=packagers">Coding &amp; packaging</a></h3>
                             <p>Contribute to the core of the distribution with your technical skills!
                                 Adding, fixing, patching and maintaining software to be included
                                 in the distribution, from upstream projects or from Mageia-specific
                                 sources. Join the <a href="/wiki/doku.php?id=packagers">Packagers team</a>!</p>
                         </li>
                         <li id="web">
-                            <h2>Web, tools, systems design &amp; administration</h2>
+                            <h3>Web, tools, systems design &amp; administration</h3>
                             <p>Mageia exists through an infrastructure and tools that enable everyone
                                 to collaborate. These need experts to build, maintain, develop, provide,
                                 manage servers, connections, security, applications, user flow, etc.
@@ -88,14 +94,14 @@
                                 to <a href="/wiki/doku.php?id=web">Web designers/developers/integrators</a>.</p>
                         </li>
                         <li id="mirror">
-                            <h2>Mirroring</h2>
+                            <h3>Mirroring</h3>
                             <p>Making all Mageia software available requires <a href="http://mirrors.mageia.org/">several mirrors
                                 all around the world</a>, to distribute ISO and installation or update packages.
                                 If you have some space and bandwidth to share, please <a href="/wiki/doku.php?id=mirrors_policy#how_to_become_a_mirror">see how you can
                                 become an official Mageia mirror</a>.</p>
                         </li>
                         <li id="donation">
-                            <h2><a href="/en/donate/">Donating</a></h2>
+                            <h3><a href="/en/donate/">Donating</a></h3>
                             <p>Financial donations help us allocate specific tasks, secure our infrastructure,
                                 fund events, goodies &amp; transportation.
                                 <a href="/en/thank-you/">200+ persons already expressed us their trust</a>
@@ -105,20 +111,57 @@
                         </li>
                         <hr>
                         <li id="data">
-                            <h2>Data mining</h2>
+                            <h3>Data mining</h3>
                             <p>There are tons of data out there, most of which we don't use,
                                 or even know about. If you like to grab and analyze data
                                 to reveal &amp; visualize them and what that means we can do better,
                                 get in touch!</p>
                         </li>
                         <li id="design">
-                            <h2>Designing, experimenting, revealing the unknown</h2>
+                            <h3>Designing, experimenting, revealing the unknown</h3>
                             <p>Ideas are great, actionable prototypes are even better.
                                 The Mageia project is not about only making a different Linux
                                 distribution but as well about building new products and experiences
                                 with it and the data around it.</p>
                         </li>
                     </ul>
+                    <hr>
+                    <h2 id="by-time">Time</h2>
+                    <p>How much time do you have? and how much do want to commit to Mageia?
+                        See what you can do:</p>
+                    <ul id="contrib-time" class="contrib-list">
+                        <li>
+                            <h3>A few minutes</h3>
+                            <ul class="contrib-act">
+                                <li>Stop by the <a href="http://forums.mageia.org/">forums</a>
+                                    support section and check if you can answer a question.</li>
+                                <li>Talk about the project around you, on your blog, your Twitter account,
+                                    at your work place.</li>
+                                <li>If you encounter a bug you can reproduce and document,
+                                    <a href="http://bugs.mageia.org/">submit a bug report</a>.</li>
+                                <li>Make a <a href="/en/donate/">donation</a>!</li>
+                            </ul>
+                        </li>
+                        <li>
+                            <h3>A few hours</h3>
+                            <ul class="contrib-act">
+                                <li>Stop by a Mageia event, like a test day to find, reproduce and resolve bugs.</p>
+                                <li>Subscribe a team discussion list and follow what happens there,
+                                    try to see how you can bring something more to it.</li>
+                            </ul>
+                        </li>
+                        <li>
+                            <h3>A few weeks or more</h3>
+                            <ul class="contrib-act">
+                                <li>Learn about free software, open source collaboration in general,
+                                    and Mageia in particular.</li>
+                                <li>If you are a student, consider talking to your teacher
+                                    about participating into the project as part of your studies;
+                                    you don't need to be specifically studying Computer Science.</li>
+                            </ul>
+                        </li>
+                    </ul>
+                    <hr>
                 </div>
             </div>
         </div>
diff --git a/g/style/all.css b/g/style/all.css
index 172381d0b..5b46906b7 100644
--- a/g/style/all.css
+++ b/g/style/all.css
@@ -265,11 +265,11 @@ span.pop_5 { width: 50px; }
 .hidden { display: none; }
 
 
-#contrib-areas {
+.contrib-list {
     padding: 0;
     margin: 0;
 }
-#contrib-areas > li {
+.contrib-list > li {
     list-style: none;
     padding-left: 70px;
     min-height: 60px;
@@ -278,16 +278,18 @@ span.pop_5 { width: 50px; }
     background-position: 0 4px;
     margin-bottom: 2em;
 }
-#contrib-areas li h2 {
+.contrib-list li h3 {
     font-size: 140%;
     margin: 0;
     color: #000;
     font-weight: bold;
 }
-#contrib-areas li h2 a { color: #000; }
+.contrib-list li h3 a { color: #000; }
 
-#contrib-areas li#marketing { background-image: url(/g/images/smi/feed-48x48.png); }
-#contrib-areas li#web,
-#contrib-areas li#mirror { background-image: url(/g/images/smi/website-48x48.png); }
-#contrib-areas li#triage { background-image: url(/g/images/smi/feed-48x48.png); }
-#contrib-areas li#triage { background-image: url(/g/images/smi/feed-48x48.png); }
+.contrib-list li#marketing { background-image: url(/g/images/smi/feed-48x48.png); }
+.contrib-list li#web,
+.contrib-list li#mirror { background-image: url(/g/images/smi/website-48x48.png); }
+.contrib-list li#triage { background-image: url(/g/images/smi/feed-48x48.png); }
+.contrib-list li#triage { background-image: url(/g/images/smi/feed-48x48.png); }
+.contrib-act li { margin-bottom: 0.6em; }
+.contrib-act { margin-bottom: 2.5em; }
\ No newline at end of file
diff --git a/g/style/screen.css b/g/style/screen.css
index 9bd18089e..abb4e807c 100644
--- a/g/style/screen.css
+++ b/g/style/screen.css
@@ -253,11 +253,11 @@ span.pop_5 { width: 50px; }
 .hidden { display: none; }
 
 
-#contrib-areas {
+.contrib-list {
     padding: 0;
     margin: 0;
 }
-#contrib-areas > li {
+.contrib-list > li {
     list-style: none;
     padding-left: 70px;
     min-height: 60px;
@@ -266,16 +266,18 @@ span.pop_5 { width: 50px; }
     background-position: 0 4px;
     margin-bottom: 2em;
 }
-#contrib-areas li h2 {
+.contrib-list li h3 {
     font-size: 140%;
     margin: 0;
     color: #000;
     font-weight: bold;
 }
-#contrib-areas li h2 a { color: #000; }
+.contrib-list li h3 a { color: #000; }
 
-#contrib-areas li#marketing { background-image: url(/g/images/smi/feed-48x48.png); }
-#contrib-areas li#web,
-#contrib-areas li#mirror { background-image: url(/g/images/smi/website-48x48.png); }
-#contrib-areas li#triage { background-image: url(/g/images/smi/feed-48x48.png); }
-#contrib-areas li#triage { background-image: url(/g/images/smi/feed-48x48.png); }
+.contrib-list li#marketing { background-image: url(/g/images/smi/feed-48x48.png); }
+.contrib-list li#web,
+.contrib-list li#mirror { background-image: url(/g/images/smi/website-48x48.png); }
+.contrib-list li#triage { background-image: url(/g/images/smi/feed-48x48.png); }
+.contrib-list li#triage { background-image: url(/g/images/smi/feed-48x48.png); }
+.contrib-act li { margin-bottom: 0.6em; }
+.contrib-act { margin-bottom: 2.5em; }
\ No newline at end of file