docs.brew.sh: use brew.sh theming.

Unfortunately there's no easy way to share this code with the brew.sh
site but it's at least able to have the `css/`, `img/` (root) and
`_layouts` directories in sync between the two repositories.

Some small CSS tweaks were needed to make these pages render more
attractively.

3 files changed, 470 insertions, 0 deletions

diff --git a/docs/css/pygments.css b/docs/css/pygments.css
new file mode 100644
index 000000000..e88257d01
--- /dev/null
+++ b/docs/css/pygments.css
@@ -0,0 +1,59 @@
+.hll { background-color: #ffffcc }
+.c { color: #999988; font-style: italic } /* Comment */
+.err { color: #a61717; background-color: #e3d2d2 } /* Error */
+.k { font-weight: bold } /* Keyword */
+.o { font-weight: bold } /* Operator */
+.cm { color: #999988; font-style: italic } /* Comment.Multiline */
+.cp { color: #999999; font-weight: bold } /* Comment.Preproc */
+.c1 { color: #999988; font-style: italic } /* Comment.Single */
+.cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
+.gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+.ge { font-style: italic } /* Generic.Emph */
+.gr { color: #aa0000 } /* Generic.Error */
+.gh { color: #999999 } /* Generic.Heading */
+.gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
+.go { color: #888888 } /* Generic.Output */
+.gp { color: #555555 } /* Generic.Prompt */
+.gs { font-weight: bold } /* Generic.Strong */
+.gu { color: #aaaaaa } /* Generic.Subheading */
+.gt { color: #aa0000 } /* Generic.Traceback */
+.kc { font-weight: bold } /* Keyword.Constant */
+.kd { font-weight: bold } /* Keyword.Declaration */
+.kn { font-weight: bold } /* Keyword.Namespace */
+.kp { font-weight: bold } /* Keyword.Pseudo */
+.kr { font-weight: bold } /* Keyword.Reserved */
+.kt { color: #445588; font-weight: bold } /* Keyword.Type */
+.m { color: #009999 } /* Literal.Number */
+.s { color: #bb8844 } /* Literal.String */
+.na { color: #008080 } /* Name.Attribute */
+.nb { color: #999999 } /* Name.Builtin */
+.nc { color: #999999; font-weight: bold } /* Name.Class */
+.no { color: #666666 } /* Name.Constant */
+.ni { color: #800080 } /* Name.Entity */
+.ne { color: #990000; font-weight: bold } /* Name.Exception */
+.nf { color: #999999; font-weight: bold } /* Name.Function */
+.nn { color: #555555 } /* Name.Namespace */
+.nt { color: #000080 } /* Name.Tag */
+.nv { color: #008080 } /* Name.Variable */
+.ow { font-weight: bold } /* Operator.Word */
+.w { color: #bbbbbb } /* Text.Whitespace */
+.mf { color: #009999 } /* Literal.Number.Float */
+.mh { color: #009999 } /* Literal.Number.Hex */
+.mi { color: #009999 } /* Literal.Number.Integer */
+.mo { color: #009999 } /* Literal.Number.Oct */
+.sb { color: #bb8844 } /* Literal.String.Backtick */
+.sc { color: #bb8844 } /* Literal.String.Char */
+.sd { color: #bb8844 } /* Literal.String.Doc */
+.s2 { color: #9c7645 } /* Literal.String.Double */
+.se { color: #bb8844 } /* Literal.String.Escape */
+.sh { color: #bb8844 } /* Literal.String.Heredoc */
+.si { color: #bb8844 } /* Literal.String.Interpol */
+.sx { color: #bb8844 } /* Literal.String.Other */
+.sr { color: #808000 } /* Literal.String.Regex */
+.s1 { color: #9c7645 } /* Literal.String.Single */
+.ss { color: #bb8844 } /* Literal.String.Symbol */
+.bp { color: #999999 } /* Name.Builtin.Pseudo */
+.vc { color: #008080 } /* Name.Variable.Class */
+.vg { color: #008080 } /* Name.Variable.Global */
+.vi { color: #008080 } /* Name.Variable.Instance */
+.il { color: #009999 } /* Literal.Number.Integer.Long */
diff --git a/docs/css/reset.css b/docs/css/reset.css
new file mode 100644
index 000000000..1c85489d6
--- /dev/null
+++ b/docs/css/reset.css
@@ -0,0 +1,53 @@
+/* http://meyerweb.com/eric/tools/css/reset/ */
+/* v1.0 | 20080212 */
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	outline: 0;
+	font-size: 100%;
+	vertical-align: baseline;
+	background: transparent;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+
+/* remember to define focus styles! */
+:focus {
+	outline: 0;
+}
+
+/* remember to highlight inserts somehow! */
+ins {
+	text-decoration: none;
+}
+del {
+	text-decoration: line-through;
+}
+
+/* tables still need 'cellspacing="0"' in the markup */
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
diff --git a/docs/css/screen.css b/docs/css/screen.css
new file mode 100644
index 000000000..76d1461c9
--- /dev/null
+++ b/docs/css/screen.css
@@ -0,0 +1,358 @@
+/* ****************************************************
+
+  @file         screen.css
+  @description  Screen stylesheet
+  vim: set noet ts=4 fdm=marker fenc=utf-8:
+
+***************************************************** */
+
+@import url("./reset.css");
+
+/* @section Basic {{{
+******************************************************************************/
+
+html {
+  font-size: 62.5%;
+  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
+}
+
+html, body { height: 100%; }
+
+body {
+  font-size: 150%;
+  line-height: 1.4;
+  color: #F9D094;
+  background: #2E2A24;
+  position: relative;
+  behavior: url("/js/ie6/csshover.htc");
+  padding: 0 30px;
+}
+
+p,ul,ol,dl,table,pre { margin-bottom: 1em; }
+ul { margin-left: 20px; }
+a { text-decoration: none; cursor: pointer; color: #ba832c; font-weight: bold; }
+a:focus { outline: 1px dotted; }
+a:visited {  }
+a:hover, a:focus { color: #d3a459; text-decoration: none; }
+a *, button * { cursor: pointer; }
+hr { display: none; }
+small { font-size: 90%; }
+input, select, button, textarea, option { font-size: 100%; }
+button, label, select, option, input[type=submit] { cursor: pointer; }
+.group:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .group {display: inline-block;}
+/* Hides from IE-mac \*/ * html .group {height: 1%;} .group {display: block;} /* End hide from IE-mac */
+sup { font-size: 80%; line-height: 1; vertical-align: super; }
+button::-moz-focus-inner { border: 0; padding: 1px; }
+span.amp { font-weight: normal; font-style: italic; font-size: 1.2em; line-height: 0.8; }
+h1,h2,h3,h4,h5,h6 { line-height: 1.1; }
+
+::selection { background: #745626; }
+::-moz-selection { background: #745626; }
+
+h1, h2, h3 {
+  font-size: 420%;
+  margin: 0 0 0.1em;
+  font-weight: 900;
+  text-shadow: 1px 1px 10px rgba(0,0,0,0.25);
+}
+
+h2 {
+  font-size: 300%;
+  text-align: center;
+  font-weight: 800;
+  color: #F9D094;
+  margin-top: 0.5em;
+  margin-bottom: 0.1em;
+}
+
+h3 {
+  font-size: 125%;
+  text-align: center;
+  font-weight: 800;
+  color: #F9D094;
+  margin-top: 0.5em;
+  margin-bottom: 0.1em;
+}
+
+#forkme {
+  width: 149px;
+  height: 149px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  border: 0
+}
+
+h1 a,
+h1 a:hover {
+  color: #F9D094;
+  font-weight: 900;
+  text-decoration: none;
+}
+
+#wrap {
+  width: 57em;
+  /*width: 760px;*/
+  max-width: 100%;
+  margin: 0 auto;
+  padding: 15px 0 0;
+}
+
+#header {
+  text-align: center;
+  margin-bottom: 1em;
+}
+
+#language {
+  margin-bottom: 2em;
+}
+
+pre {
+  background: rgba(0,0,0,0.3);
+  color: #fff;
+  padding: 8px 10px;
+  border-radius: 0.4em;
+  -moz-border-radius: 0.4em;
+  -webkit-border-radius: 0.4em;
+  overflow-x: auto;
+}
+
+pre code {
+  font-family: "Monaco", "Menlo", monospace;
+  font-size: 11px;
+  line-height: 1.6;
+}
+
+#selectable {
+  font-size: 13px;
+}
+
+.avatar {
+  border-radius: 0.4em;
+  overflow: hidden;
+  margin-right: 0.5em;
+  vertical-align: middle;
+}
+
+#home, #page, .postcontent {
+  font-size: 1.2em;
+  min-width: 25em;
+  max-width: 35em;
+  margin: 0 auto;
+  margin-top: 1em;
+  padding-top: 1em;
+  padding-bottom: 1em;
+}
+
+#home img, #page img, .postcontent img {
+  min-width: 25em;
+  max-width: 35em;
+}
+
+#home th, #page th, .postcontent th, #home td, #page td, .postcontent td {
+  padding: 0.25em 0.5em;
+}
+
+#post, #home, #page, .singlepostcontent, .posts li {
+  border-top: 1px solid rgba(255,255,255,0.08);
+  box-shadow: 0 -1px 0 rgba(0,0,0,0.5);
+}
+
+#home ul, #page ul, .postcontent ul {
+  list-style: inherit;
+}
+
+#home h1, #page h1 {
+  font-size: 250%;
+  font-weight: 800;
+  text-align: center;
+  padding-bottom: 0.5em;
+}
+
+#home h2, #page h2 {
+  font-size: 175%;
+  font-weight: 700;
+  text-align: left;
+  padding-bottom: 0.3em;
+}
+
+#home h3, #page h3 {
+  font-size: 150%;
+  font-weight: 700;
+  text-align: left;
+  padding-bottom: 0.3em;
+}
+
+#home code, #page code {
+  font-size: 100%;
+}
+
+#home pre code, #page pre code {
+  font-size: 80%;
+}
+
+/*}}}*/
+
+/* @section Informations {{{
+******************************************************************************/
+
+#informations {
+  border-top: 1px solid rgba(0,0,0,0.5);
+}
+
+#informations ul {
+  margin: 0;
+}
+
+#informations .row, #border-bottom {
+  border-bottom: 1px solid rgba(0,0,0,0.5);
+  border-top: 1px solid rgba(255,255,255,0.08);
+  padding: 2em 20px 0;
+}
+
+#informations .row .col-1 {
+  width: 49%;
+  float: left;
+  padding: 0 0 1em;
+}
+
+#informations .row .col-2 {
+  width: 49%;
+  float: right;
+  padding: 0 0 1em;
+}
+
+@media screen and (min-width: 700px) {
+  #informations .highlight {
+    margin-inline-end: 0;
+    -moz-margin-end: 0;
+    -webkit-margin-end: 0;
+  }
+}
+
+.button {
+  text-align: center;
+  margin: 1em 0 2em;
+}
+
+#informations .button a {
+  background: rgba(162,107,20,0.3);
+  padding: 8px 10px 6px;
+  border-radius: 0.4em;
+  -moz-border-radius: 0.4em;
+  -webkit-border-radius: 0.4em;
+  box-shadow: 0 0 5px rgba(0,0,0,0.4);
+  -moz-box-shadow: 0 0 5px rgba(0,0,0,0.4);
+  -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.4);
+  text-decoration: none;
+  font-size: larger;
+}
+
+#informations .button a:hover {
+  background: rgba(162,107,20,0.25);
+}
+
+#informations .button-large {
+  padding: 2em 0 1em;
+  font-size: 120%;
+}
+
+#informations .quote {
+  text-align: center;
+  color: #816f51;
+  padding-bottom: 2em;
+}
+
+#informations .quote blockquote {
+  font-size: 140%;
+  padding: 0 15%;
+}
+
+#informations .quote blockquote span {
+  font-size: 140%;
+  line-height: 0.5;
+  vertical-align: sub;
+}
+
+#informations .quote cite {
+  font-style: normal;
+}
+
+#informations .quote cite a {
+  font-weight: normal;
+}
+
+#informations .credits, #border-no-bottom {
+  border-bottom: none;
+  font-size: 70%;
+  text-align: center;
+  padding-top: 1.8em;
+  opacity: 0.5;
+}
+
+#informations .credits p {
+  margin: 0;
+  padding: 0 0 0.7em;
+}
+
+/*}}}*/
+
+/* @section Mobile {{{
+******************************************************************************/
+@media screen and (max-width: 700px) {
+  body {
+    padding: 0px;
+  }
+
+  h1 {
+    font-size: 350%;
+  }
+
+  h2 {
+    font-size: 250%;
+  }
+
+  #forkme {
+    width: 100px;
+    height: 100px;
+  }
+
+  #informations .row .col-1 {
+    width: 100%;
+    padding: 0;
+    margin: 0;
+  }
+
+  #informations .row .col-2 {
+    width: 100%;
+    float: left;
+  }
+  pre code#selectable {
+    width: 90%;
+    margin: 0 auto;
+  }
+}
+/*}}}*/
+
+/* @section RTL {{{
+******************************************************************************/
+[dir="rtl"] ul { margin-left: 0; margin-right: 20px; }
+
+[dir="rtl"] pre {
+  direction: ltr;
+  text-align: left;
+}
+
+[dir="rtl"] #informations .row .col-1 {
+  float: right;
+}
+
+[dir="rtl"] #informations .row .col-2 {
+  float: left;
+}
+
+@media screen and (max-width: 700px) {
+  [dir="rtl"] #informations .row .col-2 {
+    float: right;
+  }
+}