From fbdde0e7ba4edecd3411e6e7ec22324aed027a4e Mon Sep 17 00:00:00 2001 From: Daniel Fagnan Date: Tue, 18 Mar 2014 01:44:55 -0600 Subject: [PATCH 1/4] Tweaked the design to be a lot cleaner. Signed-off-by: Daniel Fagnan --- src/librustdoc/html/layout.rs | 2 +- src/librustdoc/html/static/main.css | 153 +++++++++++++++++++++++----- 2 files changed, 126 insertions(+), 29 deletions(-) diff --git a/src/librustdoc/html/layout.rs b/src/librustdoc/html/layout.rs index 399dcf6991c86..76df93ba11daa 100644 --- a/src/librustdoc/html/layout.rs +++ b/src/librustdoc/html/layout.rs @@ -51,7 +51,7 @@ r##"
{logo, select, none{} other{ - + }} {sidebar} diff --git a/src/librustdoc/html/static/main.css b/src/librustdoc/html/static/main.css index 2c7e5f0f67510..82a98ee9f8c33 100644 --- a/src/librustdoc/html/static/main.css +++ b/src/librustdoc/html/static/main.css @@ -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; @@ -54,6 +60,8 @@ pre { h1.fqn { font-size: 26px; font-weight: normal; + padding-bottom: 15px; + border-bottom: 1px dashed #D5D5D5; } nav { @@ -81,7 +89,6 @@ nav.sub { .js-only, .hidden { display: none; } .sidebar { - background: #e9e9e9; padding: 10px; } .sidebar img { @@ -89,34 +96,59 @@ nav.sub { 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; +} + +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; @@ -155,12 +187,31 @@ nav.sub { .docblock h1, .docblock h2, .docblock h3, .docblock h4, .docblock h5 { margin-left: 0; + margin: 40px 0 10px 0; + 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; @@ -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; } @@ -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%; + box-sizing: content-box; + 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; + -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; + 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; @@ -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; } From 2d0962ad62ccc7d8fc51bbb3b017e470b96df70c Mon Sep 17 00:00:00 2001 From: Daniel Fagnan Date: Wed, 19 Mar 2014 16:33:03 -0600 Subject: [PATCH 2/4] fixed issues Signed-off-by: Daniel Fagnan --- src/librustdoc/html/static/main.css | 52 +++++++++++++++++++---------- 1 file changed, 35 insertions(+), 17 deletions(-) diff --git a/src/librustdoc/html/static/main.css b/src/librustdoc/html/static/main.css index 82a98ee9f8c33..275b5be45da35 100644 --- a/src/librustdoc/html/static/main.css +++ b/src/librustdoc/html/static/main.css @@ -130,9 +130,6 @@ nav.sub { 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; } body p { @@ -285,16 +282,18 @@ a { .content .fnname { color: #8c6067; } .search-container { - padding-right: 10px; + width: 60%; + margin-left: 50px; } + .search-input { border: 2px solid #e9e9e9; border-radius: 2px; - width: 85%; + width: 95%; box-sizing: content-box; outline: none; border: none; - background: none; + background-color: white; font-family: "Helvetica Neue"; color: #000; margin-top: 5px; @@ -306,17 +305,10 @@ a { padding: 10px 16px; line-height: 1.4; font-size: 17px; - background-color: white; - -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 { @@ -327,7 +319,7 @@ a { } .do-search { - float: right; + display: none; outline: none; border: none; font-family: Helvetica Neue; @@ -336,10 +328,11 @@ a { padding: 14px 25px; margin-top: 3px; font-size: 16px; - margin-right: 15px; text-align: center; - background: #6F5E59; + background: #5B6672; + margin-left: 10px; } + .search-results .desc { white-space: nowrap; text-overflow: ellipsis; @@ -422,3 +415,28 @@ h5.section-link:hover a:after, h6.section-link:hover a:after { content: ' § '; } + +/** Media Queries **/ + +@media (max-width: 620px) { + .search-container { + display: block; + width: 100%; + margin-left: 0px; + } +} + +@media (max-width: 700px) { + .sidebar { + display: none; + } + + .content { + margin-left: 0px; + } + + nav.sub { + width: 80%; + margin: 0 auto; + } +} From ea344fd18f27a14625480a7ce0b428113f363a61 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adrien=20T=C3=A9tar?= Date: Thu, 20 Mar 2014 19:05:22 +0100 Subject: [PATCH 3/4] doc: design changes cleanups Conflicts: src/librustdoc/html/layout.rs --- src/librustdoc/html/layout.rs | 6 +- src/librustdoc/html/static/main.css | 145 +++++++--------------------- 2 files changed, 39 insertions(+), 112 deletions(-) diff --git a/src/librustdoc/html/layout.rs b/src/librustdoc/html/layout.rs index 76df93ba11daa..0b5ca604cc306 100644 --- a/src/librustdoc/html/layout.rs +++ b/src/librustdoc/html/layout.rs @@ -33,9 +33,12 @@ r##" + + + {title} - @@ -59,7 +62,6 @@ r##"