pogodevorg/docs.pogodev.org

@import "../app/assets/stylesheets/neat";

// Grid Settings
$column: 90px;
$gutter: 30px;
$grid-columns: 12;
$max-width: 1200px;

// Media
$medium-screen: 600px;
$large-screen: 900px;

$medium-screen-up: new-breakpoint(min-width $medium-screen 4);
$large-screen-up: new-breakpoint(min-width $large-screen 8);

// Base
$base-line-height: 1.625;
$base-spacing: $base-line-height * 1em;

// Visual Grid
$visual-grid: true;
$visual-grid-color: #e6f6ff;
$visual-grid-opacity: 0.4;

// Colors
$white: #fafafa;
$lightblue: #d5eefb;
$blue: #aadbf5;
$darkblue: #41a8df;
$darkerblue: #072f44;

// Base
// ============================================

body {
  color: $darkerblue;
  font-family: sans-serif;
  line-height: $base-line-height;
  margin: 0 0 (1.5rem * 2);
  text-align: center;
}

h3 {
  margin: 1em;
}

a,
a:visited {
  color: inherit;
}

pre {
  line-height: 1.6em;
}

code {
  display: block;
}

// Header
// ============================================

.container {
  margin: 0 auto;
  max-width: 500px;
  padding: 0 $gutter;
  position: relative;
}

.welcome-message {
  @include clearfix();
  background-color: $blue;
  margin-bottom: 1.5rem;
  padding: $base-spacing 0;
  text-align: center;
}

.welcome-message-title {
  font-weight: 200;
  line-height: 1;
}

// ============================================

.code {
  @include outer-container();
  background-color: $lightblue;
  padding: 0.5em;
  text-align: center;
}

.page-section {
  @include outer-container;
  background-color: $lightblue;
  line-height: $base-line-height * 1.5;
  margin-bottom: 3em;
  text-align: center;
}

.page-section-inner {
  background-color: $blue;
  font-size: 0.8em;
  height: $base-line-height * 4rem;
  line-height: $base-line-height;
  margin-bottom: 2em;
  padding: 1em;
  text-align: left;
}

// Zero
// ============================================

.zero-alpha,
.zero-beta {
  @include span-columns(6);
  height: $base-line-height * 4rem;
  line-height: $base-line-height;
  padding: 1em;
  text-align: left;
}

// First
// ============================================

.first-alpha {
  @include span-columns(1);
}

.first-beta {
  @include span-columns(11);
}

.first-gamma {
  @include span-columns(2);
}

.first-delta {
  @include span-columns(10);
}

.first-epsilon {
  @include span-columns(3);
}

.first-zeta {
  @include span-columns(9);
}

.first-eta {
  @include span-columns(4);
}

.first-theta {
  @include span-columns(8);
}

.first-iota {
  @include span-columns(5);
}

.first-kappa {
  @include span-columns(7);
}

.first-lambda {
  @include span-columns(6);
}

.first-mu {
  @include span-columns(6);
}

.first-beta,
.first-delta,
.first-zeta,
.first-theta,
.first-kappa,
.first-mu {
  @include omega;
}

// Second
// ============================================

.second-alpha {
  @include span-columns(4);
}

.second-beta {
  @include span-columns(8);
  line-height: $base-line-height * 2;
  padding: 0;
  text-align: center;
}

.second-beta-alpha,
.second-beta-beta {
  @include span-columns(4 of 8);
  background-color: $lightblue;
  height: 84%;
  padding: 1em;
}

// Third
// ===================================

.third-dummy {
  border-bottom: 0;
  height: 5.5em;
  text-align: center;
}

.third-alpha {
  @include fill-parent();
  @include row(table);
  margin-bottom: 0;
  padding: 0;
}

.third-alpha-alpha {
  @include span-columns(4);
  border-right: 1px solid rgba($white, 0.5);
}

.third-alpha-beta {
  @include reset-display;
  @include span-columns(8);
  height: 20em;
}

// Fourth
// ===================================

.fourth {

  .fourth-alpha {
    @include span-columns(6);
    @include shift(3);
    height: 20em;
    text-align: center;
  }
}

// Fifth
// ===================================

.fifth-box {
  @include omega(4n);
  @include span-columns(3);
  font-size: 0.78em;
  height: 8em;
  margin-top: 2em;
}

// Fifth
// ===================================

.sixth {
  @include media($medium-screen) {
    font-size: 0.9em;
    line-height: 1.5em;
  }

  pre {
    padding: 10px 0;
  }
}

.sixth-alpha,
.sixth-beta {
  line-height: 2em;
  min-height: 20em;
  padding: 1em;
  text-align: left;
}

.sixth-alpha {
  @include span-columns(4);

  @include media($medium-screen) {
    @include span-columns(3);
  }
}

.sixth-beta {
  @include span-columns(8);

  @include media($medium-screen) {
    @include span-columns(3);
  }
}