new layouts

_sass/_bootstrap.scss

@@ -0,0 +1,58 @@
+$brand-primary: #3c8dbc;
+$brand-danger: #dd4b39;
+$brand-success: #00a65a;
+$brand-info: #555555;
+$brand-warning: #f39c12;
+$brand-primary-accent: darken($brand-primary, 15%);
+$brand-secondary: #2c3e50;
+$brand-dark-accent: #222d32;
+
+$font-size-base: 18px;
+$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$headings-font-family: "Open Sans", sans-serif;
+$text-color: $brand-secondary;
+$gray-lighter: lighten(#000, 93.5%);
+
+$navbar-height: 80px;
+$navbar-margin-bottom: 0;
+$navbar-border-radius: 0;
+
+//=== Inverted navbar
+// Reset inverted navbar basics
+$navbar-inverse-color: #fff;
+$navbar-inverse-bg: $brand-primary;
+$navbar-inverse-border: $brand-primary;
+
+// Inverted navbar links
+$navbar-inverse-link-color: #fff;
+$navbar-inverse-link-hover-color: lighten($brand-primary, 35%);
+$navbar-inverse-link-hover-bg: transparent;
+$navbar-inverse-link-active-color: #fff;
+$navbar-inverse-link-active-bg: $brand-primary;
+$navbar-inverse-link-disabled-color: #444;
+$navbar-inverse-link-disabled-bg: transparent;
+
+// Inverted navbar brand label
+$navbar-inverse-brand-color: $navbar-inverse-link-color;
+$navbar-inverse-brand-hover-color: #fff;
+$navbar-inverse-brand-hover-bg: transparent;
+
+// Inverted navbar toggle
+$navbar-inverse-toggle-hover-bg: $brand-primary-accent;
+$navbar-inverse-toggle-icon-bar-bg: #fff;
+$navbar-inverse-toggle-border-color: darken($brand-primary, 5%);
+
+//== Container sizes
+$grid-gutter-width: 30px !default;
+// Large screen / wide desktop
+$container-large-desktop: (940px + $grid-gutter-width) !default;
+//** For `$screen-lg-min` and up.
+$container-lg: $container-large-desktop !default;
+
+// Screen sizes
+
+$screen-xxs: 375px;
+$screen-xxs-min: 375px;
+$screen-xxs-max: ($screen-xxs-min - 1);
+
+@import "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

_sass/_help.scss

@@ -0,0 +1,134 @@
+@import "bootstrap";
+
+html {
+    position: relative;
+    min-height: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+    margin-bottom: 465px;
+}
+
+@media(min-width:$screen-sm) {
+    body {
+        margin-bottom: 300px;
+    }
+}
+
+.navbar-brand {
+    @media(min-width:$screen-sm) {
+        .fa {
+            font-size: 1.33333333em;
+            line-height: 0.75em;
+            vertical-align: -15%;
+        }
+
+        &:hover {
+            color: $navbar-inverse-link-hover-color !important;
+        }
+    }
+
+    @media(max-width:$screen-xs-max) {
+        font-size: 30px;
+        padding-top: 25px;
+        font-weight: 300;
+    }
+}
+
+.navbar-nav {
+    b {
+        font-weight: 600;
+    }
+}
+
+@media(max-width:$screen-xs-max) {
+    .navbar-collapse {
+        background-color: $brand-primary-accent;
+        border: 0;
+        @include box-shadow("inset 0 10px 10px -10px rgba(0,0,0,.35), inset 0 -10px 10px -10px rgba(0,0,0,.35);");
+    }
+}
+
+header {
+    padding: 10px 0 40px;
+    color: #fff;
+    position: relative;
+    text-align: center;
+    background: $brand-primary;
+}
+
+content {
+    margin: 30px 0;
+    display: block;
+}
+
+footer {
+    background-color: $brand-dark-accent;
+    height: 465px;
+    margin: 0;
+    color: #b8c7ce;
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+    font-size: 16px;
+    padding: 40px 0;
+
+    h4 {
+        color: #fff;
+    }
+
+    a {
+        color: #8aa4af;
+
+        &:hover {
+            color: #fff;
+        }
+    }
+
+    ul {
+        li {
+            padding-bottom: 10px;
+        }
+    }
+
+    .social {
+        i {
+            font-size: 40px;
+            margin-bottom: 10px;
+        }
+    }
+
+    @media(min-width:$screen-md) {
+        .social {
+            margin-top: 40px;
+
+            i {
+                font-size: 55px;
+            }
+        }
+    }
+
+    @media(min-width:$screen-sm) {
+        height: 300px;
+
+        .social {
+            margin-top: 0;
+        }
+    }
+}
+
+article {
+}
+
+.page-header {
+    margin-top: 0;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    margin-top: 0;
+}
+
+h1 {
+}