Refactor Home page SCSS

* Split sections into different files
vladgogo · May 22, 2017 · d57b4cc · d57b4cc
1 parent d2c1449
commit d57b4cc
Show file tree

Hide file tree

Showing 16 changed files with 481 additions and 648 deletions.
diff --git a/app/assets/stylesheets/base/_button_mixins.scss b/app/assets/stylesheets/base/_button_mixins.scss
@@ -46,8 +46,8 @@
 
 @mixin large-button($type: $outline, $base-color: $purple, $hover-color: $white) {
   @include button($type, $base-color, $hover-color);
-  font-size: 1em;
-  padding: 0.8em 2.4em;
+  font-size: $font-size-base;
+  padding: $small-spacing ($base-spacing * 2);
 }
 
 @mixin small-button($type: $outline, $base-color: $purple, $hover-color: $white) {

diff --git a/app/assets/stylesheets/base/_helpers.scss b/app/assets/stylesheets/base/_helpers.scss
@@ -28,3 +28,7 @@
 .inner-wrapper {
   @include clearfix;
 }
+
+img {
+  max-width: 100%;
+}
diff --git a/app/assets/stylesheets/base/_variables.scss b/app/assets/stylesheets/base/_variables.scss
@@ -21,6 +21,8 @@ $inactive-color: #999;
 $active-color: $teal;
 $repo-list-toggle-size: 1.5rem;
 
+$base-text-shadow: 0 1px 2px rgba($black, 0.2);
+
 $base-background-color: rgb(248, 248, 248);
 $base-border-color: rgb(220, 220, 220);
 $base-font-color: rgb(100, 100, 100);
@@ -31,6 +33,9 @@ $base-secondary-color: lighten($purple, 10%);
 $table-heading-background-color: rgb(245, 245, 245);
 $code-background-color: rgba(#99abc0, 0.25);
 
+$home-gradient-top: rgb(196, 115, 209);
+$home-gradient-bottom: rgb(153, 115, 209);
+
 $icon-font: "FontAwesome";
 $icon-dropdown: '\f0d7';
 $icon-dropup: '\f0d8';
@@ -62,11 +67,19 @@ $small-spacing: $base-spacing * 0.75;
 $medium-spacing: $base-spacing * 1.5;
 $large-spacing: $base-spacing * 3;
 
+$letter-spacing-base: 1px;
+$letter-spacing-large: 2px;
+
 $font-weight-light: 300;
 $font-weight-normal: 400;
+$font-weight-bold: 700;
 
 $font-size-small: 0.875em;
 $font-size-base: 1em;
+$font-size-medium: 1.25em;
+$font-size-large: 2.7em;
+$font-size-xlarge: 3em;
+$font-size-xxlarge: 3.8em;
 
 // Transition
 $base-transition-timing: 0.2s;

diff --git a/app/assets/stylesheets/components/_pricing.scss b/app/assets/stylesheets/components/_pricing.scss
@@ -1,7 +1,7 @@
 .plan-category {
   @include span-columns(12 of 12);
   color: $base-accent-color;
-  margin-bottom: $medium-spacing;
+  margin: $medium-spacing 0;
   text-align: center;
 
   .fa {
@@ -20,6 +20,7 @@
   border-radius: $base-border-radius;
   margin-bottom: $medium-spacing;
   position: relative;
+  text-align: left;
 
   @include media($medium-large-screen-only) {
     padding-left: $medium-spacing;