From 62db8d98559766c06d490d9d4c18ff27587fde0b Mon Sep 17 00:00:00 2001
From: Simon Ochsenreither <simon@ochsenreither.de>
Date: Tue, 16 Sep 2014 18:48:09 +0200
Subject: Spec improvements

---
 spec/public/stylesheets/fonts.css        |  73 ++++++++++
 spec/public/stylesheets/screen-small.css |  57 ++++++++
 spec/public/stylesheets/screen-toc.css   |  37 +++++
 spec/public/stylesheets/screen.css       | 225 ++++++++++++++++++++-----------
 4 files changed, 317 insertions(+), 75 deletions(-)
 create mode 100644 spec/public/stylesheets/fonts.css
 create mode 100644 spec/public/stylesheets/screen-small.css
 create mode 100644 spec/public/stylesheets/screen-toc.css

(limited to 'spec/public/stylesheets')

diff --git a/spec/public/stylesheets/fonts.css b/spec/public/stylesheets/fonts.css
new file mode 100644
index 0000000000..36efb2bbd5
--- /dev/null
+++ b/spec/public/stylesheets/fonts.css
@@ -0,0 +1,73 @@
+@font-face {
+    font-family: 'Luxi Sans';
+    src: local('Luxi Sans Regular'),
+         url('../fonts/LuxiSans-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Luxi Sans';
+    src: local('Luxi Sans Bold'),
+         url('../fonts/LuxiSans-Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Luxi Mono';
+    src: local('Luxi Mono Regular'),
+         url('../fonts/LuxiMono-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'Luxi Mono';
+    src: local('Luxi Mono Oblique'),
+         url('../fonts/LuxiMono-BoldOblique.woff') format('woff');
+    font-weight: normal;
+    font-style: oblique;
+}
+@font-face {
+    font-family: 'Luxi Mono';
+    src: local('Luxi Mono Bold'),
+         url('../fonts/LuxiMono-Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'Luxi Mono';
+    src: local('Luxi Mono Bold Oblique'),
+         url('../fonts/LuxiMono-BoldOblique.woff') format('woff');
+    font-weight: bold;
+    font-style: oblique;
+}
+
+@font-face {
+    font-family: 'Heuristica';
+    src: local('Heuristica Regular'),
+         url('../fonts/Heuristica-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'Heuristica';
+    src: local('Heuristica Italic'),
+         url('../fonts/Heuristica-RegularItalic.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+}
+@font-face {
+    font-family: 'Heuristica';
+    src: local('Heuristica Bold'),
+         url('../fonts/Heuristica-Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'Heuristica';
+    src: local('Heuristica Bold Italic'),
+         url('../fonts/Heuristica-BoldItalic.woff') format('woff');
+    font-weight: bold;
+    font-style: italic;
+}
diff --git a/spec/public/stylesheets/screen-small.css b/spec/public/stylesheets/screen-small.css
new file mode 100644
index 0000000000..674db7c490
--- /dev/null
+++ b/spec/public/stylesheets/screen-small.css
@@ -0,0 +1,57 @@
+body {
+  padding: 0px;
+  margin: 0px;
+}
+aside.left {
+  position: relative;
+  margin: 0px auto;
+  overflow: visible;
+  height: inherit;
+  margin-bottom: 40px;
+  background-color: #073642;
+}
+header {
+  position: relative;
+  height: inherit;
+  min-height: 32px;
+}
+main {
+    max-width: 1000px;
+    min-width: 600px;
+    margin: 0 auto;
+}
+
+#chapters a {
+  font-size: 14px;
+  max-height: 32px;
+  padding: 4px 8px;
+  white-space: nowrap;
+  display: inline-block;
+}
+#chapters > #github {
+  padding: 14px;
+}
+
+#toc {
+  overflow: visible;
+}
+#toc .toc-active {
+  background: inherit;
+}
+#toc .toc-h1 {
+  display: inherit;
+}
+#toc .toc-h1 a {
+  padding-left: 10px;
+  color: #FFFFFF;
+  background: #72D0EB;
+}
+#toc .toc-h2 a {
+  padding-left: 30px;
+}
+#toc .toc-h3 a {
+  padding-left: 50px;
+}
+#toc a {
+  font-size: 14px;
+}
diff --git a/spec/public/stylesheets/screen-toc.css b/spec/public/stylesheets/screen-toc.css
new file mode 100644
index 0000000000..7a04bd00f9
--- /dev/null
+++ b/spec/public/stylesheets/screen-toc.css
@@ -0,0 +1,37 @@
+body {
+  padding: 0px;
+  margin: 0px;
+}
+header {
+  height: 96px;
+  padding: 0px;
+  width: 100%;
+  position: relative;
+  color: #FFFFFF;
+}
+#header-main {
+  height: 68px;
+  line-height: 1.2;
+  font-size: 32px;
+}
+#header-sub {
+  padding-left: 64px;
+  height: 28px;
+  background-color:#72D0EB;
+  vertical-align: middle;
+}
+#scala-logo {
+  padding: 10px;
+}
+#title {
+  vertical-align: middle;
+}
+#github {
+  height: 40px;
+  padding: 14px;
+  float: right;
+  font-size: 0px;
+}
+li {
+  margin: 5px;
+}
diff --git a/spec/public/stylesheets/screen.css b/spec/public/stylesheets/screen.css
index dbb3ebe1b3..fdddba0b45 100644
--- a/spec/public/stylesheets/screen.css
+++ b/spec/public/stylesheets/screen.css
@@ -1,8 +1,8 @@
 /* from https://gist.github.com/andyferra/2554919 */
 
 body {
-  font-family: Helvetica, arial, sans-serif;
-  font-size: 14px;
+  font-family:Heuristica,Georgia,serif;
+  color: #222222;
   line-height: 1.6;
 
   padding-bottom: 10px;
@@ -18,7 +18,11 @@ body {
 }
 
 a {
-  color: #4183C4;
+  color: #08C;
+  text-decoration: none;
+}
+a:hover, a:focus {
+
 }
 a.absent {
   color: #cc0000;
@@ -41,13 +45,21 @@ a.anchor span {
 }
 
 h1, h2, h3, h4, h5, h6 {
-  margin: 20px 0 10px;
+  margin: 30px 0 0px;
+  padding: 0;
+  /* Fix anchor position due to header */
+  padding-top: 32px;
+  margin-top: -32px;
   font-weight: bold;
   -webkit-font-smoothing: antialiased;
   cursor: text;
   position: relative;
 }
 
+h1, h2 {
+  font-weight: normal;
+}
+
 h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor {
   text-decoration: none;
 }
@@ -95,7 +107,6 @@ h1 {
 
 h2 {
   font-size: 24px;
-  border-bottom: 1px solid #cccccc;
   color: black;
 }
 
@@ -117,7 +128,7 @@ h6 {
 }
 
 p, blockquote, ul, ol, dl, li, table, pre {
-  margin: 15px 0;
+  margin: 5px 0 15px;
   -moz-font-feature-settings: "onum";
   -ms-font-feature-settings: "onum";
   -webkit-font-feature-settings: "onum";
@@ -125,7 +136,7 @@ p, blockquote, ul, ol, dl, li, table, pre {
 }
 
 hr {
-  background: transparent url("../../images/modules/pulls/dirty-shade.png") repeat-x 0 0;
+  background: transparent repeat-x 0 0;
   border: 0 none;
   color: #cccccc;
   height: 4px;
@@ -207,7 +218,7 @@ dl dd > :last-child {
 blockquote {
   border-left: 4px solid #dddddd;
   padding: 0 15px;
-  color: #777777;
+  color: #222222;
 }
 blockquote > :first-child {
   margin-top: 0;
@@ -215,31 +226,34 @@ blockquote > :first-child {
 blockquote > :last-child {
   margin-bottom: 0;
 }
+blockquote:before {
+    content: "Example";
+    color: #777777;
+    font-size: 14px;
+    font-weight: bold;
+}
 
 table {
   padding: 0;
+  margin: 0;
+  border: none;
+  border-collapse: collapse;
 }
 table tr {
-  border-top: 1px solid #cccccc;
   background-color: white;
-  margin: 0;
-  padding: 0;
 }
 table tr:nth-child(2n) {
   background-color: #f8f8f8;
 }
 table tr th {
+  background-color: #EAEAEA;
   font-weight: bold;
-  border: 1px solid #cccccc;
   text-align: left;
-  margin: 0;
-  padding: 6px 13px;
+  padding: 5px 13px;
 }
 table tr td {
-  border: 1px solid #cccccc;
   text-align: left;
-  margin: 0;
-  padding: 6px 13px;
+  padding: 5px 13px;
 }
 table tr th :first-child, table tr td :first-child {
   margin-top: 0;
@@ -327,11 +341,14 @@ span.float-right > span {
   text-align: right;
 }
 
+pre, code, tt {
+  font:14px "Luxi Mono", 'andale mono', 'lucida console', monospace;
+  line-height:1.5;
+}
+
 .highlight pre {
-  border: 1px solid #eaeaea;
-  background-color: #f8f8f8;
+  background-color: #F8F8F8;
   border-radius: 3px;
-  line-height: 19px;
   overflow: auto;
   padding: 6px 10px;
   white-space: nowrap;
@@ -343,86 +360,144 @@ code {
   margin: 0;
   padding: 0;
   white-space: pre;
-  font-size: 16px;
 }
 
-#navigation {
-  margin-right: 10px;
-  float: right;
-  width: 26%;
-  display: inline;
-  color: #8B8B8B;
-  font-size: 15px;
-  font-weight: bold;
-  background-color: #F3F4F4;
+aside.left {
+    height: 100%;
+    position: fixed;
+    direction: rtl;
+    overflow: auto;
+    left: 0px;
+    width: 320px;
+    bottom: -32px;
+    font-family: "Luxi Sans", serif;
+    background-color: #073642;
 }
 
-#content-container {
-  float: left;
-  width: 70%;
-  display: inline;
+aside.left > nav {
+    direction: ltr;
+    top: 32px;
+    padding-bottom: 32px;
 }
 
-#container {
-  padding-top: 10px;
-  width: 100%;
+article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
+    display: block;
 }
 
-#navigation a {
-  text-decoration: none;
-  color: #8B8B8B;
+audio, canvas, img, svg, video {
+    vertical-align: middle;
 }
 
-#navigation a:hover {
-  text-decoration: underline;
+audio, canvas, progress, video {
+    display: inline-block;
+    vertical-align: baseline;
 }
 
-.active-page {
-  color: #171717;
+main {
+    position: relative;
+    top: 32px;
+    margin: 0 0 0 320px;
+    padding: 0px 32px;
+    max-width: 800px;
+    min-width: 800px;
+    min-height: 580px;
+    background-color: #FFF;
 }
 
-.active-page a {
-  color: #171717 !important;
+header {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    height: 32px;
+    width: 100%;
+    background-color: #002B36;
+    margin: 0px 0px;
+    padding: 0px 0px;
+    font-family: "Luxi Sans", serif;
+    font-weight: bold;
+    z-index: 10;
+    overflow: hidden;
+    text-shadow: 1px 1px 0px rgba(0, 43, 54, 0.15);
 }
 
-.to_top {
-  position: absolute;
-  margin-top: -35px;
-  right: 27%;
-  color: gray;
-  cursor: pointer;
-  width: 16px; height: 16px;
-  display: block;
+#chapters a {
+    color: #FFFFFF;
+    text-decoration: none;
+    font-size: 0.63vw;
+    padding: 100% 8px;
 }
 
-.to_top:hover {
-  color: black;
+#chapters a:hover, #chapters a:focus, #github:hover, #github:focus {
+  background: #DC322F;
+  -webkit-transition: background .2s ease-in;
+  -moz-transition: background .2s ease-in;
+  -ms-transition: background .2s ease-in;
+  -o-transition: background .2s ease-in;
+  transition: background .2s ease-in;
 }
 
-#scala-logo {
-  float: left;
-  width: 168px;
-  height: 48px;
-  margin-right: 25px;
+#chapters a.chapter-active {
+    background: #72D0EB;
 }
 
-#header {
-  padding-top: 16px;
-  padding-bottom: 10px;
-  margin-bottom: 10px;
-  height: 64px;
-  border-bottom: 1px solid #cccccc;
+
+#toc ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
 }
 
-#header a {
-  height: 100%;
-  display: block;
+#toc li {
+    margin: 0;
+    padding: 0;
+}
+
+#toc a {
+    color: #FFFFFF; /*#073642;*/
+    font-weight: bold;
+    font-size: 12px;
+    display: block;
+    text-shadow: 1px 1px 0px rgba(0, 43, 54, 0.15);
+}
+
+#toc a:hover, #toc a:focus {
+  background: #DC322F;
   text-decoration: none;
+  -webkit-transition: background .2s ease-in;
+  -moz-transition: background .2s ease-in;
+  -ms-transition: background .2s ease-in;
+  -o-transition: background .2s ease-in;
+  transition: background .2s ease-in;
 }
 
-#header h1 {
-  cursor: pointer;
-  padding-top: 6px;
-  margin-bottom: 0px;
-  font-size: 30px;
+#toc .toc-h1 {
+    display: none;
+}
+
+#toc .toc-h2 a {
+    padding-left: 10px;
+}
+
+#toc .toc-h3 a {
+    padding-left: 30px;
+}
+
+#toc .toc-active {
+    background: #72D0EB;
+}
+
+#toc .toc-active a {
+    color: #FFFFFF;
+}
+
+#chapters > #github {
+  padding: 0px;
+  float: right;
+}
+
+.hljs{
+        background: #f8f8f8;
 }
+/* proper rendering of MathJax into highlighted code blocks */
+.fixws { white-space: pre; }
+.fixws .math { white-space: nowrap; }
-- 
cgit v1.2.3