custom assets ported

app/assets/stylesheets/atoms/_alerts.scss

@@ -0,0 +1,8 @@
+.alert {
+  padding: 20px;
+  border-radius: 5px;
+  &.alert-success {
+    background-color: $accent-color-3;
+    color: $white;
+  }
+}

app/assets/stylesheets/atoms/_fonts.scss

@@ -0,0 +1,162 @@
+//HALISR
+
+@font-face {
+  font-family: 'HalisR';
+  src:local('Halis R Thin'),
+      url('../fonts/HalisR-Thin.woff2') format('woff2'), 
+      url('../fonts/HalisR-Thin.woff') format('woff'),
+      url('../fonts/HalisR-Thin.otf') format('opentype');
+  font-weight:100;
+}
+@font-face {
+  font-family: 'HalisR';
+  src:local('Halis R Light'),
+      url('../fonts/HalisR-Light.woff2') format('woff2'), 
+      url('../fonts/HalisR-Light.woff') format('woff'),
+      url('../fonts/HalisR-Light.otf') format('opentype');
+  font-weight:200;
+}
+
+@font-face {
+  font-family: 'HalisR';
+  src:local('Halis R Book'),
+      url('../fonts/HalisR-Book.woff2') format('woff2'), 
+      url('../fonts/HalisR-Book.woff') format('woff'),
+      url('../fonts/HalisR-Book.otf') format('opentype');
+  font-weight:300;
+}
+
+@font-face {
+  font-family: 'HalisR';
+  src:local('Halis R Regular'),
+      url('../fonts/HalisR-Regular.woff2') format('woff2'), 
+      url('../fonts/HalisR-Regular.woff') format('woff'),
+      url('../fonts/HalisR-Regular.otf') format('opentype');
+  font-weight:500;
+}
+
+@font-face {
+  font-family: 'HalisR';
+  src:local('Halis R Medium'),
+      url('../fonts/HalisR-Medium.woff2') format('woff2'), 
+      url('../fonts/HalisR-Medium.woff') format('woff'),
+      url('../fonts/HalisR-Medium.otf') format('opentype');
+  font-weight:600;
+}
+
+@font-face {
+  font-family: 'HalisR';
+  src:local('Halis R Bold'),
+      url('../fonts/HalisR-Bold.woff2') format('woff2'), 
+      url('../fonts/HalisR-Bold.woff') format('woff'),
+      url('../fonts/HalisR-Bold.otf') format('opentype');
+  font-weight:700;
+}
+
+@font-face {
+  font-family: 'HalisR';
+  src:local('Halis R Black'),
+      url('../fonts/HalisR-Black.woff2') format('woff2'), 
+      url('../fonts/HalisR-Black.woff') format('woff'),
+      url('../fonts/HalisR-Black.otf') format('opentype');
+  font-weight:900;
+}
+
+//LATO
+
+  //regular
+
+@font-face {
+  font-family: 'Lato';
+  src:local('Lato Hairline'),
+      url('../fonts/Lato-Hairline.woff2') format('woff2'), 
+      url('../fonts/Lato-Hairline.woff') format('woff'),
+      url('../fonts/Lato-Hairline.ttf') format('truetype');
+  font-weight:100;
+}
+@font-face {
+  font-family: 'Lato';
+  src:local('Lato Light'),
+      url('../fonts/Lato-Light.woff2') format('woff2'), 
+      url('../fonts/Lato-Light.woff') format('woff'),
+      url('../fonts/Lato-Light.ttf') format('truetype');
+  font-weight:300;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src:local('Lato Regular'),
+      url('../fonts/Lato-Regular.woff2') format('woff2'), 
+      url('../fonts/Lato-Regular.woff') format('woff'),
+      url('../fonts/Lato-Regular.ttf') format('truetype');
+  font-weight:500;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src:local('Lato Bold'),
+      url('../fonts/Lato-Bold.woff2') format('woff2'), 
+      url('../fonts/Lato-Bold.woff') format('woff'),
+      url('../fonts/Lato-Bold.ttf') format('truetype');
+  font-weight:700;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src:local('Lato Black'),
+      url('../fonts/Lato-Black.woff2') format('woff2'), 
+      url('../fonts/Lato-Black.woff') format('woff'),
+      url('../fonts/Lato-Black.ttf') format('truetype');
+  font-weight:900;
+}
+
+  //italicized
+
+@font-face {
+  font-family: 'Lato';
+  src:local('Lato Hairline Italic'),
+      url('../fonts/Lato-HairlineItalic.woff2') format('woff2'), 
+      url('../fonts/Lato-HairlineItalic.woff') format('woff'),
+      url('../fonts/Lato-HairlineItalic.ttf') format('truetype');
+  font-weight:100;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'Lato';
+  src:local('Lato Light Italic'),
+      url('../fonts/Lato-LightItalic.woff2') format('woff2'), 
+      url('../fonts/Lato-LightItalic.woff') format('woff'),
+      url('../fonts/Lato-LightItalic.ttf') format('truetype');
+  font-weight:300;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src:local('Lato Italic'),
+      url('../fonts/Lato-Italic.woff2') format('woff2'), 
+      url('../fonts/Lato-Italic.woff') format('woff'),
+      url('../fonts/Lato-Italic.ttf') format('truetype');
+  font-weight:500;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src:local('Lato Bold Italic'),
+      url('../fonts/Lato-BoldItalic.woff2') format('woff2'), 
+      url('../fonts/Lato-BoldItalic.woff') format('woff'),
+      url('../fonts/Lato-BoldItalic.ttf') format('truetype');
+  font-weight:700;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src:local('Lato Black Italic'),
+      url('../fonts/Lato-BlackItalic.woff2') format('woff2'), 
+      url('../fonts/Lato-BlackItalic.woff') format('woff'),
+      url('../fonts/Lato-BlackItalic.ttf') format('truetype');
+  font-weight:900;
+  font-style: italic;
+}

app/assets/stylesheets/atoms/_layout.scss

@@ -0,0 +1,61 @@
+html {
+  box-sizing: border-box;
+  height: 100%;
+}
+
+body {
+  margin: 0 1rem;
+  height: 100%;
+  .ignore-margin
+  {
+    margin-left: -1rem;
+    margin-right: -1rem;
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+*:focus {
+    outline: 0;
+}
+
+main {
+  display: block;
+  padding-top: 8vw;
+}
+
+.layout {
+  min-height: calc(100% - 112px);
+  &:after {
+    content:"";
+    display:block;
+  }
+}
+
+@media only screen and (min-width: 480px) {
+  .layout {
+    min-height: calc(100% - 116px);
+  }
+}
+
+@media only screen and (min-width: $tablet) {
+  html {
+    // font-size: 2vw;
+  }
+  body {
+    margin: 0 2rem
+  }
+}
+
+@media only screen and (min-width: $desktop) {
+  html {
+    font-size: 16px;
+  }
+  main {
+    padding-top: 55px;
+  }
+}

app/assets/stylesheets/atoms/_media.scss

@@ -0,0 +1,10 @@
+figure {
+  margin: 0;
+}
+
+img,
+picture {
+  margin: 0;
+  max-width: 100%;
+}
+

app/assets/stylesheets/atoms/_pd-slant.scss

@@ -0,0 +1,75 @@
+// Slash Logo
+
+.slash-left {
+  position: relative;
+
+  &:before {
+    content: "";
+    background-color: $accent-color-1;
+    width:3px;
+    display: block;
+    position: absolute;
+    top:0;
+    bottom: -1rem;
+    left:0;
+    transform: skewX(-16.5deg);
+    transform-origin: bottom;
+  }
+}
+
+
+
+// HTML/CSS  only Slanted Border
+
+$prftangle: 90deg - 73.5deg;
+$prftangle-negative: 73.5deg - 90deg;
+
+@mixin slantmix ($lmargin, $rmargin, $slantht) {
+
+  position: relative;
+  display:block;
+  z-index: 1;
+  height: $slantht;
+  min-width: tan($prftangle) + 1 / 3;
+  overflow: wrap;
+  display:inline-block;
+
+  &.slantright {
+    margin-right:tan($prftangle) + $rmargin;
+    &:after {
+      transform: skewX($prftangle-negative);
+      transform-origin: 0% 100%;
+      min-width:auto;
+    }
+  }
+
+  &.slantleft {
+    margin-left:tan($prftangle) + $lmargin;
+    &:before {
+      transform: skewX($prftangle-negative);
+      transform-origin: 10% 0%;
+      min-width:auto;
+    }
+  }
+}
+
+.slantleft:before,
+.slantright:after {
+  background: inherit;
+  bottom: 0;
+  top:0;
+  content: '\00a0';
+  display: block;
+  position: absolute;
+  right: 0;
+  left:0;
+  z-index: -1;
+}
+
+.slantleft:before {
+  right: 50%;
+}
+
+.slantright:after {
+  left: 50%;
+}

app/assets/stylesheets/atoms/_typography.scss

@@ -0,0 +1,74 @@
+body {
+  color: $base-font-color;
+  font-family: $primary-font-face;
+  font-size: 1rem;
+  line-height: $base-line-height;
+    font-weight:300;
+    color: $primary-color;
+}
+
+.hidden {
+  display: none !important;
+}
+
+h1, h2, h3,
+h4, h5, h6 {
+  font-family: $heading-font-face;
+  line-height: $heading-line-height;
+  margin: 0 0 $small-spacing;
+  color: $black;
+  font-weight: bold;
+}
+
+h1 { font-size: modular-scale(6); }
+h2 { font-size: modular-scale(5); }
+h3 { font-size: modular-scale(4); }
+h4 { font-size: modular-scale(3); }
+h5 { font-size: modular-scale(2); }
+h6 { font-size: modular-scale(1); }
+
+p { margin: 0 0 $small-spacing; }
+
+a {
+  color: $primary-color;
+  transition: color $base-duration $base-timing;
+
+  &:active,
+  &:focus,
+  &:hover {
+    color: lighten($primary-color, 25%);
+  }
+}
+
+hr {
+  border-bottom: $base-border;
+  border-left: 0;
+  border-right: 0;
+  border-top: 0;
+  margin: $base-spacing 0;
+}
+
+.prft-heading {
+  text-transform: none;
+}
+
+.question-text {
+  margin-bottom: 1.5rem;
+}
+
+.prft-heading,
+.question-text {
+  font-size: 6vw;
+}
+
+h1 > a {
+  font-size: 1rem;
+  font-weight: 300;
+}
+
+@media screen and (min-width: $screen-sm) {
+  .prft-heading,
+  .question-text {
+    font-size: 2.45rem;
+  }
+}