Mercurial > public > sg101

changeset 1066:9410dc5b3103

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Separate logo areas for small / medium screens.
author Brian Neal <bgneal@gmail.com>
date Thu, 31 Mar 2016 20:20:29 -0500
parents 6a18e7ba0609
children 1868467244d2
files sg101/templates/v3/base.html
diffstat 1 files changed, 33 insertions(+), 3 deletions(-) [+]
line wrap: on
line diff
--- a/sg101/templates/v3/base.html	Wed Mar 30 21:19:24 2016 -0500
+++ b/sg101/templates/v3/base.html	Thu Mar 31 20:20:29 2016 -0500
@@ -62,18 +62,48 @@
       </div>
    </div>
 
-
-<div id="logo-row" class="row align-center">
+{#------------------------- Header logo --------------------------------------#}
+<div id="logo-row" class="row align-center show-for-medium">
    <div class="small-4 columns">
       <a href="/"><img src="{% static "images/v3-logo.png" %}" alt="SG101 logo"></a>
    </div>
-   <div class="small-8 columns show-for-medium">
+   <div class="small-8 columns">
       <a href="/forums/topic/27440/">
       <img src="{% static "images/10yearsSG101-Rob_J.jpg" %}" alt="SG101 Turns 10 Years Old!"
             title="SG101 Turns 10 Years Old!"/></a>
    </div>
 </div>
 
+{#------------------------- Small screen logo orbit -------------------------#}
+<div class="orbit hide-for-medium" role="region" aria-label="SG101 Logo and Banners" data-orbit>
+  <ul class="orbit-container">
+    <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
+    <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
+    <li class="is-active orbit-slide">
+      <div class="row align-center hide-for-medium">
+         <div class="small-6 columns">
+            <a href="/"><img src="{% static "images/v3-logo.png" %}" alt="SG101 logo"></a>
+         </div>
+      </div>
+    </li>
+    <li class="orbit-slide">
+      <div class="row align-center hide-for-medium">
+         <div class="small-12 columns">
+            <a href="/forums/topic/27440/">
+            <img src="{% static "images/10yearsSG101-Rob_J.jpg" %}" alt="SG101 Turns 10 Years Old!"
+                  title="SG101 Turns 10 Years Old!"/></a>
+         </div>
+      </div>
+    </li>
+  </ul>
+  <nav class="orbit-bullets">
+    <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
+    <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
+  </nav>
+</div>
+
+{#--------------------------- Main Menus -------------------------------------#}
+
 <div class="top-bar" id="main-menu">
    <div class="top-bar-title">
       <span data-responsive-toggle="responsive-menu" data-hide-for="medium">