Getting rid of Compass, now styling & compiling is done via Grunt

[ghost-theme-willow.git] / assets / src / sass / helpers / _mixins.scss

diff --git a/assets/src/sass/helpers/_mixins.scss b/assets/src/sass/helpers/_mixins.scss
new file mode 100644 (file)
index 0000000..6730448
--- /dev/null
+++ b/assets/src/sass/helpers/_mixins.scss
@@ -0,0 +1,80 @@
+/*
+ | -----------------------------------------------------------------------------
+ | Breakpoints
+ | -----------------------------------------------------------------------------
+*/
+@mixin breakpoint($breakpoint) {
+  @if $breakpoint == "mobile" {
+    @media (max-width: 640px) {
+      @content;
+    }
+  }
+
+  @else if $breakpoint == "desktop" {
+    @media (min-width: 641px) {
+      @content;
+    }
+  }
+}
+
+/*
+ | -----------------------------------------------------------------------------
+ | Useful mixins
+ | -----------------------------------------------------------------------------
+*/
+@mixin border-radius($value: 3px) {
+  -webkit-border-radius: $value;
+  -moz-border-radius   : $value;
+  -ms-border-radius    : $value;
+  -o-border-radius     : $value;
+  border-radius        : $value;
+}
+
+@mixin transition($transition : all 150ms ease-in-out) {
+  -webkit-transition: $transition;
+  -moz-transition   : $transition;
+  -ms-transition    : $transition;
+  -o-transition     : $transition;
+  transition        : $transition;
+}
+
+@mixin translateX($value) {
+  -webkit-transform: translateX($value);
+  -moz-transform:    translateX($value);
+  -ms-transform:     translateX($value);
+  -o-transform:      translateX($value);
+  transform:         translateX($value);
+}
+
+/*
+ | -----------------------------------------------------------------------------
+ | Columns for posts
+ | -----------------------------------------------------------------------------
+*/
+@mixin post2Col() {
+  width: 48%;
+  float: left;
+  margin-right: 4%;
+
+  &:nth-child(2n) {
+    margin-right: 0;
+  }
+
+  &:nth-child(2n + 1) {
+    clear: left;
+  }
+}
+
+@mixin post3Col() {
+  width: 31.33333%;
+  float: left;
+  margin-right: 3%;
+
+  &:nth-child(3n) {
+    margin-right: 0;
+  }
+
+  &:nth-child(3n + 1) {
+    clear: left;
+  }
+}