hugoDocs/pipeline/scss/pages/_homepage.scss

#homepage-nav {
  transition: box-shadow .2s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 50;
  min-height: 50px;
  max-height: 50px;
  background-color: $hugo-white;
  &.shadow {
    transition: box-shadow .2s ease-in-out;
    @include card(1);
  }
}

ul.animated {
  margin-top: 0px;
  margin-bottom: 0px;
  max-width: 400px;
  min-width: 240px;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  @include MQ(M) {
    min-width: 320px;
  }
  margin: {
    left: auto;
    right: auto;
  }
  li {
    display: flex;
    a {
      color: $hugo-gray;
      &:hover {
        color: $hugo-pink;
      }
    }
  }
}

#all-content-wrapper.home {
  margin-left: 0px;
  margin-top: 0px;
  @include MQ(M) {
    margin-left: 0px;
  }
  main#homepage.main {
    margin-left: 0px;
    width: 100vw;
    min-width: 100vw;
  }
}

.homepage-icon {
  display: block;
  display: flex;
  align-items: center;
  width: 90%;
  max-width: 540px;
  margin-top: 5em;
  margin: {
    right: auto;
    left: auto;
  }
  span {
    width: 100%;
    display: inline;
    text-align: center;
    font-size: 2.3em;
    @include MQ(M) {
      font-size: 3.5em;
    }
    color: $hugo-pink;
    font-weight: 900;
    font-family: 'helvetica neue',
    helvetica,
    arial;
    margin-left: -.25em;
  }
}

.hero-tagline {
  color: $hugo-gray;
  font-size: 1.2em;
  text-align: center;
  line-height: 1.3;
  font-weight: 100;
  margin-top: 1.5em;
  font-style: normal;
  max-width: 90%;
  @include MQ(M) {
    font-size: 1.5em;
  }
}

.home-row {
  min-height: auto;
  display: flex;
  flex-wrap: wrap;
  &.hero {
    margin-top: 50px;
    min-height: auto;
    flex-direction: column;
    align-items: center;
  }
  &:nth-child(2) {
    background-color: darken($hugo-gray-ultra-light, 3%);
  }
  &:nth-child(3) {
    background-color: $hugo-white;
  }
  &:nth-child(4) {
    background-color: $hugo-blue;
  }
}

.home-row-content {
  display: flex;
  flex-wrap: wrap;
  max-width: $L;
  margin-left: auto;
  margin-right: auto;
  margin-top: 4rem;
  margin-bottom: 4rem;
  width: 90%;
  h2 {
    text-align: left;
    width: 100%;
    text-align: center;
    margin-bottom: 1em;
  }
  @include MQ(XL) {
    justify-content: space-around;
  }
  &.first-fade {
    opacity: 0;
  }
}

.homepage-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 85%;
  .feature {
    margin-bottom: 2em;
    max-width: $L * .31;
    h3 {
      margin-bottom: 0px;
      padding-bottom: 0px;
      font-weight: 500;
      border-bottom: 1px solid white;
      font-size: 1.1em;
    }
    .feature-content {
      color: lighten($base-font-color, 30%);
      font-weight: 200;
      line-height: 1.3;
      font-size: .9em;
      p {
        color: lighten($base-font-color, 30%);
      }
    }
  }
}

.half {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: $L * .4;
}

.half.half-content {
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 30px;
  h2 {
    width: 100%;
    font-size: 22px;
    text-align: center;
    font-weight: 500;
    line-height: 1.3;
    margin-top: 24px;
    @include MQ(M) {
      margin-top: 0px;
    }
  }
  p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}

hr,
.hr {
  border: 0;
  height: 1px;
  opacity: 1;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
  width: 100%;
  margin: {
    bottom: 2.5em;
    top: 2.5em;
  }
}

.get-started {
  .button.xl {
    display: block;
    margin-top: 1.5em;
    font-size: 1.3em;
    padding-right: 1em;
    padding-left: 1em;
    width: auto;
    max-width: 12em;
    margin-left: auto;
    margin-right: auto;
    // background-color: rgb(140,197,231);
  }
  margin-bottom:5em;
}

.homepage-terminal {
  font-family: $code-font-family;
  background-color: $hugo-gray;
  padding: 1em 1.5em;
  text-align: left;
  // width: 90%;
  width: 100%;
  max-width: 360px;
  @include card(2);
  border-radius: 5px;
  margin-top: 1em;
  margin-right: auto;
  margin-left: auto;
  font-size: 14px;
  margin-bottom: 0px;
  color: transparent;
  span {
    color: transparent;
  }
  .blast {
    color: $hugo-white;
  }
}

.svgs {
  display: flex;
  justify-content: space-around;
  position: relative;
  // opacity: 0;
  svg,
  .img-wrapper {
    max-width: 45%;
    max-width: 140px;
    // min-width: 150px;
    &#markdown {
      margin-top: 30px;
    }
  }
  @include MQ(L) {
    margin-top: 3.5em;
  }
}

#hugopher-front {
  width: 300px;
  position: relative;
  .eye {
    animation: squeeze 2.4s infinite;
  }
}

.gopher-badge {
  opacity: 0;
  width: 50px;
  position: absolute;
  top: 24px;
}

.gopher-cape {
  opacity: 0;
}

svg {
  .cape {
    // opacity: 0;
  }
}

.eyes {
  animation: squeeze 2.4s infinite;
}

@keyframes squeeze {
  90% {
    transform: none;
    animation-timing-function: ease-in;
  }
  93% {
    transform: translateY(70px) scaleY(.1);
  }
  100% {
    animation-timing-function: ease-out;
  }
}

.homepage-tweets {
  // color: $hugo-white;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  h2 {
    color: $hugo-white;
  }
  @include MQ(M) {
    max-width: 640px;
  }
  @include MQ(L) {
    max-width: $L;
  }
}

.homepage-tweet {
  max-width: 300px;
  background-color: $hugo-white;
  margin-bottom: 20px;
  border-radius: 4px;
  position: relative;
  i.icon-twitter {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #1DA1F2;
  }
}

.homepage-tweet-attribution {
  font-style: normal;
  width: 100%;
  display: block;
  font-size: .8em;
  text-align: right;
}

.homepage-open-source {
  .icon-github-wrapper {
    width:100%;
    text-align:center;
  }
  i.icon-github {
    font-size: 62px;
  }
}