summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorBoris Kolpackov <boris@codesynthesis.com>2016-01-30 06:59:17 (GMT)
committerBoris Kolpackov <boris@codesynthesis.com>2016-01-30 06:59:17 (GMT)
commit66f2b7c6775e06487116425f120ce6bce5d2af81 (patch)
tree3c803ee6e6d6c39b015e96f0aa5e7ac24f6125fb
parent22cdec3ed6a4f05d5d6de2e5f9dcf6ab77587326 (diff)
Add web styling
-rw-r--r--common.css95
-rw-r--r--web.css29
-rw-r--r--web.xhtml44
3 files changed, 167 insertions, 1 deletions
diff --git a/common.css b/common.css
index b96f64c..83c8f6a 100644
--- a/common.css
+++ b/common.css
@@ -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
diff --git a/web.css b/web.css
new file mode 100644
index 0000000..507875e
--- /dev/null
+++ b/web.css
@@ -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">&#169; 2014-2016 Code Synthesis Ltd</div>
+
+</body>
+</html>