demo/demo.scss

@import "base";
@import "../src/sholo";

$container-width: 500px !default;
$logo-font-size: 55px !default;
$button-font-size: 13px !default;
$dark-button-bg: #2d2d2d !default;
$dark-button-text: #ffffff !default;
$light-button-bg: #f5f5f5 !default;
$light-button-text: #2d2d2d !default;

.page-wrap {
  padding-top: 1px;
  width: $container-width;
  margin: auto;
}

.btn {
  font-size: $button-font-size;
  padding: 7px 10px;
  border-radius: 3px;

  &.btn__dark {
    background: $dark-button-bg;
    color: $dark-button-text;
  }

  &.btn__light {
    background: $light-button-bg;
    color: $light-button-text;
  }
}

section {
  margin-bottom: 35px;
}

.section__header {
  margin: 80px 0 50px;
  text-align: center;
  display: block;
  padding: 10px 10px 20px;

  h1 {
    font-size: $logo-font-size;
  }
}