pokesprite/resources/overview.scss

@charset "UTF-8";

// PokéSprite
// ----------
// The use of this source code is governed by the MIT license.
// See the COPYRIGHT file for more information.

// This file contains the SCSS for the icon overview page that's generated
// along with the sprite image and SCSS file. To properly display the
// overview HTML page that the script generates, compile this SCSS
// file to `output/overview.css`.

@import 'includes/functions.scss';


// Variables
// ---------

$border-radius-xs: 2px;
$border-radius-s: 2.5px;
$border-radius-m: 3px;
$border-radius-l: 4px;

$font-header: 'Helvetica', 'Arial', sans-serif;
$font-primary: 'Helvetica Neue', 'Arial', sans-serif;
$font-mono: 'Menlo', 'Consolas', 'Monaco', 'Courier New', monospace;

$font-base-size: 14px;
$font-small-size: 12px;
$font-base-lineheight: 20px / $font-base-size;
$font-mono-size: 13.3px;

$color-table-border: #dedcdc;
$color-text: #050202;
$color-link: #1F85EB;
$color-example: $color-text;
$color-example-class: #112e39;
$background-example-class: #cfecf7;

// Whether to compile for compatibility mode (no browser hacks).
// Keep this true, otherwise the layout breaks.
$pkspr-compatibility-mode: true;


// Overview Styling
// ----------------

// Implement the border-box format site-wide.
*,
*:before,
*:after {
  @include box-sizing(border-box);
}

html, body {
  margin: 0;
  font-size: $font-base-size;
  line-height: $font-base-lineheight;
  font-family: $font-primary;
  color: $color-text;
  font-weight: 400;
}

// Main containing div.
#top {
  padding: 10px;
  width: 1140px;
  margin: auto;
  
  a {
    color: $color-link;
  }
  
  // Top project description.
  .description {
    margin-bottom: 16px;
    
    .header {
      text-align: center;
      margin-bottom: 30px;
      
      h1 {
        font-family: $font-header;
        font-size: 30px;
        margin: 0;
        padding: 10px 0 0;
      }
      p {
        font-size: 16px;
        color: #686868;
      }
    }
    .docs-container {
      margin: auto;
      width: 770px;
      
      @media screen and (max-width: 770px) {
        width: 100%;
      }
    }
    p {
      margin: 0 0 6px;
      
      &.build-section {
        margin-top: 15px;
      }
      
      &.center {
        text-align: center;
      }
      &.img {
        margin-bottom: 30px;
        
        // The overview image on the homepage.
        > img.pkspr.banner {
          @media screen and (max-width: 640px) {
            -ms-interpolation-mode: bicubic;
            image-rendering: -moz-auto;
            image-rendering: -webkit-auto;
            image-rendering: auto;
            width: 100%;
            height: auto;
          }
        }
      }
    }
  }
  
  // The table containing all our icons.
  .table.pkspr-overview {
    @include table-rounded();
    @include table-border($color-table-border);
  
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
  
    p, pre {
      margin: 0;
    }
    pre {
      font-size: percentage($font-mono-size / $font-base-size);
    }
    pre, code {
      font-family: $font-mono;
      white-space: normal;
    }
    tr {
      th {
        white-space: nowrap;
      }
      td, th {
        border-left: 1px solid $color-table-border;
        border-bottom: 1px solid $color-table-border;
        padding: 0 8px;
        margin: 0;
        height: 30px;
        
        &.n {
          width: 1%;
          white-space: nowrap;
          
          .spacer {
            visibility: hidden;
          }
          
          a {
            color: black;
          }
        }
        
        &[rowspan]:not([rowspan="1"]) {
          padding-top: 5px;
          vertical-align: top;
        }
        
        &.idx {
          width: 1%;
          white-space: nowrap;
          
          p.idx {
          }
        }
        &.file {
          font-size: percentage($font-small-size / $font-base-size);
        }
        &.example {
          color: $color-example !important;
          
          .class {
            @include border-radius("s");
            color: $color-example-class;
            background-color: $background-example-class;
            padding: 1px 4px;
          }
        }
        &.icon {
          text-align: center;
          width: 40px;
          
          // We're displaying the .pkspr icons at full height (TODO: FIX)
          .pkspr {
            display: block;
            margin: auto;
            
            > i {
              top: 0;
            }
          }
        }
      }
    }
  }
  
  // Some modifications for smaller screens (including mobile).
  @media screen and (max-width: 1140px) {
    width: 100%;
  }
  // Hide the 'file' column on very small sizes, as a last resort.
  @media screen and (max-width: 770px) {
    th, td {
      &.file {
        display: none;
      }
      &.example {
        border-right: 1px solid $color-table-border;
      }
    }
    tr:first-child {
      th, td {
        &.example {
          @include border-radius("m", ("tr"));
        }
      }
    }
    tr:last-child {
      th, td {
        &.example {
          @include border-radius("m", ("br"));
        }
      }
    }
  }
}