Add sass sources, auto-generate and replace CSS

.gitignore

@@ -5,3 +5,4 @@ _site/
 .bundle
 /.idea
 .ruby-version
+.sass-cache/

_config.yml

@@ -18,6 +18,7 @@ exclude:
   - vendor
   - Procfile
   - Rakefile
+
 future: true
 
 # Defaults
@@ -62,3 +63,6 @@ gems:
 
 whitelist:
   - jekyll-redirect-from
+
+sass:
+  style: compressed

_sass/base/body.scss

@@ -0,0 +1,18 @@
+// BODY
+//------------------------------------------------
+//------------------------------------------------
+html {
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+html,
+body {
+  height: 90%;
+  margin: 0;
+}

_sass/base/form.scss

@@ -0,0 +1,30 @@
+// FORM
+//------------------------------------------------
+//------------------------------------------------
+
+input,
+select,
+textarea {
+  font-family: $base-font-family;
+  font-size: $font-size-large;
+  display: block;
+  appearance: none;
+  border: none;
+}
+
+
+::-webkit-input-placeholder {
+   color: $base-font-color-light;
+}
+
+:-moz-placeholder { /* Firefox 18- */
+   color: $base-font-color-light;
+}
+
+::-moz-placeholder {  /* Firefox 19+ */
+   color: $base-font-color-light;
+}
+
+:-ms-input-placeholder {
+   color: $base-font-color-light;
+}

_sass/base/helper.scss

@@ -0,0 +1,14 @@
+// HELPER
+//------------------------------------------------
+//------------------------------------------------
+
+.wrap {
+	@include outer-container;
+	@include padding(0 20px);
+}
+
+.dot {
+	font-size: 10px;
+	color: rgba($base-font-color-light, 0.6);
+	margin: 0 3px;
+}

_sass/base/lists.scss

@@ -0,0 +1,22 @@
+// LISTS
+//------------------------------------------------
+//------------------------------------------------
+ul,
+ol {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+dl {
+  margin: 0;
+}
+
+dt {
+  font-weight: 600;
+  margin: 0;
+}
+
+dd {
+  margin: 0;
+}

_sass/base/media.scss

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

_sass/base/typography.scss

@@ -0,0 +1,62 @@
+// TYPOGRAPHY
+//------------------------------------------------
+//------------------------------------------------
+html {
+font-size: $base-font-size;
+
+}
+
+body {
+    color: $base-font-color;
+    font-family: $base-font-family;
+    font-weight: $font-regular;
+    line-height: $base-line-height;
+    @include font-smoothing(on);
+}
+* {
+  transition: $base-transition;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-family: $heading-font-family;
+    line-height: $heading-line-height;
+    font-weight: $font-black;
+    margin: 0;
+}
+
+h2 {
+  font-weight: $font-regular;
+}
+
+p {
+    margin: 0;
+}
+
+a {
+    color: $base-link-color;
+    text-decoration: none;
+    transition: $base-transition;
+    &:active,
+    &:focus,
+    &:hover {
+        color: $hover-link-color;
+        text-decoration: underline;
+    }
+}
+
+hr {
+    border-bottom: $base-border-gray;
+    border-left: 0;
+    border-right: 0;
+    border-top: 0;
+    margin: 0;
+}
+
+blockquote {
+  margin: 0;
+}

_sass/components/buttons.scss

@@ -0,0 +1,22 @@
+// BUTTONS
+//------------------------------------------------
+//------------------------------------------------
+.button {
+    padding: 8px 18px;
+    font-size: $font-size-small;
+    font-weight: $font-bold;
+    text-transform: uppercase;
+    color: #fff;
+    background: $brand-secondary;
+    border-radius: $border-radius-base;
+    display: inline-block;
+
+    &:active,
+    &:focus,
+    &:hover {
+      text-decoration: none;
+      color: #fff;
+      background: $brand-primary;
+    }
+
+}

_sass/components/calendar.scss

@@ -0,0 +1,33 @@
+// CALENDAR
+//------------------------------------------------
+//------------------------------------------------
+
+.calendar {
+  width: 28px;
+  height: 32px;
+  background: #fff;
+  border-radius: $border-radius-small;
+  overflow: hidden;
+
+  span {
+    display: block;
+    font-size: 10px;
+    font-weight: $font-bold;
+    text-align: center;
+  }
+  span:first-child {
+    background: $brand-primary;
+    color: #fff;
+  }
+
+}
+
+a {
+  .calendar {
+    span:last-child {
+      color: $gray-dark;
+      font-size: 12px;
+      margin-top: -1px;
+    }
+  }
+}

_sass/components/call-to-action.scss

@@ -0,0 +1,39 @@
+// CALL TO ACTION
+//------------------------------------------------
+//------------------------------------------------
+
+.call-to-action {
+    text-align: center;
+    margin-top: $padding-large;
+
+    &.action-medium {
+        margin-top: $padding-medium;
+    }
+
+    &.action-small {
+        margin-top: $padding-small;
+    }
+
+    p {
+        font-size: $font-size-small;
+        color: $base-font-color-inverse;
+
+        &.align-top {
+            margin-bottom: 12px;
+        }
+
+        &.align-bottom {
+            margin-top: 12px;
+        }
+
+        a {
+          text-decoration: underline;
+          color: $base-font-color-inverse;
+          &:active,
+          &:focus,
+          &:hover {
+            color: #fff;
+          }
+        }
+    }
+}

_sass/components/card.scss

@@ -0,0 +1,60 @@
+// CARD
+//------------------------------------------------
+//------------------------------------------------
+
+.card {
+    padding: 18px;
+    border-radius: $border-radius-base;
+    @include display(flex);
+    @include flex-direction(row);
+    background: $gray;
+    transition: $base-transition;
+    margin-bottom: 14px;
+
+    &:hover {
+        background: $gray-dark;
+    }
+
+    img {
+        width: 28px;
+        height: 28px;
+        border-radius: $border-radius-small;
+    }
+
+    .card-text {
+        margin-left: 14px;
+
+        h4 {
+            font-family: $base-font-family;
+            font-size: $font-size-large;
+            color: #fff;
+        }
+
+        ul {
+            li {
+                color: $base-font-color-inverse;
+                display: inline-block;
+
+                &.online-courses-price,
+                &.event-location {
+                    font-size: $font-size-xsmall;
+                    text-transform: uppercase;
+                }
+
+                &.online-courses-date,
+                &.date-event {
+                    font-size: $font-size-small;
+                }
+
+                &.dot {
+                    color: rgba($base-font-color-inverse, 0.4);
+                }
+            }
+        }
+    }
+    &:active,
+    &:focus,
+    &:hover {
+      text-decoration: none;
+    }
+}

_sass/components/code.scss

@@ -0,0 +1,30 @@
+// CODE
+//------------------------------------------------
+//------------------------------------------------
+.code-element {
+    margin-bottom: 20px;
+
+    pre {
+        margin-top: 0;
+    }
+
+    code {
+        padding: 20px;
+    }
+
+    .bar-code {
+        background: #B4BBBD;
+        text-align: center;
+        padding: 2px 0;
+        font-size: $font-size-small;
+        font-weight: $font-bold;
+        min-height: 26px;
+        @include border-radius($border-radius-base $border-radius-base 0 0);
+
+    }
+
+    .hljs {
+      background: rgba($gray-darker, 0.8);
+    }
+
+}