Amend styles

3 files changed, 248 insertions, 1 deletions

diff --git a/assets/sass/_mixins.scss b/assets/sass/_mixins.scss
index 9dc3ada..a373209 100644
--- a/assets/sass/_mixins.scss
+++ b/assets/sass/_mixins.scss
@@ -5,6 +5,14 @@
 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Responsive
 // Usage: @include mq(tabletp) {}
 
+// iPhone min device width cheat sheet:
+//
+// iPhone 4 and 4S: 320px
+// iPhone 5, 5S, 5C and 5SE: 320px
+// iPhone 6, 6S, 7 and 8: 375px
+// iPhone 6+, 7+ and 8+: 414px
+// iPhone X: 375px
+$break-phonem: 320px;
 $break-phonel: 480px;
 $break-tabletp: 768px;
 $break-tabletl: 1024px;
@@ -12,7 +20,10 @@ $break-laptop: 1220px;
 $break-desktop: 1600px;
 
 @mixin mq($media) {
-  @if $media == phonel {
+  @if $media == phonem {
+    @media only screen and (min-width: $break-phonem) { @content; }
+  }
+  @else if $media == phonel {
     @media only screen and (min-width: $break-phonel) { @content; }
   }
   @else if $media == tabletp {
@@ -28,3 +39,106 @@ $break-desktop: 1600px;
     @media only screen and (min-width: $break-desktop) { @content; }
   }
 }
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  Transitions
+// Usage: @include transition(color .3s ease);
+
+@mixin transition($args...) {
+  -webkit-transition: $args;
+     -moz-transition: $args;
+      -ms-transition: $args;
+       -o-transition: $args;
+          transition: $args;
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Appearance
+// Used to display an element using platform-native styling based
+// on the operating system's theme.
+//
+// Usage: @include appearance(button);
+
+@mixin appearance($value) {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  Placeholder
+// Style the placeholder text of a form element.
+//
+// Usage: @include input-placeholder(#ABB7B7, 15%);
+
+@mixin input-placeholder($color, $alpha) {
+  ::-webkit-input-placeholder {
+    color: lighten($color, $alpha);
+  }
+
+  ::-moz-placeholder {
+    color: lighten($color, $alpha);
+  }
+
+  :-ms-input-placeholder {
+    color: lighten($color, $alpha);
+  }
+
+  :-moz-placeholder {
+    color: lighten($color, $alpha);
+  }
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Box Sizing
+// Sets how the total width and height of an element is calculated.
+//
+// Usage: @include box-sizing (border-box);
+
+@mixin box-sizing ($value) {
+  -webkit-box-sizing: $value;
+     -moz-box-sizing: $value;
+          box-sizing: $value;
+}
+
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Box Shadow
+//
+// Usage: @include box-shadow (0 0 2px 1px #e21a23!important);
+
+@mixin box-shadow ($args...) {
+  -webkit-box-shadow: $args;
+     -moz-box-shadow: $args;
+          box-shadow: $args;
+}
+
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Border Radius
+//
+// Usage: @include border-radius (10% 30% 50% 70%);
+
+@mixin border-radius ($args...) {
+  -webkit-border-radius: $args;
+     -moz-border-radius: $args;
+          border-radius: $args;
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Flex Wrap
+// Sets whether flex items are forced onto one line or can wrap onto
+// multiple lines.
+//
+// Usage: @include flex-wrap (wrap);
+
+@mixin flex-wrap ($value) {
+  -webkit-flex-wrap: $value;
+      -ms-flex-wrap: $value;
+          flex-wrap: $value;
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - Box Decoration Break
+// Specifies how an element's fragments should be rendered when broken across
+// multiple lines, columns, or pages.
+//
+// Usage: @include box-decoration-break (clone);
+
+@mixin box-decoration-break ($value) {
+  -webkit-box-decoration-break: $value;
+      -ms-box-decoration-break: $value;
+          box-decoration-break: $value;
+}
diff --git a/assets/sass/_reset.scss b/assets/sass/_reset.scss
new file mode 100644
index 0000000..d7dd1a2
--- /dev/null
+++ b/assets/sass/_reset.scss
@@ -0,0 +1,128 @@
+// - - - - - - - - - - - - - - - - - -
+// Reset
+// - - - - - - - - - - - - - - - - - -
+
+@import "_mixins";
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, a,
+abbr, address, cite, code, del, dfn, em, img,
+ins, kbd, q, s, samp, small, strong, sub, sup, tt,
+var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form,
+label, legend, table, caption, tbody, tfoot,
+thead, tr, th, td, article, aside, canvas, details,
+figcaption, figure, footer, header, hgroup, menu,
+nav, section, summary, time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+}
+
+article, aside, details, figcaption, figure, footer,
+header, hgroup, menu, nav, section {
+  display: block;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-size: 100%;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+strong, b, mark {
+  font-weight: 700;
+  font-style: inherit;
+}
+
+em, i, cite, q, address, dfn, var {
+  font-style: italic;
+  font-weight: inherit;
+}
+
+abbr[title],dfn[title] {
+  cursor: help;
+  border-bottom: 1px dotted;
+}
+
+ins {
+  border-bottom: 1px solid;
+}
+
+a, u, ins {
+  text-decoration: none;
+}
+
+del, s {
+  text-decoration: line-through;
+}
+
+pre, code, samp, kbd {
+  font-family: monospace;
+}
+
+small {
+  font-size: .75em;
+}
+
+img {
+  border: 0;
+  font-style: italic;
+}
+
+input, select, option, optgroup, textarea {
+  font: inherit;
+}
+
+* {
+  @include box-sizing (border-box);
+  margin: 0;
+  padding: 0;
+}
+
+article, aside, details, figcaption, figure, footer,
+header, hgroup, nav, section {
+  display: block;
+}
+
+audio[controls], canvas, video {
+  display: inline-block;
+  *display: inline;
+  *zoom: 1;
+}
+
+html {
+  font-size: 100%;
+  -webkit-overflow-scrolling: touch;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+  text-rendering: optimizeLegibility;
+}
+
+img {
+  border: 0;
+  -ms-interpolation-mode: bicubic;
+  display: block;
+}
+
+img, object, embed {
+  max-width: 100%;
+  height: auto;
+}
+
+input {
+  @include appearance(none);
+}
+
+header, footer, section {
+	position: relative;
+	float: left;
+	clear: both;
+	width: 100%;
+}
diff --git a/assets/sass/style.scss b/assets/sass/style.scss
index 91b45a2..1546192 100644
--- a/assets/sass/style.scss
+++ b/assets/sass/style.scss
@@ -20,6 +20,11 @@ $text-color: #454545;
 $heading-color: #404040;
 $link-color: #841212;
 
+// - - - - - - - - - - Foundations
+
+@import "_reset";
+
+// - - - - - - - - - - Global styles
 @import "ed";
 @import "syntax";
 @import "customize";