Add project lead guide

Author: Florent Biville

_includes/guides.html

@@ -0,0 +1,66 @@
+<section id="leads">
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-8 col-sm-offset-2 text-center">
+                <i class="fa fa-4x fa-lightbulb-o wow bounceIn text-primary"></i>
+                <h2 class="section-heading">Protips for project leads</h2>
+                <hr class="primary">
+                <h3 class="text-left">How to become one</h3>
+                <p class="text-left">
+                	You do not need to be the owner of an open-source project to be accepted as a project lead. However, you must contribute regularly and be knowledgeable about the entire codebase.
+                	If you meet these criteria, simply contact one of the organizers listed in the event page.
+            	</p>
+                <h3 class="text-left">Before the event starts</h3>
+                <p class="text-left">
+                	Promote the event and your project to attract contributors!<br/>
+                	One way to do that is to prepare a small video or standalone slideshow to explain:
+                </p>
+            	<ul class="text-left">
+            		<li>what your project is about</li>
+            		<li>the kind of contributions you are looking for</li>
+            		<li>any prerequisites</li>
+            	</ul>
+                <p class="text-left">
+                	Here is an excellent example of a <a href="https://drive.google.com/file/d/1tPkAYkBFjy4O1Zr3qWQv2k9GKU9tkBXb/view" rel="noopener" target="_blank">short video introduction</a> of the Kubernetes documentation translation project.
+                </p>
+                <p class="text-left">
+                	hack-commit-push events aim at being inclusive.
+                	This means you will likely collaborate with people of heterogeneous experience.
+                	We advise you to prepare a backlog of issues of varying difficulty.
+                	If your project requires some prior knowledge that would take too long to explain during the event, be very explicit about it in your presentation.
+                </p>
+                <p class="text-left">
+                	If the event is virtual, make sure to be available at some point to get familiar with the tooling.
+                	If the event happens in a centralized location, make sure to arrive a bit earlier to get familiar with the place, so that you can help contributors find their way.
+                </p>
+                <h3 class="text-left">During the event</h3>
+                <p class="text-left">
+                	Congratulations, you prepared a presentation and attracted many contributors.
+                	You have come with colleagues so each of you can focus on a couple of contributors.
+                	You can start with some general information about the project and then split into smaller groups to work on contributions. Contributors can work in pairs (or more). This usually helps people getting started, especially if they feel a bit nervous working alone on something completely new for them!<br />
+                	Take some breaks, enjoy the collaborations and have fun!
+                </p>
+                <h3 class="text-left">After the event</h3>
+                <p class="text-left">
+                	Please send to the organizers a recap of the contributions done during the event.
+                </p>
+                <p class="text-left">
+                	Some events have training sessions on technical topics (e.g. Git).
+                	This means that you must be ready to welcome new contributors in the middle of the event, once they completed their training.
+                </p>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section id="contributors">
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-8 col-sm-offset-2 text-center">
+                <i class="fa fa-4x fa-laptop wow bounceIn text-primary"></i>
+                <h2 class="section-heading">Protips for contributors</h2>
+                <hr class="primary">
+            </div>
+        </div>
+    </div>
+</section>

_includes/nav.html

@@ -2,7 +2,7 @@
     <div class="container-fluid">
         <!-- Brand and toggle get grouped for better mobile display -->
         <div class="navbar-header">
-            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar">
                 <span class="sr-only">Toggle navigation</span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
@@ -11,7 +11,7 @@
         </div>
 
         <!-- Collect the nav links, forms, and other content for toggling -->
-        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+        <div class="collapse navbar-collapse" id="main-navbar">
             <ul class="nav navbar-nav navbar-right">
                 <li>
                     <a class="page-scroll" href="#about">About</a>
@@ -22,6 +22,13 @@
                 <li>
                     <a class="page-scroll" href="#past">Past Events</a>
                 </li>
+                <li role="presentation" class="dropdown">
+                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Participant protips <span class="caret"></span></a>
+                    <ul class="dropdown-menu">
+                        <li><a class="page-scroll" href="#leads">For project leads</a></li>
+                        <li><a class="page-scroll" href="#contributors">For contributors</a></li>
+                    </ul>
+                </li>
                 <li>
                     <a class="page-scroll" href="#coc">Code of Conduct</a>
                 </li>

_layouts/front.html

@@ -9,6 +9,7 @@
   {% include about.html %}
   {% include upcoming.html %}
   {% include past.html %}
+  {% include guides.html %}
   {% include coc.html %}
   {% include scripts.html %}
 </body>

css/main.scss

@@ -73,7 +73,7 @@ body>section:nth-child(even) {
 }
 
 #mainNav {
-	& {
+	&, .dropdown > * {
 		border: none;
 		background-color: transparent;
 		color: $text-color;
@@ -88,21 +88,17 @@ body>section:nth-child(even) {
 			border-bottom: 2px solid $border-color !important;
 		}
 
-		&:hover {
-			color: $secondary-color;
-		}
-
 	}
 
 	#nav-twitter, #nav-github {
 		font-size: 16pt;
 	}
 
-	#bs-example-navbar-collapse-1 {
+	#main-navbar {
 		border: none;
 		text-align: right;
 
-		&.in,&.collapsing{
+		&.in, &.collapsing{
 			background-color: darken(rgba($theme-primary, .9), 10%);
 		}
 
@@ -113,6 +109,11 @@ body>section:nth-child(even) {
 				height: 30px;
 			}
 		}
+
+		.dropdown {
+			ul.dropdown-menu { margin-top: 10px; margin-bottom: 0;}
+			a:hover { background: none;}
+		}
 
 		a:focus {
 			border-bottom: none !important;
@@ -246,6 +247,10 @@ header .header-content {
 	}
 }
 
+#leads, #contributors {
+	a { text-decoration: underline;}
+}
+
 @media screen and (min-width: 576px) {
 
 	header .header-content {