daiblogs 0.1.0 → 0.2.0

data/_sass/flickity.scss

@@ -0,0 +1,137 @@
+/*! Flickity v2.2.1
+https://flickity.metafizzy.co
+---------------------------------------------- */
+
+.flickity-enabled {
+  position: relative;
+}
+
+.flickity-enabled:focus { outline: none; }
+
+.flickity-viewport {
+  overflow: hidden;
+  position: relative;
+  height: 100%;
+}
+
+.flickity-slider {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+/* draggable */
+
+.flickity-enabled.is-draggable {
+  -webkit-tap-highlight-color: transparent;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.flickity-enabled.is-draggable .flickity-viewport {
+  cursor: move;
+  cursor: -webkit-grab;
+  cursor: grab;
+}
+
+.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
+  cursor: -webkit-grabbing;
+  cursor: grabbing;
+}
+
+/* ---- flickity-button ---- */
+
+.flickity-button {
+  position: absolute;
+  background: hsla(0, 0%, 100%, 0.75);
+  border: none;
+  color: #333;
+}
+
+.flickity-button:hover {
+  background: white;
+  cursor: pointer;
+}
+
+.flickity-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 5px #19F;
+}
+
+.flickity-button:active {
+  opacity: 0.6;
+}
+
+.flickity-button:disabled {
+  opacity: 0.3;
+  cursor: auto;
+  /* prevent disabled button from capturing pointer up event. #716 */
+  pointer-events: none;
+}
+
+.flickity-button-icon {
+  fill: currentColor;
+}
+
+/* ---- previous/next buttons ---- */
+
+.flickity-prev-next-button {
+  top: 50%;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  /* vertically center */
+  transform: translateY(-50%);
+}
+
+.flickity-prev-next-button.previous { left: 10px; }
+.flickity-prev-next-button.next { right: 10px; }
+/* right to left */
+.flickity-rtl .flickity-prev-next-button.previous {
+  left: auto;
+  right: 10px;
+}
+.flickity-rtl .flickity-prev-next-button.next {
+  right: auto;
+  left: 10px;
+}
+
+.flickity-prev-next-button .flickity-button-icon {
+  position: absolute;
+  left: 20%;
+  top: 20%;
+  width: 60%;
+  height: 60%;
+}
+
+/* ---- page dots ---- */
+
+.flickity-page-dots {
+  position: absolute;
+  width: 100%;
+  bottom: -25px;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  text-align: center;
+  line-height: 1;
+}
+
+.flickity-rtl .flickity-page-dots { direction: rtl; }
+
+.flickity-page-dots .dot {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  margin: 0 8px;
+  background: #333;
+  border-radius: 50%;
+  opacity: 0.25;
+  cursor: pointer;
+}
+
+.flickity-page-dots .dot.is-selected {
+  opacity: 1;
+}

data/{assets/_sass/_grid.scss → _sass/grid.scss}

@@ -1,11 +1,4 @@
-//
-//Adaptive Grid
-//Heavily adapted from : http://framelessgrid.com
-//
-
-//
-// Configuration
-//
+@charset "utf-8";
 
 $font-size: 10px;     // Your base font-size in pixels
 $column: 48px;  // The column-width of your grid in pixels

data/_sass/layout.scss

@@ -0,0 +1,991 @@
+// BLOCK ELEMENT MODIFIER NAMING SCHEME
+
+// Any component with subsequent parts should be treated as a block, its parts as elements. Modifiers should be reserved for changes in state
+
+
+@charset "utf-8";
+
+// Components
+
+.wrapper{
+  background-color: #F9F9F9;
+}
+.inner-wrap.blogs-block{
+  @include responsive(superish-wide-screens){
+    max-width: 1800px;
+    margin-right: auto;
+    margin-left: auto;
+  }
+}
+.blogs-block{
+  @include responsive(small-screens){
+    margin-top: 92px;
+  }
+  @include responsive(medium-screens){
+    margin-top: 114px;
+  }
+  @include responsive(wide-screens){
+    margin-top: 127px;
+  }
+}
+
+.bar{
+  width: 2.1875rem;
+  border: 0;
+  border-bottom: 0.325rem solid $ofc_slate;
+  margin-top: 1rem;
+}
+
+// MASTHEAD
+
+.header-flat--logo{
+  fill: $ofc_slate;  
+}
+
+.blog-masthead--logo{
+  background-color: $ofc_slate;
+  background-image: url(/uploads/digital-banner.png);
+  background-position: center;
+  background-size: cover;
+  height: 30rem;
+  padding: 6rem;
+  color: $emphasis;
+  .blog-masthead--title{
+    font-family: 'proxima-nova', Helvetica, Arial, sans-serif;
+    margin-bottom: 0px;
+    font-weight: bold;
+    font-size: 3rem;
+    @include responsive(ultra-wide-screens){
+      font-size: 5rem;
+    }
+  }
+  hr.bar{
+    border-bottom: solid 0.4rem $emphasis;
+    width: 3rem;
+    margin-bottom: 2rem;
+  }
+  .blog-masthead--tagline{
+    font-family: 'proxima-nova', Helvetica, Arial, sans-serif;
+    width: 80%;
+    @include responsive(ultra-wide-screens){
+      width: 70%;
+    }
+  }
+}
+
+.blog-masthead{
+  @include clearfix;
+  .blog-masthead--subscribe, .blog-masthead--search{
+    padding: 15px;
+    h3{
+      margin-bottom: 0px;
+    }
+  }
+}
+
+  //SEARCH
+
+.blog-masthead--search{
+  width: 100%;
+  background-color: $text-white;
+  color: $ofc_lightblue;
+  @include responsive(wide-screens){
+    width: 50%;
+    float: left;
+  }
+  .search-icon{
+    fill: $ofc_lightblue;
+    height: 1.2rem;
+    margin-right: .7rem;
+    }
+  h3{
+    color: $ofc_lightblue;
+  }
+  input{
+    font-weight: 700;
+    margin-left: 1.5rem;
+    border: none;
+    outline: none;
+    font-size: 1.2rem;
+    color: $ofc_lightblue;
+    &::placeholder{
+      color: $ofc_lightblue;
+    }
+  }
+}
+// SEARCH ALGOLIA
+.aa-input-container, input.aa-input-search{
+  width:92%;
+  @include responsive(tinyish-screens){
+    width: 93%;
+  }
+  @include responsive(small-screens){
+    width: 95%;
+  }
+  @include responsive(wide-screens){
+    width: 92%;
+  }
+}
+.aa-input-container {
+  display: block;
+  position: relative; 
+}
+span.algolia-autocomplete{
+  display: block !important;
+}
+.aa-input-search {
+  // width: 300px;
+  border: 1px solid rgba(228, 228, 228, 0.6);
+  padding-bottom: 5px;
+  box-sizing: border-box;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none; 
+}
+  .aa-input-search::-webkit-search-decoration, .aa-input-search::-webkit-search-cancel-button, .aa-input-search::-webkit-search-results-button, .aa-input-search::-webkit-search-results-decoration {
+    display: none; 
+  }
+  .aa-input-search{
+    outline: none;
+  }
+.aa-input-icon {
+  height: 16px;
+  width: 16px;
+  position: absolute;
+  top: 12px;
+  left: 1px;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  fill: #e4e4e4; }
+.aa-dropdown-menu {
+  width: 92%;
+  @include responsive(tinyish-screens){
+    width: 93%;
+  }
+  @include responsive(small-screens){
+    width: 95%;
+  }
+  @include responsive(wide-screens){
+    width: 110%;
+  }
+  color: $ofc_slate;
+  font-size: .9rem;
+  background: rgba(#FFFFFF,.98);
+  border-radius: 0 0 10px 10px;
+  border: 1px solid rgba(228, 228, 228, 0.6);
+  box-shadow: -5px 5px 5px rgba($nav-black, 0.1);
+  margin-top: 15px;
+}
+.aa-suggestion {
+  padding: 12px;
+  cursor: pointer;
+}
+.aa-suggestion + .aa-suggestion {
+    border-top: 1px solid rgba(228, 228, 228, 0.6);
+}
+  .aa-suggestion:hover, .aa-suggestion.aa-cursor {
+    background-color: rgba(241, 241, 241, 0.35); }
+.algolia__result-highlight{
+  font-weight: bold;
+}
+.ais-Highlight{
+  font-weight: bold;
+}
+.aa-suggestion.aa-cursor{
+  background-color: rgba($blue, 0.1);
+}
+.aa-suggestion+.aa-cursor{
+  background-color: rgba($blue, 0.1);
+  border-top: 1px solid $blue;
+}
+  //SUBSCRIBE
+
+.blog-masthead--subscribe{
+  background-color: $ofc_slate;
+  width: 100%;
+  @include responsive(wide-screens){
+    width: 50%;
+    float: right;    
+  }
+  h3{
+    color: #FFFFFF;
+  }
+  input{
+    border: none;
+    font-size: .7rem;
+    background-color: $ofc_slate;
+    border-bottom: 2px solid $ofc_lightblue;
+    color: white;
+    padding-bottom: 4px;
+    margin-left: 3%;
+    outline: none;
+    &::placeholder{
+      color: $ofc_lightblue;
+    }
+    @include  responsive(wide-screens){
+      width: 50%;
+    }
+    @include responsive(ultra-wide-screens){
+      width: 70%;
+    }
+  }
+} 
+
+// BLOG POSTS 
+
+// BEM COMPONENETS 
+
+// Blocks: featured, featured-zero, featured-add, featured-header, recent-header
+
+// Nested-Blocks: metadata, post-abstract
+
+// Elements: author-name, tags, readtime, date, post-title, summary, button, image, blog, wrappers, header-title
+
+.button{
+  background-color: $ofc_slate;
+  padding: .5rem .3rem;
+  border-radius: 5px;
+  color: $text-white;
+  display: block;
+  margin: 1rem 0;
+  width: 40%;
+  text-align: center;
+  font-size: .8rem;
+  font-weight: 600;
+  &:hover{
+    color: darken($text-white, 5%);
+  }
+}
+.recent{
+  overflow: hidden;
+  @include clearfix;
+  position: relative;
+  background-image: url(/assets/images/full-rec.svg);
+  background-repeat: no-repeat;
+  background-position-x: 2rem;
+  background-position-y: 2rem;
+  background-size: 600px;
+  @include responsive(wide-screens){
+    background-size: 900px;
+  }
+  @include responsive(extra-ultra-wide-screens){
+    background-size: 1100px;
+  }
+   @include responsive(super-wide-screens){
+    background-size: 1300px;
+  }
+  &--title{
+    margin-left: 5rem;
+    margin-top: 4rem;
+    @include responsive(wide-screens){
+      margin-top: 5rem;
+    }
+  }
+  h2{
+    color: $ofc_slate;
+    font-size: 2.1rem;
+    display: block;
+    width: 40%;
+    @include responsive(wide-screens){
+      width: 45%;
+    }
+    @include responsive(ultra-wide-screens){
+      width: 425.5px;
+    }
+  }
+}
+.featured{
+  @include clearfix;
+  background-color: $ofc_lightblue;
+  height: 12rem;
+  overflow: hidden;
+  position: relative;
+  background-image: url(/assets/images/top-rec.svg);
+  background-repeat: no-repeat;
+  background-position-x: 2rem;
+  background-position-y: 2rem;
+  background-size: 600px;
+  @include responsive(wide-screens){
+    background-size: 900px;
+  }
+  @include responsive(extra-ultra-wide-screens){
+    background-size: 1100px;
+  }
+  @include responsive(super-wide-screens){
+    background-size: 1300px;
+  }
+  &--title{
+    margin-left: 5rem;
+    margin-top: 4rem;
+    width: 75%;
+    @include responsive(wide-screens){
+      margin-top: 5rem;
+    }
+  }
+  h2{
+    color: $ofc_slate;
+    font-size: 2.1rem;
+    display: block;
+    width: 40%;
+    @include responsive(wide-screens){
+      width: 45%;
+    }
+    @include responsive(ultra-wide-screens){
+      width: 425.5px;
+    }
+  }
+}
+.recent{
+  background-color: $ofc_lightgray;
+}
+
+// Featured post 1 
+
+.featured-zero{
+  width: 100%;
+  @include clearfix;
+  &--blog{
+    width: 100%;
+    font-size: 1rem;
+    background-color: $ofc_slate;
+    color: white;
+    font-weight: bold;
+    text-transform: uppercase;
+    padding: 1.5rem;
+    @include responsive(wide-screens){
+      float: left;
+      width: 50%;
+    }
+  }
+  &--image{
+    width: 100%;
+    height: 20rem;
+    background-size: cover; 
+    @include responsive(wide-screens){
+      display: block;
+      width: 50%;
+      float: right;
+      height: 35rem;
+    }
+  }
+  &--post{
+    width: 100%;
+    padding: 1rem;
+    @include clearfix;
+    @include responsive(wide-screens){
+      width: 50%;
+      float: left;
+    }
+  }
+  &--author{
+    @include clearfix;
+    font-size: .7rem;
+    float: left;
+    padding-left: 1.5rem;
+    a{
+      color: $ofc_super_lightblue;
+    }
+  }
+
+  &--author-pic{
+    img{
+      float: left;
+      clip-path: circle(49%);
+      width: 2rem;
+    }
+    a{
+      font-weight: bold;
+      position: relative;
+      top: .1rem;
+    }
+    span{
+      margin-left: .5rem;
+    }
+  }
+
+  &--author-data{
+    padding-left: 2.5rem;
+    p{
+      margin: 0;
+      line-height: 1rem;
+    }
+    .seperator{
+      font-size: 0.9rem;
+      position: relative;
+    }
+  }
+  
+  &--post-wrap{
+    padding-left: 4rem;
+    padding-right: 1rem;
+    max-width: 717px;
+    h4{
+      margin-top: 4rem;
+      padding-top: 2rem;
+      font-size: 1.5rem;
+      font-family: $condensed-titles;
+    }
+    p{
+      margin-top: 1rem;
+    }
+  }
+}
+
+// Featured items 2 and 3
+
+.featured-other{
+  background-color: $ofc_lightblue;
+  background-image: url(/assets/images/bottom-rec.svg);
+  background-repeat: no-repeat;
+  background-position-x: 2rem; 
+  background-size: 600px;
+  @include responsive(wide-screens){
+    background-size: 900px;
+  }
+  @include responsive(extra-ultra-wide-screens){
+    background-size: 1100px;
+  }
+  @include responsive(super-wide-screens){
+    background-size: 1300px;
+  }
+  width: 100%;
+  position: relative;
+  @include clearfix;
+  padding-bottom: 2rem;
+  // .svg-image{
+  //   width: 75%;
+  //   position: absolute;
+  //   left: 2rem;
+  //   stroke-width: 20;
+  //   @include responsive(wide-screens){
+  //     width: 70%;
+  //   }
+  //   @include responsive(ultra-wide-screens){
+  //     width: 900px;
+  //   }
+  // }
+  .post-data{
+    width: 100%;
+  }
+  &--blog{
+    font-size: 1rem;
+    background-color: $ofc_slate;
+    color: white;
+    text-transform: uppercase;
+    float: none;
+    width: 100%;
+    padding: .7rem;
+    font-weight: 300;
+    }
+  &--image{
+    height: 314px;
+    width: 100%;
+  }
+  &--author{
+    @include clearfix;
+    font-size: .7rem;
+    float: none;
+    padding-left: 1.5rem;
+    padding-top: 1.5rem;
+    a{
+      color: $ofc_super_lightblue;
+    }
+  }
+  &--author-pic{
+    img{
+      float: left;
+      clip-path: circle(49%);
+      width: 2rem;
+    }
+    a{
+      font-weight: bold;
+      position: relative;
+    }
+    span{
+      margin-left: .5rem;
+    }
+  }
+  &--author-data{
+    padding-left: 2.5rem;
+    p{
+      margin: 0;
+      line-height: 1rem;
+    }
+    .seperator{
+      font-size: 0.9rem;
+      position: relative;
+    }
+  }
+  &--post-wrap{
+    overflow: none;
+    padding-left: 1.5rem;
+    padding-right: .5rem;
+    max-width: 617px;
+    @include responsive(extra-ultra-wide-screens){
+      margin: auto;
+    }
+    .post-summary{
+      display: block;
+      min-height: 81px; 
+    }
+    .post-title{
+      display: block;
+      padding-top: 0;
+      margin-top: 1rem;
+      min-height: 100px;
+    }
+    .button{
+      width: 75%;
+      @include responsive(ultra-wide-screens){
+        width: 40%;
+      }
+    }
+  }
+  &--title{
+    display: block;
+    padding-top: 0;
+    margin-top: 1rem;
+    min-height: 100px;
+  }
+  &--summary{
+    display: block;
+    min-height: 108px; 
+    margin-top: 1rem;
+  }
+  &--wrap{
+    width: 40%;
+    float: left;
+    margin-top: 2rem;
+    background-color: white;
+    min-height: 776px;
+    @include clearfix;
+    &.odd{
+        margin-left: 5%;
+      }
+    &.even{
+        float: right;
+        margin-right: 5%;
+      }
+  } 
+}
+
+// RECENT ARTICLES
+.main-carousel{
+  margin-bottom: 3rem;
+  width: 300px;  
+  margin-left: 6rem;
+  margin-top: 3rem; 
+  box-shadow: 0px 2px 60px 0px rgba(160,179,198,0.47);
+  @include responsive(small-screens){
+    width: 400px;
+  }
+  @include responsive(medium-screens){
+      width: 500px;
+  }
+  @include responsive(wide-screens){
+    width: 680px;
+  }
+  @include responsive(ultra-wide-screens){
+    width: 800px;
+  }
+  @include responsive(extra-ultra-wide-screens){
+    width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  @include responsive(superish-wide-screens){
+    width: 1258px;
+  }
+  .carousel-cell{
+    width: 142;
+    height: 50rem;
+    background-color: white;
+    margin-right: 1rem;
+    font-size: .8rem; 
+    box-shadow: 0px 2px 60px 0px rgba(160,179,198,0.47);
+    @include responsive(small-screens){
+      width: 192px;
+      height: 40rem;  
+    }
+    @include responsive(medium-screens){
+      width: 242px;
+    }
+    @include responsive(wide-screens){
+      width: 216px;
+    }
+    @include responsive(ultra-wide-screens){
+      width: 256px;
+    }
+    @include responsive(extra-ultra-wide-screens){
+      width: 389.3px;
+    }
+    @include responsive(superish-wide-screens){
+       margin-right: 2.5rem;
+    }
+    @include responsive(super-wide-screens){
+     
+      
+    }
+    .recent-blog{
+      padding: .5rem;
+      padding-left: 1rem;
+      background-color: $ofc_slate;
+      color: white;
+      font-weight: 300;
+      span{
+        text-transform: uppercase;
+      }
+    }
+    .recent-image{
+      height: 9rem;
+      overflow: hidden;
+      img{ 
+        width: 100%;
+      }
+    }
+    .featured-other--author{
+      font-size: .6rem;
+    }
+    .featured-other--author-pic{
+      span{
+        display: block;
+        margin-left: 2.5rem;
+        padding-right: .1rem;
+      }
+    }
+    .featured-other--title{
+      padding-left: 1.5rem;
+      padding-right: .5rem;
+      font-size: 1rem;
+    }
+    .featured-other--summary{
+      font-size: .9rem;
+      padding: 0 .5rem 0 1.5rem;
+    }
+    .button{
+      margin-left: 1.5rem;
+      background-color: $ofc_blue;
+      font-weight: 600;
+      width: 75%;
+      position: absolute;
+      bottom: 3rem;
+      @include responsive(ultra-wide-screens){
+        width: 40%;
+      }
+    }
+    .featured-other--summary{
+
+    }
+  }
+}
+
+// More News
+
+.more{
+  background-color: #F9F9F9;
+  background-image: url(/assets/images/open-rec.svg);
+  background-repeat: no-repeat;
+  background-position-x: 2rem; 
+  background-position-y: 2rem;
+  background-size: 600px;
+  @include responsive(wide-screens){
+    background-size: 900px;
+  }
+  @include responsive(extra-ultra-wide-screens){
+    background-size: 1100px;
+  }
+   @include responsive(super-wide-screens){
+    background-size: 1300px;
+  }
+  padding-top: 3rem;
+  .featured--title{
+    margin-top: 1rem;
+  }
+  h2{
+    font-size: 2.1rem;
+  }
+  .more-block-wrap{
+    padding:  0 2rem;
+    @include clearfix;
+    max-width: 1423px;
+    @include responsive(extra-ultra-wide-screens){
+      margin-right: auto;
+      margin-left: auto;
+    }
+  }
+  .more-block{
+    @include clearfix;
+    width: 80%;
+    margin-left: 10%;
+    float: right;
+    margin-bottom: 2rem;
+    min-height: 16rem;
+    @include responsive(medium-screens){
+      width: 40%; 
+    }
+    @include responsive(wide-screens){
+      width: 30%;
+      margin-left: 3%;
+    }
+    @include responsive(ultra-wide-screen){
+      width: 20%;
+      margin-left: 5%;
+    }
+    .bar{
+    width: 1.1875rem;
+    border: 0;
+    border-bottom: 0.225rem solid #768496;
+    margin-bottom: 1rem;
+    }
+  }
+
+  .more-title{
+
+  }
+  .more-details{
+    .more-blog{
+      font-weight: 600;
+      display: block;
+      color: $link_blue;
+    }
+    .more-time{
+      font-size: .8rem;
+      display: block;
+      .clock-icon{
+        width: 12px;
+        position: relative;
+        top: 1px;
+      }
+    }
+  }
+}
+
+
+// POSTSTYLES
+#progressbarJS {
+  background-color: #92BADC;
+  height: 5px;
+  position: fixed;
+  top:  91px;
+  left: 0;
+  width:  0%;
+  z-index: 250;
+  @include responsive(small-screens){
+    top: 91px;
+  }
+  @include responsive(medium-screens){
+    top: 114px;
+  }
+  @include responsive(wide-screens){
+    top: 129px;
+  }
+}
+
+.lead-wrap{
+  @include clearfix;
+  background-color: #F2F2F2;
+}
+.post-wrapper{
+  padding-top: 5px;
+  @include clearfix;
+}
+.post-image{
+  display: none;
+  @include responsive(wide-screens){
+    display: block;
+  }
+  width: 50%;
+  height: 20rem;
+    background-size: cover; 
+    @include responsive(wide-screens){
+      display: block;
+      width: 50%;
+      float: right;
+      height: 35rem;
+    }
+  background-size: cover;
+}
+.post-summary{
+  width: 100%;
+  @include responsive(wide-screens){
+    width: 50%;
+    float: right;
+  }
+  padding-top: 2rem;
+  padding-left: 3rem;
+  padding-right: 2rem;
+  padding-bottom: 1rem;
+  @include responsive(wide-screens){
+    padding-top: 4rem;
+    padding-left: 6rem;
+  }
+  .summary-publication{
+    color: $ofc_slate;
+    text-transform: uppercase;
+    margin-bottom: 1.5rem;
+  }
+  .summary-title{
+    margin-bottom: 2rem;
+  }
+  .summary-details{
+    padding-left: 1.5rem;
+    margin-bottom: 2rem;
+    border-left: 1px solid $ofc_blue;
+    p{
+      margin-bottom: 0px;
+      font-size: .8rem;
+    }
+  }
+}
+.post-body{
+  width: 80%;
+  @include responsive(ultra-wide-screens){
+    width: 50%;
+  }
+  margin-right: auto;
+  margin-left: auto;
+  padding-top: 3rem; 
+  background-color: #F9F9F9;
+  img{
+    width: 100%;
+  }
+  img.full-screen{
+    display: block;
+    position: relative;
+    width: 200%;
+    left: -50%;
+  }
+  img.float-left{
+    @include responsive(ultra-wide-screens){
+      width: 40%;
+      float: left;
+      margin: 0 1rem 0 0;
+      position: relative;
+      top: .4rem
+    }
+  }
+  img.float-right{
+    @include responsive(ultra-wide-screens){
+      width: 40%;
+      float: right;
+      margin: 0 0 0 1rem;
+      position: relative;
+      top: .4rem
+    }
+  }
+
+  code{
+    display: block;
+    text-align: center;
+    padding: .7rem;
+    background-color: #B5BCC5;
+    font-weight: 300;
+  }
+  code.full-screen{
+    display: block;
+    position: relative;
+    width: 200%;
+    left: -50%;
+  }
+  code.float-left{
+    @include responsive(ultra-wide-screens){
+      width: 40%;
+      float: left;
+      margin: 0 1rem .5rem 0;
+      clear: left; 
+    }
+
+  }
+  code.float-right{
+    @include responsive(ultra-wide-screens){
+      width: 40%;
+      float: right;
+      margin: 0 0 .5rem 1rem;
+      clear: right; 
+    }
+
+  }
+  blockquote{
+  display: block;
+  width: 200%;
+  position: relative;
+  left: -50%;
+  padding: 2rem 40%;
+  margin-bottom: 1rem;
+  background-color: $ofc_slate;
+  color: $ofc_lightgray;
+  background-image: url(../images/blockquote.svg), url(../images/blockquote-right.svg);
+  background-size: 3rem, 6rem;
+  background-repeat: no-repeat;
+  background-position: left 10% top 1.2rem, right 5% top 2.3rem;
+    strong{
+      color: whitesmoke;
+      font-weight: bold;
+    }
+    @include responsive(extra-ultra-wide-screens){
+      background-position: left 15% top 1.2rem, right 12% top 2.3rem;
+    }
+  }
+  aside{
+    padding: 2rem 0;
+    margin: 2rem 0;
+    border-top: 1px solid $ofc_lightblue;
+    border-bottom: 1px solid $ofc_lightblue;
+  }
+}
+.post-footer--wrap{
+  width: 100%;
+  background-color: $ofc_slate;
+  color: #c8c6c2;
+}
+.post-footer{
+  @include clearfix;
+  padding: 1rem;
+  .footer--author-image{
+      float: left;
+      width: 5rem;
+      margin-right: .8rem;
+    img{
+      clip-path: circle(49%);
+      width: 5rem;
+      position: relative;
+      top: 4px;
+      @include responsive(ultra-wide-scrreens){
+        width: 12rem;
+      }
+    }
+    a{
+      font-weight: bold;
+      position: relative;
+      top: .1rem;
+    }
+    span{
+      margin-left: .5rem;
+    }
+  }
+  .footer--author-details{
+    width: 68%;
+    float: left;
+    @include responsive(ultra-wide-screens){
+      width: 73%;
+    }
+    h3{
+      font-size: 1rem;
+      color: #c8c6c2;
+    }
+    p{
+      font-size: .9rem;
+    }
+  }
+}
+.recent.related{
+  .main-carousel{
+    margin-right: auto;
+    margin-left: auto;
+  }
+}
+// FOOTER
+
+.footer-flat--logo{
+  fill: $nav_links;
+}