base, functions, helpers, settings

project-x/assets/styles/src/_settings.scss

@@ -7,6 +7,7 @@
 $font-size: 16px;
 $line-height: 1.4;
 $font-family: sans-serif;
+$color: #222;
 
 $heading-1: 32px; // .alpha
 $heading-2: 24px; // .beta
@@ -54,4 +55,6 @@ $to-laptop: $from-laptop - 1;
 $from-wide: 1680px;
 $to-wide: $from-wide - 1;
 
-
+/* Transitions
+   ========================================================================== */
+$speed: 0.3s;

project-x/assets/styles/src/base/_base.scss

@@ -0,0 +1,33 @@
+*, *:before, *:after {
+	box-sizing: inherit;
+}
+
+html {
+	box-sizing: border-box;
+	font-size        : $font-size;
+	font-family      : $font-family;
+	line-height      : $line-height;
+	color            : $ia-body-text-color;
+}
+
+::selection {
+    background: #b3d4fc;
+    text-shadow: none;
+}
+
+hr {
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid #ccc;
+    margin: 1em 0;
+    padding: 0;
+}
+
+img, svg {
+    vertical-align: middle;
+}
+
+textarea {
+    resize: vertical;
+}

project-x/assets/styles/src/base/_headings.scss

@@ -3,26 +3,31 @@ h1, .h1, .alpha{
     line-height: $heading-line-height;
     margin-top: 0;
 }
+
 h2, .h2, .beta{
     font-size: $heading-2;
     line-height: $heading-line-height;
     margin-top: 0;
 }
+
 h3, .h3, .gamma{
     font-size: $heading-3;
     line-height: $heading-line-height;
     margin-top: 0;
 }
+
 h4, .h4, .delta{
     font-size: $heading-4;
     line-height: $heading-line-height;
     margin-top: 0;
 }
+
 h5, .h5, .epsilon{
     font-size: $heading-5;
     line-height: $heading-line-height;
     margin-top: 0;
 }
+
 h6, .h6, .zeta{
     font-size: $heading-6;
     line-height: $heading-line-height;

project-x/assets/styles/src/base/_page.scss

@@ -1,24 +0,0 @@
- * {
- 	box-sizing:border-box;
- }
-
-html {
-	font-size        : ($ia-base-font-size / 16px) * 1em; /* [1] */
-	font-family      : $ia-font-family-sans;
-	line-height      : $ia-base-line-height / $ia-base-font-size; /* [1] */
-	background-color : $ia-body-background-color;
-	color            : $ia-body-text-color;
-	overflow-y       : scroll;  /* [2] */
-	min-height       : 100%;    /* [3] */
-
-	-ms-text-size-adjust     : 100%;  /* [4] */
-	-webkit-text-size-adjust : 100%;  /* [5] */
-}
-
-/**
- * Remove default margin.
- */
-
-body {
-	margin: 0;
-}

project-x/assets/styles/src/generic/_helpers.scss

@@ -0,0 +1,26 @@
+.clearfix:before,
+.clearfix:after {
+    content: " ";
+    display: table;
+}
+
+.clearfix:after {
+    clear: both;
+}
+
+.center-vertically {
+    text-align: center;
+    height: 100%;
+
+    &:before {
+        content        : "";
+        display        : inline-block;
+        height         : 100%;
+        vertical-align : middle;
+    }
+
+    > * {
+        display        : inline-block;
+        vertical-align : middle;
+    }
+}

project-x/assets/styles/src/generic/_trumps.scss

@@ -0,0 +1,29 @@
+.left {
+	float: left !important;
+}
+
+.right {
+	float: right !important;
+}
+
+.align-left {
+	text-align: left !important;
+}
+
+.align-right {
+	text-align: right !important;
+}
+
+.align-center {
+	text-align: center !important;
+}
+
+.is-visible {
+	visibility: visible !important;
+	opacity: 1 !important;
+}
+
+.is-hidden {
+	visibility: hidden !important;
+	opacity: 0 !important;
+}

project-x/assets/styles/src/tools/_functions.scss

@@ -0,0 +1,11 @@
+@function em($px, $base: $font-size) {
+  @return ($px / $base) * 1em;
+}
+
+@function rem($px, $base: $font-size) {
+    @return ($px / $base) * 1rem;
+}
+
+@function span($fraction) {
+    @return $fraction * 100%;
+}