added more containers and removed the ugly shadow

smakosh · smakosh · commit e7f57d90c068 · 2018-06-20T03:40:25.000+01:00
diff --git a/sass/buttons.scss b/sass/buttons.scss
@@ -5,6 +5,8 @@
   height: 45px;
   color: #fff;
   cursor: pointer;
+  text-transform: uppercase;
+  font-weight: bold;
 }
 
 .btn-primary  {
diff --git a/sass/forms.scss b/sass/forms.scss
@@ -76,6 +76,10 @@ textarea  {
   content: '';
 }
 
+.caret-icon:before {
+  content: '▼';
+}
+
 label  {
   cursor: pointer;
 
diff --git a/sass/gradient.scss b/sass/gradient.scss
@@ -3,33 +3,12 @@
 
 .gradient-green {
   @include linear-gradient($green, $blue);
-  box-shadow: 0px 4px 7px 0px rgba(18, 194, 211, 0.48);
-  transition: all .2s;
-
-  &:hover {
-    box-shadow: 0px 7px 20px 0px rgba(18, 194, 211, 0.5);
-    transition: all .2s;
-  }
 }
 
 .gradient-orange {
   @include linear-gradient($yellow, $orange);
-  box-shadow: 0px 4px 7px 0px rgba(255, 50, 39, 0.48);
-  transition: all .2s;
-
-  &:hover {
-    box-shadow: 0px 7px 20px 0px rgba(255, 50, 39, 0.5);
-    transition: all .2s;
-  }
 }
 
 .gradient-purple {
   @include linear-gradient($dark-blue, $purple);
-  box-shadow: 0px 4px 7px 0px rgba(170, 49, 255, 0.48);
-  transition: all .2s;
-
-  &:hover {
-    box-shadow: 0px 7px 13px 0px rgba(170, 49, 255, 0.5);
-    transition: all .2s;
-  }
 }
diff --git a/sass/grid.scss b/sass/grid.scss
@@ -1,10 +1,29 @@
 @import "variables";
 
-.container-full {
+.full-container {
   margin: 0 auto;
   width: 100%;
 }
 
+.flex-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.small-container {
+  margin: 0 auto;
+  max-width: 960px;
+  width: 90%;
+
+  @media #{$medium-and-up} {
+      width: 90%;
+  }
+  @media #{$large-and-up} {
+      width: 100%;
+  }
+}
+
 .container {
   margin: 0 auto;
   max-width: 1280px;
@@ -16,11 +35,11 @@
   @media #{$large-and-up} {
       width: 70%;
   }
+}
 
-  .row {
-    margin-left: (-1 * $gutter-width / 2);
-    margin-right: (-1 * $gutter-width / 2);
-  }
+.row {
+  margin-left: (-1 * $gutter-width / 2);
+  margin-right: (-1 * $gutter-width / 2);
 }
 
 @mixin reset-offset {
diff --git a/sass/main.scss b/sass/main.scss
@@ -7,8 +7,10 @@
 @import "cards";
 @import "buttons";
 @import "media";
+@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i');
 
 body {
+  font-family: 'Roboto', sans-serif;
   padding: 0;
   margin: 0;
-}
+}
diff --git a/sass/mixins.scss b/sass/mixins.scss
@@ -36,7 +36,7 @@
   // Direction has been omitted and happens to be a color-stop
   @if is-direction($direction) == false {
     $color-stops: $direction, $color-stops;
-    $direction: 180deg;
+    $direction: 80deg;
   }
 
   background: nth(nth($color-stops, 1), 1);
diff --git a/source/app/index.html b/source/app/index.html
@@ -15,7 +15,7 @@
   <!-- endbuild -->
 
   <!-- build:css styles/main.css -->
-  <link rel="stylesheet" href="styles/main.css">
+  <link rel="stylesheet" href="/styles/main.css">
   <!-- endbuild -->
 
   <!-- build:js scripts/vendor/modernizr.js -->
@@ -187,7 +187,6 @@ <h3 class="title">Checkboxes & radio buttons</h3>
         <input type="checkbox" class="black-checkbox"/>
         <span></span>
       </label>
-
       <label>
         <input type="radio" name="yow" class="black-checkbox"/>
         <span></span>
@@ -203,7 +202,6 @@ <h3 class="title">Checkboxes & radio buttons</h3>
         <input type="checkbox" class="green-checkbox"/>
         <span></span>
       </label>
-
       <label>
         <input type="radio" name="yow" class="green-checkbox"/>
         <span></span>
@@ -219,7 +217,6 @@ <h3 class="title">Checkboxes & radio buttons</h3>
         <input type="checkbox" class="orange-checkbox"/>
         <span></span>
       </label>
-
       <label>
         <input type="radio" name="meow" class="orange-checkbox"/>
         <span></span>
@@ -235,7 +232,6 @@ <h3 class="title">Checkboxes & radio buttons</h3>
         <input type="checkbox" class="purple-checkbox"/>
         <span></span>
       </label>
-
       <label>
         <input type="radio" name="haw" class="purple-checkbox"/>
         <span></span>
diff --git a/source/app/styles/buttons.scss b/source/app/styles/buttons.scss
@@ -5,6 +5,8 @@
   height: 45px;
   color: #fff;
   cursor: pointer;
+  text-transform: uppercase;
+  font-weight: bold;
 }
 
 .btn-primary  {
diff --git a/source/app/styles/forms.scss b/source/app/styles/forms.scss
@@ -76,6 +76,10 @@ textarea  {
   content: '';
 }
 
+.caret-icon:before {
+  content: '▼';
+}
+
 label  {
   cursor: pointer;
 
diff --git a/source/app/styles/gradient.scss b/source/app/styles/gradient.scss
@@ -3,33 +3,12 @@
 
 .gradient-green {
   @include linear-gradient($green, $blue);
-  box-shadow: 0px 4px 7px 0px rgba(18, 194, 211, 0.48);
-  transition: all .2s;
-
-  &:hover {
-    box-shadow: 0px 7px 20px 0px rgba(18, 194, 211, 0.5);
-    transition: all .2s;
-  }
 }
 
 .gradient-orange {
   @include linear-gradient($yellow, $orange);
-  box-shadow: 0px 4px 7px 0px rgba(255, 50, 39, 0.48);
-  transition: all .2s;
-
-  &:hover {
-    box-shadow: 0px 7px 20px 0px rgba(255, 50, 39, 0.5);
-    transition: all .2s;
-  }
 }
 
 .gradient-purple {
   @include linear-gradient($dark-blue, $purple);
-  box-shadow: 0px 4px 7px 0px rgba(170, 49, 255, 0.48);
-  transition: all .2s;
-
-  &:hover {
-    box-shadow: 0px 7px 13px 0px rgba(170, 49, 255, 0.5);
-    transition: all .2s;
-  }
 }
diff --git a/source/app/styles/grid.scss b/source/app/styles/grid.scss
@@ -1,10 +1,29 @@
 @import "variables";
 
-.container-full {
+.full-container {
   margin: 0 auto;
   width: 100%;
 }
 
+.flex-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.small-container {
+  margin: 0 auto;
+  max-width: 960px;
+  width: 90%;
+
+  @media #{$medium-and-up} {
+      width: 90%;
+  }
+  @media #{$large-and-up} {
+      width: 100%;
+  }
+}
+
 .container {
   margin: 0 auto;
   max-width: 1280px;
@@ -16,11 +35,11 @@
   @media #{$large-and-up} {
       width: 70%;
   }
+}
 
-  .row {
-    margin-left: (-1 * $gutter-width / 2);
-    margin-right: (-1 * $gutter-width / 2);
-  }
+.row {
+  margin-left: (-1 * $gutter-width / 2);
+  margin-right: (-1 * $gutter-width / 2);
 }
 
 @mixin reset-offset {
diff --git a/source/app/styles/mixins.scss b/source/app/styles/mixins.scss
@@ -36,7 +36,7 @@
   // Direction has been omitted and happens to be a color-stop
   @if is-direction($direction) == false {
     $color-stops: $direction, $color-stops;
-    $direction: 180deg;
+    $direction: 80deg;
   }
 
   background: nth(nth($color-stops, 1), 1);
diff --git a/unnamed.css b/unnamed.css
diff --git a/unnamed.min.css b/unnamed.min.css

Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,8 @@`
`5`	`5`	`height: 45px;`
`6`	`6`	`color: #fff;`
`7`	`7`	`cursor: pointer;`
	`8`	`+ text-transform: uppercase;`
	`9`	`+ font-weight: bold;`
`8`	`10`	`}`
`9`	`11`
`10`	`12`	`.btn-primary {`
Original file line number	Diff line number	Diff line change
`@@ -76,6 +76,10 @@ textarea {`
`76`	`76`	`content: '';`
`77`	`77`	`}`
`78`	`78`
	`79`	`+.caret-icon:before {`
	`80`	`+ content: '▼';`
	`81`	`+}`
	`82`	`+`
`79`	`83`	`label {`
`80`	`84`	`cursor: pointer;`
`81`	`85`
Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,7 @@`
`36`	`36`	`// Direction has been omitted and happens to be a color-stop`
`37`	`37`	`@if is-direction($direction) == false {`
`38`	`38`	`$color-stops: $direction, $color-stops;`
`39`		`- $direction: 180deg;`
	`39`	`+ $direction: 80deg;`
`40`	`40`	`}`
`41`	`41`
`42`	`42`	`background: nth(nth($color-stops, 1), 1);`