X-Git-Url: https://git.njae.me.uk/?a=blobdiff_plain;f=assets%2Fsrc%2Fsass%2Fhelpers%2F_mixins.scss;fp=assets%2Fsrc%2Fsass%2Fhelpers%2F_mixins.scss;h=673044859e2fe7f737155e745b611dd28a848fa9;hb=9ff2d2683d3ca68d237f3e713c516d43c997f47f;hp=0000000000000000000000000000000000000000;hpb=fba1d7cc64b98e494c87d119fc54b99cb7ad7ee1;p=ghost-theme-willow.git

diff --git a/assets/src/sass/helpers/_mixins.scss b/assets/src/sass/helpers/_mixins.scss
new file mode 100644
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;
+  }
+}