From 48d99d13389fe2b568f4038ad3926a17094c5fc7 Mon Sep 17 00:00:00 2001
From: Mike McQuaid
Date: Sun, 14 May 2017 15:07:00 +0100
Subject: docs.brew.sh: use SCSS.

Import style changes from:
https://github.com/Homebrew/homebrew.github.io/pull/166
---
 docs/_layouts/index.html |   2 +-
 docs/css/reset.css       |  53 -----
 docs/css/screen.css      | 389 -------------------------------------
 docs/css/screen.scss     | 488 +++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 489 insertions(+), 443 deletions(-)
 delete mode 100644 docs/css/reset.css
 delete mode 100644 docs/css/screen.css
 create mode 100644 docs/css/screen.scss

(limited to 'docs')

diff --git a/docs/_layouts/index.html b/docs/_layouts/index.html
index 570718287..daf4fb6c0 100644
--- a/docs/_layouts/index.html
+++ b/docs/_layouts/index.html
@@ -1,7 +1,7 @@
 ---
 layout: base
 ---
-<div id="informations">
+<div id="information">
   <ul>
     <li>
       <div class="group row">
diff --git a/docs/css/reset.css b/docs/css/reset.css
deleted file mode 100644
index 1c85489d6..000000000
--- a/docs/css/reset.css
+++ /dev/null
@@ -1,53 +0,0 @@
-/* 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
deleted file mode 100644
index 836edac15..000000000
--- a/docs/css/screen.css
+++ /dev/null
@@ -1,389 +0,0 @@
-/* ****************************************************
-
-  @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: underline; }
-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;
-}
-
-#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%;
-}
-
-table {
-  border-collapse: separate;
-  border: solid rgba(0,0,0,0.4) 1px;
-  border-radius: 0.4em;
-  -moz-border-radius: 0.4em;
-  -webkit-border-radius: 0.4em;
-  margin-top: 1em;
-}
-
-.full-width {
-  width: 100%;
-}
-
-table td, th {
-  padding: 0.1em 1em;
-}
-
-table code {
-  font-size: 130%;
-}
-
-.number-data {
-  text-align: right;
-}
-
-table tr:nth-child(odd) {
-  background: rgba(0,0,0,0.2);
-}
-
-table tr th, table tr:nth-child(even) {
-  background: rgba(0,0,0,0.4);
-}
-
-/*}}}*/
-
-/* @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);
-  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;
-  }
-}
diff --git a/docs/css/screen.scss b/docs/css/screen.scss
new file mode 100644
index 000000000..5acdf4657
--- /dev/null
+++ b/docs/css/screen.scss
@@ -0,0 +1,488 @@
+---
+---
+
+$color_peach_orange_approx: #f9d094;
+$color_rangitoto_approx: #2e2a24;
+$color_marigold_approx: #ba832c;
+$color_di_serria_approx: #d3a459;
+$color_dallas_approx: #745626;
+$black_25: rgba(0, 0, 0, 0.25);
+$black_30: rgba(0, 0, 0, 0.3);
+$white: #fff;
+$white_8: rgba(255, 255, 255, 0.08);
+$black_50: rgba(0, 0, 0, 0.5);
+$black_40: rgba(0, 0, 0, 0.4);
+$black_20: rgba(0, 0, 0, 0.2);
+$color_reno_sand_30_approx: rgba(162, 107, 20, 0.3);
+$color_reno_sand_25_approx: rgba(162, 107, 20, 0.25);
+$color_shadow_approx: #816f51;
+
+@mixin border-radius($radius) {
+  border-radius: $radius;
+  -moz-border-radius: $radius;
+  -webkit-border-radius: $radius;
+}
+
+@mixin box-shadow($x, $y, $blur, $color) {
+  box-shadow: $x $y $blur $color;
+  -moz-box-shadow: $x $y $blur $color;
+  -webkit-box-shadow: $x $y $blur $color;
+}
+
+@mixin margin-inline-end($margin) {
+  margin-inline-end: $margin;
+  -moz-margin-end: $margin;
+  -webkit-margin-end: $margin;
+}
+
+h1, h2, h3 {
+  font-size: 420%;
+  color: $color_peach_orange_approx;
+  margin: 0 0 0.1em;
+  text-align: center;
+  text-shadow: 1px 1px 10px $black_25;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  line-height: 1.1;
+}
+
+h1 {
+  font-weight: 900;
+  a, a:hover {
+    font-weight: 900;
+    color: $color_peach_orange_approx;
+  }
+}
+
+h2, h3 {
+  font-weight: 800;
+  margin-top: 0.5em;
+  margin-bottom: 0.1em;
+}
+
+h2 {
+  font-size: 300%;
+}
+
+h3 {
+  font-size: 125%;
+}
+
+#home, #page {
+  h1 {
+    font-size: 250%;
+    font-weight: 800;
+    padding-bottom: 0.5em;
+  }
+
+  h2, h3 {
+    font-weight: 700;
+    text-align: left;
+    padding-bottom: 0.3em;
+  }
+
+  h2 {
+    font-size: 175%;
+  }
+
+  h3 {
+    font-size: 150%;
+  }
+}
+
+#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;
+}
+
+#information .row, #border-bottom {
+  border-bottom: 1px solid $black_50;
+  border-top: 1px solid $white_8;
+  padding: 2em 20px 0;
+}
+
+html {
+  margin: 0;
+  padding: 0;
+  font-size: 62.5%;
+  font-family: "-apple-system", "BlinkMacSystemFont", "Helvetica Neue", "Roboto", "sans-serif";
+  height: 100%;
+}
+
+body {
+  height: 100%;
+  font-size: 150%;
+  line-height: 1.4;
+  color: $color_peach_orange_approx;
+  background: $color_rangitoto_approx;
+  position: relative;
+  margin: 0;
+  padding: 0 30px;
+}
+
+p {
+  margin: 0 0 1em 0;
+}
+
+ul, ol, dl {
+  margin-bottom: 1em;
+}
+
+ul {
+  margin-left: 20px;
+}
+
+table {
+  margin-bottom: 1em;
+  border-collapse: separate;
+  border-spacing: 0;
+  border: solid $black_40 1px;
+  @include border-radius(0.4em);
+  margin-top: 1em;
+  td {
+    padding: 0.1em 1em;
+  }
+
+  code {
+    font-size: 130%;
+  }
+
+  tr {
+    &:nth-child(odd) {
+      background: $black_20;
+    }
+
+    th {
+      background: $black_40;
+    }
+
+    &:nth-child(even) {
+      background: $black_40;
+    }
+  }
+}
+
+pre {
+  margin: 0 0 1em 0;
+  background: $black_30;
+  color: $white;
+  padding: 8px 10px;
+  @include border-radius(0.4em);
+  overflow-x: auto;
+  code {
+    font-family: "Monaco", "Menlo", "monospace";
+    font-size: 11px;
+    line-height: 1.6;
+  }
+}
+
+a {
+  text-decoration: none;
+  color: $color_marigold_approx;
+  font-weight: bold;
+  &:focus {
+    outline: 1px dotted;
+    color: $color_di_serria_approx;
+    text-decoration: underline;
+  }
+
+  &:hover {
+    color: $color_di_serria_approx;
+    text-decoration: underline;
+  }
+}
+
+button, input, select, textarea, option {
+  font-size: 100%;
+}
+
+a, a *, button, button *, select, option, label, input[type=submit] {
+  cursor: pointer;
+}
+
+hr {
+  display: none;
+}
+
+small {
+  font-size: 90%;
+}
+
+.group {
+  display: block;
+  &:after {
+    content: ".";
+    display: block;
+    height: 0;
+    clear: both;
+    visibility: hidden;
+  }
+}
+
+sup {
+  font-size: 80%;
+  line-height: 1;
+  vertical-align: super;
+}
+
+button::-moz-focus-inner {
+  border: 0;
+  padding: 1px;
+}
+
+::selection, ::-moz-selection {
+  background: $color_dallas_approx;
+}
+
+#forkme {
+  width: 149px;
+  height: 149px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  border: 0;
+}
+
+#wrap {
+  width: 57em;
+  max-width: 100%;
+  margin: 0 auto;
+  padding: 15px 0 0;
+}
+
+#header {
+  text-align: center;
+  margin-bottom: 1em;
+}
+
+#language {
+  margin-bottom: 2em;
+}
+
+#selectable {
+  font-size: 13px;
+}
+
+.avatar {
+  @include border-radius(0.4em);
+  overflow: hidden;
+  margin-right: 0.5em;
+  vertical-align: middle;
+}
+
+#home, #page, #post, .singlepostcontent {
+  border-top: 1px solid $white_8;
+  @include box-shadow(0, -1px, 0, $black_50);
+}
+
+#home, #page {
+  code {
+    font-size: 100%;
+  }
+
+  pre code {
+    font-size: 80%;
+  }
+}
+
+#home, #page, .postcontent {
+  img {
+    min-width: 25em;
+    max-width: 35em;
+  }
+
+  th, td {
+    padding: 0.25em 0.5em;
+  }
+}
+
+.full-width {
+  width: 100%;
+}
+
+th {
+  padding: 0.1em 1em;
+}
+
+.number-data {
+  text-align: right;
+}
+
+#information ul, .posts {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+#information {
+  border-top: 1px solid $black_50;
+  .row {
+    .col-1 {
+      width: 49%;
+      float: left;
+      padding: 0 0 1em;
+    }
+
+    .col-2 {
+      width: 49%;
+      float: right;
+      padding: 0 0 1em;
+    }
+  }
+
+  .button-large {
+    padding: 2em 0 1em;
+    font-size: 120%;
+  }
+
+  .quote {
+    text-align: center;
+    color: $color_shadow_approx;
+    padding-bottom: 2em;
+    blockquote {
+      font-size: 140%;
+      padding: 0 15%;
+      span {
+        font-size: 140%;
+        line-height: 0.5;
+        vertical-align: sub;
+      }
+    }
+
+    cite {
+      font-style: normal;
+      a {
+        font-weight: normal;
+      }
+    }
+  }
+
+  .credits {
+    border-bottom: none;
+    font-size: 70%;
+    text-align: center;
+    padding-top: 1.8em;
+    opacity: 0.5;
+    p {
+      margin: 0;
+      padding: 0 0 0.7em;
+    }
+  }
+  .button a {
+    background: $color_reno_sand_30_approx;
+    padding: 8px 10px 6px;
+    @include border-radius(0.4em);
+    @include box-shadow(0, 0, 5px, $black_40);
+    font-size: larger;
+    &:hover {
+      background: $color_reno_sand_25_approx;
+    }
+  }
+}
+
+.button {
+  text-align: center;
+  margin: 1em 0 2em;
+}
+
+#border-no-bottom {
+  border-bottom: none;
+  font-size: 70%;
+  text-align: center;
+  padding-top: 1.8em;
+  opacity: 0.5;
+}
+
+* html .group {
+  height: 1%;
+}
+
+span .amp {
+  font-weight: normal;
+  font-style: italic;
+  font-size: 1.2em;
+  line-height: 0.8;
+}
+
+.posts li {
+  border-top: 1px solid $white_8;
+  @include box-shadow(0, -1px, 0, $black_50);
+}
+
+[dir="rtl"] {
+  ul {
+    margin-left: 0;
+    margin-right: 20px;
+  }
+
+  pre {
+    direction: ltr;
+    text-align: left;
+  }
+
+  #information .row {
+    .col-1 {
+      float: right;
+    }
+    .col-2 {
+      float: left;
+    }
+  }
+}
+
+@media screen and(min-width: 700px) {
+  #information .highlight {
+    @include margin-inline-end(0);
+  }
+}
+
+@media screen and(max-width: 700px) {
+  body {
+    padding: 0;
+  }
+
+  #post, #page, .posts {
+    margin: 0 1em;
+  }
+
+  h1 {
+    font-size: 350%;
+  }
+
+  h2 {
+    font-size: 250%;
+  }
+
+  #forkme {
+    width: 100px;
+    height: 100px;
+  }
+
+  #information .row {
+    .col-1 {
+      width: 100%;
+      padding: 0;
+      margin: 0;
+    }
+
+    .col-2 {
+      width: 100%;
+      float: left;
+    }
+  }
+
+  pre code#selectable {
+    width: 90%;
+    margin: 0 auto;
+  }
+
+  [dir="rtl"] #information .row .col-2 {
+    float: right;
+  }
+}
-- 
cgit v1.2.3