Style updates

_includes/footer.html

@@ -1,3 +1,9 @@
 <footer>
-   CallbackWomen is by Carina C. Zona <a href="https://twitter.com/cczona">@cczona</a>
+   <p>CallbackWomen is by Carina C. Zona <a href="https://twitter.com/cczona">@cczona</a></p>
+		<ul>
+            <li><a href="http://twitter.com/callbackwomen"><strong>follow @callbackwomen</strong></a></li>
+            <li><a href="https://www.stickermule.com/marketplace/9277-callbackwomen-2">swag</a></li>
+            <li id="navdonate"><a href="donate.html">donate</a></li>
+        </ul>
+	</div>
 </footer>

_includes/navigation.html

@@ -1,75 +1,47 @@
-<table id="nav">
-    <tr>
-        <td>
-
-            <p>About</p>
-
-            <ul>
-                <li> <a href="/">Home</a></li>
-                <li> <a href="testimonials.html">Testimonials</a></li>
-                <li> <a href="https://storify.com/cczona/callbackwomen-appreciations">Kudos</a> <img src="images/icons/storify-icon.jpg" style="height: 10px"></li>
-                <li> <a href="http://meetup.com/CallbackWomen/">Meetup Group</a></li>
-				<li> <a href="https://www.youtube.com/channel/UCHPAN418xoGcgu2N51C4tWQ">Videos</a></li>
-                <li> <a href="trainings.html">Speaker Trainings</a></li>
-                <li> <a href="code-of-conduct.html">Code of Conduct</a></li>
-            </ul>
-
-        </td>
-
-        <td>
-
-            <p>Speakers</p>
-
-            <ul>
-                <li> <a href="https://storify.com/cczona/speaker-travel-funding-pay-talk-development-suppor">Speaker Funding &amp; Support</a>
-                    <img src="images/icons/storify-icon.jpg" style="height: 10px"></li>
-                <li>
-                     <a href="/speaker-pay.html">Speaker Pay</a>  
+<nav id="nav" class="row flex-row">
+	<div class="col">
+		<h3>About</h3>
+		<ul>
+            <li> <a href="/">Home</a></li>
+            <li> <a href="testimonials.html">Testimonials</a></li>
+            <li> <a href="https://storify.com/cczona/callbackwomen-appreciations">Kudos <img src="images/icons/storify-icon.jpg" style="height: 10px"></a></li>
+			<li> <a href="https://www.youtube.com/channel/UCHPAN418xoGcgu2N51C4tWQ">Videos</a></li>
+            <li> <a href="trainings.html">Speaker Trainings</a></li>
+            <li> <a href="code-of-conduct.html">Code of Conduct</a></li>
+        </ul>
+	</div>
+	<div class="col">
+		<h3>Speakers</h3>
+		<ul>
+            <li> <a href="https://storify.com/cczona/speaker-travel-funding-pay-talk-development-suppor">Speaker Funding &amp; Support <img src="images/icons/storify-icon.jpg" style="height: 10px"></a>
                 </li>
-                <li> <a href="https://storify.com/cczona/tech-women-give-keynote-addresses-at-tech-conferen">Tech Women Keynoting</a>
-                    <img src="images/icons/storify-icon.jpg" style="height: 10px"></li>
-                <li> <a href="https://storify.com/cczona/inclusive-food-drinks-and-celebrating-at-tech-conf">Tech Girls Speaking</a>
-                    <img src="images/icons/storify-icon.jpg" style="height: 10px"></li>
-                <li> <a href="resources-for-speakers.html">Resources for Speakers</a> </li>
-            </ul>
-        </td>
-    </tr>
-
-    <tr>
-        <td>
-
-            <p>Advocacy</p>
-
-            <ul>
-                <li><a href="https://storify.com/cczona/diversity-scholarships-mentoring-at-tech-conferenc" target="_blank">Attendee Diversity</a>
-                    <img src="images/icons/storify-icon.jpg" style="height: 10px"></li>
-                <li> <a href="https://storify.com/cczona/tech-confs-featuring-family-inclusive-features" target="_blank">Parents, Families, &amp; Youths</a>
-                    <img src="images/icons/storify-icon.jpg" style="height: 10px"></li>
-                <li> <a href="https://storify.com/cczona/tech-conferences-with-inclusive-restrooms" target="_blank">All-Genders Restrooms</a>
-                    <img src="images/icons/storify-icon.jpg" style="height: 10px"></li>
-                <li> <a href="https://storify.com/cczona/speaker-travel-funding-pay-talk-development-suppor" target="_blank">Spoken Languages</a>
-                    <img src="images/icons/storify-icon.jpg" style="height: 10px"></li>
-                <li> <a href="https://storify.com/cczona/inclusive-food-drinks-and-celebrating-at-tech-conf" target="_blank">Food &amp; Activities</a>
-                    <img src="images/icons/storify-icon.jpg" style="height: 10px"></li>
-                <li> <a href="https://storify.com/cczona/importance-of-swag-shirts-for-bodies-of-varied-sha" target="_blank">Shirts</a>
-                    <img src="images/icons/storify-icon.jpg" style="height: 10px" target="_blank"></li>
-                <li><a href="https://storify.com/cczona/a-line-at-the-restroom" target="_blank">Restroom Line Ratio</a>
-                    <img src="images/icons/storify-icon.jpg" style="height: 10px"></li>
-            </ul>
-        </td>
-
-        <td>
-
-            <p>More</p>
-
-            <ul>
-                <li> <a href="http://twitter.com/callbackwomen"><strong>Follow @callbackwomen</strong></a>
-<img src="images/icons/twitter-24.png"></li>
-                <li> <a href="eligibility.html">Conference Eligibility</a></li>
-                <li> <a href="https://www.stickermule.com/marketplace/9277-callbackwomen-2">Swag</a></li>
-                <li> <a href="donate.html">Donate</a></li>
-            </ul>
-
-        </td>
-    </tr>
-</table>
+            <li>
+                 <a href="/speaker-pay.html">Speaker Pay</a>  
+            </li>
+            <li> <a href="https://storify.com/cczona/tech-women-give-keynote-addresses-at-tech-conferen">Tech Women Keynoting <img src="images/icons/storify-icon.jpg" style="height: 10px"></a>
+            </li>
+            <li> <a href="https://storify.com/cczona/inclusive-food-drinks-and-celebrating-at-tech-conf">Tech Girls Speaking <img src="images/icons/storify-icon.jpg" style="height: 10px"></a>
+            </li>
+            <li> <a href="resources-for-speakers.html">Resources for Speakers</a> </li>
+        </ul>
+	</div>
+	<div class="col">
+		<h3>Advocacy</h3>
+		<ul>
+            <li><a href="https://storify.com/cczona/diversity-scholarships-mentoring-at-tech-conferenc" target="_blank">Attendee Diversity <img src="images/icons/storify-icon.jpg" style="height: 10px"></a>
+            </li>
+            <li> <a href="https://storify.com/cczona/tech-confs-featuring-family-inclusive-features" target="_blank">Parents, Families, &amp; Youths <img src="images/icons/storify-icon.jpg" style="height: 10px"></a>
+            </li>
+            <li> <a href="https://storify.com/cczona/tech-conferences-with-inclusive-restrooms" target="_blank">All-Genders Restrooms <img src="images/icons/storify-icon.jpg" style="height: 10px"></a>
+            </li>
+            <li> <a href="https://storify.com/cczona/speaker-travel-funding-pay-talk-development-suppor" target="_blank">Spoken Languages <img src="images/icons/storify-icon.jpg" style="height: 10px"></a>
+            </li>
+            <li> <a href="https://storify.com/cczona/inclusive-food-drinks-and-celebrating-at-tech-conf" target="_blank">Food &amp; Activities <img src="images/icons/storify-icon.jpg" style="height: 10px"></a>
+            </li>
+            <li> <a href="https://storify.com/cczona/importance-of-swag-shirts-for-bodies-of-varied-sha" target="_blank">Shirts <img src="images/icons/storify-icon.jpg" style="height: 10px"></a>
+            </li>
+            <li><a href="https://storify.com/cczona/a-line-at-the-restroom" target="_blank">Restroom Line Ratio <img src="images/icons/storify-icon.jpg" style="height: 10px"></a>
+            </li>
+        </ul>
+	</div>
+</nav>

_includes/sidenavigation.html

@@ -0,0 +1,15 @@
+<ul>
+    <li><a href="/">Home</a></li>
+    <li><a href="trainings.html">Speaker Trainings</a></li>
+    <li><a href="eligibility.html">Conference Eligibility</a></li>
+    <li><a href="speaker-pay.html">Speaker Pay</a></li>
+    <li><a href="testimonials.html">Testimonials</a></li>
+    <li><a href="code-of-conduct.html">Code of Conduct</a></li>
+    <!-- more -->
+    <li><a href="https://www.youtube.com/channel/UCHPAN418xoGcgu2N51C4tWQ">Videos</a></li>
+    <li><a href="https://www.stickermule.com/marketplace/9277-callbackwomen-2">Swag</a></li>
+    <li><a href="http://twitter.com/callbackwomen">Follow @callbackwomen</a></li>
+    <li id="navdonate"> <a href="donate.html">Donate</a></li>
+
+</ul>
+

_layouts/default.html

@@ -4,11 +4,12 @@
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
-    <link href="https://fonts.googleapis.com/css?family=Chivo:900' rel='stylesheet' type='text/css">
-    <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen" />
+    <link href="https://fonts.googleapis.com/css?family=Libre+Baskerville|Poppins" rel="stylesheet">
+    <link rel='stylesheet' id='fontawesome-css'  href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css?ver=1.0' type='text/css' media='all' />
+    <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css?v=10000003" media="screen" />
     <link rel="stylesheet" type="text/css" href="stylesheets/pygment_trac.css" media="screen" />
 <!--    <link rel="stylesheet" type="text/css" href="stylesheets/twitter-widget.css" media="screen" />-->
-    <link rel="stylesheet" type="text/css" href="stylesheets/callbackwomen.css" media="screen" />
+    <link rel="stylesheet" type="text/css" href="stylesheets/callbackwomen.css?v=10000005" media="screen" />
     <link rel="stylesheet" type="text/css" href="stylesheets/print.css" media="print" />
     <!--[if lt IE 9]>
     <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
@@ -17,44 +18,61 @@
 </head>
 
 <body>
-    <div id="container">
-        <div class="inner">
-            <section id="main_content">
-                <header id="branding">
-                    <a href="index.html">
-                        <img id="logo" alt="CallbackWomen" title="CallbackWomen" src="images/callbackwomen-logo-wide-large.png">
-                        </a>
-                </header>
+	<div id="wrapper">
+		<div id="sidenav" class="sidebarnav">
+			 <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
+			 {% include sidenavigation.html %}
+		</div>
+	    <div id="main">
+		    <header id="branding">
+                <div class="logo-menu">
+                	<div class="wrapper">
+                	<div id="opennav"><i class="fa fa-align-justify fa-2x" aria-hidden="true" onclick="openNav()"></i></div>
+                	<a href="index.html" id="logo"><img  alt="CallbackWomen" title="CallbackWomen" src="images/callbackwomen-logo-white.png"></a>
+                	</div>
+                </div>
+                <div class="quote">
+                	<div class="wrapper">
+                	<h1>Your voice matters.</h1>
+                	</div>
+                </div>
 
-                <article id="page-primary-content">
-                    <h1>
-                    {{ page.title }}
-                    </h1>
-
-                    {{ content }}
-                </article>
-
-                <aside id="sidebar">
-                    <section id="donate">
-                        <p align="center">
-                            <a href="donate.html"><img alt="Donate" src="https://s3.amazonaws.com/moonclerk/buttons/donate.png" /></a>
-                        </p>
-                    </section>
-
-                    <section id="twitter-feed">
-<!--
-                        <a href="http://twitter.com/callbackwomen"><strong>Follow @callbackwomen</strong></a>
-                            <img src="images/icons/twitter-24.png"
--->
-                        {% include twitter-feed.html %}
-                    </section>
-
-                </aside>
+	        </header>
+	        <div class="inner">
+	            <section id="main_content">
+	                <article id="page-primary-content">
+	                    <h1>
+	                    {{ page.title }}
+	                    </h1>
+
+	                    {{ content }}
+	                </article>
+
+	                <aside id="sidebar">
+	                    <section id="donate">
+	                    	<h3>Help sustain our work.</h3>
+	                        <p>
+	                            <a href="donate.html"><button id="donate-button" class="donate">Donate</button></a>
+	                        </p>
+	                    </section>
+
+	                    <section id="twitter-feed">
+	<!--
+	                        <a href="http://twitter.com/callbackwomen"><strong>Follow @callbackwomen</strong></a>
+	                            <img src="images/icons/twitter-24.png"
+	-->
+	                        {% include twitter-feed.html %}
+	                    </section>
+
+	                </aside>
                     <nav>
                         <hr/> {% include navigation.html %}
                     </nav>
-            </section>
-        </div>
-    </div>
+	            </section>
+	        </div>
+	        {% include footer.html %}
+	    </div>
+	    <script type="text/javascript" src="/javascript/main.js"></script>
+	</div><!-- end #wrapper -->
 </body>
 </html>

code-of-conduct.md

@@ -7,7 +7,7 @@ All attendees, speakers, sponsors and volunteers at CallbackWomen events are req
 
 ## Need Help?
 
-Contact the event organizer who is identified on the event’s meetup page and introduced at the outset of the event. Written reports can be made anonymously at [https://callbackwomen.wufoo.com/forms/code-of-conduct-report/](https://callbackwomen.wufoo.com/forms/code-of-conduct-report/)
+Contact the event organizer who is identified on the event’s meetup page and introduced at the outset of the event. Written reports can be made anonymously at [our Conduct Report Form](https://callbackwomen.wufoo.com/forms/code-of-conduct-report/)
 
 ## The Quick Version
 
@@ -27,6 +27,6 @@ Sponsors are also subject to the anti-harassment policy. In particular, sponsors
 
 If a participant engages in harassing behavior, the organizers may take any action they deem appropriate, including warning the offender or expulsion from the event with no refund.
 
-If you are being harassed, notice that someone else is being harassed, or have any other concerns, please contact a member of event staff immediately. Event staff can be identified as they'll be wearing staff name badges. Written reports can be made anonymously at [https://callbackwomen.wufoo.com/forms/code-of-conduct-report/](https://callbackwomen.wufoo.com/forms/code-of-conduct-report/)
+If you are being harassed, notice that someone else is being harassed, or have any other concerns, please contact a member of event staff immediately. Event staff can be identified as they'll be wearing staff name badges. Written reports can be made anonymously at [our Conduct Report Form](https://callbackwomen.wufoo.com/forms/code-of-conduct-report/).
 
 Event staff will be happy to help participants contact venue security or local law enforcement, or otherwise assist those experiencing harassment to feel safe for the duration of the event. We value your attendance.

donate.md

@@ -3,7 +3,7 @@ title: "Donate"
 layout: default
 ---
 
-Since 2013, CallbackWomen has been making [substantial impacts](testimonials.htm).  Those results are entirely from volunteer labor: several thousand hours spent on doing research, creating [resources](http://storify.com/cczona), advocating, [interviewing](), holding [trainings](trainings.html), promoting speakers, and publizing conferences.
+Since 2013, CallbackWomen has been making [substantial impacts](testimonials.html).  Those results are entirely from volunteer labor: several thousand hours spent on doing research, creating [resources](http://storify.com/cczona), advocating, [interviewing](), holding [trainings](trainings.html), promoting speakers, and publizing conferences.
 
 Individuals, conferences, and companies benefit financially. Please give back. Your donation is affirmation that you value the work and results. Your donation helps make it sustainable to accomplish  more.
 

index.md

@@ -4,7 +4,7 @@ layout: default
 ---
 
 
-## Mission
+## Our Mission
 
 The mission of [CallbackWomen](http://twitter.com/callbackwomen) is to radically expand gender diversity at the podium of professional programmers' conferences. It's about [**all** genders underrepresented in tech](#underrepresented), including non-binary, gender nonconforming, trans women, trans men, cis women, and more.
 
@@ -14,7 +14,7 @@ CallbackWomen **remakes norms**. Since 2013, CallbackWomen's work of advocacy, e
 
 ## What We Do
 
-CallbackWomen focus is on serving organizers and speakers. The testimonials page shares individual stories of its impact, from the perspectives of [a long-time conference organizer](personal-stories.html) and [speakers](personal-stories.html#speakers).
+CallbackWomen focus is on serving organizers and speakers. The testimonials page shares individual stories of its impact, from the perspectives of [a long-time conference organizer](testimonials.html#jan-lehnardt-organizer) and [speakers](testimonials.html).
 
 ### Organizers
 
@@ -24,7 +24,7 @@ CallbackWomen focus is on serving organizers and speakers. The testimonials page
 * Advocating for innovative ways to increase diversity among attendees
 * Pushing back on assumptions about gender, experience, and qualifications
 * Amplifing their fellow conference organizers' diversity and diversity commitments, models, and successes
-* Educating them about the [Code of Conduct Pledge](http://twitter.com/cocpledge)(#cocpledge)[https://twitter.com/search?q=cocpledge] impact on sponsorship, ticket sales, volunteerism, and speaker participation
+* Educating them about the [Code of Conduct Pledge](http://twitter.com/cocpledge) [(#cocpledge)](https://twitter.com/search?q=cocpledge) impact on sponsorship, ticket sales, volunteerism, and speaker participation
 * Supporting them in adopting codes of conduct (CoCs), and showing conference organizers handling CoC enforcement well
 * Normalizing expectations of gender diversity at the podium
 * Exposing them to highly qualified speakers who are women, as well as (*upon individuals' permission*) genderqueer & gender non-conforming
@@ -50,7 +50,7 @@ CallbackWomen is about every person whose gender is underrepresented in tech. `W
 Being non-consensually positioned in a context called `*Women` implictly misgenders a gender non-binary person or a trans man. CallbackWomen enthusiastically promotes the work of speakers who are gender non-binary and speakers who are trans men, *if the speaker has given personal consent to*.
 
 
-[^1]: More info: http://itspronouncedmetrosexual.com/2013/01/a-comprehensive-list-of-lgbtq-term-definitions/
+[^1]: More info on [It's pronounced metrosexual](http://itspronouncedmetrosexual.com/2013/01/a-comprehensive-list-of-lgbtq-term-definitions/)
 
 
 

javascript/main.js

@@ -0,0 +1,11 @@
+/* Set the width of the side navigation to 250px and the left margin of the page content to 250px and add a black background color to body */
+function openNav() {
+    document.getElementById("sidenav").style.width = "250px";
+    document.getElementById("main").style.marginLeft = "250px";
+}
+
+/* Set the width of the side navigation to 0 and the left margin of the page content to 0, and the background color of body to white */
+function closeNav() {
+    document.getElementById("sidenav").style.width = "0";
+    document.getElementById("main").style.marginLeft = "0";
+}