formstone/demo/css/src/site.less

Library of modular front end components.

/* ==========================================================================
  Imports
============================================================================= */

  @import (inline) "npm://normalize-css/normalize.css";

  @import "includes/setup.less";
  @import "includes/demo.less";
  @import "includes/prism.less";


/* ==========================================================================
  Site
============================================================================= */

  *:focus {
    // outline: none;
  }

  // Site

  html,
  body {
    min-height: 500px;
  }

  body {
    background: @white;
    font-family: 'Helvetica', sans-serif;
    font-size: 16px;
  }

  // Header

  .header {
    width: 100%;
    height: 50px;

    background: @primary;
    margin: 0 0 20px;
  }

  .header_logo {

    &,
    .demo_content & {
      color: @white;
      float: left;
      font-size: 18px;
      line-height: 50px;
      text-decoration: none;
    }
  }

  h1 {
    margin-bottom: 10px;
  }

  .back_link {
    font-size: 12px;
    margin-top: 0;
  }

  .footer {
    margin: 30px 0 20px;
  }

  .copyright {
    color: @primary;
    font-size: 12px;
    margin: 0 0 20px;
    text-align: center;

    @media @min_md {
      float: left;
      text-align: left;
    }
  }

  .footer_links {
    text-align: center;

    @media @min_md {
      float: right;
      text-align: right;
    }

    a {
      display: inline-block;
      float: none;
    }
  }