sudara/alonetone

View on GitHub
app/assets/stylesheets/components/static_pages.scss

Summary

Maintainability
Test Coverage
.static_page {
  margin-top: -48px;
  .sub_nav {
    position: static;
    background-color: $static-page-heading-background;
    @media #{$mobile} {
      background-color: transparent;
    }
  }
  h1.static_page_heading {
    @include title36();
    color: $static-page-heading-text;
    text-align: center;
    padding: 50px $baseline 100px $baseline;
    margin: 0;
    background-color: $static-page-heading-background;
    @media #{$mobile} {
      display: none;
    }
  }
  .static_page_content {
    @media #{$mobile} {
      padding-left: 0;
      padding-right: 0;
      margin-top: 48px;
    }
    .static_page_content_inner {
      background-color: $static-page-content-background;
      position: relative;
      top: -$baseline * 1.5;
      @include shadow2();
      border-radius: 6px;
      padding-bottom: $baseline;
      overflow: auto;
      h2 {
        a.anchor {
          position: absolute;
          left: -30px;
          width: 24px;
          height: 24px;
          margin-top: 1px;
          @media #{$mobile} {
            left: 6px;
          }
          svg {
            path {
              fill: $static-page-anchor;
            }
          }
          &:target {
            outline: none;
            svg {
              path {
                fill: $static-page-anchor-visited;
              }
            }
          }
          &:hover {
            svg {
              path {
                fill: $static-page-anchor-hover;
              }
            }
          }
        }
        clear: both;
        @include title24();
        color: $static-page-h2-text;
        box-shadow: none;
        border-radius: 0;
        line-height: 1.3;
        padding: $baseline * 1.5 $baseline 0 $baseline * 2;
        @media #{$mobile} {
          padding-left: $baseline * (3/2);
          padding-right: $baseline * (3/2);
        }
        margin-top: $baseline;
        &:first-child {
          border-top: 0;
          margin-top: 0;
        }
      }
      p {
        @include paragraph18();
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: $static-page-paragraph-text;
        padding-left: $baseline * 2;
        padding-right: $baseline * 2;
        @media #{$mobile} {
          padding-left: $baseline * (3/2);
          padding-right: $baseline * (3/2);
        }
        a {
          color: $static-page-h2-text;
          text-decoration: underline;
        }
        strong {
          font-family: "Alright-v2-Normal", sans-serif;
          font-weight: bold;
        }
      }
      img:not(.hidden) {
        position: relative;
        top: -24px;
        max-height: 200px;
        display: block;
        margin-left: 20px;
        float: right;
        margin-bottom: 24px;
        @media #{$two-column-narrow} {
          max-width: 55%;
        }
        @media #{$one-column} {
          float: none;
          max-width: 100%;
          margin-bottom: 24px;
        }

      }
    }
  }
}