alb3rtobr-test 1.0.1

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;
+}