Initial commit

style.scss

@@ -0,0 +1,165 @@
+$clr-text: #171c20;
+
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: $clr-text;
+  font-size: 16px;
+  line-height: 24px;
+
+  h1 {
+    font-size: 32px;
+    line-height: 32px;
+    font-weight: 900;
+  }
+
+  h2 {
+    font-size: 32px;
+    font-weight: 700;
+  }
+
+  a {
+    cursor: pointer;
+    color: inherit;
+    text-decoration-style: dotted;
+    text-underline-offset: 3px;
+  }
+}
+
+.title {
+  position: relative;
+  padding: 64px 0;
+  background-color: #F3B61F;
+  //box-shadow: 0px 10px 20px rgba(19, 19, 19, 0.897);
+  box-shadow: 0 5px 0 $clr-text;
+  z-index: 200;
+}
+
+.games {
+  position: relative;
+  z-index: 100;
+
+  &__section {
+    position: relative;
+
+    &.stroll {
+      background-color: rgb(58, 58, 58);
+      color: white;
+    }
+
+    &.mwg {
+      background-color: rgb(244, 244, 244);
+    }
+
+    &.zombieline {
+      background-color: rgb(241, 138, 255);
+      // background-color: rgb(241, 255, 115);
+    }
+
+    &.drift {
+      background-color: rgb(79, 219, 191);
+    }
+
+    // &.murk {
+    //   background-color: rgb(211, 211, 211);
+    // }
+
+    &::before, &::after {
+      position: absolute;
+      content: "";
+      z-index: -10;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      background-color: inherit;
+      transform-origin: top left;
+    }
+
+    &::before {
+      transform: skewY(-2deg);
+    }
+
+    &::after {
+      transform: skewY(2deg);
+    }
+
+    &__game {
+      position: relative;
+      max-width: 1024px;
+      margin: auto;
+      padding: 64px 0;
+      display: flex;
+      flex-direction: row-reverse;
+
+      &__thumb {
+        width: 480px;
+        max-width: 90%;
+        display: block;
+        border-radius: 24px;
+        border: 2px solid $clr-text;
+        box-shadow: 5px 5px 0 $clr-text;
+      }
+
+      &__info {
+        text-align: center;
+        width: -webkit-fill-available;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        padding: 0 64px;
+
+        .description {
+          opacity: .7;
+        }
+
+        .links {
+          > * {
+            margin: 0 8px;
+          }
+        }
+      }
+    }
+  }
+
+  &__section.inverted {
+    z-index: -20;
+    padding: 48px 0;
+
+    &::before, &::after {
+      display: none;
+    }
+
+    .games__section__game {
+      flex-direction: row;
+    }
+  }
+
+  &__section.last {
+    &::after {
+      display: none;
+    }
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .games__section__game {
+    flex-direction: column !important;
+    align-items: center;
+    padding: 32px 0;
+
+    &__thumb {
+      margin-bottom: 32px;
+    }
+
+    &__info {
+      padding: 0 8px;
+
+      > * {
+        margin-top: 16px;
+      }
+    }
+  }
+}