assets and styles

koding · Sep 25, 2017 · 5890234 · 5890234
1 parent e2857f2
commit 5890234
Show file tree

Hide file tree

Showing 16 changed files with 609 additions and 0 deletions.
diff --git a/_css/_mixins.scss b/_css/_mixins.scss
@@ -0,0 +1,34 @@
+@mixin verticalGradient($top, $bottom) {
+  background: $top;
+  background: -moz-linear-gradient(top, $top 0%, $bottom 100%);
+  background: -webkit-linear-gradient(top, $top 0%, $bottom 100%);
+  background: linear-gradient(to bottom, $top 0%, $bottom 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$top', endColorstr='$bottom', GradientType=0);
+}
+
+@mixin border-box {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+$tablet-width: 768px;
+$desktop-width: 1024px;
+
+@mixin mobile {
+  @media (max-width: #{$tablet-width}) {
+    @content;
+  }
+}
+
+@mixin tablet {
+  @media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width}) {
+    @content;
+  }
+}
+
+@mixin desktop {
+  @media (min-width: #{$desktop-width}) {
+    @content;
+  }
+}
diff --git a/_css/base.scss b/_css/base.scss
@@ -0,0 +1,152 @@
+@import "mixins";
+@import "colors";
+@import "code";
+@charset "utf-8";
+
+// Our variables
+$title-font-family: "fira-sans", "proxima-nova", Helvetica, Arial, sans-serif;
+$base-font-family: "proxima-nova", Helvetica, Arial, sans-serif;
+$base-font-size: 16px;
+$base-font-weight: 400;
+$small-font-size: $base-font-size * 0.875;
+$base-line-height: 1.5;
+
+$spacing-unit: 30px;
+
+$text-color: #111;
+$background-color: #fdfdfd;
+$brand-color: #2a7ae2;
+
+$grey-color: #828282;
+$grey-color-light: lighten($grey-color, 40%);
+$grey-color-dark: darken($grey-color, 25%);
+
+// Width of the content area
+$content-width: 1176px;
+
+$on-palm: 600px;
+$on-laptop: 800px;
+
+$header-image-width: 302px;
+$header-image-width-tablet: 226px;
+
+body {
+  font-family: $base-font-family;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.clearfix {
+  float: none;
+  clear: both;
+}
+
+.hidden {
+  display: none;
+  visibility: hidden;
+}
+
+.Header {
+  img {
+    width: $header-image-width;
+    @include tablet {
+      width: $header-image-width-tablet;
+    }
+    @include mobile {
+      display: none;
+    }
+  }
+  &.BlogHome-Header {
+    height: 480px;
+    @include verticalGradient($header-blog-top, $header-blog-bottom);
+  }
+  &.FeaturesHome-Header {
+    height: 480px;
+    @include verticalGradient($header-features-top, $header-features-bottom);
+  }
+  &.AboutusHome-Header {
+    height: 480px;
+    @include verticalGradient($header-aboutus-top, $header-aboutus-bottom);
+    img {
+      width: 345px;
+      @include tablet {
+        width: 245px;
+      }
+    }
+  }
+  &.PricingHome-Header {
+    height: 480px;
+    @include verticalGradient($header-pricing-top, $header-pricing-bottom);
+
+    img {
+      width: 416px;
+      @include tablet {
+        width: 256px;
+      }
+    }
+  }
+  .Header--outer-wrapper {
+    background: url('/assets/img/landing/common/hero_bg_pyramids.svg') no-repeat right bottom;
+    background-size: contain;
+    width: 100%;
+    height: 100%;
+  }
+  .Header--wrapper {
+    max-width: $content-width;
+    width: 100%;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    align-items: center;
+    justify-content: space-between;
+    @include border-box;
+    @media screen and (max-width: 1200px) {
+      max-width: 90%;
+      min-width: 734px;
+    }
+    @include mobile {
+      min-width: 325px;
+      max-width: 90%;
+      width: 100%;
+    }
+    .Header--content {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      margin-right: 200px;
+      @include tablet {
+        margin-right: 30px;
+      }
+      @include mobile {
+        margin-right: 0;
+      }
+      h1 {
+        margin-bottom: 40px;
+        font-family: $title-font-family;
+        font-size: 40px;
+        font-weight: 500;
+        line-height: 50px;
+        text-align: left;
+        color: white;
+        @include mobile {
+          padding: 0 20px;
+          font-size: 36px;
+          line-height: 46px;
+        }
+      }
+      p {
+        max-width: 600px;
+        font-family: $base-font-family;
+        font-size: 22px;
+        opacity: 0.75;
+        color: white;
+        line-height: 32px;
+        @include mobile {
+          padding: 0 20px;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+}
diff --git a/_css/base1.scss b/_css/base1.scss
@@ -0,0 +1,51 @@
+@charset "utf-8";
+
+// Our variables
+$title-font-family: "fira-sans", "proxima-nova", Helvetica, Arial, sans-serif;
+$base-font-family:  "proxima-nova", Helvetica, Arial, sans-serif;
+$base-font-size:    17px;
+$base-font-weight:  400;
+$small-font-size:   $base-font-size * 0.875;
+$base-line-height:  1.4;
+
+$spacing-unit:      30px;
+
+$text-color:        #617283;
+$title-color:       #1E2E42;
+$background-color:  #fdfdfd;
+$brand-color:       #2a7ae2;
+
+$grey-color:        #828282;
+$grey-color-light:  lighten($grey-color, 40%);
+$grey-color-dark:   darken($grey-color, 25%);
+
+// Width of the content area
+$content-width:     1200px;
+
+$on-palm:           600px;
+$on-laptop:         800px;
+
+
+body {
+  font-family: $base-font-family;
+  font-size: $base-font-size;
+  line-height: $base-line-height;
+  color: $text-color;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.clearfix {
+  float: none;
+  clear: both;
+}
+
+.hidden {
+  display: none;
+  visibility: hidden;
+}
+
+.title {
+  font-family: $title-font-family;
+  color: $title-color;
+}
diff --git a/_css/code.scss b/_css/code.scss
@@ -0,0 +1,64 @@
+.codeWrapper {
+  padding: 0 10px;
+  overflow: hidden;
+  .codeInnerWrapper {
+    position: relative;
+    display: flex;
+    max-width: 530px;
+    border: 1px solid #DCDCDC;
+    border-radius: 6px;
+    background-color: #FFFFFF;
+    color: #727272;
+    flex-direction: row;
+    margin: 0 auto 40px;
+    font-family: Courier;
+    font-size: 16px;
+    line-height: 24px;
+
+    &::before {
+      content: '';
+      position: absolute;
+      display: block;
+      width: 0;
+      bottom: -14px;
+      margin: 0 auto;
+      left: 0;
+      right: 0;
+      border-width: 14px 14px 0;
+      border-style: solid;
+      border-color: #DCDCDC transparent;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      display: block;
+      width: 0;
+      bottom: -13px;
+      margin: 0 auto;
+      left: 0;
+      right: 0;
+      border-width: 13px 13px 0;
+      border-style: solid;
+      border-color: #fff transparent;
+    }
+
+    .codeLineNumbers {
+      padding: 13px;
+      max-width: 32px;
+      @include border-box;
+      background-color: rgba(152, 152, 152, 0.1);
+      opacity: 0.51;
+    }
+
+    .codeSource {
+      flex-grow: 1;
+      padding: 13px 20px;
+      white-space: pre;
+      overflow: hidden;
+      @media (max-width: 767px) {
+        overflow-x: scroll;
+      }
+    }
+  }
+}
diff --git a/_css/colors.scss b/_css/colors.scss
@@ -0,0 +1,46 @@
+$white: #FFFFFF;
+$alabaster: #F7F7F7;
+$porcelain: #F5F6F7;
+$gallery: #EBEBEB;
+$gallery2: #EFEFEF;
+$mercury: #E1E1E1;
+$mercury2: #E5E5E5;
+$alto: #DCDCDC;
+$alto2: #D2D2D2;
+$alto3: #D8D8D8;
+$silver: #CACACA;
+$emperor: #515151;
+$scorpian: #5E5E5E;
+$shuttle-gray: #5A606F;
+$dove-gray: #727272;
+$gray: #8D8D8D;
+$dusty-gray: #989898;
+$dusty-gray2: #A59999;
+$dusty-gray3: #949494;
+$dusty-gray4: #9B9B9B;
+
+$shakespeare: #56A2D3;
+$onahau: #D0EFFF;
+$froly: #F2778A;
+$froly2: #F47689;
+$ocean-green: #48BA7D;
+$mantis: #73C461;
+$boston-blue: #308AB2;
+$boston-blue2: #358BB0;
+$morning-glory: #9ECDDF;
+$blumine: #216081;
+$half-baked: #8ABFD6;
+$cornflower-blue: #67A2EE;
+$anakiwa: #A8CEFF;
+$waterloo: #7F7E9E;
+
+$header-blog-top: #CB5F6F;
+$header-blog-bottom: #A66FB1;
+$header-features-top: #F8A731;
+$header-features-bottom: #EA8250;
+$header-pricing-top: #07AEC2;
+$header-pricing-bottom: #5567AD;
+$header-aboutus-top: #9B75B0;
+$header-aboutus-bottom: #6F7BAC;
+
+$footer-bg: #394457;
diff --git a/_css/home/index-1200.scss b/_css/home/index-1200.scss
@@ -0,0 +1,9 @@
+@media (max-width: 1200px) {
+
+  .Homepage--containerOffset {
+    padding-right: 73px;
+    padding-left: 73px;
+  }
+
+}
+
diff --git a/_css/home/index-1600.scss b/_css/home/index-1600.scss
@@ -0,0 +1,9 @@
+@media (max-width: 1600px) {
+
+  .Homepage--containerOffset {
+    // padding-right: 40px;
+    // padding-left: 40px;
+  }
+
+}
+
diff --git a/_css/home/index-768.scss b/_css/home/index-768.scss
@@ -0,0 +1,13 @@
+@media (max-width: 768px) {
+  body {
+    overflow-x: hidden;
+  }
+  .Homepage--containerOffset {
+    padding-right: 25px;
+    padding-left: 25px;
+  }
+  .Homepage--mobile-cta {
+    display: block;
+  }
+
+}