bookwatch 1.0.0

data/master_middleman/source/stylesheets/partials/_default.scss

@@ -0,0 +1,300 @@
+/*
+ * FILE: _default.scss
+======================================================================== */
+* {
+  -webkit-font-smoothing: antialiased;
+}
+html {
+  font-size: 1em;
+}
+body {
+  background-color: #fff;
+  // background-color: $color-bg;
+  font-family: $font-primary;
+  font-weight: 400;
+  line-height: 1.45;
+  color: #333;
+  margin: 0;
+  padding: 0;
+}
+
+// Paragraphs
+p {
+  margin-bottom: 1.3em;
+}
+li p {
+  margin: 0; // Hack to fix broken markdown.
+}
+
+/*doc
+---
+title: Link Default
+name: link_default
+category: basics
+---
+```html_example
+<a class="link" href="#">Link</a>
+```
+*/
+
+a, .link {
+  border-bottom: 1px dotted lighten(desaturate($color-link, 40%), 40%);
+  color: $color-link;
+  text-decoration: none;
+  @include transition(all 0.1s linear);
+}
+
+img {
+  height: auto;
+  max-width: 100%;
+}
+
+// Type Scale: Major Third 1.250
+h1, h2, h3, h4, h5, h6 {
+  margin: 60px 0 0.5em;
+  font-weight: inherit;
+  line-height: 1.2;
+}
+
+.steps-header {
+  margin-top: -0.2em;
+}
+
+/*doc
+---
+title: Headings
+name: headings
+category: basics
+---
+```html_example
+<h1>h1. heading level 1</h1>
+<h2>h2. heading level 2</h2>
+<h3>h3. heading level 3</h3>
+<h4>h4. heading level 4</h4>
+<div class="h2">this is a div with an h2 class</div>
+<h5 class="h3">this is an h5 with an h3 class</h5>
+<h2><a id='fake-anchor'></a>h2. heading with link</h2>
+<h3><a id='other-fake-anchor'></a>h3. heading with link</h3>
+```
+*/
+
+h1, .h1 {
+  margin-top: 0;
+  font-size: $font-size-xxl;
+}
+h2, .h2 {
+  font-size: $font-size-xl;
+}
+h3, .h3 {
+  font-size: $font-size-l;
+}
+h4, h5, .h4 {
+  font-size: $font-size-m;
+}
+small,
+.font_small {
+  font-size: 0.8em;
+}
+h2 > a:before, h3 > a:before {
+  @media (min-width: $bp-wide) {
+    content: "";
+    display: block;
+    height: 80px;
+    margin: -80px 0 0;
+  }
+}
+
+// Lists
+ul,
+ol {
+  margin: 0 0 1em;
+}
+ul {
+  padding: 0 0 0 1.2em;
+}
+ol {
+  padding: 0 0 0 1.4em;
+}
+ul ul,
+ol ol {
+  margin-top: 1em;
+  padding-bottom: 0
+}
+
+// Vertical spacing for ordered lists
+ol li {
+  margin: 0 0 1.3em;
+  padding: 0;
+}
+
+// Tight spacing for unordered lists
+ul li {
+  margin: 0 0 0.5em;
+  padding: 0;
+}
+
+// Tight spacing for nested lists
+li li {
+  margin-bottom: 0;
+}
+
+// Image spacing inside lists
+ol img,
+ul img {
+  margin: 0.5em 0;
+}
+
+// Input forms
+input {
+  background-color: #f1f1f1;
+  border: 1px solid $color-border;
+  border-radius: $radius;
+  box-shadow: $color-border 1px 1px 4px -2px inset;
+  color: $color-text;
+  display: block;
+  padding: 0.5em 1em;
+  @include transition(all 0.1s linear);
+  width: 100%;
+
+  &:hover {
+    border-color: transparentize(darken($color-accent, 10%), 0.5);
+    background-color: #fff;
+  }
+  &:focus {
+    background-color: #fff;
+    border-color: $color-accent;
+    box-shadow: $color-border 0 0 4px;
+    outline: 0;
+  }
+}
+
+// Tables
+table {
+  border-color: #b5b5b5;
+  border-collapse: collapse;
+  border-style: solid;
+  border-width: 1px;
+  color: #333333;
+  font-size: 1em;
+  margin-top: 1em;
+  padding: 0.8em 0.7rem;
+  width: 100%;
+}
+th {
+  background-color: #f8f8f8;
+  border-color: #b5b5b5;
+  color: #4b6475;
+  line-height: 1.1;
+  font-size: $font-size-s;
+  text-align: left;
+}
+tr {
+  color: #686868;
+}
+
+.content td, .content th, .content tr {
+  border: solid 1px grey;
+}
+
+.content tr:hover {
+  background-color: #fdfdfd;
+  color: #333;
+}
+
+caption {
+  font-size: $font-size-m;
+  padding: 0.5em;
+}
+
+// Code
+
+/*doc
+---
+title: Code Example - Default
+name: code_example-default
+category: basics
+---
+```html_example
+<pre><code class="highlight ruby"><span class="nb">require</span> <span class="s1">'ova_manager'</span>
+<span class="nb">require</span> <span class="s1">'vsphere_clients'</span>
+
+<span class="no">OvaManager</span><span class="o">::</span><span class="no">Deployer</span><span class="p">.</span><span class="nf">new</span><span class="p">({</span>
+  <span class="ss">host: </span><span class="s2">"172.16.74.3"</span><span class="p">,</span>
+  <span class="ss">user: </span><span class="s2">"root"</span><span class="p">,</span>
+  <span class="ss">password: </span><span class="s2">"vmware"</span>
+<span class="p">})</span>
+</code></pre>
+```
+*/
+
+pre {
+  background-color: #f0f0f0;
+  border-radius: 3px;
+  font-size: rem(13);
+  padding: 1em;
+  white-space: pre;
+  // max-width: 20em;
+  overflow: auto;
+}
+pre code {
+  background-color: transparent;
+  border: 0;
+  color: $color-text;
+  direction: ltr;
+  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  overflow: auto;
+  text-align: left;
+  margin: 0;
+  padding: 0;
+  word-spacing: normal;
+  word-break: normal;
+}
+
+/*doc
+---
+title: Code Example - Inline
+name: code_example-inline
+
+category: basics
+---
+```html_example
+<code>"mbus"=&gt;"nats://nats:nats@192.168.86.17:4222"</code>
+```
+*/
+
+code {
+  background-color: #f5f5ff;
+  border: 1px solid #e4e4e4;
+  display: inline-block;
+  font-size: rem(13);
+  line-height: 1.4;
+  margin: 0.2em 0.1em 0.1em;
+  padding: 0 0.4em 0 0.4em;
+  vertical-align: text-top;
+}
+code a {
+  color: #fefefe;
+}
+
+hr {
+  background-color: $color-border-light;
+  border: 0;
+  height: 1px;
+  float: left;
+  width: 100%;
+}
+.content pre {
+  &::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: 7px;
+    height: 7px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: rgba(0,0,0,.5);
+    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
+  }
+}
+.hidden {
+  display: none !important;
+}

data/master_middleman/source/stylesheets/partials/_footer.scss

@@ -0,0 +1,64 @@
+/*
+ * FILE: _footer.scss
+======================================================================== */
+.site-footer-links {
+  font-size: $font-size-xs;
+  clear: both;
+  padding: 1em 30px 4em 30px;
+  a {
+    color: $color-text;
+  }
+}
+
+.copyright {
+  @media (min-width: $bp-wide) {
+    float: left;
+  }
+}
+
+.support {
+  @media (min-width: $bp-wide) {
+    float: right;
+  }
+}
+
+#feedback {
+  #feedback-comments {
+    margin-top: 1em;
+    width: 49%;
+  }
+  #feedback-helpful {
+    border: none;
+    margin-top: 1em;
+  }
+  .feedback-option {
+    float: left;
+    margin-left: 2em;
+    margin-top: 0.5em;
+    width: 22%;
+  }
+  form fieldset {
+    width: 11em;
+    float: left;
+  }
+  textarea {
+    width: 100%;
+  }
+  input[type='submit'] {
+    background-color: transparentize($color-accent-bright, 0.8);
+    float: left;
+    margin-left: 1em;
+    margin-top: 2.5em;
+    padding: 1em;
+    width: 8em;
+  }
+}
+
+#repo-link {
+  display: block;
+  border-bottom: solid 1px #eceae9;
+  border-top: solid 1px #eceae9;
+  text-align: center;
+  padding: 1em 0;
+  font-weight: bold;
+}

data/master_middleman/source/stylesheets/partials/_header.scss

@@ -0,0 +1,419 @@
+/*
+ * FILE: _header.scss
+======================================================================== */
+.header-layout {
+  @media (min-width: $bp-wide) {
+    left: 0;
+    padding-left: em(30);
+    padding-right: em(30);
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 11;
+  }
+}
+
+/*doc
+---
+title: Header Bar
+name: header_bar
+category: basics
+---
+Add <code>.header-layout</code> to header tag to get fixed positioning.
+
+```html_example
+<header class="header">
+  <h1 class="logo">
+    Pivotal Cloud Foundry Documentation
+  </h1>
+  <div class="header-links js-bar-links">
+    <div class="btn-menu" data-behavior="MenuMobile"></div>
+    <div class="header-item">
+      <a href="/">Docs Home</a>
+    </div>
+    <div class="header-item">
+      <a href="<%=vars.support_url%>" target="_blank">Support</a>
+    </div>
+    <div class="header-item searchbar js-searchbar">
+      <a class="search-icon" data-behavior="Search"></a>
+      <div class="search-input">
+      </div>
+    </div>
+  </div>
+</header>
+```
+*/
+.header {
+  background: $color-bg-header;
+  border-bottom: 3px solid $color-accent-bright;
+  color: #fefefe;
+  min-height: em(38);
+  padding: em(5) 1em em(5) 1em;
+  @include clearfix;
+}
+.header a {
+  color: #fff;
+  display: inline-block;
+}
+.header img {
+  height: 1;
+  margin-right: 0.5em;
+  width: 25px;
+  vertical-align: top;
+}
+
+// logo
+.logo {
+  float: left;
+  font-size: 1em;
+  font-weight: bold;
+  line-height: rem(25);
+  margin-bottom: 0;
+}
+.logo a {
+  border: 0;
+}
+
+// header links
+.header-links {
+  @media (min-width: $bp-wide) {
+    float: right;
+    text-align: right;
+    width: 50%;
+  }
+}
+.btn-menu {
+  float: right;
+  position: relative;
+  right: -1em;
+  &:before {
+    content: $fa-var-bars;
+    @extend .fa;
+    padding-right: 0.4em;
+    padding-top: 0.4em;
+  }
+  &:hover {
+    cursor: pointer;
+  }
+  padding: 0 1em;
+  @media (min-width: $bp-wide) {
+    display: none;
+  }
+}
+.menu-active .btn-menu {
+  &:before {
+    content: '\d7';
+  }
+  //@extend .fa-plus;
+  margin-bottom: 0.5em;
+  //&:before {
+  //  @include transform(rotate(45deg));
+  //  @include transform-origin(0.4em 0.7em);
+  //}
+}
+.header-item {
+  clear: both;
+  display: none;
+  font-weight: bold;
+  @include transition (opacity);
+  font-size: $font-size-xs;
+  line-height: 1;
+  @media (min-width: $bp-wide) {
+    clear: none;
+    display: inline-block;
+    padding-top: 0.55em;
+  }
+}
+.menu-active .header-item {
+  @media (max-width: $bp-wide) {
+    display: block;
+  }
+}
+.header-item:after {
+  @media (min-width: $bp-wide) {
+    content: "|";
+  }
+}
+.header-item:last-child:after {
+  @media (min-width: $bp-wide) {
+    content: "";
+  }
+}
+
+/*doc
+---
+title: Link Header
+name: link header
+category: basics
+---
+```html_example
+<div style="background: black">
+  <div class="header-item">
+    <a href="#">Link</a>
+  </div>
+  <div class="header-item">
+    <a href="#">Link</a>
+  </div>
+  <div class="header-item">
+    <a href="#">Link</a>
+  </div>
+</div>
+```
+*/
+.header-item a {
+  border-bottom-color: $gray2;
+  border-style: dotted;
+  border-width: 0 0 1px;
+  color: #fff;
+  display: block;
+  padding: 0.5em 0;
+  @media (min-width: $bp-wide) {
+    display: inline;
+    margin-left: 1em;
+    margin-right: 1em;
+    padding: 0
+  }
+}
+.header-item a:hover {
+  @media (min-width: $bp-wide) {
+    background-color: transparent;
+    border-bottom: 0;
+  }
+}
+
+// ~HOME
+// ===================================================
+
+.header-home {
+  border-top: 5px solid $color-accent-bright;
+  background: $color-bg-header;
+  color: #fff;
+  padding: 0 1.5em 4em 1.5em;
+  text-align: center;
+  margin-bottom: 3em;
+}
+
+.home-links {
+  padding-top: .5rem;
+  margin-bottom: 3em;
+  text-align: left;
+  @media (min-width: $bp-wide) {
+    text-align: right;
+    margin-bottom: 0;
+  }
+}
+/*doc
+---
+title: Title Flashy
+name: title_flashy
+category: basics
+---
+```html_example
+<h1 class="title-flashy">
+  <span class="title-deemph">Pivotal</span> Documentation
+</h1>
+```
+*/
+.title-flashy {
+  display: inline-block;
+  font-weight: 600;
+  font-size: $font-size-l;
+  text-align: left;
+  margin-left: 1rem;
+  img {
+    height: rem(61);
+    vertical-align: middle;
+    padding-right: .5rem;
+    float: left;
+    @media (min-width: $bp-wide) {
+      height: rem(45);
+      float: none;
+    }
+  }
+  @media (min-width: $bp-wide) {
+    font-size: $font-size-xxl;
+    margin-left: 0;
+    padding-left: 1.8em;
+    padding-top: 2rem;
+    text-align: center;
+  }
+}
+/*doc
+---
+title: Title Intro
+name: title_intro
+category: basics
+---
+```html_example
+<h2 class="title-intro">
+  Everything you need to know about Pivotal Software.
+</h2>
+```
+*/
+.title-intro {
+  font-size: $font-size-m;
+  font-weight: 300;
+  margin: 0 auto 0.5em;
+  max-width: 30em;
+  text-align: center;
+  @media (min-width: $bp-wide) {
+    font-size: $font-size-l;
+  }
+}
+
+.title-deemph {
+  font-weight: 300;
+}
+
+
+// ~HEADER SEARCH
+// ===================================================
+.searchbar {
+  @include transition(all 0.2s linear);
+  color: #eee;
+  margin-bottom: 1em;
+  margin-top: 1.3em;
+  padding-top: 0;
+  @media (min-width: $bp-wide) {
+    margin-bottom: 0;
+    margin-top: 0;
+    position: relative;
+  }
+}
+.searchbar:hover {
+  cursor: pointer;
+}
+.searchbar a {
+  margin: 0;
+  padding: 0.55em 1em;
+}
+.searchbar a,
+.searchbar a:hover {
+  border-bottom: 0;
+}
+.search-input-inner {
+  position: relative;
+}
+
+// search icon
+.search-icon {
+  &:before {
+    content: $fa-var-search;
+    color: #c7c7c7;
+    @extend .fa;
+  }
+}
+.header-item .search-icon {
+  display: none;
+  @media (min-width: $bp-wide) {
+    display: block;
+  }
+}
+
+// search input
+.search-input {
+  //@include border-bottom-radius(3px);
+  display: none;
+  @media (min-width: $bp-wide) {
+    padding: 1em;
+    position: absolute;
+    right: 0;
+    top: 100%;
+    width: 30em;
+  }
+}
+// wide view
+.active .search-input {
+  display: block;
+}
+// narrow view
+.menu-active .search-input {
+  @media (max-width: $bp-wide) {
+    display: block;
+  }
+}
+// search
+#search-dropdown-box {
+  display: none;
+}
+
+
+// ~VERSION
+// ===================================================
+
+/*doc
+---
+title: Version Menu
+name: version menu
+category: basics
+---
+```html_example
+<div class="header-dropdown">
+  <a class="subnav-link" href="#">
+    v1.2.0.0
+  </a>
+  <div class="header-dropdown-content">
+    <ul>
+      <li><a href="">v1.2.0.0</a></li>
+    </ul>
+  </div>
+</div>
+```
+*/
+.header-dropdown {
+  border-radius: 0.5em;
+  float: left;
+  font-size: 0.9em;
+  font-weight: bold;
+  line-height: rem(25);
+  margin-left: 0.5em;
+  margin-top: 0.04em;
+  position: relative;
+}
+.header-dropdown:hover .header-dropdown-content {
+  display: block;
+}
+.header-dropdown-link {
+  border: 0;
+  display: block;
+  line-height: 1.4;
+  padding: 0 0.5em;
+}
+.header-dropdown-link:after {
+  @extend .fa;
+  color: $color-bg-dark;
+  content: $fa-var-caret-down;
+  font-size: 0.8em;
+  padding-left: 0.2em;
+}
+.header-dropdown:hover {
+  //@include border-bottom-radius(0);
+}
+.header-dropdown-content {
+  background: $color-bg-light;
+  box-shadow: 2px 1px 5px rgba(153, 153, 153, 0.2);
+  border: 1px solid $color-border-light;
+  display: none;
+  left: rem(-14);
+  min-width: em(100);
+  padding: 0.5em;
+  position: absolute;
+  top: 100%;
+  z-index: 11;
+}
+.header-dropdown-content a {
+  border: 0;
+  color: $color-text;
+  display: block;
+  padding-left: 0.9em;
+}
+.header-dropdown-content ol,
+.header-dropdown-content ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.header-dropdown-content li {
+  display: block;
+  margin: 0;
+}