Tweak doc style to match crates.io

Makefile.in

@@ -112,7 +112,8 @@ DOC_OPTS := --markdown-no-toc \
 		--html-after-content src/doc/footer.html
 ASSETS := CNAME images/noise.png images/forkme.png images/Cargo-Logo-Small.png \
 	stylesheets/all.css stylesheets/normalize.css javascripts/prism.js \
-	javascripts/all.js stylesheets/prism.css
+	javascripts/all.js stylesheets/prism.css images/circle-with-i.png \
+	images/search.png
 
 doc: $(foreach doc,$(DOCS),target/doc/$(doc).html) \
 	$(foreach asset,$(ASSETS),target/doc/$(asset))

src/doc/footer.html

@@ -1,11 +1,11 @@
-  <footer>
-    <a href='guide.html'>Guide</a> |
-    <a href='faq.html'>Frequently Asked Questions</a> |
-    <a href='manifest.html'>Manifest Format</a> |
-    <a href='build-script.html'>Build Scripts</a> |
-    <a href='config.html'>Configuration</a>
-  </footer>
 </main>
+<footer>
+<a href='index.html'>Install</a>
+<span class='sep'>|</span>
+<a href='index.html'>Getting Started</a>
+<span class='sep'>|</span>
+<a href='guide.html'>Guide</a>
+</footer>
 
 <script type='text/javascript' src='javascripts/prism.js'></script>
 <script type='text/javascript' src='javascripts/all.js'></script>

src/doc/guide.md

@@ -20,7 +20,7 @@ To accomplish this goal, Cargo does four things:
 You can convert an existing Rust project to use Cargo. You'll have to create a
 `Cargo.toml` file with all of your dependencies, and move your source files and
 test files into the places where Cargo expects them to be. See the [manifest
-description](/manifest.html) and the "Cargo Conventions" section below for more
+description](manifest.html) and the "Cargo Conventions" section below for more
 details.
 
 # Creating A New Project
@@ -353,7 +353,7 @@ your code directory or in your home directory).
 
 Inside that file, put this:
 
-```
+```toml
 paths = ["/path/to/project/conduit"]
 ```
 

src/doc/header.html

@@ -1,11 +1,41 @@
+<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
 
 <a href='https://github.com/rust-lang/cargo' class='fork-me'>
   <img src='images/forkme.png'/>
 </a>
-<a href='index.html' class='logo'><img src='images/Cargo-Logo-Small.png'/></a>
+
+<div id="header">
+    <a href='index.html' class='logo'>
+        <img id="logo" height=100 width=100 src='images/Cargo-Logo-Small.png'/>
+    </a>
+    <a href="index.html">
+        <h1>CARGO</h1>
+    </a>
+
+    <div class="search">
+        <form action="https://staging-crates-io.herokuapp.com/search"
+              method="GET">
+            <input name="q" class="search" placeholder="Search crates" type="text"/>
+        </form>
+    </div>
+
+    <div class="nav">
+        <div class="dropdown-container">
+            <button class="dropdown">
+                Documentation
+                <span class="arrow"></span>
+            </button>
+            <ul id="current-user-links" class="dropdown" data-bindattr-503="503">
+                <li><a href='index.html'>Getting Started</a></li>
+                <li><a href='guide.html'>Guide</a></li>
+                <li><a href='faq.html'>FAQ</a></li>
+                <li><a href='manifest.html'>Manifest Format</a></li>
+                <li><a href='build-script.html'>Build Scripts</a></li>
+                <li><a href='config.html'>Configuration</a></li>
+                <li><a href='pkgid-spec.html'>Package ID specs</a></li>
+            </ul>
+        </div>
+    </div>
+</div>
 
 <main>
-  <p>
-    Cargo downloads your <a href="http://rust-lang.org">Rust</a>
-    project's dependencies and builds your project
-  </p>

src/doc/index.md

@@ -86,4 +86,4 @@ Hello, world!</code></pre>
 
 # Going Further
 
-For more details on using Cargo, check out the [Cargo Guide](/guide.html)
+For more details on using Cargo, check out the [Cargo Guide](guide.html)

src/doc/javascripts/all.js

@@ -1,28 +1,36 @@
 //= require_tree .
 
 Prism.languages.toml = {
-  'string': /("|')(\\?.)*?\1/g,
+    // https://github.com/LeaVerou/prism/issues/307
-  'comment': /#.*/,
+    'comment': [{
-  // 'atrule': {
+        pattern: /(^[^"]*?("[^"]*?"[^"]*?)*?[^"\\]*?)(\/\*[\w\W]*?\*\/|(^|[^:])#.*?(\r?\n|$))/g,
-  //   pattern: /@[\w-]+?.*?(;|(?=\s*{))/gi,
+        lookbehind: true
-  //   inside: {
+    }],
-  //     'punctuation': /[;:]/g
+    'string': /("|')(\\?.)*?\1/g,
-  //   }
+    'number': /\d+/,
-  // },
+    'boolean': /true|false/,
-  // 'url': /url\((["']?).*?\1\)/gi,
+    'toml-section': /\[.*\]/,
-  // 'selector': /[^\{\}\s][^\{\};]*(?=\s*\{)/g,
+    'toml-key': /[\w-]+/
-  // 'property': /(\b|\B)[\w-]+(?=\s*:)/ig,
-  // 'punctuation': /[\{\};:]/g,
-  // 'function': /[-a-z0-9]+(?=\()/ig
-  'number': /\d+/,
-  'boolean': /true|false/,
-  'toml-section': /\[.*\]/,
-  'toml-key': /[\w-]+/
 };
 
-(function() {
+$(function() {
-  var pres = document.querySelectorAll('pre.rust');
+    var pres = document.querySelectorAll('pre.rust');
-  for (var i = 0; i < pres.length; i++) {
+    for (var i = 0; i < pres.length; i++) {
-    pres[i].className += ' language-rust';
+        pres[i].className += ' language-rust';
-  }
+    }
-})();
+
+    $('button.dropdown, a.dropdown').click(function(el, e) {
+        $(this).toggleClass('active');
+        $(this).siblings('ul').toggleClass('open');
+
+        if ($(this).hasClass('active')) {
+            $(document).on('mousedown.useroptions', function() {
+                setTimeout(function() {
+                    $('button.dropdown, a.dropdown').removeClass('active');
+                    $('button.dropdown + ul').removeClass('open');
+                }, 150);
+                $(document).off('mousedown.useroptions');
+            });
+        }
+    });
+});

src/doc/manifest.md

@@ -31,7 +31,7 @@ You can specify a script that Cargo should execute before invoking
 your Rust code, for example. More information can be found in the building
 non-rust code [guide][2]
 
-[1]: http://doc.rust-lang.org/rust.html#external-blocks
+[1]: http://doc.rust-lang.org/reference.html#external-blocks
 [2]: build-script.html
 
 ```toml

src/doc/stylesheets/all.css

@@ -3,6 +3,8 @@ html {
   background-color: #3b6837;
 }
 
+main, #header { width: 900px; }
+
 body {
   font-family: sans-serif;
 }
@@ -20,8 +22,8 @@ body {
           align-items: center;
 }
 
-a { color: #f3bb00; }
+a { color: #00ac5b; text-decoration: none; }
-a:hover { color: #b64790; }
+a:hover { color: #00793f; }
 
 h1 {
   font-size: 24px;
@@ -35,11 +37,28 @@ h1 code:not(.highlight) {
   vertical-align: bottom;
 }
 h1 a, h2 a { color: #b64790; text-decoration: none; }
+h1:hover a, h2:hover a { color: #A03D7E; }
 h1:hover a:after,
-h2:hover a:after{ content: '\2002\00a7\2002'; }
+h2:hover a:after { content: '\2002\00a7\2002'; }
-h1.title { display: none; } /* hide rustdoc-generated title */
 :target { background: rgba(239, 242, 178, 1); padding: 5px; }
 
+h1.title { /* style rustdoc-generated title */
+    width: 100%;
+    padding: 40px 20px 40px 60px;
+    background-color: #edebdd;
+    margin-bottom: 20px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    -ms-border-radius: 5px;
+    border-radius: 5px;
+    margin: 0;
+    color: #383838;
+    font-size: 2em;
+    background-image: url(../images/circle-with-i.png);
+    background-repeat: no-repeat;
+    background-position: 20px center;
+}
+
 h2 {
   font-size: 18px;
   margin: 15px 0 5px 0;
@@ -66,12 +85,17 @@ main {
 
   background-color: #f9f7ec;
   padding: 15px;
-  border-radius: 5px;
+
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  -ms-border-radius: 10px;
+  border-radius: 10px;
   box-shadow: 0px 0px 5px 2px #3b6837;
+  border: 5px solid #62865f;
+  color: #383838;
 }
 
 main > p:first-child {
-  color: #199b5c;
   font-weight: 500;
   margin-top: 3px;
   padding-bottom: 15px;
@@ -83,7 +107,7 @@ main p:first-child a { color: #3b6837; }
 main p:first-child a:hover { color: #62865f; }
 
 main p, main ul {
-  color: #3b6837;
+  /* color: #3b6837; */
   margin: 10px 0;
   line-height: 150%;
 }
@@ -100,37 +124,46 @@ img.logo {
 pre {
   padding: 10px;
   margin: 10px 0;
-  border: 1px solid #cad0d0;
+  /* border: 1px solid #cad0d0; */
   border-radius: 4px;
   max-width: calc(100vw - 45px);
   overflow-x: auto;
 
-  /* override prism.js styles for fonts */
+  background: #383838 !important;
+  color: white;
+  padding: 20px;
+
+  /* override prism.js styles */
   font-size: 1em !important;
-  background: #eeecdd !important;
+  border: none !important;
+  box-shadow: none !important;
+  text-shadow: none !important;
+}
+
+pre code {
+  text-shadow: none !important;
 }
 
 footer {
-  margin-top: 10px;
+    padding: 40px;
-  border-top: 1px solid #b64790;
+    width: 900px;
-  padding-top: 10px;
-  width: 100%;
-  text-align: center;
-
 }
 footer a {
-  color: #b64790;
+    color: white;
-  text-decoration: none;
 }
 footer a:hover {
-  text-decoration: underline;
+    color: #e6e6e6;
 }
+footer .sep, #header .sep {
+    margin: 0 10px;
+    color: #284725;
+}
+
 
 .headerlink {
   display: none;
   text-decoration: none;
 }
-
 .fork-me {
   position:absolute;
   top:0;
@@ -154,3 +187,99 @@ code span.s1 { color: #2AA198; }
 
 table th { border-bottom: 1px solid black; }
 table td, table th { padding: 5px 10px; }
+
+#header {
+  color: white;
+  position: relative;
+  height: 100px;
+  display: -webkit-flex;
+  display:         flex;
+  -webkit-align-items: center;
+          align-items: center;
+}
+#header h1 { font-size: 2em; }
+#header a, #header h1 { color: white; text-decoration: none; }
+#header a:hover { color: #d9d9d9; }
+
+#header input.search {
+    border: none;
+    color: black;
+    outline: 0;
+    margin-left: 30px;
+    padding: 5px 5px 5px 25px;
+    background-image: url(../images/search.png);
+    background-repeat: no-repeat;
+    background-position: 6px 6px;
+    -webkit-border-radius: 15px;
+    -moz-border-radius: 15px;
+    -ms-border-radius: 15px;
+    border-radius: 15px;
+}
+
+#header .nav {
+    -webkit-flex-grow: 2;
+    flex-grow: 2;
+    text-align: right;
+}
+
+button.dropdown, a.dropdown { cursor: pointer; }
+button.dropdown .arrow, a.dropdown .arrow {
+    font-size: 50%; display: inline-block; vertical-align: middle;
+}
+button.dropdown .arrow::after, a.dropdown .arrow::after { content: "▼"; }
+button.active.dropdown .arrow::after, a.active.dropdown .arrow::after {
+    content: "▲";
+}
+
+button {
+    background: none;
+    outline: 0;
+    border: 0;
+    padding: 10px;
+    color: white;
+}
+
+ul.dropdown {
+    display: none;
+    visibility: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    opacity: 0;
+    margin: 0;
+    text-align: left;
+    padding: 0;
+    background: white;
+    border: 1px solid #d5d3cb;
+    list-style: none;
+    z-index: 10;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    -ms-border-radius: 5px;
+    border-radius: 5px;
+}
+
+ul.dropdown li a {
+    font-size: 90%;
+    width: 100%;
+    display: inline-block;
+    padding: 8px 10px;
+    text-decoration: none;
+    color: #383838 !important;
+}
+
+ul.dropdown li a:hover {
+    background: #5e5e5e;
+    color: white !important;
+}
+ul.dropdown li.last { border-top: 1px solid #d5d3cb; }
+ul.dropdown.open {
+    display: block;
+    visibility: visible;
+    opacity: 1;
+}
+.dropdown-container {
+    display: inline-block;
+    position: relative;
+}

src/doc/stylesheets/prism.css

@@ -1,17 +1,16 @@
-/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript */
+/* http://prismjs.com/download.html?themes=prism-twilight&languages=markup+css+clike+javascript */
 /**
- * prism.js default theme for JavaScript, CSS and HTML
+ * prism.js Twilight theme
- * Based on dabblet (http://dabblet.com)
+ * Based (more or less) on the Twilight theme originally of Textmate fame.
- * @author Lea Verou
+ * @author Remy Bach
  */
-
 code[class*="language-"],
 pre[class*="language-"] {
-	color: black;
+	color: white;
-	text-shadow: 0 1px white;
-	font-family: Consolas, Monaco, 'Andale Mono', monospace;
 	direction: ltr;
+	font-family: Consolas, Monaco, 'Andale Mono', monospace;
 	text-align: left;
+	text-shadow: 0 -.1em .2em black;
 	white-space: pre;
 	word-spacing: normal;
 	word-break: normal;
@@ -27,100 +26,104 @@ pre[class*="language-"] {
 	hyphens: none;
 }
 
+pre[class*="language-"],
+:not(pre) > code[class*="language-"] {
+	background: hsl(0, 0%, 8%); /* #141414 */
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	border-radius: .5em;
+	border: .3em solid hsl(0, 0%, 33%); /* #282A2B */
+	box-shadow: 1px 1px .5em black inset;
+	margin: .5em 0;
+	overflow: auto;
+	padding: 1em;
+}
+
+pre[class*="language-"]::selection {
+	/* Safari */
+	background: hsl(200, 4%, 16%); /* #282A2B */
+}
+
+pre[class*="language-"]::selection {
+	/* Firefox */
+	background: hsl(200, 4%, 16%); /* #282A2B */
+}
+
+/* Text Selection colour */
 pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
 code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
 	text-shadow: none;
-	background: #b3d4fc;
+	background: hsla(0, 0%, 93%, 0.15); /* #EDEDED */
 }
 
 pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
 code[class*="language-"]::selection, code[class*="language-"] ::selection {
 	text-shadow: none;
-	background: #b3d4fc;
+	background: hsla(0, 0%, 93%, 0.15); /* #EDEDED */
-}
-
-@media print {
-	code[class*="language-"],
-	pre[class*="language-"] {
-		text-shadow: none;
-	}
-}
-
-/* Code blocks */
-pre[class*="language-"] {
-	padding: 1em;
-	margin: .5em 0;
-	overflow: auto;
-}
-
-:not(pre) > code[class*="language-"],
-pre[class*="language-"] {
-	background: #f5f2f0;
 }
 
 /* Inline code */
 :not(pre) > code[class*="language-"] {
-	padding: .1em;
 	border-radius: .3em;
+	border: .13em solid hsl(0, 0%, 33%); /* #545454 */
+	box-shadow: 1px 1px .3em -.1em black inset;
+	padding: .15em .2em .05em;
 }
 
 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
-	color: slategray;
+	color: hsl(0, 0%, 47%); /* #777777 */
 }
 
 .token.punctuation {
-	color: #999;
+	opacity: .7;
 }
 
 .namespace {
 	opacity: .7;
 }
 
-.token.property,
 .token.tag,
 .token.boolean,
 .token.number,
+.token.deleted {
+	color: hsl(14, 58%, 55%); /* #CF6A4C */
+}
+
+.token.keyword,
+.token.property,
+.token.selector,
 .token.constant,
 .token.symbol,
-.token.deleted {
+.token.builtin {
-	color: #905;
+	color: hsl(53, 89%, 79%); /* #F9EE98 */
 }
 
-.token.selector,
 .token.attr-name,
+.token.attr-value,
 .token.string,
 .token.char,
-.token.builtin,
-.token.inserted {
-	color: #690;
-}
-
 .token.operator,
 .token.entity,
 .token.url,
 .language-css .token.string,
 .style .token.string,
-.token.variable {
+.token.variable,
-	color: #a67f59;
+.token.inserted {
-	background: hsla(0, 0%, 100%, .5);
+	color: hsl(76, 21%, 52%); /* #8F9D6A */
 }
 
-.token.atrule,
+.token.atrule {
-.token.attr-value,
+	color: hsl(218, 22%, 55%); /* #7587A6 */
-.token.keyword {
-	color: #07a;
-}
-
-.token.function {
-	color: #DD4A68;
 }
 
 .token.regex,
 .token.important {
-	color: #e90;
+	color: hsl(42, 75%, 65%); /* #E9C062 */
 }
 
 .token.important {
@@ -131,3 +134,64 @@ pre[class*="language-"] {
 	cursor: help;
 }
 
+pre[data-line] {
+	padding: 1em 0 1em 3em;
+	position: relative;
+}
+
+/* Markup */
+.language-markup .token.tag,
+.language-markup .token.attr-name,
+.language-markup .token.punctuation {
+	color: hsl(33, 33%, 52%); /* #AC885B */
+}
+
+/* Make the tokens sit above the line highlight so the colours don't look faded. */
+.token {
+	position: relative;
+	z-index: 1;
+}
+
+.line-highlight {
+	background: -moz-linear-gradient(left, hsla(0, 0%, 33%, .1) 70%, hsla(0, 0%, 33%, 0)); /* #545454 */
+	background: -o-linear-gradient(left, hsla(0, 0%, 33%, .1) 70%, hsla(0, 0%, 33%, 0)); /* #545454 */
+	background: -webkit-linear-gradient(left, hsla(0, 0%, 33%, .1) 70%, hsla(0, 0%, 33%, 0)); /* #545454 */
+	background: hsla(0, 0%, 33%, 0.25); /* #545454 */
+	background: linear-gradient(left, hsla(0, 0%, 33%, .1) 70%, hsla(0, 0%, 33%, 0)); /* #545454 */
+	border-bottom: 1px dashed hsl(0, 0%, 33%); /* #545454 */
+	border-top: 1px dashed hsl(0, 0%, 33%); /* #545454 */
+	left: 0;
+	line-height: inherit;
+	margin-top: 0.75em; /* Same as .prism’s padding-top */
+	padding: inherit 0;
+	pointer-events: none;
+	position: absolute;
+	right: 0;
+	white-space: pre;
+	z-index: 0;
+}
+
+.line-highlight:before,
+.line-highlight[data-end]:after {
+	background-color: hsl(215, 15%, 59%); /* #8794A6 */
+	border-radius: 999px;
+	box-shadow: 0 1px white;
+	color: hsl(24, 20%, 95%); /* #F5F2F0 */
+	content: attr(data-start);
+	font: bold 65%/1.5 sans-serif;
+	left: .6em;
+	min-width: 1em;
+	padding: 0 .5em;
+	position: absolute;
+	text-align: center;
+	text-shadow: none;
+	top: .4em;
+	vertical-align: .3em;
+}
+
+.line-highlight[data-end]:after {
+	bottom: .4em;
+	content: attr(data-end);
+	top: auto;
+}
+