diff options
| author | Boris Kolpackov <boris@codesynthesis.com> | 2016-02-04 07:20:11 +0200 |
|---|---|---|
| committer | Boris Kolpackov <boris@codesynthesis.com> | 2016-02-04 07:20:11 +0200 |
| commit | 43b40a182af1578e9f5bfd78e980ce9aea660d59 (patch) | |
| tree | f9e42bcfa4b76bd6fed546828f4994701f539409 | |
| parent | ea72b21f2502527d8f25fda5817cb87672995cef (diff) | |
Style updates for web
| -rw-r--r-- | common.css | 49 | ||||
| -rw-r--r-- | intro.css | 1 | ||||
| -rw-r--r-- | man.css | 6 | ||||
| -rw-r--r-- | web-epilogue.xhtml | 7 | ||||
| -rw-r--r-- | web-prologue.xhtml | 33 | ||||
| -rw-r--r-- | web.css | 28 | ||||
| -rw-r--r-- | web.xhtml | 3 |
7 files changed, 115 insertions, 12 deletions
@@ -34,17 +34,21 @@ body {min-width: 17em;} background: rgba(0, 0, 0, 0.04); border-bottom: 1px solid rgba(0, 0, 0, 0.2); - padding: .3em 0 .3em 0; + padding: .4em 0 .42em 0; margin: 0 0 1.4em 0; } #header { /* Same as in #content. */ - max-width: 40em; + max-width: 41em; margin: 0 auto 0 auto; padding: 0 .4em 0 .4em; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + width: 100%; display: table; border: none; @@ -62,9 +66,18 @@ body {min-width: 17em;} #header-logo {text-align: left;} #header-menu {text-align: right;} -/* These overlap with #header's padding when no margin left, FSR. */ -#header-logo {padding-left: .25em;} -#header-menu {padding-right: .25em;} +/* These overlap with #header's margin because of border collapsing. */ +#header-logo {padding-left: .4em;} +#header-menu {padding-right: .4em;} + +#header-logo a +{ + color: #000; + text-decoration: none; + outline: none; +} +#header-logo a:visited {color: #000;} +#header-logo a:hover, #header-logo a:active {color: #000;} #header-menu a { @@ -73,9 +86,14 @@ body {min-width: 17em;} text-align: right; margin-left: 1em; white-space: nowrap; + letter-spacing: 0; } -#header-menu a {color: #000;} +#header-menu a +{ + color: #000; + outline: none; +} #header-menu a:visited {color: #000;} #header-menu a:hover, #header-menu a:active { @@ -116,9 +134,13 @@ body {min-width: 17em;} #content { - max-width: 40em; + max-width: 41em; margin: 0 auto 0 auto; - padding: 0 .4em 0 .4em; /* Space between text and browser frame. */ + padding: 0 .4em 0 .4em; /* Space between text and browser frame. */ + + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } /* @@ -131,8 +153,16 @@ body {min-width: 17em;} font-size: 0.7223em; line-height: 1.3em; margin: 2.2em 0 1em 0; - text-align: center; + text-align: center; +} + +#footer a +{ + color: #767676; + text-decoration: underline; } +#footer a:visited {color: #767676;} +#footer a:hover, #footer a:active {color: #3870c0;} /* Screen size indicator in the footer. The before/after content is in case we don't have any content in the footer. Margin is to actually see the @@ -176,6 +206,7 @@ body {min-width: 17em;} */ p, li, dd {text-align: justify;} +pre {text-align: left;} /* If it is inside li/dd. */ a { @@ -13,6 +13,7 @@ #content { + max-width: 43.6em; padding-left: 3em; /* Reserve for headings. */ } @@ -10,7 +10,11 @@ * */ -#content { padding-left: 1.5em; /* Reserve for the heading. */} +#content +{ + max-width: 42.1em; + padding-left: 1.5em; /* Reserve for the heading. */ +} h1 { diff --git a/web-epilogue.xhtml b/web-epilogue.xhtml new file mode 100644 index 0000000..831421d --- /dev/null +++ b/web-epilogue.xhtml @@ -0,0 +1,7 @@ +</div> + +<div id="footer">© 2014-2016 <a href="http://codesynthesis.com">Code +Synthesis Ltd</a></div> + +</body> +</html> diff --git a/web-prologue.xhtml b/web-prologue.xhtml new file mode 100644 index 0000000..e132fcb --- /dev/null +++ b/web-prologue.xhtml @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <meta charset="UTF-8"/> + <meta name="viewport" content="width=device-width, initial-scale=1"/> + + <title>$title$</title> + + <style type="text/css"> +$./common.css$ +$./pre-box.css$ +$./code-box.css$ +$./web.css$ + </style> +</head> +<body> + +<div id="header-bar"> +<div id="header"> + <div id="header-logo"><a href="$www$/"><code>b2</code></a></div> + <div id="header-menu"> + <div id="header-menu-body"> + <a href="$www$/doc.xhtml">Docs</a> + <a href="$www$/download.xhtml">Download</a> + <a href="https://lists.build2.org">Mailing Lists</a> + <a href="https://git.build2.org">Git Repository</a> + <a href="https://cppget.org">C++ Packages</a> + </div> + </div> +</div> +</div> + +<div id="content"> @@ -20,10 +20,36 @@ } } +#header-logo {font-size: 1.2em;} +#header-logo code {background-color: #fff; color: #333;} + h1 { font-weight: normal; font-size: 2em; line-height: 1.4em; - margin: 1.6em 0 .6em 0; + margin: 1.6em 0 1em 0; +} + +h1 code {font-size: 1em;} + +h2 +{ + font-weight: normal; + font-size: 1.556em; + line-height: 1.4em; + margin: 1.6em 0 1em 0; +} + +/* This one is used for FAQ questions. A hack to avoid separate style file. */ +h3 +{ + font-weight: normal; + font-size: 1.223em; + line-height: 1.4em; + letter-spacing: 0; + margin: 2.4em 0 1em 0; + + padding-left: .4em; + border-left: 3px solid #ccc; } @@ -40,7 +40,8 @@ </div> -<div id="footer">© 2014-2016 Code Synthesis Ltd</div> +<div id="footer">© 2014-2016 <a href="http://codesynthesis.com">Code +Synthesis Ltd</a></div> </body> </html> |