[update] Init front tasks

site/public/stylesheet/mixins/breakpoints.css

@@ -0,0 +1,20 @@
+$breakpoint-xxsmall: 480px;
+$breakpoint-xsmall:  600px;
+$breakpoint-small:   840px;
+$breakpoint-medium:  960px;
+$breakpoint-large:   1280px;
+$breakpoint-xlarge:  1440px;
+$breakpoint-xxlarge: 1600px;
+
+@define-mixin max-width $value
+{
+    @media only screen and (max-width:$value){
+        @mixin-content;
+    }
+}
+@define-mixin max-height $value
+{
+    @media only screen and (max-height:$value){
+        @mixin-content;
+    }
+}

site/public/stylesheet/mixins/font-smoothing.css

@@ -0,0 +1,13 @@
+@define-mixin font-smoothing $value: antialiased
+{
+    @if $value == antialiased
+    {
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+    @else
+    {
+        -webkit-font-smoothing: subpixel-antialiased;
+        -moz-osx-font-smoothing: auto;
+    }
+}

site/public/stylesheet/mixins/image-2x.css

@@ -0,0 +1,12 @@
+@define-mixin image-2x $image, $width, $height
+{
+    @media (min--moz-device-pixel-ratio: 1.3),
+           (-o-min-device-pixel-ratio: 2.6/2),
+           (-webkit-min-device-pixel-ratio: 1.3),
+           (min-device-pixel-ratio: 1.3),
+           (min-resolution: 1.3dppx)
+    {
+        background-image: url($image);
+        background-size: $width $height;
+    }
+}

site/public/stylesheet/mixins/touch.css

@@ -0,0 +1,13 @@
+@define-mixin no-touch
+{
+    html.features-no-touch & {
+        @mixin-content;
+    }
+}
+
+@define-mixin touch
+{
+    html.features-touch & {
+        @mixin-content;
+    }
+}