first load

styles/_mixins.scss

@@ -0,0 +1,190 @@
+// Mixins
+@mixin tablet {
+  @media (min-width: #{$tablet-width}) {
+    @content;
+  }
+}
+
+@mixin desktop {
+  @media (min-width: #{$desktop-width}) {
+    @content;
+  }
+}
+
+@mixin mobile {
+  @media (max-width: #{$tablet-width}) {
+    @content;
+  }
+}
+
+@mixin max-width-container {
+  @media (min-width: #{$max-width-container}) {
+    padding: 0;
+    width: 90%;
+  }
+
+  max-width: $max-width-container;
+  margin: 0 auto;
+  padding: 0 5%;
+}
+
+@mixin vertical-align {
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+@mixin text-overflow {
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
+  -webkit-hyphens: auto;
+  word-break: break-word;
+  word-wrap: break-word; //IE/Edge compatibility
+}
+
+@mixin focus-ring {
+  outline: 0;
+  box-shadow: 0 0 0 3px $brand_color;
+}
+
+@mixin standalone-link {
+  a {
+    color: $link_color;
+    text-decoration: underline;
+
+    &:visited {
+      color: $visited_link_color;
+    }
+
+    &:hover,
+    &:active,
+    &:focus {
+      color: $hover_link_color;
+    }
+  }
+}
+
+@mixin image-alignment {
+  &.image-style-align-left {
+    float: left;
+    margin: 8px 20px 6px 0;
+  }
+
+  &.image-style-align-right {
+    float: right;
+    margin: 8px 0px 6px 20px;
+  }
+
+  &.image-style-block-align-right {
+    margin-left: auto;
+    margin-right: 0;
+  }
+
+  &.image-style-block-align-left {
+    margin-left: 0;
+    margin-right: auto;
+  }
+}
+
+@mixin content-body {
+  @include standalone-link;
+
+  display: flow-root;
+
+  img {
+    height: auto;
+    max-width: 100%;
+  }
+
+  p > img {
+    @include image-alignment;
+  }
+
+  figure.image {
+    display: table;
+
+    margin: 0 auto;
+
+    > img {
+      display: block;
+      width: 100%;
+    }
+
+    @include image-alignment;
+  }
+
+
+  figcaption {
+    padding: 10px 0;
+    font-size: 12px;
+    text-align: center;
+    background-color: $secondary-shade;
+  }
+
+  ul,
+  ol {
+    padding-left: 20px;
+    list-style-position: outside;
+    margin: 20px 0 20px 20px;
+
+    [dir="rtl"] & {
+      padding-right: 20px;
+      padding-left: 0;
+      margin-left: 0;
+      margin-right: 20px;
+    }
+  }
+
+  // Sub level list
+  ul > ul,
+  ol > ol,
+  ol > ul,
+  ul > ol,
+  li > ul,
+  li > ol {
+    margin: 0;
+  }
+
+  ul {
+    list-style-type: disc;
+  }
+
+  :not(pre) > code {
+    background: $primary-shade;
+    border: 1px solid $low-contrast-border-color;
+    border-radius: 3px;
+    padding: 0 5px;
+    margin: 0 2px;
+  }
+
+  pre {
+    background: $primary-shade;
+    border: 1px solid $low-contrast-border-color;
+    border-radius: 3px;
+    padding: 10px 15px;
+    overflow: auto;
+    white-space: pre;
+    direction: ltr;
+  }
+
+  blockquote {
+    border-left: 1px solid $low-contrast-border-color;
+    color: $secondary-text-color;
+    font-style: italic;
+    padding: 0 15px;
+  }
+}
+
+@mixin visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}