Coaxial/personal-website

// Place all the styles related to the website controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

// Importing Foundation
@import "foundation_and_overrides";

// Importing Foundation's variables
@import "foundation/components/type";

// Subtracting 1px to make up for rounding errors and have 37px height
$rotator-box-height: (($header-line-height * $h3-font-size) - rem-calc(1));

body {
  // background-image: asset-url("stardust.png");
  background-image: asset-url("broken_noise.png");
  background-repeat: repeat;
}

.greeting__text {
  text-align: center;
}

.text__desc {
  margin-top: rem-calc(50);
}

.rotator__rotator {
  // Emulating a H3's footprint
  margin: {
    top:    $header-top-margin;
    bottom: $header-bottom-margin;
  }
  height:   $rotator-box-height;
  overflow: hidden;
}

.rotator__statement {
  // Emulating a H3
  height:      $rotator-box-height;
  line-height: $header-line-height;
  font-size:   $h3-font-size;
  color:       $header-font-color;
  &:first-child {
    animation: rotator 19s ease infinite;
  }
}

@keyframes rotator {
  0%,    9%    { margin-top: ( 0 * $rotator-box-height); }
  12.5%, 21.5% { margin-top: (-1 * $rotator-box-height); }
  25%,   34%   { margin-top: (-2 * $rotator-box-height); }
  37.5%, 46.5% { margin-top: (-3 * $rotator-box-height); }
  50%,   59%   { margin-top: (-4 * $rotator-box-height); }
  62.5%, 71.5% { margin-top: (-5 * $rotator-box-height); }
  75%,   84%   { margin-top: (-6 * $rotator-box-height); }
  87.5%, 96.5% { margin-top: (-7 * $rotator-box-height); }
}

.section {
  margin-top: rem-calc(50);
}

.navlinks {
  margin: {
    top: rem-calc(100);
    bottom: rem-calc(50);
  }
  text-align: center;
}
.navlinks__row-wrapper:last-child {
  margin-top: rem-calc(20);
}

[class$="__title"] {
  h1,
  h2 {
    color: $retro-boy;
    text-align: center;
    margin-bottom: rem-calc(40);
    font-weight: bold;
  }
}

.about__bullets {
  text-align: center;
}

.bullets__wrapper {
  margin-bottom: rem-calc(45);
  &:last-child {
    margin-bottom: 0;
  }
  dd {
    color: $forge;
  }
}
.bullets__fact {
  padding: rem-calc(10);
  border-radius: $global-radius;
  background-color: rgba($oil, 0.05);
  dt h3 {
    font-weight: 500;
  }
}

#daftpunk-modal {
  background-color: black;
}

// Abide errors class
.error {
  border-radius: 0 0 $alert-radius $alert-radius;
}

.oss-credits {
  text-align: center;
  font-size: $paragraph-font-size * 0.85;
  color: $retro-boy;
  a {
    color: $retro-boy;
    text-decoration: underline;
  }
}

.github-code {
  @extend .oss-credits;
}