Convert new site theme to Bootstrap

README.md

@@ -35,6 +35,10 @@ The three core branches of commotion-docs are "test", "staging" and "master", wh
 ## Contribute Using Feature Branches
 Use standard feature branches for updates to test and staging. Create a sub-branch from "staging" if you're working on a content change, and from "test" if you're working on a template or CSS.
 
+### Styling Pages
+
+The Commotion site uses [Bootstrap](http://getbootstrap.com/) as a stylesheet base and [SASS](http://sass-lang.com/) for customization. Most common styles are already available as css classes, and are documented at [http://getbootstrap.com]. Commotion-specific styles are stored as modules in the `/_sass` directory. New SASS modules must be added to `/css/Main.scss` in order to be built when the site is published.
+
 ## Testing Updates, Pull Requests from Feature branch to Staging/Test
 The best way to preview feature branch changes is to preview the site using a local Jekyll installation as described above. When your work is ready, push your feature branch to github and create a pull request for staging or test. 
 

commotionwireless.net/_config.yml

@@ -19,3 +19,9 @@ permalink: /:categories/blog/:year/:month/:day/:title
 tag_dir: /blog/tag
 # paginate: 10
 # paginate_path: "blog/page-:num"
+
+sass:
+    load_paths:
+        - assets/bower_components/bootstrap-sass/assets/stylesheets
+        - _sass
+

commotionwireless.net/_includes/about_menu.html

@@ -1,6 +1,6 @@
 <div id="subsection-menu">
 <h3 class="heading"><a href="/about" class="simple">About</a></h3>
-	<ul>
+	<ul class="nav nav-stacked">
           <li {% if page.url == '/about/' %} class="active" {% endif %}><a href="/about">About Commotion</a></li>
           <li {% if page.url contains '/about/contributors' %} class="active" {% endif %}><a href="/about/contributors">Commotion Contributors</a></li>
           <li {% if page.url contains '/about/faq' %} class="active" {% endif %}><a href="/about/faq">FAQ</a></li>

commotionwireless.net/_includes/blog-sidebar-menu.html

@@ -1,5 +1,2 @@
-<div class="post-calendar">
-    {% include posts-by-date-min.html %}
-</div>
-
-{% include site-tag-cloud.html %}
+{% include posts-by-date-min.html %}
+{% include site-tag-cloud.html %}

commotionwireless.net/_includes/docs_cck_building_menu.html

@@ -1,4 +1,4 @@
-<ul class="submenu">
+<ul class="submenu nav">
   <li {% if page.url contains '/docs/cck/building-mounting/plan-wireless-sites' %} class="active" {% endif %}><a href="{% if page.lang != 'en' %}/{{ page.lang }}{% endif %}/docs/cck/building-mounting/plan-wireless-sites">Plan Wireless Sites</a></li>
   <li {% if page.url contains '/docs/cck/building-mounting/gather-tools-and-wireless-equipment' %} class="active" {% endif %}><a href="{% if page.lang != 'en' %}/{{ page.lang }}{% endif %}/docs/cck/building-mounting/gather-tools-and-wireless-equipment">Gather Tools and Equipment</a></li>
   <li {% if page.url contains '/docs/cck/building-mounting/learn-rooftop-basics' %} class="active" {% endif %}><a href="{% if page.lang != 'en' %}/{{ page.lang }}{% endif %}/docs/cck/building-mounting/learn-rooftop-basics">Learn Rooftop Basics</a></li>

commotionwireless.net/_includes/docs_cck_installing_menu.html

@@ -1,4 +1,4 @@
-<ul class="submenu">
+<ul class="submenu nav">
   <li {% if page.url contains '/docs/cck/installing-configuring/what-is-a-firmware' %} class="active" {% endif %}><a href="{% if page.lang != 'en' %}/{{ page.lang }}{% endif %}/docs/cck/installing-configuring/what-is-a-firmware">What in the world is a firmware?</a></li>
   <li {% if page.url contains '/docs/cck/installing-configuring/install-ubiquiti-router' %} class="active" {% endif %}><a href="{% if page.lang != 'en' %}/{{ page.lang }}{% endif %}/docs/cck/installing-configuring/install-ubiquiti-router">Install on Ubiquiti AirMax</a></li>
   <li {% if page.url contains '/docs/cck/installing-configuring/install-unfi-router' %} class="active" {% endif %}><a href="{% if page.lang != 'en' %}/{{ page.lang }}{% endif %}/docs/cck/installing-configuring/install-unifi-router">Install on Ubiquiti UniFi</a></li>

commotionwireless.net/_includes/docs_cck_localapps_menu.html

@@ -1,4 +1,4 @@
-<ul class="submenu">
+<ul class="submenu nav">
   <li {% if page.url contains '/docs/cck/local-applications/what-is-an-app' %} class="active" {% endif %}><a href="{% if page.lang != 'en' %}/{{ page.lang }}{% endif %}/docs/cck/local-applications/what-is-an-app">What is an app?</a></li>
   <li {% if page.url contains '/docs/cck/local-applications/locating-a-local-server' %} class="active" {% endif %}><a href="{% if page.lang != 'en' %}/{{ page.lang }}{% endif %}/docs/cck/local-applications/locating-a-local-server">Locating a Local Server</a></li>
 </ul>

commotionwireless.net/_includes/docs_cck_mainmenu.html

@@ -1,4 +1,4 @@
-<ul class="submenu">
+<ul class="submenu nav">
   <li {% if page.url contains '/docs/cck/planning' %} class="active" {% endif %}><a href="{% if page.lang != 'en' %}/{{ page.lang }}{% endif %}/docs/cck/planning">Planning</a>
 {% if page.sub_section contains 'cck-planning' %}
 {% include docs_cck_planning_menu.html %}

commotionwireless.net/_includes/docs_cck_networking_menu.html

@@ -1,4 +1,4 @@
-<ul class="submenu">
+<ul class="submenu nav">
   <li {% if page.url contains '/docs/cck/networking/intro-to-mesh' %} class="active" {% endif %}><a href="{% if page.lang != 'en' %}/{{ page.lang }}{% endif %}/docs/cck/networking/intro-to-mesh">Introduction to Mesh</a></li>
   <li {% if page.url contains '/docs/cck/networking/learn-networking-basics' %} class="active" {% endif %}><a href="{% if page.lang != 'en' %}/{{ page.lang }}{% endif %}/docs/cck/networking/learn-networking-basics">Learn Networking Basics</a></li>
   <li {% if page.url contains '/docs/cck/networking/learn-wireless-basics' %} class="active" {% endif %}><a href="{% if page.lang != 'en' %}/{{ page.lang }}{% endif %}/docs/cck/networking/learn-wireless-basics">Learn Wireless Basics</a></li>

commotionwireless.net/_includes/docs_cck_planning_menu.html

@@ -1,4 +1,4 @@
-<ul class="submenu">
+<ul class="submenu nav">
   <li {% if page.url contains '/docs/cck/planning/design-your-network-every-network-tells-story' %} class="active" {% endif %}><a href="{% if page.lang != 'en' %}/{{ page.lang }}{% endif %}/docs/cck/planning/design-your-network-every-network-tells-story">Design Your Network</a></li>
   <li {% if page.url contains '/docs/cck/planning/survey-your-neighbors' %} class="active" {% endif %}><a href="{% if page.lang != 'en' %}/{{ page.lang }}{% endif %}/docs/cck/planning/survey-your-neighbors">Survey Your Neighbors</a></li>
   <li {% if page.url contains '/docs/cck/planning/get-word-out-flyer-design' %} class="active" {% endif %}><a href="{% if page.lang != 'en' %}/{{ page.lang }}{% endif %}/docs/cck/planning/get-word-out-flyer-design">Get the Word Out: Flyer Design</a></li>

commotionwireless.net/_includes/docs_menu.html

@@ -1,15 +1,15 @@
 <div id="subsection-menu">
-<h3 class="heading"><a href="/{% if page.lang != 'en' %}{{ page.lang }}/{% endif %}docs" class="simple">Documentation</a></h3>
-<ul>
-   <li {% if page.url contains '/docs/get-started' %} class="active" {% endif %}><a href="/docs/get-started">Get Started</a></li>
-   <li {% if page.url contains '/docs/get-involved' %} class="active" {% endif %}><a href="/docs/get-involved">Get Involved</a></li>
-   <li {% if page.url contains '/docs/supported-devices' %} class="active" {% endif %}><a href="/docs/supported-devices">Supported Devices</a></li>
-   <li {% if page.url contains '/docs/guides-howtos' %} class="active" {% endif %}><a href="/docs/guides-howtos">Guides and How-tos</a></li>
-   <li {% if page.url contains '/docs/cck' %} class="active" {% endif %}><a href="/docs/cck">Commotion Construction Kit</a>
-{% if page.sub_section contains 'cck' %}
-{% include docs_cck_mainmenu.html %}
-{% endif %}
-   </li>
-   <li {% if page.url contains '/docs/localization' %} class="active" {% endif %}><a href="/docs/localization">Commotion Localization</a></li>
-</ul>
+    <h3 class="heading"><a href="/{% if page.lang != 'en' %}{{ page.lang }}/{% endif %}docs" class="simple">Documentation</a></h3>
+    <ul class="nav nav-stacked">
+        <li {% if page.url contains '/docs/get-started' %} class="active" {% endif %}><a href="/docs/get-started">Get Started</a></li>
+        <li {% if page.url contains '/docs/get-involved' %} class="active" {% endif %}><a href="/docs/get-involved">Get Involved</a></li>
+        <li {% if page.url contains '/docs/supported-devices' %} class="active" {% endif %}><a href="/docs/supported-devices">Supported Devices</a></li>
+        <li {% if page.url contains '/docs/guides-howtos' %} class="active" {% endif %}><a href="/docs/guides-howtos">Guides and How-tos</a></li>
+        <li {% if page.url contains '/docs/cck' %} class="active" {% endif %}><a href="/docs/cck">Commotion Construction Kit</a>
+        {% if page.sub_section contains 'cck' %}
+        {% include docs_cck_mainmenu.html %}
+        {% endif %}
+        </li>
+        <li {% if page.url contains '/docs/localization' %} class="active" {% endif %}><a href="/docs/localization">Commotion Localization</a></li>
+    </ul>
 </div>

commotionwireless.net/_includes/downloads_menu.html

@@ -1,6 +1,6 @@
 <div id="subsection-menu">
 <h3 class="heading"><a href="/download" class="simple">Download</a></h3>
-  <ul>
+  <ul class="nav nav-stacked">
     <li {% if page.url contains '/download/index.html' %} class="active" {% endif %}><a href="/download">Download Commotion</a></li>
     <li {% if page.url contains '/download/routers' %} class="active" {% endif %}><a href="/download/routers">Routers</a></li>
     <li {% if page.url contains '/download/phones' %} class="active" {% endif %}><a href="/download/android">Phones</a></li>

commotionwireless.net/_includes/verifying-downloads.html → commotionwireless.net/_includes/en/verifying-downloads.html

@@ -1,5 +1,5 @@
 <div class="verifying-downloads-block">
-  <h4>Verifying Downloads</h4>
+  <h2>Verifying Downloads</h2>
   <div>
     <p>We use the best practice of using GPG signatures to sign our downloads. This allows you to verify that the files you download here were released by us if you choose to.</p>
 

commotionwireless.net/_includes/en/warning-label.html

@@ -0,0 +1,17 @@
+<div class="warning-label">
+	<div class="alert alert-warning-label">
+		<h2><i class="fa fa-exclamation-triangle"></i> WARNING</h2>
+	</div>
+
+	<div class="warning-bottom">
+		<h2>Commotion</h2>
+
+		<ul>
+			<li><a href="http://commotionwireless.net/understanding-commotions-warning-label#anonymity">Cannot hide your identity</a></li>
+			<li><a href="http://commotionwireless.net/understanding-commotions-warning-label#internet">Does not prevent monitoring of internet traffic</a></li>
+			<li><a href="http://commotionwireless.net/understanding-commotions-warning-label#monitoring">Does not provide strong security against monitoring over the mesh</a></li>
+			<li><a href="http://commotionwireless.net/understanding-commotions-warning-label#jamming">Can be jammed with radio/data-interference</a></li>
+		</ul>
+		<a href="/understanding-commotions-warning-label">For More Info Click Here</a>
+	</div>
+</div>

commotionwireless.net/_includes/es/verifying-downloads.html

@@ -0,0 +1,15 @@
+<div class="verifying-downloads-block alert alert-warning">
+  	<div class="alert alert-warning"><h2>Translation Needed</h1></div>
+  <h2>Verifying Downloads</h2>
+  <div>
+    <p>We use the best practice of using GPG signatures to sign our downloads. This allows you to verify that the files you download here were released by us if you choose to.</p>
+
+    <p>To verify our downloads (optional), you'll need the<br />
+      <br />
+      <a class="button" href="http://downloads.commotionwireless.net/DR2/CE994850.asc" target="_blank">Commotion Signing Key</a><br />
+      <br />
+      and the GPG signature for the downloaded file. This image links to each download's GPG signature: <img src="/icons/seal.png" /></p>
+
+    <p><a href="/es/download/verify-signatures">Find out more</a> on our <a href="/es/download/verify-signatures">Verifying Downloads</a> page.</p>
+  </div>
+</div>

commotionwireless.net/_includes/es/warning-label.html

@@ -0,0 +1,17 @@
+<div class="warning-label">
+	<div class="alert alert-warning-label">
+		<h2><i class="fa fa-exclamation-triangle"></i> ADVERTENCIA</h2>
+	</div>
+
+	<div class="warning-bottom">
+		<h2>Commotion</h2>
+
+		<ul>
+			<li><a href="http://commotionwireless.net/es/understanding-commotions-warning-label#anonymity">No puede esconder tu identidad</a></li>
+			<li><a href="http://commotionwireless.net/es/understanding-commotions-warning-label#internet">No previene el monitoreo del tráfico de internet</a></li>
+			<li><a href="http://commotionwireless.net/es/understanding-commotions-warning-label#monitoring">No provee fuerte seguridad contra el monitoreo sobre el enmallado</a></li>
+			<li><a href="http://commotionwireless.net/es/understanding-commotions-warning-label#jamming">Puede atorarse con interferencias de radio/datos</a></li>
+		</ul>
+		<a href="/understanding-commotions-warning-label">Para Mayor Información Da Click Aquí</a></div>
+	</div>
+</div>

commotionwireless.net/_includes/footer.html

@@ -1,10 +1,10 @@
-</div> <! end main content div !>
+</div> <!-- end main content div -->
 
-<div id="footer_wrap" class="outer">
+<div id="footer_wrap" class="container-fluid template-footer">
 
   <div class="center-arrow-down-ft" align="center"></div>
 
-  <div class="inner home-width">
+  <div class="container">
 
     <p><strong>Contributors:</strong></p>
     <p>
@@ -15,12 +15,10 @@
     </p>
     <div style="margin-top: 30px; padding-top: 30px; border-top:thin solid gray">
       <p><a href="http://creativecommons.org/licenses/by-sa/4.0/"></a>
-	<!--<img alt="Creative Commons License" src="http://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a>-->
       <p>Documentation is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>.</p><p>Please share any derivative works.</p>
     </div>
   </div>
 
 </div>
 </body>
-<script src="/js/menu-dropdown.js"></script>
 </html>

commotionwireless.net/_includes/header.html

@@ -1,58 +1,52 @@
 <!DOCTYPE html>
-<html>
+<html lang="{{page.lang}}">
 
 <head>
     <meta charset='utf-8'>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <meta name="description" content="Community Technology Field Guide: (Re)Building Technology">
     <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
     <link rel="stylesheet" type="text/css" media="screen" href="{{site.baseurl}}/css/main.css">
     <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
-    <!-- <script src="/js/jquery-ui/jquery-ui.min.js"></script> -->
+    <script src="{{site.baseurl}}/assets/bower_components/bootstrap-sass/assets/javascripts/bootstrap.min.js"></script>
     <title>{{ include.title }}</title>
 </head>
 
 <body>
-    <div id="header">
-    <!-- NAV TITLE BAR -->
-    <nav>
-        <div class="color-bar">
-            <div class="color0">&nbsp;</div>
-            <div class="color1">&nbsp;</div>
-            <div class="color2">&nbsp;</div>
-            <div class="color3">&nbsp;</div>
-            <div class="color4">&nbsp;</div>
+    <header class="template-header">
+        <!-- NAV TITLE BAR -->
+        <nav class="navbar navbar-inverse">
+            <div class="color-bar">
+                <div class="commotion-pink">&nbsp;</div>
+                <div class="commotion-blue">&nbsp;</div>
+                <div class="commotion-gold">&nbsp;</div>
+                <div class="commotion-yellow">&nbsp;</div>
+                <div class="commotion-purple">&nbsp;</div>
+            </div>
+            <!-- Main navbar -->
+            {% include menu-navbar-main.html %}
+        </nav>
+
+        <div class="container">
+            <div id="header_wrap" class="row">
+                <div class="col-md-2 col-md-offset-1">
+                    <img src="{{site.baseurl}}/icons/commotion_full_web_inverse.svg" alt="The Commotion Wireless Project logo." class="project_logo img-responsive">
+                </div>
+                <header class="col-md-8">
+                    <h1 id="project_title">{{ include.title }}</h1>
+                    <h2 id="project_tagline" class="small">{{ include.subtitle }}</h2>
+                    {% if page.abstract %}
+                    <section id="header-text">
+                        <p>{{ page.abstract }}</p>
+                    </section>
+                    {% endif %}
+                </header>
+                <div class="col-md-1">
+                    <!-- placeholder div to balance offset -->
+                </div>
+            </div>
         </div>
-
-    <!-- Drop down bars: menu-dropdown.css -->
-        {% include menu-dropdown.html %}
-    <!-- END Drop down bars -->
-
-        <div id="maintitle">
-            <!-- <a href="{{site.baseurl}}/">
-                {{site.title}}
-            </a> -->
-        </div>
-
-        <!-- ul here will create a flat list at the right side of navbar -->
-        {% include language-switcher-navbar.html %}
-    </nav>
-
-    <div id="header_wrap" class="outer">
-        <header class="inner {{include.width}} align-center">
-            <img src="{{site.baseurl}}/icons/commotion_full_web_inverse.svg" alt="The Commotion Wireless Project logo." class="project_logo">
-    <h1 id="project_title">{{ include.title }}</h1>
-    <h2 id="project_tagline" style="max-width:100%;">{{ include.subtitle }}</h2>
-    {% if page.abstract %}
-    <section id="header-text">
-    <p>{{ page.abstract }}</p>
-    </section>
-    {% endif %}
-
     </header>
-    </div>
-
-
-</div>
-<div id="main_content_wrap" class="outer">
-    <div class="center-arrow-down" align="center"></div>
+    <div id="main_content_wrap" class="outer">
+        <div class="center-arrow-down" align="center"></div>

commotionwireless.net/_includes/language-switcher-navbar.html

@@ -1,20 +1,20 @@
-<ul class="lang-switch">
-<li role="heading">Language:</li>
-<li><a {% if page.lang contains 'en' %} class="active-lang"{% endif %} href="
-{% if page.url contains '/fr' %}{{ page.url | remove_first:'/fr' }}
-{% elsif page.url contains '/es' %}{{ page.url | remove_first:'/es' }}
-{% else %}{{ page.url }}
-{% endif %}" title="English">En</a></li>
+<ul class="lang-switch nav navbar-nav navbar-right">
+    <li role="heading"><span class="nav-plain-text">Language:</span></li>
+    <li><a {% if page.lang contains 'en' %} class="active-lang"{% endif %} href="
+        {% if page.url contains '/fr' %}{{ page.url | remove_first:'/fr' }}
+        {% elsif page.url contains '/es' %}{{ page.url | remove_first:'/es' }}
+        {% else %}{{ page.url }}
+        {% endif %}" title="English">En</a></li>
 
-<li><a {% if page.lang contains 'fr' %} class="active-lang"{% endif %} href="
-{% if page.url contains '/fr' %}{{ page.url }}
-{% elsif page.url contains '/es' %}{{ page.url | replace_first:'/es','/fr' }}
-{% else %}{{ page.url | prepend:'/fr' }}
-{% endif %}" title="French">Fr</a></li>
+    <li><a {% if page.lang contains 'fr' %} class="active-lang"{% endif %} href="
+        {% if page.url contains '/fr' %}{{ page.url }}
+        {% elsif page.url contains '/es' %}{{ page.url | replace_first:'/es','/fr' }}
+        {% else %}{{ page.url | prepend:'/fr' }}
+        {% endif %}" title="French">Fr</a></li>
 
-<li><a {% if page.lang contains 'es' %} class="active-lang"{% endif %} href="
-{% if page.url contains '/es' %}{{ page.url }}
-{% elsif page.url contains '/fr' %}{{ page.url | replace_first:'/fr','/es' }}
-{% else %}{{ page.url | prepend:'/es' }}
-{% endif %}" title="Spanish">Es</a></li>
+    <li><a {% if page.lang contains 'es' %} class="active-lang"{% endif %} href="
+        {% if page.url contains '/es' %}{{ page.url }}
+        {% elsif page.url contains '/fr' %}{{ page.url | replace_first:'/fr','/es' }}
+        {% else %}{{ page.url | prepend:'/es' }}
+        {% endif %}" title="Spanish">Es</a></li>
 </ul>