Semantacity for cbrodigan

apps/mozorg/templates/mozorg/firefox/base.html

@@ -14,48 +14,48 @@
 
 {% block site_header_nav %}
 <nav role="navigation" id="nav-main">
-  <ul role="menubar">
+  <ol role="menubar">
     <li class="first" id="nav-main-features"><a href="/en-US/firefox/features/" tabindex="0" aria-owns="nav-main-features-submenu" aria-haspopup="true">Desktop</a>
-      <ul aria-expanded="false" id="nav-main-features-submenu">
+      <ol aria-expanded="false" id="nav-main-features-submenu">
         <li class="first"><a href="{{ url('mozorg.firefox_features') }}" tabindex="-1">Features</a></li>
         <li><a href="{{ url('mozorg.firefox_customize') }}" tabindex="-1">Customize</a></li>
         <li><a href="{{ url('mozorg.firefox_performance') }}" tabindex="-1">Performance</a></li>
         <li><a href="{{ url('mozorg.firefox_technology') }}" tabindex="-1">Technology</a></li>
         <li class="last"><a href="{{ url('mozorg.firefox_security') }}" tabindex="-1">Privacy &amp; Security</a></li>
-      </ul>
+      </ol>
     </li>
     <li id="nav-main-mobile"><a href="/en-US/mobile/" tabindex="0" aria-owns="nav-main-mobile-submenu" aria-haspopup="true">Mobile</a>
-      <ul aria-expanded="false" id="nav-main-mobile-submenu">
+      <ol aria-expanded="false" id="nav-main-mobile-submenu">
         <li class="first"><a href="/en-US/mobile/" tabindex="-1">Download</a></li>
         <li><a href="/en-US/mobile/features/" tabindex="-1">Features</a></li>
         <li><a href="https://addons.mozilla.org/en-US/mobile/?browse=featured" tabindex="-1">Customize</a></li>
         <li class="last"><a href="/en-US/mobile/faq/" tabindex="-1">FAQ</a></li>
-      </ul>
+      </ol>
     </li>
     <li id="nav-main-releases" class=""><a href="/en-US/firefox/channel/" tabindex="0" aria-owns="nav-main-releases-submenu" aria-haspopup="true">Releases</a>
-      <ul aria-expanded="false" id="nav-main-releases-submenu">
+      <ol aria-expanded="false" id="nav-main-releases-submenu">
         <li class="first"><a href="/en-US/firefox/channel/" tabindex="-1">Overview</a></li>
         <li><a href="/en-US/firefox/aurora/" tabindex="-1">Firefox Aurora</a></li>
         <li><a href="/beta/" tabindex="-1">Firefox Beta</a></li>
         <li><a href="/en-US/firefox/" tabindex="-1">Firefox</a></li>
         <li class="last"><a href="/en-US/firefox/organizations/" tabindex="-1">Firefox for Organizations</a></li>
-      </ul>
+      </ol>
     </li>
     <li id="nav-main-addons"><a href="https://addons.mozilla.org/" tabindex="0" aria-owns="nav-main-addons-submenu" aria-haspopup="true">Add-ons</a>
-      <ul aria-expanded="false" id="nav-main-addons-submenu">
+      <ol aria-expanded="false" id="nav-main-addons-submenu">
         <li class="first"><a href="https://addons.mozilla.org/firefox/" tabindex="-1">Desktop Add-ons</a></li>
         <li><a href="https://addons.mozilla.org/mobile/" tabindex="-1">Mobile Add-ons</a></li>
         <li class="last"><a href="http://www.getpersonas.com/" tabindex="-1">Personas</a></li>
-      </ul>
+      </ol>
       </li>
       <li id="nav-main-support"><a href="http://support.mozilla.org/" tabindex="0" aria-owns="nav-main-support-submenu" aria-haspopup="true">Support</a>
-      <ul aria-expanded="false" id="nav-main-support-submenu">
+      <ol aria-expanded="false" id="nav-main-support-submenu">
         <li class="first"><a href="http://support.mozilla.org/en-US/kb/" tabindex="-1">Desktop Support</a></li>
         <li class="last"><a href="http://support.mozilla.org/mobile" tabindex="-1">Mobile Support</a></li>
-      </ul>
+      </ol>
     </li>
     <li class="last" id="nav-main-about"><a href="/en-US/firefox/about/" tabindex="0" aria-owns="nav-main-about-submenu" aria-haspopup="true">About</a>
-      <ul aria-expanded="false" id="nav-main-about-submenu">
+      <ol aria-expanded="false" id="nav-main-about-submenu">
         <li class="first"><a href="http://blog.mozilla.com/" tabindex="-1">Blog</a></li>
         <li><a href="/en-US/firefox/about/" tabindex="-1">About Firefox</a></li>
         <li><a href="http://www.mozilla.org/join" tabindex="-1">Join Mozilla</a></li>
@@ -65,14 +65,14 @@
         <li><a href="/en-US/about/careers.html" tabindex="-1">Careers</a></li>
         <li><a href="/en-US/about/partnerships.html" tabindex="-1">Partnerships</a></li>
         <li class="last"><a href="/en-US/about/contact.html" tabindex="-1">Contact Us</a></li>
-      </ul>
+      </ol>
     </li>
-  </ul>
+  </ol>
 </nav>
 {% endblock %}
 
 {% block site_header_logo %}
-<h1><img src="{{ media('img/firefox/template/header-logo.png') }}" alt="Mozilla Firefox" height="95" width="250"></h1>
+<h2><img src="{{ media('img/firefox/template/header-logo.png') }}" alt="Mozilla Firefox" height="95" width="250"></h2>
 {% endblock %}
 
 {% block site_js %}

apps/mozorg/templates/mozorg/firefox/organizations/organizations.html

@@ -12,7 +12,7 @@
 {% endblock %}
 
 {% block site_header_logo %}
-<h1><img src="{{ media('img/firefox/organizations/title.png') }}" alt="Firefox ESR" height="68" width="299"></h1>
+<h2><img src="{{ media('img/firefox/organizations/title.png') }}" alt="Firefox ESR" height="68" width="299"></h2>
 {% endblock %}
 
 

media/css/firefox/menu.less

@@ -1,63 +1,35 @@
 /* Top Level Menu Items */
 
+#nav-main ol,
 #nav-main ul {
     .inline-block;
     margin: 0;
-}
 
-#nav-main li {
+    li {
         position: relative;
         z-index: 100;
-}
 
-#nav-main ul li a,
+        a,
-#nav-main ul li a:link,
+        a:link,
-#nav-main ul li a:visited,
+        a:visited,
-#nav-main ul li span {
+        span {
            z-index: 100;
            position: relative;
         }
 
-#nav-main ul li.hover a,
+        &.hover a {
-#nav-main ul li.hover a:link,
-#nav-main ul li.hover a:visited {
             background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAHAQMAAADpvlVZAAAAAXNSR0IArs4c6QAAAAZQTFRFAAAA////pdmf3QAAAAF0Uk5TAEDm2GYAAAABYktHRACIBR1IAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3AMBEjcKOURVdQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAdSURBVAjXY2BiYGBnYOBvYJA/wGD/gKH+A8P/HwAiJAX9mUp9sAAAAABJRU5ErkJggg==);
             background-repeat: no-repeat;
             background-position: center bottom;
             outline: 0;
         }
-
-#nav-main ul ul li.hover a,
-#nav-main ul ul li.hover a:link,
-#nav-main ul ul li.hover a:visited {
-    background-image: none;
     }
 
-#nav-main ul li.last a,
-#nav-main ul li.last span {
-    border-right-color: transparent;
-}
-
-#nav-main ul li.last a:hover,
-#nav-main ul li.last a:focus,
-#nav-main ul li.last a:active,
-.js #nav-main ul li.last a:focus,
-#nav-main ul li.hover a {
-    border-right-color: #98b2c9;
-}
-
-/* Second-level Menu Items */
-
-#nav-main ul li.last a:hover,
-#nav-main ul li.last a:focus,
-#nav-main ul li.last a:active,
-.js #nav-main ul li.last a:focus,
-#nav-main ul li.hover a {
-    border-right-color: #98b2c9;
 }
 
 /* Second-level Menu Items */
 
+.js #nav-main li.hover ol,
 .js #nav-main li.hover ul {
     left: 0;
     opacity: 1;
@@ -66,15 +38,18 @@
     transition: opacity 0.2s ease-in-out;
 }
 
-#nav-main ul ul,
+#nav-main li ol,
-#nav-main ul ul li {
+#nav-main li ol li,
+#nav-main li ul,
+#nav-main li ul li {
     height: auto;
     border: 0;
     float: none;
     display: block;
 }
 
-#nav-main ul ul {
+#nav-main li ol,
+#nav-main li ul {
     position: absolute;
     left: -999em;
     top: 48px;
@@ -85,16 +60,15 @@
     background: #fff;
     padding: 1px 0;
     border-bottom: 1px solid #ddd;
-}
 
-#nav-main ul ul li {
+    li,
+    li.hover {
         background-image: none;
-}
 
-#nav-main ul ul li a,
+        a,
-#nav-main ul ul li a:link,
+        a:link,
-#nav-main ul ul li a:visited,
+        a:visited,
-#nav-main ul ul li span {
+        span {
             overflow: hidden;
             padding: 7px 10px;
             margin: 0;
@@ -110,80 +84,72 @@
             transition: background 0.1s ease-in;
         }
 
-#nav-main ul ul li a:hover,
+        a,
-#nav-main ul ul li a:focus,
+        a:hover,
-#nav-main ul ul li a:active,
+        a:focus,
-.js #nav-main ul ul li a:focus,
+        a:active {
-#nav-main ul li.current ul li a:hover,
+            background-image: none;
-#nav-main ul li.current ul li a:focus,
-#nav-main ul li.current ul li a:active,
-.js #nav-main ul li.current ul li a:focus {
             background: rgb(227,235,244);
             background: rgba(152,178,201,0.2);
             -moz-transition: background 0.1s ease-out;
             -webkit-transition: background 0.1s ease-out;
             transition: background 0.1s ease-out;
         }
-
-#nav-main ul li:hover ul li a,
-#nav-main ul li.hover ul li a:link,
-#nav-main ul li.hover ul li a:visited {
-    padding-bottom: 8px;
     }
 
+}
 /* Currently active menu items */
 
-#nav-main ul li.current span,
+#nav-mail ol li.current,
-#nav-main ul li.current a,
+#nav-mail ul li.current {
-#nav-main ul li.current a:link,
+    span,
-#nav-main ul li.current a:visited {
+    a,
+    a:link,
+    a:visited {
         background: #fbfdff;
         padding-right: 30px;
         padding-bottom: 15px;
     }
 
-#nav-main ul li.current:hover a,
+    ul span,
-#nav-main ul li.current.hover a,
+    ul a,
-#nav-main ul li.current a:hover,
+    ul a:link,
-#nav-main ul li.current a:focus,
+    ul a:visited {
-#nav-main ul li.current a:active,
-.js #nav-main ul li.current a:focus {
-    border-bottom: 0;
-}
-
-#nav-main ul li.current ul span,
-#nav-main ul li.current ul a,
-#nav-main ul li.current ul a:link,
-#nav-main ul li.current ul a:visited {
         background: none;
         height: auto;
         padding: 8px 10px;
     }
+}
 
 /* }}} */
 /* {{{ Dark Background Header */
 
-.darkbg #nav-main ul li a,
+.darkbg #nav-main ol li,
-.darkbg #nav-main ul li a:link,
+.darkbg #nav-main ul li {
-.darkbg #nav-main ul li a:visited,
+
-.darkbg #nav-main ul li span {
+    a,
+    a:link,
+    a:visited,
+    span {
         color: #fff;
         border-color: #555;
     }
 
-.darkbg #nav-main ul li li a,
+    li a,
-.darkbg #nav-main ul li li a:link,
+    li a:link,
-.darkbg #nav-main ul li li a:visited,
+    li a:visited,
-.darkbg #nav-main ul li li span {
+    li span {
         color: #484848;
     }
 
-.darkbg #nav-main ul li a:hover,
+    a:hover,
-.darkbg #nav-main ul li:hover a,
+    &:hover a,
-.darkbg #nav-main ul li.hover a,
+    .hover a,
-.darkbg #nav-main ul li.hover a:link,
+    .hover a:link,
-.darkbg #nav-main ul li.hover a:visited {
+    .hover a:visited {
         background: #ccc;
         color: #484848;
     }
 
+}
+

media/css/sandstone/sandstone.less

@@ -280,7 +280,7 @@ px      68    160    252    344    436    528    620    712    804    896    */
 
 #masthead {
 
-    h1 {
+    h2 {
         padding: (@baseLine * 2)  0  (@baseLine * 1.5)  0;
         margin: 0;
     }
@@ -292,6 +292,7 @@ px      68    160    252    344    436    528    620    712    804    896    */
         font-size: 13px;
         .open-sans;
 
+        ol li,
         ul li {
             .inline-block;
             list-style-type: none;
@@ -371,6 +372,7 @@ nav.menu-bar {
     padding-top: 0;
     padding-bottom: 0;
 
+    ol,
     ul {
         margin: 0;
         li {
@@ -468,6 +470,7 @@ nav.menu-bar {
     nav {
         .open-sans;
 
+        ol li,
         ul li {
             list-style-type: none;
             margin: 0 0 2px 0;
@@ -551,7 +554,7 @@ px      68    160    252    */
 
     #masthead {
 
-        h1 {
+        h2 {
             padding-top: @baseLine / 2;
             padding-bottom: @baseLine / 2;
         }

templates/base.html

@@ -37,18 +37,18 @@
             {% block site_header_nav %}
             {# start menu #nav-main #}
             <nav id="nav-main" role="navigation">
-            <ul>
+            <ol>
                 <li><a href="#">Mission</a></li>
                 <li><a href="#">About</a></li>
                 <li><a href="#">Products</a></li>
                 <li><a href="#">Get Involved</a></li>
-            </ul>
+            </ol>
             </nav>
             {# end menu #nav-main #}
             {% endblock %}
 
             {% block site_header_logo %}
-            <h1><a href="{{ url('mozorg.home') }}"><img src="/media/img/sandstone/header-mozilla-stone.png" alt="mozilla"></a></h1>
+            <h2><a href="{{ url('mozorg.home') }}"><img src="/media/img/sandstone/header-mozilla-stone.png" alt="mozilla"></a></h2>
             {% endblock %}
 
             {% block breadcrumbs %}{% endblock %}