eSales Media Git repositories
Browse code

Add additional 1200px centered mixin, modify font-size function to use rem unit, add a colsize function

Benjamin Roth authored on27/10/2017 13:42:22
Showing2 changed files
assets/css/custom.scss
History View file @c6bb09f
... ... 
@@ -1,5 +1,40 @@
1 1 
 @import "scss/base";
2 2
3 
+
4 
+
5 
+.image_container {
6 
+  &.float_right {
7 
+    float: right;
8 
+    margin: 0 0 $gutter-default $gutter-default;
9 
+  }
10 
+
11 
+  &.float_left {
12 
+    float: left;
13 
+    margin: 0 $gutter-default $gutter-default 0;
14 
+  }
15 
+}
16 
+
17 
+/* --- HELPER --- */
18 
+.mw-centered {
19 
+  @include centered-960;
20 
+}
21 
+
22 
+.mw-centered-1200 {
23 
+  @include centered-1200;
24 
+}
25 
+
26 
+.alignRight {
27 
+  text-align: right;
28 
+}
29 
+
30 
+/* --- CE SPACING --- */
31 
+.spc_default {
32 
+  margin-bottom: 45px;
33 
+}
34 
+.spc_paragraph {
35 
+  margin-bottom: 1.5rem;
36 
+}
37 
+
3 38 
 /**
4 39 
  * Add custom styles here
5 40 
  */
assets/css/scss/base.scss
History View file @c6bb09f
... ... 
@@ -7,7 +7,12 @@
7 7 
  * Functions
8 8 
  */
9 9 
 @function font-size($size,$ascendant-font-size: $font-size-default) {
10 
-  @return $size / $ascendant-font-size * 100%
10 
+  //@return $size / $ascendant-font-size * 100%
11 
+  @return $size / $ascendant-font-size * 1rem
12 
+}
13 
+
14 
+@function col-size($gutter-width, $cols, $span: 1) {
15 
+  @return (((100% - $gutter-width * ($cols - 1)) / $cols) * $span + $gutter-width * ($span - 1))
11 16 
 }
12 17
13 18 
 /**
... ... 
@@ -39,6 +44,28 @@
39 44 
   max-width: 960px;
40 45 
   margin: 0 auto;
41 46 
   position: relative;
47 
+
48 
+  @media screen and (max-width: 990px) {
49 
+    -webkit-box-sizing: border-box;
50 
+    -moz-box-sizing: border-box;
51 
+    box-sizing: border-box;
52 
+    padding-left: 15px;
53 
+    padding-right: 15px;
54 
+  }
55 
+}
56 
+
57 
+@mixin centered-1200 {
58 
+  max-width: 1200px;
59 
+  margin: 0 auto;
60 
+  position: relative;
61 
+
62 
+  @media screen and (max-width: 1230px) {
63 
+    -webkit-box-sizing: border-box;
64 
+    -moz-box-sizing: border-box;
65 
+    box-sizing: border-box;
66 
+    padding-left: 15px;
67 
+    padding-right: 15px;
68 
+  }
42 69 
 }
43 70
44 71 
 @mixin cf {