bjoernager/rust
bjoernager/rust
1
Fork 0
Code Activity

auto merge of #13485 : adrientetar/rust/newrustdoc, r=brson

Browse source 
- Cherry-pick from #12996
- Use Fira Sans for headlines and sidebar (Light), Heuristica for the body (Adobe Utopia derivative). Both are licensed under the SIL OFL license.
- A few tweaks

Two examples: [modified `std`](http://adrientetar.legtux.org/cached/rust-docs/std.htm) and [modified `std::io`](http://adrientetar.legtux.org/cached/rust-docs/io.htm).

cc #13484
**Blocked on graydon/rust-www#25 (for hosting of the fonts), that's showcased [here](http://adrientetar.github.io/rust-www/).**

cc @brson, @TheHydroImpulse
This commit is contained in:
bors 2014-04-16 17:51:28 -07:00
commit 88805e1e00
3 changed files with 164 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/librustdoc/html/layout.rs
View file

@ -33,9 +33,12 @@ r##"<!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="The {krate} library documentation.">
<title>{title}</title> <title>{title}</title>
<link href='http://fonts.googleapis.com/css?family=Oswald:700|Inconsolata:400,700' <link href='http://fonts.googleapis.com/css?family=Inconsolata:400,700'
rel='stylesheet' type='text/css'> rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="{root_path}main.css"> <link rel="stylesheet" type="text/css" href="{root_path}main.css">
@ -51,7 +54,7 @@ r##"<!DOCTYPE html>
<section class="sidebar"> <section class="sidebar">
{logo, select, none{} other{ {logo, select, none{} other{
<a href='{root_path}{krate}/index.html'><img src='#' alt=''/></a> <a href='{root_path}{krate}/index.html'><img src='#' alt='' width='100px' /></a>
}} }}
{sidebar} {sidebar}
@ -59,7 +62,6 @@ r##"<!DOCTYPE html>
<nav class="sub"> <nav class="sub">
<form class="search-form js-only"> <form class="search-form js-only">
<button class="do-search">Search</button>
<div class="search-container"> <div class="search-container">
<input class="search-input" name="search" <input class="search-input" name="search"
autocomplete="off" autocomplete="off"

45
src/librustdoc/html/render.rs
View file

@ -938,28 +938,8 @@ impl<'a> fmt::Show for Item<'a> {
None => {} None => {}
} }
if self.cx.include_sources {
let mut path = Vec::new();
clean_srcpath(self.item.source.filename.as_bytes(), |component| {
path.push(component.to_owned());
});
let href = if self.item.source.loline == self.item.source.hiline {
format!("{}", self.item.source.loline)
} else {
format!("{}-{}", self.item.source.loline, self.item.source.hiline)
};
try!(write!(fmt.buf,
"<a class='source'
href='{root}src/{krate}/{path}.html\\#{href}'>\
[src]</a>",
root = self.cx.root_path,
krate = self.cx.layout.krate,
path = path.connect("/"),
href = href));
}
// Write the breadcrumb trail header for the top // Write the breadcrumb trail header for the top
try!(write!(fmt.buf, "<h1 class='fqn'>")); try!(write!(fmt.buf, "\n<h1 class='fqn'>"));
match self.item.inner { match self.item.inner {
clean::ModuleItem(ref m) => if m.is_crate { clean::ModuleItem(ref m) => if m.is_crate {
try!(write!(fmt.buf, "Crate ")); try!(write!(fmt.buf, "Crate "));
@ -982,9 +962,30 @@ impl<'a> fmt::Show for Item<'a> {
try!(write!(fmt.buf, "<a href='{}index.html'>{}</a>::", try!(write!(fmt.buf, "<a href='{}index.html'>{}</a>::",
trail, component.as_slice())); trail, component.as_slice()));
} }
try!(write!(fmt.buf, "<a class='{}' href=''>{}</a></h1>", try!(write!(fmt.buf, "<a class='{}' href=''>{}</a>",
shortty(self.item), self.item.name.get_ref().as_slice())); shortty(self.item), self.item.name.get_ref().as_slice()));
if self.cx.include_sources {
let mut path = Vec::new();
clean_srcpath(self.item.source.filename.as_bytes(), |component| {
path.push(component.to_owned());
});
let href = if self.item.source.loline == self.item.source.hiline {
format!("{}", self.item.source.loline)
} else {
format!("{}-{}", self.item.source.loline, self.item.source.hiline)
};
try!(write!(fmt.buf,
"<a class='source'\
href='{root}src/{krate}/{path}.html\\#{href}'>\
[src]</a>",
root = self.cx.root_path,
krate = self.cx.layout.krate,
path = path.connect("/"),
href = href));
}
try!(write!(fmt.buf, "</h1>\n"));
match self.item.inner { match self.item.inner {
clean::ModuleItem(ref m) => { clean::ModuleItem(ref m) => {
item_module(fmt.buf, self.cx, self.item, m.items.as_slice()) item_module(fmt.buf, self.cx, self.item, m.items.as_slice())

195
src/librustdoc/html/static/main.css
View file

@ -9,6 +9,37 @@
* option. This file may not be copied, modified, or distributed * option. This file may not be copied, modified, or distributed
* except according to those terms. * except according to those terms.
*/ */
@font-face {
font-family: 'Fira Sans';
font-style: normal;
font-weight: 400;
src: local('Fira Sans'), url("http://rust-lang.org/fonts/FiraSans-Regular.woff") format('woff');
}
@font-face {
font-family: 'Fira Sans';
font-style: normal;
font-weight: 500;
src: local('Fira Sans Medium'), url("http://rust-lang.org/fonts/FiraSans-Medium.woff") format('woff');
}
@font-face {
font-family: 'Heuristica';
font-style: normal;
font-weight: 400;
src: local('Heuristica Regular'), url("http://rust-lang.org/fonts/Heuristica-Regular.woff") format('woff');
}
@font-face {
font-family: 'Heuristica';
font-style: italic;
font-weight: 400;
src: local('Heuristica Italic'), url("http://rust-lang.org/fonts/Heuristica-Italic.woff") format('woff');
}
@font-face {
font-family: 'Heuristica';
font-style: normal;
font-weight: 700;
src: local('Heuristica Bold'), url("http://rust-lang.org/fonts/Heuristica-Bold.woff") format('woff');
}
@import "normalize.css"; @import "normalize.css";
* { * {
@ -20,46 +51,51 @@
/* General structure and fonts */ /* General structure and fonts */
body { body {
min-height: 100%; color: #333;
min-width: 500px; min-width: 500px;
height: 100%; font: 18px "Heuristica", "Helvetica Neue", Helvetica, Arial, sans-serif;
font: 13px "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 1.4;
line-height: 165%; margin: 0;
position: relative; position: relative;
height: auto; padding: 10px 15px 20px 15px;
padding-bottom: 20px; padding-bottom: 20px;
} }
h1, .sidebar .location { h1, h2, h3, h4 {
font: 700 22px "Oswald", Arial, sans-serif; color: black;
font-weight: 500;
margin: 30px 0 20px 0;
padding-bottom: 15px;
}
h1.fqn {
border-bottom: 1px dashed #D5D5D5;
margin-top: 0;
} }
h2, h3, h4 { h2, h3, h4 {
font: 700 16px "Oswald", Arial, sans-serif; border-bottom: 1px solid #DDDDDD;
text-transform: uppercase;
} }
h2 code, h3 code, h4 code { h2 code, h3 code, h4 code, .block a {
text-transform: none;
font-size: 1.2em; font-size: 1.2em;
} }
h1, h2, h3, h4, section.sidebar, a.source, .content a, .search-input {
code, pre, h1.fqn { font-family: "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: "Inconsolata", Menlo, Monaco, Consolas, "DejaVu Sans Mono", monospace;
} }
ul {
padding-left: 25px;
}
p {
margin: 0 0 1em 0;
}
code, pre { code, pre {
color: #333; font-family: Menlo, Monaco, Consolas, Inconsolata, "DejaVu Sans Mono", monospace;
} }
pre { pre {
font-size: 15px; font-size: 15px;
} }
h1.fqn {
font-size: 26px;
font-weight: normal;
}
nav {
font: 700 26px "Oswald", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
}
nav.sub { nav.sub {
padding-top: 10px; padding-top: 10px;
font-size: 16px; font-size: 16px;
@ -81,7 +117,6 @@ nav.sub {
.js-only, .hidden { display: none; } .js-only, .hidden { display: none; }
.sidebar { .sidebar {
background: #e9e9e9;
padding: 10px; padding: 10px;
} }
.sidebar img { .sidebar img {
@ -89,34 +124,39 @@ nav.sub {
display: block; display: block;
} }
.sidebar .location { margin-bottom: 10px; } .sidebar .location {
.sidebar .block, pre { background: #fff; } font-size: 17px;
.sidebar .block, pre, .content { border-bottom: 2px solid black; } margin: 30px 0 20px 0;
.trait { border-color: #fcae2b !important; } background: #e1e1e1;
.mod { border-color: #809fc7 !important; } text-align: center;
.enum { border-color: #93bc99 !important; } color: #333;
.struct { border-color: #e53700 !important; } }
.fn { border-color: #a2777f !important; }
.block { .block {
padding: 10px; padding: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.block h2 { margin-top: 0; } .block h2 {
margin-top: 0;
text-align: center;
}
.block a { .block a {
display: inline-block; display: inline-block;
width: 100%;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
line-height: 15px; line-height: 15px;
padding-left: 5px;
padding-bottom: 6px;
font-size: 14px;
font-weight: 300;
transition: border 500ms ease-out;
} }
.content { .content {
background: #f3f3f3; padding: 20px 0;
padding: 20px 20px 20px 40px;
} }
.content h1 { margin-top: 0; }
.content h1, .content h2 { margin-left: -20px; }
.content pre { padding: 20px; } .content pre { padding: 20px; }
.content.source pre.rust { .content.source pre.rust {
white-space: pre; white-space: pre;
@ -155,12 +195,20 @@ nav.sub {
.docblock h1, .docblock h2, .docblock h3, .docblock h4, .docblock h5 { .docblock h1, .docblock h2, .docblock h3, .docblock h4, .docblock h5 {
margin-left: 0; margin-left: 0;
margin: 40px 0 10px 0;
padding-bottom: 10px;
border-bottom: 1px solid #DDD;
} }
.docblock h1 { font-size: 1.1em; }
.docblock h2 { font-size: 1.05em; } .docblock h1 { font-size: 1.3em; }
.docblock h2 { font-size: 1.15em; }
.docblock h3, .docblock h4, .docblock h5 { font-size: 1em; } .docblock h3, .docblock h4, .docblock h5 { font-size: 1em; }
.content .source { float: right; } .content .source {
float: right;
font-size: 23px;
}
.content table { .content table {
border-spacing: 0 5px; border-spacing: 0 5px;
border-collapse: separate; border-collapse: separate;
@ -214,8 +262,7 @@ nav.sum { text-align: right; }
nav.sub form { display: inline; } nav.sub form { display: inline; }
nav, .content { nav, .content {
margin-left: 220px; margin-left: 230px;
margin-right: 20px;
} }
a { a {
@ -224,8 +271,6 @@ a {
background: transparent; background: transparent;
} }
.content a, .block a.current { font-weight: bold; }
.content a.trait, .block a.current.trait { color: #ed9603; } .content a.trait, .block a.current.trait { color: #ed9603; }
.content a.mod, .block a.current.mod { color: #4d76ae; } .content a.mod, .block a.current.mod { color: #4d76ae; }
.content a.enum, .block a.current.enum { color: #5e9766; } .content a.enum, .block a.current.enum { color: #5e9766; }
@ -233,19 +278,34 @@ a {
.content a.fn, .block a.current.fn { color: #8c6067; } .content a.fn, .block a.current.fn { color: #8c6067; }
.content .fnname { color: #8c6067; } .content .fnname { color: #8c6067; }
.search-container {
padding-right: 10px;
overflow: hidden;
}
.search-input { .search-input {
border: 2px solid #e9e9e9;
border-radius: 2px;
width: 100%; width: 100%;
/* Override Normalize.css: we have margins and do
not want to overflow - the `moz` attribute is necessary
until Firefox 29, too early to drop at this point */
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
outline: none;
border: none;
border-radius: 1px;
color: #555;
margin-top: 5px;
padding: 10px 16px;
font-size: 17px;
box-shadow: 0 0 0 1px #e0e0e0, 0 0 0 2px transparent;
transition: border-color 300ms ease;
transition: border-radius 300ms ease-in-out;
transition: box-shadow 300ms ease-in-out;
} }
.do-search {
float: right; .search-input:focus {
width: 62px; border-color: #66afe9;
border-radius: 2px;
border: 0;
outline: 0;
box-shadow: 0 0 8px #078dd8;
} }
.search-results .desc { .search-results .desc {
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -288,13 +348,14 @@ a {
} }
.stability { .stability {
border-left: 5px solid #000; border-left: 6px solid #000;
border-radius: 3px; border-radius: 3px;
padding: 0 3px; padding: 8px 3px 8px 10px;
float: right;
background: #fff;
text-transform: lowercase; text-transform: lowercase;
display: block;
margin-bottom: 20px;
} }
.stability.Deprecated { border-color: #D60027; color: #880017; } .stability.Deprecated { border-color: #D60027; color: #880017; }
.stability.Experimental { border-color: #EC5315; color: #a53c0e; } .stability.Experimental { border-color: #EC5315; color: #a53c0e; }
.stability.Unstable { border-color: #FFD700; color: #b39800; } .stability.Unstable { border-color: #FFD700; color: #b39800; }
@ -304,7 +365,7 @@ a {
:target { background: #FDFFD3; } :target { background: #FDFFD3; }
pre.rust, pre.line-numbers { background-color: #FDFDFD; } pre.rust, pre.line-numbers { background-color: #F5F5F5; }
/* Code highlighting */ /* Code highlighting */
pre.rust .kw { color: #8959A8; } pre.rust .kw { color: #8959A8; }
@ -325,3 +386,19 @@ h5.section-link:hover a:after,
h6.section-link:hover a:after { h6.section-link:hover a:after {
content: ' § '; content: ' § ';
} }
/** Media Queries **/
@media (max-width: 700px) {
.sidebar {
display: none;
}
.content {
margin-left: 0px;
}
nav.sub {
margin: 0 auto;
}
}