Update styles.scss

Author: noeljackson

pages/styles.scss

@@ -1,355 +1 @@
-$textblue: #9EA9D4;
-$colortext: rgba(28,28,41, .80);
-$coloraqua: #2EE7C0;
 
-body {
-  background: white;
-  color: $colortext;
-  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
-  width: 100vw;
-  overflow-x: hidden;
-}
-
-.bold {
-  font-family: "HelveticaNeue-Medium", "Helvetica Neue Medium", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
-}
-
-p {
-  margin: 0;
-  padding: 0;
-}
-
-header {
-  overflow: hidden;
-  position: relative;
-  height: 92vh;
-  width: 100vw;
-  @media( max-device-width: 1024px) {
-    height: 70vh;
-  }
-  @media (max-width: 480px) {
-    height: 95vh;
-  }
-
-  #bg {
-    overflow: hidden;
-    position: absolute;
-    z-index: 1200;
-    height: 101vh;
-    width: 101%;
-    left: -.5%;
-    top: -.5%;
-    @media (max-width: 1200px) {
-      width: 115%;
-    }
-    @media (max-width: 1000px) {
-      width: 125%;
-    }
-  }
-  //#graph {
-  //  points: "0 267.648438 203.578125 412.074219 368.214844 439.332031 626.625 382.300781 768.152344 254.777344 1294.5 0 1023.77734 0 1023.77734 534.628906 0 534.628906"
-  //  }
-
-  #logo {
-    top: 20%;
-    left: 20%;
-    position: absolute;
-    z-index: 2000;
-    width: 40vw;
-    @media( max-width: 1400px) {
-      width: 48vw;
-    }
-    @media (max-width: 780px) {
-      left: 10vw;
-      top: 20%;
-      width: 80vw;
-    }
-
-    #logo-img {
-      width: 35vw;
-      @media (max-width: 780px) {
-        width: 100%;
-      }
-      margin-bottom: 1em;
-    }
-  }
-
-  #description {
-    color: $textblue;
-    color: rgba(189,189,189,1);
-    font-size: 20px;
-    padding-left: 0.5em;
-    @media( max-width: 1024px) {
-      font-size: 16px;
-      padding-left: 0;
-    }
-    @media (max-width: 780px) {
-      font-size: 18px;
-      text-align: center;
-      margin-left: 0;
-    }
-    @media (max-width: 600px) {
-      font-size: 14px;
-      text-align: center;
-    }
-    letter-spacing: 0.3em;
-    line-height: 1.8em;
-  }
-}
-
-#clients,
-.content-container .sleeve {
-  width: 70vw;
-  @media( max-width: 780px) {
-    width: 80vw;
-  }
-  @media( max-width: 480px) {
-    width: 90vw;
-  }
-  @media( min-width: 1500px) {
-    max-width: 900px;
-  }
-  margin: 0 auto;
-}
-
-#clients {
-  padding: 1.5em 0;
-  @media (max-width: 480px) {
-    height: 3vh;
-    padding: 0.5em 0;
-  }
-}
-
-.content-container {
-  display: flex;
-  min-height: 40vh;
-  background: rgba(216,216,216, 0.4);
-  border: 1px solid rgba(28,28,41, 0.4);
-  border-width: 1px 0 0 0;
-  overflow-y: hidden;
-
-  &:last-child {
-    border-width-bottom: 1px;
-  }
-  font-size: 24px;
-  @media (max-width: 480px) {
-    font-size: 18px;
-  }
-  line-height: 1.5em;
-
-  &:nth-child(even) {
-    background: white;
-  }
-
-  p {
-    margin: 0;
-    padding: 0 0 1em;
-  }
-
-  strong {
-    @extend .bold;
-  }
-
-  a {
-    text-decoration: none;
-    @extend .bold;
-    color: $colortext;
-
-    &:hover {
-      color: $coloraqua;
-    }
-  }
-
-  &.dark {
-    background: rgba(78,78,78,.70);
-    color: #eaeaea;
-  }
-
-  &#intro {
-    font-size: 30px;
-    @media (max-width: 480px) {
-      font-size: 24px;
-    }
-  }
-
-  &#speed {
-    background-image: linear-gradient(to bottom, rgba(255,255,255,.5) 10%, rgba(255,255,255,1) 40%), url("/static/jsflame.png");
-    background-position: 0;
-    padding-top: 5em;
-  }
-
-  &#intersection {
-
-  }
-
-  #diagram {
-    padding-top: 2vh;
-    $diagramwidth: 400px;
-    $diagramheight: 400px;
-    $animationtype: cubic-bezier(0.5, 0.2, 0.3, 1.0);
-
-
-    margin: 0 auto;
-    width: $diagramwidth;
-    height: $diagramwidth;
-
-    position: relative;
-    @keyframes c1 {
-      from {
-        -webkit-transform: translate(-35%, 35%);
-        transform: translate(-35%, 35%);
-      }
-
-      to {
-        -webkit-transform: translate(0, 0);
-        transform: translate(0, 0);
-      }
-    }
-    @keyframes c2 {
-      from {
-        -webkit-transform: translate(0, -35%);
-        transform: translate(0, -35%);
-      }
-
-      to {
-        -webkit-transform: translate(0, 0);
-        transform: translate(0, 0);
-      }
-    }
-    @keyframes c3 {
-      from {
-        -webkit-transform: translate(35%, 35%);
-        transform: translate(35%, 35%);
-      }
-
-      to {
-        -webkit-transform: translate(0, 0);
-        transform: translate(0, 0);
-      }
-    }
-    @keyframes label {
-      from {
-        opacity: 100%;
-      }
-
-      to {
-        opacity: 0;
-      }
-    }
-    @keyframes result {
-      from {
-        opacity: 0;
-      }
-
-      to {
-        opacity: 100%;
-      }
-    }
-    .result {
-      width: $diagramheight;
-      height: $diagramheight;
-      text-align: center;
-      line-height: $diagramheight;
-      position: absolute;
-      animation: result 2.5s $animationtype infinite alternate;
-      font-size: 30px;
-    }
-    [class^='circle'] {
-      background-color: #0ff;
-      border-radius: 50%;
-      height: $diagramheight;
-      width: $diagramheight;
-      mix-blend-mode: multiply;
-      position: absolute;
-      text-align: center;
-      line-height: $diagramheight;
-    }
-
-
-
-    .label {
-      height: 100%;
-      width: 100%;
-      vertical-align: center;
-      text-align: center;
-      animation: label 2.5s $animationtype infinite alternate;
-      font-weight: bold;
-    }
-
-    .circle1 {
-      background-color: rgba(0,255,255,0.5);
-      animation: c1 2.5s $animationtype infinite alternate;
-
-      .label {
-        transform: rotate(-60deg);
-        transform-origin: center center;
-      }
-    }
-
-    .circle2 {
-      background-color: rgba(255,255,0,0.5);
-      animation: c2 2.5s $animationtype infinite alternate;
-
-      .label {}
-    }
-
-    .circle3 {
-      background-color: rgba(255,0,255,0.5);
-      animation: c3 2.5s $animationtype infinite alternate;
-
-      .label {
-        transform: rotate(60deg);
-        transform-origin: center center;
-      }
-    }
-  }
-
-  figure {
-    text-align: center;
-
-    img {
-      width: 100%;
-    }
-  }
-
-  figcaption {
-    font-size: 18px;
-    text-align: center;
-  }
-
-  #chart-analysis {
-    float: right;
-    padding-left: 50px;
-    margin-right: -150px;
-    margin-top: 4em;
-    shape-outside: circle();
-    @media (max-width: 900px) {
-      clear: both;
-      float: none;
-      padding: 0;
-      width: 100%;
-      margin: 0 0 2em;
-    }
-  }
-
-  #tywop {
-    float: right;
-    shape-outside: circle();
-    @media (max-width: 900px) {
-      clear: both;
-      float: none;
-      padding: 0;
-      width: 100%;
-      margin: 0 0 2em;
-    }
-  }
-}
-
-.content-container .sleeve {
-  padding: 10vh 0;
-  clear: both;
-  margin: 0 auto;
-  @media (max-width: 480px) {
-    padding: 5vh 0;
-  }
-}