mailinglist: turn into a proper information page

Add some mailing list etiquette guidelines borrowed from the FreeBSD
FAQ while here.  Hopefully that will be helpful to new users of
internet mailing lists.

_includes/btn-join-mailing-list.html

@@ -1,5 +1 @@
-<div class="row">
-    <div class="col-md-4">
-           <a href="https://lists.hillhacks.in/mailman/listinfo/hillhackers" target="_blank" style="text-decoration: none;"><button type="button" class="btn btn-primary btn-lg cta-1">JOIN THE MAILING LIST</button></a>
-    </div>
-</div>
+<a class="btn btn-lg btn-primary cta-1" style="text-decoration: none;" href="{{ site.baseurl }}{% link mailinglist.md %}" role="button">JOIN THE MAILING LIST</a>

_includes/header.html

@@ -37,7 +37,7 @@
         </li>
         <li><a href="{{site.baseurl}}/contact/">Contact</a></li>
         <li><a href="{{site.baseurl}}/faq/">FAQ</a></li>
-        <li><a href="https://lists.hillhacks.in/mailman/listinfo/hillhackers" target="_blank" style="padding-top:0px; padding-bottom: 0px;"><button type="button" class="btn navbar-btn btn-xs cta-2-xs" style="padding-bottom: 0px;">Join the mailing list</button></a></li>
+	<li><a href="{{site.baseurl}}/mailinglist/" style="padding-top:0px; padding-bottom: 0px;"><button type="button" class="btn navbar-btn btn-xs cta-2-xs" style="padding-bottom: 0px;">Join the mailing list</button></a></li>
       </ul>
     </div><!-- /.navbar-collapse -->
   </div><!-- /.container -->

_sass/_styles.scss

@@ -84,6 +84,21 @@ body{
     }
 }
 
+.cta-0{
+    font-family: 'Lato', sans-serif;
+    background-color: #63c3d5;
+    color: #fff !important;
+    border-radius: 4px;
+    border-color: #63c3d5;
+    -webkit-transition-duration: 0.4s; /* Safari */
+    transition-duration: 0.4s;
+    text-decoration: none;
+    &:hover {
+      background-color: #4AA9BC;
+      border-color: #4AA9BC;
+    }
+}
+
 .cta-1{
     font-family: 'Lato', sans-serif;
     background: #63C3D5;

accommodation.md

@@ -45,5 +45,5 @@ Please [let us know by email][e] if you would like to stay in a shared room at
 the venue so we can plan occupancy.  Note that your stay in a shared room is not
 confirmed until we tell you it is.
 
-[ml]: https://lists.hillhacks.in/mailman/listinfo/hillhackers
+[ml]: {% link mailinglist.md %}
 [e]: mailto:[email protected]

contact-us.html

@@ -4,7 +4,7 @@
 permalink: /contact/
 ---
 
-<p><b>Mailing list</b><br>Our main communication channel.  Moderate traffic on the list gets busier the closer we get to the event.<br><a href="https://lists.hillhacks.in/mailman/listinfo/hillhackers">[email protected]</a></p><hr>
+<p><b>Mailing list</b><br>Our main communication channel.  Moderate traffic on the list gets busier the closer we get to the event.<br><a href="{% link mailinglist.md %}">Join the mailing list</a></p><hr>
 
 <p><b>Email</b><br>Direct email for comments or questions for the organisers that can’t be asked on the public mailing list.<br><a href="mailto:[email protected]">[email protected]</a></p><hr>
 

faq.md

@@ -88,7 +88,7 @@ My family is concerned that this will be way too dangerous!
   the same time you intend to travel.
 ^
 
-[ml]: https://lists.hillhacks.in/mailman/listinfo/hillhackers
+[ml]: {% link mailinglist.md %}
 [travel]: {% link travel.md %}
 [venue]: {% link venue.md %}
 [acco]: {% link accommodation.md %}

mailinglist.md

@@ -0,0 +1,64 @@
+---
+layout: page
+title: Mailing list
+permalink: /mailinglist/
+---
+
+The hillhackers mailing list is our primary communication channel.  Traffic is
+moderate throughout the year but gets busier as we get closer to the event.
+
+To post a message to all the list members, send email to
+[[email protected]](mailto:[email protected]).
+
+
+You must subscribe before you can post.
+
+<form class="form-inline" method="POST" action="https://lists.hillhacks.in/mailman/subscribe/hillhackers">
+  <div class="form-group">
+    <label for="email" class="sr-only">Your email address</label>
+    <input type="email" class="form-control" name="email" placeholder="Your email address" />
+  </div>
+  <div class="form-group">
+    <label for="name" class="sr-only">Your name (optional)</label>
+    <input type="text" class="form-control" name="fullname" placeholder="Your name (optional)" />
+  </div>
+  <button class="btn cta-0" type="submit" name="email-button">Subscribe</button>
+</form>
+<small>[More information about the mailing list][ml]<small>
+
+[ml]: https://lists.hillhacks.in/mailman/listinfo/hillhackers/
+
+### Mailing list guidelines
+
+There are nearly 400 subscribers on the mailing list, many of whom are
+subscribed to dozens of other mailing lists receiving hundreds or even thousands
+of email messages per day.  If you are not familiar with internet mailing lists,
+please consider the following basic etiquette guidelines before posting.
+
+<!-- Largely borrowed from
+     https://www.freebsd.org/doc/en/articles/mailing-list-faq/etiquette.html -->
+
+Please include relevant text from the original message.
+: Trim it to the minimum, but do not overdo it.  It should still be possible for
+somebody who did not read the original message to understand what you are
+talking about.  This is especially important for postings of the type "yes, I
+see this too", where the initial posting was dozens or hundreds of lines.
+^
+Use some technique to identify which text came from the original message, and which text you add.
+: A common convention is to prepend ``> `` to the original message.  Leaving
+white space after the ``> `` and leaving empty lines between your text and the
+original text both make the result more readable.
+^
+Please do not "top post".
+: When you reply to a message, please put your replies after the text that you
+copy in your reply.  As Randy Bush famously writes:
+
+```
+A: Because it reverses the logical flow of conversation.
+Q: Why is top posting frowned upon?
+```
+
+**Don't post large attachments.**<br>
+Please respect the fact that bandwidth is not infinite and that not everyone
+reads email through high-speed connections.  If you must share a large file,
+please upload it to a website and share a URL.