portfolio/src/app.scss

$success: #28C665;
$primary: #87D2C8;
$secondary: #FF0093;
$secondary-dark: darken($secondary, 10%);
$dark: #282A36;
$light: #6A7380;
$lightest: #B2BDCD;
$max-width: 60rem;
$spacing-md: 2rem;
$qry-s: 480px;
$qry-m: 700px;

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(-$spacing-md);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

html {
  margin: 0;
}

body {
  margin: 0;
  color: $dark;
  background: #F2F2F2 url(../../assets/site/bg.png);
  font-family: Rokkitt, serif;
  font-size: 20px;

  &.intro-undecided,
  &:not(.intro-play) #intro-blink {
    visibility: hidden;
  }
}

.container {
  padding: 0 $spacing-md;
  max-width: $max-width;
  margin: 0 auto;
}

h1, h2, h3, h4 {
  font-family: 'Poiret One', sans-serif;
}

h1 {
  font-size: 3em;
  margin: $spacing-md 0;
}

h1 + h2 {
  margin-top: -1em;
}

@media (max-width: $qry-m) {
  #face {
    display: none;
  }

  h1 {
    font-size: 2.5em;
  }
}

body > header {
  font-size: .7em;
  padding: 2rem 0;
  background: $dark;
  color: white;
  box-shadow: 0 .25rem 1rem .25rem rgba(0, 0, 0, .25);
  a {
    color: $primary;
    text-decoration: underline;
    &:focus,
    &:hover,
    &:focus span,
    &:hover span {
      outline: none;
      color: white;
    }
  }
  a .secondary {
    color: $secondary;
    text-decoration: underline;
  }
  a .normal {
    color: white;
    text-decoration: underline;
  }
  .dim {
    color: #ccc;
  }
}

body > main a {
  color: $secondary-dark;
  text-decoration: none;
  border-radius: 3px;

  &:focus,
  &:hover {
    outline: none;
    color: $secondary;
  }
  &:active {
    background: black;
    color: white;
  }
}

img,
video {
  max-width: $max-width * .75;
  width: 100%;
  border-radius: .25rem;
}

.embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;

  > iframe {
    position: absolute;
    width: 100%;
    height: 100%;
  }
}

.text-code {
  font-family: 'Source Code Pro', monospace;
}

.text-success {
  color: $success;
}

#content {
  animation: fadeInRight 500ms ease-out;

  p {
    margin-bottom: 1em;
  }

  @media (min-width: $qry-s) {
    p {
      width: 50%;
      clear: both;

      &:nth-of-type(odd) {
        float: left;
      }

      &:nth-of-type(odd) {
        float: right;
      }
    }
  }

  @media (min-width: $qry-s) and (max-width: $qry-m) {
    p {
      width: 75%;
    }
  }

  img,
  video {
    margin: 1em auto;
    display: block;
  }

  h6 {
    clear: both;
    text-align: center;
    color: $light;
  }
}

#home > * {
  padding-top: 0;
}

.posts {
  list-style-type: none;
  padding: 0;

  figure {
    margin: 0 0 $spacing-md 0;
    border-radius: 3px;
    overflow: hidden;
    background: white;
    float: left;
    cursor: pointer;
    transition: box-shadow 100ms, transform 100ms;
    box-shadow: 0 .25rem 1rem .25rem rgba(0, 0, 0, .075);

    &:hover,
    &:focus {
      transform: translateY(-.25rem) scale(1.05);
      box-shadow: 0 .25rem 1.5rem .25rem rgba(0, 0, 0, .075);
    }

    &:active {
      transform: translateY(.25rem) scale(.95);
      box-shadow: 0 .25rem .5rem .25rem rgba(0, 0, 0, .1);
    }

    img {
      object-fit: cover;
      border-radius: 0;
      opacity: .2;
      display: block;
    }

    .preview {
      position: relative;
      display: inline-block;

      h3 {
        color: white;
        position: absolute;
        bottom: 0;
        left: 0;
        margin: .5em;
      }

      &::before {
        content: ' ';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: $dark;
      }
    }

    figcaption {
      font-size: .9em;
      color: $light;
      display: inline-block;

      footer {
        margin-top: 1em;
        color: $lightest;
      }

      .secondary {
        float: right;
        color: $secondary-dark;
      }
    }
  }
}

[data-type] figcaption {
  padding: .5em;
}

[data-type=bundle] {
  @media (min-width: $qry-s) {
    width: 98.5%;
  }

  figure {
    width: 100%;

    .preview {
      float: left;
    }

    .preview img {
      height: 2.5em;
    }
  }

  figcaption {
    float: right;
    padding-top: 0;
  }
}

[data-type=article] .preview img {
  width: 100%;
  height: 9rem;
}

/**
 * Intro
 */
.intro-play {
  > header {
    animation: introSlideUp 1s 5s backwards;
    -webkit-animation: introSlideUp 1s 5s backwards;
  }

  #intro-blink {
    animation: introBlink 1s steps(5, start) 3 forwards;
    -webkit-animation: introBlink 1s steps(5, start) 3 forwards;
  }

  [id*='intro-cmd-'],
  [id*='intro-response-'] {
    visibility: hidden;
    animation: introAppear 250ms 3s forwards;
    -webkit-animation: introAppear 250ms 3s forwards;
  }

  #intro-cmd-2 {
    animation-delay: 3.1s;
  }
  #intro-cmd-2 {
    animation-delay: 3.2s;
  }
  #intro-cmd-3 {
    animation-delay: 3.3s;
  }
  #intro-cmd-4 {
    animation-delay: 3.4s;
  }
  #intro-cmd-5 {
    animation-delay: 3.5s;
  }
  #intro-cmd-6 {
    animation-delay: 3.6s;
  }
  #intro-cmd-7 {
    animation-delay: 3.7s;
  }
  #intro-cmd-8 {
    animation-delay: 3.8s;
  }
  #intro-cmd-9 {
    animation-delay: 3.9s;
  }
  #intro-cmd-10 {
    animation-delay: 4s;
  }
  #intro-response-1 {
    animation-delay: 4.2s;
  }
  #intro-response-2 {
    animation-delay: 4.5s;
  }
}

@keyframes introSlideUp {
  from {
    padding-bottom: 100vh;
  }
  to {
    padding-bottom: $spacing-md;
  }
}
@-webkit-keyframes introSlideUp {
  from {
    padding-bottom: 100vh;
  }
  to {
    padding-bottom: $spacing-md;
  }
}

@keyframes introBlink {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes introBlink {
  to {
    visibility: hidden;
  }
}

@keyframes introAppear {
  to {
    visibility: visible;
  }
}
@-webkit-keyframes introAppear {
  to {
    visibility: visible;
  }
}