Adds a footer navigation and about section

Closes #127
webcomponents · Mar 3, 2015 · 270b612 · 270b612
1 parent cdeeb07
commit 270b612
Show file tree

Hide file tree

Showing 3 changed files with 139 additions and 7 deletions.
diff --git a/src/files/css/main.css b/src/files/css/main.css
@@ -21,7 +21,6 @@ aside:after,
 figure:after,
 div:after,
 ol:after,
-li:after,
 form:after,
 ul:after,
 dl:after {
@@ -1086,7 +1085,102 @@ header, section {
 }
 
 /** =========================================================================
-    Credits
+    Auxiliar navigation
+    ========================================================================= */
+
+.aux-nav {
+    background: rgba(22,100,151,.8);
+}
+
+.aux-nav ul:first-child {
+    width: 55%;
+}
+
+.aux-nav ul {
+    float: left;
+    width: 15%;
+    list-style: none;
+    padding: 20px 40px;
+}
+
+.aux-nav ul li:first-child {
+    text-transform: uppercase;
+    padding-bottom: 10px;
+}
+
+.aux-nav ul li {
+    color: #3A99D7;
+    font-size: 1em;
+    line-height: 1.4em;
+}
+
+.aux-nav ul li a {
+    color: #fff;
+    text-transform: none;
+}
+
+.aux-nav ul li p {
+    color: #fff;
+    font-size: .9em;
+    line-height: 1.4em;
+    text-transform: none;
+}
+
+/* --- Two columns --- */
+@media (max-width: 980px) {
+    .aux-nav ul:first-child {
+        width: 40%;
+    }
+
+    .aux-nav ul {
+        padding: 20px;
+        width: 20%;
+    }
+}
+
+/* --- One column --- */
+@media (max-width: 660px) {
+    .aux-nav ul:first-child {
+        float: none;
+        width: 100%;
+    }
+
+    .aux-nav ul {
+        float: left;
+        width: 33%;
+        padding: 20px;
+    }
+}
+
+/* --- Tiny screens --- */
+@media (max-width: 480px) {
+    .aux-nav ul {
+        float: none;
+        padding: 20px;
+        width: 100%;
+    }
+
+    .aux-nav ul li:first-child {
+        display: block;
+    }
+
+    .aux-nav ul li {
+        display: inline-block;
+    }
+
+    .aux-nav ul li:not(:last-child):after {
+        content: "\2022";
+        font-size: 14px;
+        padding: 0 5px;
+    }
+
+    .aux-nav ul li:first-child:after {
+        content: " ";
+    }
+}
+
+/** =========================================================================
+    Footer
     ========================================================================= */
 
 .credits {

diff --git a/src/partials/footer.html.eco b/src/partials/footer.html.eco
@@ -1,3 +1,46 @@
+<div class="aux-nav">
+    <nav class="wrapper" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
+        <ul>
+            <li>About</li>
+            <li><p>WebComponents.org is where pioneers and community-members of the Web Components ecosystem (like <em>Polymer</em>, <em>X-tags</em>, and other interested parties) document web components best practices so that others can follow the same path instead of needlessly striking out on their own.</p></li>
+        </ul>
+        <ul>
+            <li>Learn</li>
+            <li>
+                <a href="<%= @site.url %>/articles/" title="Articles"itemprop="url">
+                    <span itemprop="name">Articles</span>
+                </a>
+            </li>
+            <li>
+                <a href="<%= @site.url %>/presentations/" title="Presentations"itemprop="url">
+                    <span itemprop="name">Presentations</span>
+                </a>
+            </li>
+        </ul>
+        <ul>
+            <li>Code</li>
+            <li>
+                <a href="<%= @site.url %>/polyfills/" title="Polyfills"itemprop="url">
+                    <span itemprop="name">Polyfills</span>
+                </a>
+            </li>
+            <li>
+                <a href="<%= @site.url %>/resources/" title="Resources"itemprop="url">
+                    <span itemprop="name">Resources</span>
+                </a>
+            </li>
+        </ul>
+        <ul>
+            <li>Community</li>
+            <li>
+                <a href="<%= @site.url %>/swags/" title="Swags"itemprop="url">
+                    <span itemprop="name">Swags</span>
+                </a>
+            </li>
+        </ul>
+    </nav>
+</div>
+
 <footer class="credits" role="contentinfo">
     <div class="wrapper">
         <p>Made with <span class="love">♥</span> by the <a target="_blank" class="credits-link" href="<%= @getGithubURL() %>/graphs/contributors" itemprop="publisher">WebComponents.org contributors.</a></p>

diff --git a/src/partials/menu.html.eco b/src/partials/menu.html.eco
@@ -37,11 +37,6 @@
                         <span itemprop="name">Resources</span>
                     </a>
                 </li>
-                <li class="nav-item <% if @isActiveMenu('swags'): %>nav-active<% end %>">
-                    <a href="<%= @site.url %>/swags/" class="nav-link" title="Swags" itemprop="url">
-                        <span itemprop="name">Swags</span>
-                    </a>
-                </li>
             </ul>
         </nav>