diff options
| author | Boris Kolpackov <boris@codesynthesis.com> | 2016-01-30 08:59:17 +0200 |
|---|---|---|
| committer | Boris Kolpackov <boris@codesynthesis.com> | 2016-01-30 08:59:17 +0200 |
| commit | 66f2b7c6775e06487116425f120ce6bce5d2af81 (patch) | |
| tree | 3c803ee6e6d6c39b015e96f0aa5e7ac24f6125fb | |
| parent | 22cdec3ed6a4f05d5d6de2e5f9dcf6ab77587326 (diff) | |
Add web styling
| -rw-r--r-- | common.css | 95 | ||||
| -rw-r--r-- | web.css | 29 | ||||
| -rw-r--r-- | web.xhtml | 44 |
3 files changed, 167 insertions, 1 deletions
@@ -23,6 +23,99 @@ body {min-width: 17em;} body {min-width: 19em;} } +/* + * Header (optional). + */ + +#header-bar +{ + width: 100%; + + background: rgba(0, 0, 0, 0.04); + border-bottom: 1px solid rgba(0, 0, 0, 0.2); + + padding: .3em 0 .3em 0; + margin: 0 0 1.4em 0; +} + +#header +{ + /* Same as in #content. */ + max-width: 40em; + margin: 0 auto 0 auto; + padding: 0 .4em 0 .4em; + + width: 100%; + display: table; + border: none; + border-collapse: collapse; +} + +#header-logo, #header-menu +{ + display: table-cell; + border: none; + padding: 0; + vertical-align: middle; +} + +#header-logo {text-align: left;} +#header-menu {text-align: right;} + +/* These overlap with #header's padding, FSR. To make this work when -menu is + flexbox, we have to add this padding to its children so they don't touch + the browser frame. Don't you just love web development? */ +#header-logo {padding-left: .4em;} +#header-menu a {margin-right: .45em;} /* Font size adjustment. */ + +#header-menu a +{ + font-size: 0.889em; + line-height: 1.4em; + text-align: right; + margin-left: .75em; + white-space: nowrap; +} + +#header-menu a {color: #000;} +#header-menu a:visited {color: #000;} +#header-menu a:hover, #header-menu a:active +{ + color: #3870c0; + text-decoration: none; +} + +/* Flexbox-based improvements though the above works reasonably well. */ +#header-menu +{ + width: 100%; + + display: -webkit-inline-flex; + display: inline-flex; + + -webkit-flex-flow: row wrap; + flex-flow: row wrap; + + -webkit-justify-content: flex-end; + justify-content: flex-end; +} + +/* Whether we want it (and at which point) depends on the size of the menu. */ +/* +@media only screen and (max-width: 567px) +{ + #header-menu + { + -webkit-flex-direction: column; + flex-direction: column; + } +} +*/ + +/* + * Content. + */ + #content { max-width: 40em; @@ -31,7 +124,7 @@ body {min-width: 17em;} } /* - * Footer. + * Footer (optional). */ #footer @@ -0,0 +1,29 @@ +/* file : web.css + * copyright : Copyright (c) 2014-2016 Code Synthesis Ltd + * license : MIT; see accompanying LICENSE file + */ + +/* Bases: + * + * common.css + * pre-box.css + * code-box.css + * + */ + +@media only screen and (max-width: 567px) +{ + #header-menu + { + -webkit-flex-direction: column; + flex-direction: column; + } +} + +h1 +{ + font-weight: normal; + font-size: 2em; + line-height: 1.4em; + margin: 1.6em 0 .6em 0; +} diff --git a/web.xhtml b/web.xhtml new file mode 100644 index 0000000..a701d59 --- /dev/null +++ b/web.xhtml @@ -0,0 +1,44 @@ +<!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>Web</title> + + <link rel="stylesheet" type="text/css" href="common.css"/> + <link rel="stylesheet" type="text/css" href="pre-box.css"/> + <link rel="stylesheet" type="text/css" href="code-box.css"/> + <link rel="stylesheet" type="text/css" href="web.css"/> +</head> +<body> + +<div id="header-bar"> +<div id="header"> + <div id="header-logo"><code>b2</code></div> + <div id="header-menu"> + <a href="/">Documentation</a> + <a href="/">Download</a> + <a href="/">Mailing Lists</a> + <a href="/">C++ Packages</a> + </div> +</div> +</div> + +<div id="content"> + <h1>The <code>build2</code> Toolchain</h1> + + <p><code>build2</code> is a build system aimed at improving cross-platform + C++ software building and library use. It will be accompanied by a C++ + package manager and a central repository of open source C++ libraries.</p> + + <p><code>build2</code> is a build system aimed at improving cross-platform + C++ software building and library use. It will be accompanied by a C++ + package manager and a central repository of open source C++ libraries.</p> + +</div> + +<div id="footer">© 2014-2016 Code Synthesis Ltd</div> + +</body> +</html> |