rustdoc: Tweak the main template and CSS for semantic mark-up.

- section.sidebar -> nav.sidebar, also added an unordered list. - div#help -> aside#help, also added a hidden heading. - the current crate is now emphasized in the sidebar. Fixes #16310.
rust-lang · Sep 8, 2015 · e98fa0e · e98fa0e
1 parent 6f14240
commit e98fa0e
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 16 deletions.
diff --git a/src/librustdoc/html/layout.rs b/src/librustdoc/html/layout.rs
@@ -62,10 +62,10 @@ r##"<!DOCTYPE html>
 
     {before_content}
 
-    <section class="sidebar">
+    <nav class="sidebar">
         {logo}
         {sidebar}
-    </section>
+    </nav>
 
     <nav class="sub">
         <form class="search-form js-only">
@@ -83,10 +83,12 @@ r##"<!DOCTYPE html>
 
     <section class="footer"></section>
 
-    <div id="help" class="hidden">
+    <aside id="help" class="hidden">
         <div>
+            <h1 class="hidden">Help</h1>
+
             <div class="shortcuts">
-                <h1>Keyboard Shortcuts</h1>
+                <h2>Keyboard Shortcuts</h2>
 
                 <dl>
                     <dt>?</dt>
@@ -103,7 +105,7 @@ r##"<!DOCTYPE html>
             </div>
 
             <div class="infos">
-                <h1>Search Tricks</h1>
+                <h2>Search Tricks</h2>
 
                 <p>
                     Prefix searches with a type followed by a colon (e.g.
@@ -123,7 +125,7 @@ r##"<!DOCTYPE html>
                 </p>
             </div>
         </div>
-    </div>
+    </aside>
 
     {after_content}
 

diff --git a/src/librustdoc/html/static/main.css b/src/librustdoc/html/static/main.css
@@ -104,7 +104,7 @@ h3.impl, h3.method, h4.method, h3.type, h4.type {
 h3.impl, h3.method, h3.type {
     margin-top: 15px;
 }
-h1, h2, h3, h4, section.sidebar, a.source, .search-input, .content table :not(code)>a, .collapse-toggle {
+h1, h2, h3, h4, .sidebar, a.source, .search-input, .content table :not(code)>a, .collapse-toggle {
     font-family: "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
@@ -189,11 +189,16 @@ nav.sub {
     padding: 0 10px;
     margin-bottom: 14px;
 }
-.block h2 {
+.block h2, .block h3 {
     margin-top: 0;
     margin-bottom: 8px;
     text-align: center;
 }
+.block ul, .block li {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
 
 .block a {
     display: block;
@@ -381,7 +386,7 @@ nav.main .separator {
 nav.sum { text-align: right; }
 nav.sub form { display: inline; }
 
-nav, .content {
+nav.sub, .content {
     margin-left: 230px;
 }
 
@@ -407,6 +412,7 @@ a {
 .content span.method, .content a.method, .block a.current.method { color: #8c6067; }
 .content span.tymethod, .content a.tymethod, .block a.current.tymethod { color: #8c6067; }
 .content .fnname { color: #8c6067; }
+.block a.current.crate { font-weight: 500; }
 
 .search-input {
     width: 100%;
@@ -489,7 +495,7 @@ body.blur > :not(#help) {
 }
 #help dd { margin: 5px 33px; }
 #help .infos { padding-left: 0; }
-#help h1 { margin-top: 0; }
+#help h1, #help h2 { margin-top: 0; }
 #help > div div {
     width: 50%;
     float: left;

diff --git a/src/librustdoc/html/static/main.js b/src/librustdoc/html/static/main.js
@@ -773,7 +773,8 @@
         if (rootPath === '../') {
             var sidebar = $('.sidebar');
             var div = $('<div>').attr('class', 'block crate');
-            div.append($('<h2>').text('Crates'));
+            div.append($('<h3>').text('Crates'));
+            var ul = $('<ul>').appendTo(div);
 
             var crates = [];
             for (var crate in rawSearchIndex) {
@@ -788,9 +789,10 @@
                 }
                 if (rawSearchIndex[crates[i]].items[0]) {
                     var desc = rawSearchIndex[crates[i]].items[0][3];
-                    div.append($('<a>', {'href': '../' + crates[i] + '/index.html',
+                    var link = $('<a>', {'href': '../' + crates[i] + '/index.html',
                                          'title': plainSummaryLine(desc),
-                                         'class': klass}).text(crates[i]));
+                                         'class': klass}).text(crates[i]);
+                    ul.append($('<li>').append(link));
                 }
             }
             sidebar.append(div);
@@ -809,7 +811,8 @@
             if (!filtered) { return; }
 
             var div = $('<div>').attr('class', 'block ' + shortty);
-            div.append($('<h2>').text(longty));
+            div.append($('<h3>').text(longty));
+            var ul = $('<ul>').appendTo(div);
 
             for (var i = 0; i < filtered.length; ++i) {
                 var item = filtered[i];
@@ -826,9 +829,10 @@
                 } else {
                     path = shortty + '.' + name + '.html';
                 }
-                div.append($('<a>', {'href': current.relpath + path,
+                var link = $('<a>', {'href': current.relpath + path,
                                      'title': desc,
-                                     'class': klass}).text(name));
+                                     'class': klass}).text(name);
+                ul.append($('<li>').append(link));
             }
             sidebar.append(div);
         }