Skip to content

Tweaked Docs Design #12996

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 7 commits into from
Closed

Tweaked Docs Design #12996

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0cc392d
Tweaked the design to be a lot cleaner.
thehydroimpulse Mar 18, 2014
598b5af
fixed issues
thehydroimpulse Mar 19, 2014
ada5992
doc: design changes cleanups
adrientetar Mar 20, 2014
fa25aaa
made the overall design more responsive
thehydroimpulse Mar 20, 2014
abb6141
made changes to the font sizes. Now using rems
thehydroimpulse Mar 21, 2014
8ebc240
adjusted font size. Stability badges.
thehydroimpulse Mar 21, 2014
7f0aa11
fixed px in attribute
thehydroimpulse Mar 22, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/librustdoc/html/layout.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ pub fn render<T: fmt::Show, S: fmt::Show>(

<section class=\"sidebar\">
{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>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't have 'px', attribute is expected without unit here.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

}}

{sidebar}
Expand Down
153 changes: 125 additions & 28 deletions src/librustdoc/html/static/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,20 +30,26 @@ body {
padding-bottom: 20px;
}

h1, .sidebar .location {
font: 700 22px "Oswald", Arial, sans-serif;
}
h2, h3, h4 {
font: 700 16px "Oswald", Arial, sans-serif;
text-transform: uppercase;
}
h2 code, h3 code, h4 code {
text-transform: none;
font-size: 1.2em;
}

h1 {
font: 600 26px "Helvetica Neue", Arial, sans-serif !important;
margin: 20px 0;
}

h2, h3, h4 {
font: 500 20px "Helvetica Neue", Arial, sans-serif;
margin: 40px 0 20px 0;
padding-bottom: 15px;
border-bottom: 1px solid #DDDDDD;
}

code, pre, h1.fqn {
font-family: "Inconsolata", Menlo, Monaco, Consolas, "DejaVu Sans Mono", monospace;
font-weight: normal;
}
code, pre {
color: #333;
Expand All @@ -54,6 +60,8 @@ pre {
h1.fqn {
font-size: 26px;
font-weight: normal;
padding-bottom: 15px;
border-bottom: 1px dashed #D5D5D5;
}

nav {
Expand Down Expand Up @@ -81,42 +89,66 @@ nav.sub {
.js-only, .hidden { display: none; }

.sidebar {
background: #e9e9e9;
padding: 10px;
}
.sidebar img {
margin: 20px auto;
display: block;
}

.sidebar .location { margin-bottom: 10px; }
.sidebar .location {
font-size: 17px;
margin: 30px 0 20px 0;
background: #e1e1e1;
text-align: center;
color: #333;
}

.sidebar .location a {
color: #333;
}

.sidebar .block, pre { background: #fff; }
.sidebar .block, pre, .content { border-bottom: 2px solid black; }
.trait { border-color: #fcae2b !important; }
.mod { border-color: #809fc7 !important; }
.enum { border-color: #93bc99 !important; }
.struct { border-color: #e53700 !important; }
.fn { border-color: #a2777f !important; }

.block {
padding: 10px;
margin-bottom: 10px;
}
.block h2 { margin-top: 0; }
.block h2 {
margin-top: 0;
text-align: center;
}

.block a {
display: inline-block;
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
line-height: 15px;
margin: 0 0 0 45px;
padding-bottom: 4px;
border-bottom: 2px solid #fff;
font-size: 14px;

transition: border 500ms ease-out;
-webkit-transition: border 500ms ease-out;
-moz-transition: border 500ms ease-out;
-o-transition: border 500ms ease-out;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All major browsers support these attributes, we shouldn't be using vendor prefixes.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@adrientetar Ahh yes.

}

body p {
font-size: 15px;
line-height: 1.6;
}

.content {
background: #f3f3f3;
padding: 20px 20px 20px 40px;
}
.content h1 { margin-top: 0; }
.content h1, .content h2 { margin-left: -20px; }

.content h1 {
margin-top: 0;
font-weight: 400 !important;
}

.content pre { padding: 20px; }
.content.source pre.rust {
white-space: pre;
Expand Down Expand Up @@ -155,12 +187,31 @@ nav.sub {

.docblock h1, .docblock h2, .docblock h3, .docblock h4, .docblock h5 {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where is this used? I can't seem to find the docblock class.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is used for the H* within the docblock div which is in the #main.content block. Some pages might not have any of the headers, but many do.

margin-left: 0;
margin: 40px 0 10px 0;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you then cleanup the margin-left that is right before it?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

padding-bottom: 10px;
border-bottom: 1px solid #eee;
}

.docblock h1 { font-size: 1.1em; }
.docblock h2 { font-size: 1.05em; }
.docblock h3, .docblock h4, .docblock h5 { font-size: 1em; }

.content .source { float: right; }
.docblock h3 {
font-size: 1.3em;
}

.docblock h2 {
font-size: 1.5em;
}

.content .source {
float: right;
font-size: 14px;
font-weight: 400;
padding: 9px 15px;
color: #333;
}

.content table {
border-spacing: 0 5px;
border-collapse: separate;
Expand Down Expand Up @@ -224,7 +275,7 @@ a {
background: transparent;
}

.content a, .block a.current { font-weight: bold; }
.content a, .block a.current { font-weight: 400; }

.content a.trait, .block a.current.trait { color: #ed9603; }
.content a.mod, .block a.current.mod { color: #4d76ae; }
Expand All @@ -235,16 +286,59 @@ a {

.search-container {
padding-right: 10px;
overflow: hidden;
}
.search-input {
border: 2px solid #e9e9e9;
border-radius: 2px;
width: 100%;
width: 85%;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why did you drop the current fixed width of the button in favor of this?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was a quick way of getting around implementing more responsive queries. Thus, as the window gets smaller, the element (if it would be a right float) would start jumping around.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay – I will wait until I can look at the page before commenting further.

box-sizing: content-box;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are we removing this or not?
If we ain't please cleanup the rules up top and this one also, it is the Normalize.css default. But I still don't understand why we would want content-box there (since I think we do want border in our width calculations).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just removed it. That was kept around because of the manual rebase.

outline: none;
border: none;
background: none;
font-family: "Helvetica Neue";
color: #000;
margin-top: 5px;
padding: 10px 20px;
font-weight: 300;
border-radius: 1px;
box-shadow: 0 0 0 1px #e0e0e0, 0 0 0 2px transparent;
color: #555555;
padding: 10px 16px;
line-height: 1.4;
font-size: 17px;
background-color: white;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this a CSS reset? normalize.css doesn't have it already so it shouldn't be needed.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This goes beyond normal resetting. This overrides the default browser styles for the input.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So are you saying it is a reset? I don't understand the "beyond a reset" part.

Which browser is affected?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

By "beyond resetting", I mean resetting default element looks. Normalize doesn't have it because it doesn't override the styles of elements in this way (i.e., custom input boxes).

Some stuff (like the background color) doesn't need to be reset here, so I'll clean that up. But the outline, border, etc... do.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

K got it. Yea I think background-color doesn't need a reset here.

-webkit-transition: background-color 50ms linear;
transition: background-color 50ms linear;
transition: border 500ms ease-out;
-webkit-transition: border 500ms ease-out;
-moz-transition: border 500ms ease-out;
-o-transition: border 500ms ease-out;
transition: box-shadow 500ms ease-out;
-webkit-transition: box-shadow 500ms ease-out;
-moz-transition: box-shadow 500ms ease-out;
-o-transition: box-shadow 500ms ease-out;
}

.search-input:focus {
border-color: #66afe9;
border: 0;
outline: 0;
box-shadow: 0 0 0 1px #078dd8, 0 0 0 2px #078dd8;
}

.do-search {
float: right;
width: 62px;
outline: none;
border: none;
font-family: Helvetica Neue;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove this.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

font-weight: 200;
color: #fff;
padding: 14px 25px;
margin-top: 3px;
font-size: 16px;
margin-right: 15px;
text-align: center;
background: #6F5E59;
}
.search-results .desc {
white-space: nowrap;
Expand Down Expand Up @@ -288,13 +382,16 @@ a {
}

.stability {
border-left: 5px solid #000;
border-left: 6px solid #000;
border-radius: 3px;
padding: 0 3px;
float: right;
padding: 8px 3px;
background: #fff;
text-transform: lowercase;
display: block;
padding-left: 10px;
margin-bottom: 20px;
}

.stability.Deprecated { border-color: #D60027; color: #880017; }
.stability.Experimental { border-color: #EC5315; color: #a53c0e; }
.stability.Unstable { border-color: #FFD700; color: #b39800; }
Expand Down