betterplace-content 0.1.3 → 0.1.4

data/_sass/application.scss

@@ -0,0 +1,665 @@
+// created from application.sass
+// with these modules:
+//
+// @import initialize/colors
+// @import initialize/bootstrap_customization
+// @import bootstrap/variables
+// @import bootstrap/mixins
+// @import initialize/variables
+// @import initialize/media_queries
+// @import layouts/header
+// @import layouts/footer
+// @import initialize/type
+
+body > header {
+  position: relative;
+  overflow: hidden;
+  z-index: 30;
+}
+body > header li.search .icon {
+  font-size: 17px;
+  -webkit-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+body > header li.search .text {
+  display: inline-block;
+  margin-left: 5px;
+}
+@media only screen and (min-width: 769px) {
+  body > header {
+    height: 56px;
+    background-color: #3d4346;
+    background-image: -webkit-linear-gradient(top, #4c5255 0%, #3d4346 100%);
+    background-image: -o-linear-gradient(top, #4c5255 0%, #3d4346 100%);
+    background-image: linear-gradient(to bottom, #4c5255 0%, #3d4346 100%);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF4C5255', endColorstr='#FF3D4346', GradientType=0);
+    font-size: 12px;
+    min-width: 960px;
+  }
+  body > header nav a,
+  body > header .tagline .more-link {
+    -webkit-transition: all 100ms linear;
+    -o-transition: all 100ms linear;
+    transition: all 100ms linear;
+  }
+  body > header, body > header a, body > header a:link, body > header a:visited, body > header span.start {
+    color: #949494;
+    font-weight: normal;
+  }
+  body > header a.disabled {
+    text-decoration: line-through;
+  }
+  body > header a.disabled:hover, body > header a.disabled:focus {
+    color: #bad304;
+    text-decoration: line-through;
+  }
+  body > header:hover, body > header:hover a, body > header:hover a:link, body > header:hover a:visited, body > header:hover span.start, body > header:focus body > header.focus, body > header:focus body > header.focus a, body > header:focus body > header.focus a:link, body > header:focus body > header.focus a:visited, body > header:focus body > header.focus span.start {
+    color: white;
+  }
+  body > header:hover a:link:hover, body > header:hover a:visited:hover, body > header:hover a:focus, body > header:focus body > header.focus a:link:hover, body > header:focus body > header.focus a:visited:hover, body > header:focus body > header.focus a:focus {
+    text-decoration: underline;
+  }
+  body > header:hover a.disabled, body > header:hover a.disabled:hover, body > header:hover a.disabled:focus, body > header:focus body > header.focus a.disabled, body > header:focus body > header.focus a.disabled:hover, body > header:focus body > header.focus a.disabled:focus {
+    color: #bad304;
+    text-decoration: line-through;
+  }
+  body > header .active a {
+    text-decoration: underline;
+    color: white;
+  }
+  body > header > div {
+    height: 56px;
+  }
+  body > header > div .home {
+    position: relative;
+    z-index: 10;
+  }
+  body > header > div .home a {
+    padding-top: 8px;
+    padding-bottom: 6px;
+    display: inline-block;
+  }
+  body > header > div .home a span.start {
+    opacity: 0;
+    position: absolute;
+    top: 8px;
+    left: 10px;
+    font-size: 10px;
+  }
+  body > header > div .home a:hover span.start {
+    opacity: 1;
+  }
+  body > header > div nav {
+    float: right;
+  }
+  body > header > div nav ul {
+    display: inline;
+    float: right;
+    margin-left: 0;
+  }
+  body > header > div nav li {
+    border-left: 1px solid #949494;
+    display: inline;
+  }
+  body > header > div nav li:first-child {
+    border-left-width: 0;
+  }
+  body > header > div nav li a {
+    display: inline-block;
+    position: relative;
+    padding: 24px 1px 16px 4px;
+  }
+  body > header > div nav li.me {
+    margin-right: -2px;
+  }
+  body > header > div nav li.me a, body > header > div nav li.me img {
+    margin-top: -24px;
+  }
+  body > header > div nav li.me a {
+    background-color: #28638c;
+    background-image: -webkit-linear-gradient(top, #28638c 0%, #215274 100%);
+    background-image: -o-linear-gradient(top, #28638c 0%, #215274 100%);
+    background-image: linear-gradient(to bottom, #28638c 0%, #215274 100%);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF28638C', endColorstr='#FF215274', GradientType=0);
+    -webkit-box-shadow: 0px -3px 4px 1px rgba(0, 0, 0, 0.1);
+    box-shadow: 0px -3px 4px 1px rgba(0, 0, 0, 0.1);
+    margin-right: -3px;
+    padding-right: 5px;
+    padding-left: 0;
+    padding-bottom: 0;
+    color: #cccccc;
+    text-shadow: 1px 1px 0 #3f3f3f;
+  }
+  body > header > div nav li.me img {
+    height: 56px;
+    width: auto;
+    float: left;
+    padding-right: 5px;
+  }
+  body > header > div nav li.search {
+    border-left-width: 0;
+    margin-left: 5px;
+  }
+  body > header > div nav li.search a {
+    padding: 9px 10px 5px 10px;
+    background: #373737;
+    border-radius: 4px;
+    width: 36px;
+    height: 34px;
+    position: relative;
+    vertical-align: top;
+    margin-top: 12px;
+  }
+  body > header > div nav li.search a:hover {
+    background: #262626;
+  }
+  body > header > div nav li.search a .icon {
+    position: absolute;
+    top: 9px;
+    left: 11px;
+  }
+  body > header > div .tagline {
+    padding-top: 25px;
+    line-height: 14px;
+    white-space: nowrap;
+  }
+  body > header > div .tagline .claim {
+    padding-right: 5px;
+    white-space: nowrap;
+  }
+  body > header > div .tagline .more-link {
+    border-left: 1px solid #949494;
+    padding-left: 5px;
+  }
+  body > header > div .tagline a:hover .claim {
+    text-decoration: none;
+  }
+  body > header > div .tagline a:hover .more-link {
+    text-decoration: underline;
+  }
+  body > header:hover .tagline .claim {
+    color: #aeaeae;
+    text-decoration: none;
+  }
+  body > header:hover .tagline a:link:hover,
+  body > header:hover .tagline a:link:hover .claim {
+    text-decoration: none;
+  }
+  body > header:hover .tagline a:link:hover .more-link {
+    color: white;
+  }
+  body > header.transparent {
+    background: transparent;
+    filter: none;
+  }
+  body > header.transparent:hover .tagline,
+  body > header.transparent:hover nav {
+    opacity: 1;
+    filter: alpha(opacity=100);
+  }
+  body > header.transparent .tagline,
+  body > header.transparent nav {
+    opacity: 0;
+    filter: alpha(opacity=0);
+    -webkit-transition: opacity 0.06s ease-out;
+    -o-transition: opacity 0.06s ease-out;
+    transition: opacity 0.06s ease-out;
+  }
+  body > header.transparent .tagline span {
+    color: white !important;
+  }
+  body > header.transparent .tagline span.more-link {
+    border-left-color: white;
+  }
+  body > header.transparent > div nav li.search a {
+    background: rgba(55, 55, 55, 0.2);
+  }
+  body > header.transparent > div nav li.search a:hover {
+    background: rgba(12, 12, 12, 0.2);
+  }
+  body > header.transparent nav li {
+    border-left-color: white;
+  }
+}
+@media only screen and (max-width: 768px) {
+  body > header {
+    background: #3d4346;
+    min-height: 50px;
+  }
+  body > header .navbar-collapse {
+    border: 0;
+    max-height: 500px;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+  }
+  body > header .home {
+    margin-bottom: 0;
+  }
+  body > header .home svg {
+    margin-top: 6px;
+    margin-left: -4px;
+  }
+  body > header nav ul,
+  body > header .tagline {
+    list-style: none;
+    margin: 0 -10px;
+  }
+  body > header nav ul a:link,
+  body > header nav ul a:visited,
+  body > header .tagline a:link,
+  body > header .tagline a:visited {
+    color: white;
+    font-weight: normal;
+    display: block;
+    padding: 12px 10px;
+    border-top: 1px solid #636b70;
+    font-size: 16px;
+  }
+  body > header nav ul .active:not(.secondary),
+  body > header .tagline .active:not(.secondary) {
+    background: #bad304;
+  }
+  body > header nav ul .active:not(.secondary) a,
+  body > header .tagline .active:not(.secondary) a {
+    color: #3f3f3f;
+    text-decoration: none;
+    border-top-color: #bad304;
+  }
+  body > header nav ul .active:not(.secondary) + li a,
+  body > header .tagline .active:not(.secondary) + li a {
+    border-top-color: transparent;
+  }
+  body > header nav ul a:hover,
+  body > header nav ul a:focus,
+  body > header .tagline a:hover,
+  body > header .tagline a:focus {
+    text-decoration: none;
+  }
+  body > header nav ul li:not(:first-child):not(.secondary) a,
+  body > header .tagline li:not(:first-child):not(.secondary) a {
+    margin-left: 10px;
+    margin-right: 10px;
+    padding-left: 0;
+    padding-right: 0;
+  }
+  body > header nav ul li.secondary,
+  body > header nav ul li.secondary a,
+  body > header .tagline li.secondary,
+  body > header .tagline li.secondary a {
+    display: inline-block;
+  }
+  body > header nav ul li.secondary a,
+  body > header .tagline li.secondary a {
+    border: 0;
+    margin-top: 25px;
+    margin-bottom: 20px;
+    border-right: 1px solid white;
+    padding: 1px 10px;
+  }
+  body > header nav ul li.secondary:last-child a,
+  body > header .tagline li.secondary:last-child a {
+    border-right-width: 0;
+  }
+  body > header nav ul li.active.secondary a,
+  body > header nav ul li.active.secondary a span.text,
+  body > header nav ul li.secondary a:focus,
+  body > header nav ul li.secondary a:focus span.text,
+  body > header nav ul li.secondary a:hover,
+  body > header nav ul li.secondary a:hover span.text,
+  body > header .tagline li.active.secondary a,
+  body > header .tagline li.active.secondary a span.text,
+  body > header .tagline li.secondary a:focus,
+  body > header .tagline li.secondary a:focus span.text,
+  body > header .tagline li.secondary a:hover,
+  body > header .tagline li.secondary a:hover span.text {
+    background: transparent;
+    text-decoration: underline;
+    color: white;
+  }
+  body > header .tagline {
+    padding-left: 0;
+    padding-right: 0;
+  }
+  body > header .tagline .claim {
+    padding-right: 10px;
+    display: block;
+  }
+  body > header .tagline a:link {
+    border-top: 0;
+  }
+  body > header .tagline .more-link {
+    text-decoration: underline;
+  }
+  body > header .tagline.has-more-link .claim {
+    display: inline;
+  }
+  body > header .me img {
+    display: none;
+  }
+  body > header .navbar-toggle {
+    margin-bottom: 0;
+    margin-right: -5px;
+  }
+  body > header .navbar-toggle .icon-bar {
+    background: white;
+  }
+  body > header .navbar-toggle.collapsed .icon-bar {
+    background: #bad304;
+  }
+}
+
+html.touch body > header.transparent .tagline,
+html.touch body > header.transparent nav {
+  opacity: 1;
+  filter: alpha(opacity=100);
+}
+html.touch body > header.transparent a,
+html.touch body > header.transparent a:link {
+  color: white;
+}
+
+footer {
+  background-image: url(../images/shadow-line.png);
+  background-repeat: no-repeat;
+  background-position: center top;
+  color: #636b70;
+  background-color: $very-light-grey;
+}
+@media only screen and (min-width: 769px) {
+  footer {
+    clear: both;
+    padding-top: 38px;
+  }
+  footer nav {
+    overflow: hidden;
+  }
+  footer nav ul {
+    overflow: hidden;
+    margin-bottom: 7px;
+  }
+  footer nav ul li {
+    display: inline-block;
+    float: left;
+    padding-left: 0px;
+    font-weight: bold;
+  }
+  footer nav ul li strong {
+    display: inline;
+    white-space: nowrap;
+    color: #636b70;
+    font-size: 13px;
+  }
+  footer nav ul li a:link,
+  footer nav ul li a:visited {
+    color: #6a9000;
+    white-space: nowrap;
+    font-size: 13px;
+    border-right: 1px solid grey;
+    padding-right: 10px;
+    padding-top: 1px;
+    padding-left: 10px;
+  }
+  footer nav ul li.second a, footer nav ul li.last a {
+    border-right: 0;
+    padding-right: 0;
+  }
+}
+@media only screen and (max-width: 768px) {
+  footer {
+    background-color: #eeeeee;
+    background-size: 140% 5px;
+    padding-top: 20px;
+  }
+  footer ul {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    margin-bottom: 20px;
+  }
+  footer ul a:link,
+  footer ul a:visited,
+  footer ul strong {
+    display: block;
+    padding: 5px 10px 5px 10px;
+    font-weight: normal;
+    font-size: 18px;
+    color: #6a9000;
+  }
+  footer ul a:link:hover,
+  footer ul a:visited:hover,
+  footer ul strong:hover {
+    text-decoration: underline;
+  }
+  footer ul strong {
+    padding: 15px 10px 4px 10px;
+    font-weight: bold;
+    color: #3f3f3f;
+  }
+}
+footer.tiny-footer {
+  clear: both;
+  text-align: center;
+  background: white;
+  padding: 0 0 0.4em 0;
+  height: auto;
+  color: #3f3f3f;
+}
+footer .tax-receipt-hint {
+  background-color: #cccccc;
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+@media only screen and (min-width: 769px) {
+  footer .tax-receipt-hint {
+    border-radius: 4px;
+    margin-bottom: 20px;
+  }
+}
+@media only screen and (max-width: 768px) {
+  footer .tax-receipt-hint {
+    margin-bottom: 10px;
+  }
+}
+footer .tax-receipt-hint p {
+  margin: 0;
+  color: #636b70;
+  font-weight: bold;
+  font-size: 14px;
+}
+@media only screen and (max-width: 768px) {
+  footer .tax-receipt-hint p {
+    line-height: 22px;
+    font-size: 16px;
+  }
+}
+@media only screen and (max-width: 768px) {
+  footer .tax-receipt-hint a {
+    display: block;
+  }
+}
+
+body.no-footer footer {
+  display: none;
+}
+
+@media only screen and (min-width: 769px) {
+  body.generic-graphic-background footer {
+    background: #eeeeee;
+  }
+}
+
+.content-wrapper {
+  background: white;
+  padding-bottom: 40px;
+
+  &.with-background {
+    background: $very-light-grey
+  }
+
+  >.container {
+    position: relative;
+
+    &.centered {
+      @include desktop {
+        padding-top: 25px
+      }
+      @include phone {
+        padding-top: 10px
+      }
+    }
+  }
+}
+
+
+h1.with-border, h2.with-border, h3.with-border, h4.with-border, h5.with-border {
+  border-bottom: 1px solid #cccccc;
+  padding-bottom: 2px;
+  margin-bottom: 10px;
+  margin-top: 30px;
+}
+h1.with-border.first, h2.with-border.first, h3.with-border.first, h4.with-border.first, h5.with-border.first {
+  margin-top: 0;
+}
+
+h1 {
+  font-family: "Open Sans", Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: 32px;
+}
+
+h2 {
+  line-height: 22px;
+}
+
+.thin-h1-style {
+  margin-bottom: 20px;
+  margin-top: 0;
+}
+.thin-h1-style.is-inverted {
+  color: white;
+  text-shadow: 0 1px 0 black;
+}
+@media only screen and (min-width: 769px) {
+    .thin-h1-style {
+    font-size: 42px;
+    line-height: 52px;
+    font-weight: 300;
+  }
+}
+@media only screen and (max-width: 768px) {
+    .thin-h1-style {
+    font-size: 26px;
+    line-height: 30px;
+    font-weight: 400;
+  }
+}
+
+.large-h1-style {
+  font-weight: 300;
+}
+@media only screen and (min-width: 769px) {
+    .large-h1-style {
+    font-size: 38px;
+    line-height: 46px;
+  }
+}
+@media only screen and (max-width: 768px) {
+    .large-h1-style {
+    font-size: 30px;
+    line-height: 36px;
+  }
+}
+
+.small-h1-style {
+  font-weight: 400;
+}
+.small-h1-style.is-inverted {
+  color: white;
+  text-shadow: 0 1px 0 black;
+}
+@media only screen and (min-width: 769px) {
+    .small-h1-style {
+    font-size: 28px;
+    line-height: 32px;
+    margin: 20px 0;
+  }
+}
+@media only screen and (max-width: 768px) {
+    .small-h1-style {
+    font-size: 24px;
+    line-height: 28px;
+  }
+}
+
+.large-h2-style {
+  font-family: "Open Sans", Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 300;
+  font-size: 28px;
+  line-height: 32px;
+}
+.large-h2-style small {
+  font-size: 16px;
+  line-height: 20px;
+}
+.large-h2-style.is-inverted, .large-h2-style.is-inverted small {
+  color: white;
+  text-shadow: 0 1px 0 black;
+}
+
+.small-h2-style {
+  font-family: "Open Sans", Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 400;
+  font-size: 22px;
+  line-height: 24px;
+}
+
+@media only screen and (min-width: 769px) {
+    .headline-type-6 {
+    font-family: "Open Sans", Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 20px;
+  }
+}
+@media only screen and (max-width: 768px) {
+    .headline-type-6 {
+    font-family: "Open Sans", Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 20px;
+  }
+}
+
+.default-bootstrap-font-size-base {
+  font-size: 14px;
+}
+
+@media only screen and (max-width: 768px) {
+    body {
+    word-wrap: break-word;
+  }
+}
+
+abbr,
+abbr[title],
+abbr[data-original-title] {
+  border-bottom: 0;
+  cursor: default;
+  text-decoration: none;
+}
+
+code {
+  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+}

data/_sass/colors.sass

@@ -0,0 +1,23 @@
+$light-green:     #cccc20
+$medium-green:    #bad304
+$dark-green:      #6a9000
+$very-dark-green: #2c5100
+
+$almost-white:    #f8f8f8
+$very-light-grey: #eeeeee
+$light-grey:      #cccccc
+$medium-grey:     #949494
+$dark-grey:       #636b70
+$very-dark-grey:  #3f3f3f
+
+$error-red:       #ad3922
+$dangerous-red:   #cd0920
+
+$very-light-blue: #d9e5ec
+$medium-blue:     #00a0c8
+$dark-blue:       #28638c
+
+$pink:            #ff00ff
+
+$brand-color-facebook: #4e69a2
+$brand-color-twitter:  #1da1f2