virgo 0.1

data/app/assets/stylesheets/virgo/pages/authors.sass

@@ -0,0 +1,30 @@
+.authors-page, .author-detail
+  h1
+    font-size: 42px
+    margin-bottom: 78px
+
+  .authors-list
+    margin-top: 52px
+
+  .author-profile-short, .author-profile-long
+    margin-bottom: 100px
+    font-size: 22px
+    line-height: 182%
+
+    &.no-img
+      .media-left
+        display: none
+
+    .media-left
+      padding-top: 10px
+      padding-right: 24px
+
+    .media-text
+      a
+        font-weight: 600
+
+    h4.media-heading
+      font-size: 30px
+
+.author-detail
+  margin-top: 94px

data/app/assets/stylesheets/virgo/posts.sass

@@ -0,0 +1,782 @@
+@import common
+@import bootstrap/variables
+
+body.posts.index .alert
+  margin-bottom: 0
+
+body.posts.index.admin .alert
+  margin-bottom: 20px
+
+.post-content-inner
+  max-width: 1170px
+  margin: 0 auto
+
+@media (min-width: $screen-md)
+  .post-content
+    padding-right: 32px
+
+body.posts.show
+  .list-signup
+    margin-left: 100px
+    margin-right: 100px
+  @media (max-width: $screen-lg)
+    .list-signup
+      margin-left: 80px
+      margin-right: 80px
+  @media (max-width: $screen-md)
+    .list-signup
+      margin-left: 60px
+      margin-right: 60px
+  @media (max-width: $screen-sm)
+    .list-signup
+      margin-left: 40px
+      margin-right: 40px
+  @media (max-width: $screen-xs)
+    .list-signup
+      margin-left: 20px
+      margin-right: 20px
+
+.page-container
+  padding-top: 60px
+
+.headline
+  font-weight: 900
+  font-size: 20px
+  color: $body_text_color
+  line-height: 108%
+  margin-bottom: 12px
+
+body.categories.show
+  background: $home_bg
+
+  .list-signup
+    margin-top: 0
+
+  .feature-heading .feature-post-box .post-headline
+    font-size: 62px
+
+.category-posts.resources-page
+  padding-left: 35px
+  padding-top: 4px
+
+  .category-posts-inner
+    max-width: 1300px !important
+
+  .content-col
+    padding-bottom: 100px
+
+  .category-header-wrap
+    text-align: left
+
+  .category-header
+    max-width: 100%
+    padding-left: 0
+    padding-right: 0
+    margin: 4px auto 34px auto
+
+  .post-short
+    padding-bottom: 14px
+    margin-bottom: 0
+
+  .resource-posts
+    padding: 0 0 0 20px
+    margin-bottom: 55px
+    font-size: 20px
+    line-height: 2em
+
+.category-posts
+  background: $home_bg
+
+  .category-header
+    display: inline-block
+    text-align: center
+    padding: 14px 40px 0
+    margin: 4px auto 50px auto
+    border-bottom: 6px solid #000
+    text-transform: uppercase
+
+  .category-header-wrap
+    text-align: center
+
+.category-posts, .column-posts, .tag-posts
+  padding-top: 16px
+
+.column-posts
+  min-height: 600px
+
+@media (min-width: $screen-md)
+  .post-content-col
+    margin-top: 20px
+
+.post, .post-full-wrap
+  +book_font
+  color: #000
+  margin-bottom: 28px
+  padding-bottom: 84px
+
+  // this is solely here to feed to the outbrain crawler, hide it from the user
+  #feature-thumb
+    display: none
+
+  &.post-full
+    border-bottom: none
+    padding: 27px 19px 0 26px
+
+    @media (max-width: $screen-sm-max)
+      padding-top: 53px
+
+    @media (min-width: $screen-lg)
+      padding-top: 7px
+
+    @media (max-width: $screen-xs-max)
+      padding: 0
+
+    .post-tag, .category-label
+      background: $post_bg
+      border: none
+      +heavy_font
+      font-size: 18px
+      padding: 9px 17px
+      margin-left: -10px
+      color: #000
+
+    .post-subhead
+      padding: 21px 0 38px 0
+      font-size: 24px
+      line-height: 1.5em
+      font-weight: 600
+
+    .author-info-wrap
+      @media (max-width: $screen-xs-max)
+        margin-top: 62px
+      @media (max-width: $screen-sm)
+        margin-top: 82px
+        margin-bottom: 15px
+
+    .author-info
+      font-size: 18px
+      display: inline-block
+      margin: 17px 10px 4px 0
+
+      .c-bull
+        &:before
+          content: "•" !important
+
+      a
+        color: $gray_text_color
+
+      .inner
+        padding: 0.067em 0
+        background: $post_bg
+        box-shadow: 10px 0 0 $post_bg, -10px 0 0 $post_bg
+
+    .share-links-wrap
+
+    .post-body
+      margin-top: 28px
+
+
+  &.post-short
+    text-align: left
+
+    &:last-child
+      border-bottom: none
+
+    .share-links-wrap
+      margin-top: 19px
+
+    .image-wrap
+      img
+        cursor: pointer
+
+    .post-headline
+      font-size: 30px
+      line-height: 1.24em
+
+      a
+        +heavy_font
+
+        &:hover
+          text-decoration: none
+          color: $hover_color
+
+    .author-info
+      font-size: 19px
+      margin-top: 7px
+
+    .post-body
+      margin: 8px 0 0 0
+      font-size: 20px
+      color: $text_gray
+
+      &, p, span, a
+        font-weight: 300
+
+  a
+    color: $light_blue
+
+
+  .pub-date
+    color: #888
+
+  .post-headline
+    font-size: 33px
+    line-height: 1.1em
+    margin-bottom: 0.3em
+
+    a
+      color: $body_text_color
+      font-weight: 700
+
+  .post-short-img
+    display: block
+    min-height: 288px
+    +img_background
+    background-position: center
+    position: relative
+    margin-bottom: 18px
+
+  .post-subhead
+    font-size: 20px
+    font-weight: 700
+    margin: 14px auto 18px 7px
+    color: #000
+    border-bottom: 1px solid $light_gray
+
+
+  .author-info
+    font-weight: 300
+    font-size: 22px
+    font-style: italic
+
+    span.muted
+      color: $gray_text_color
+
+    .comment-info
+      display: inline-block
+      width: 105px
+      overflow: visible
+
+      &:hover
+        text-decoration: none
+        color: inherit
+
+      .c-bull
+        &:before
+          content: "/"
+          color: #868686
+
+  .title-box
+    padding-bottom: 32px
+    height: auto
+
+  .post-body
+    margin-top: 56px
+
+    &, p, span, a
+      color: $body_text_color
+      font-size: 22px
+      font-weight: 400
+      line-height: 1.62em
+
+    @media (max-width: $screen-xs-max)
+      font-size: 20px
+
+    ul
+      margin: 38px 0 46px 21px
+
+      li
+        margin-bottom: 20px
+
+    p
+      margin: 0 0 25px 0
+
+    strong, strong *
+      font-weight: 600
+
+    h1, h2, h3, h4
+      margin-top: 38px
+      font-weight: 700
+      text-align: left
+      margin-bottom: 10px
+      +book_font
+
+    h1
+      font-size: 44px
+      margin-bottom: 20px
+
+    h2
+      font-family: 'Bureau Grotesque Extra', sans-serif
+      font-size: 1.8em
+      padding-top: 20px
+
+    h3
+      font-size: 28px
+
+    h4
+      font-size: 24px
+
+    strong, b
+      font-weight: 600
+
+    img
+      margin: 12px auto 0 auto
+
+    .image-wrap.with-caption
+      img
+        margin-bottom: 0
+
+  .post-citation
+    &, a
+      font-style: italic
+      text-align: right
+      color: #999
+      font-size: 17px
+      font-weight: 300
+
+  .author-avatar
+    display: none
+    width: 40px
+    height: 40px
+    margin-right: 4px
+
+    img
+      width: 100%
+      float: left
+      margin-top: 10px
+
+  .read-more-link
+    clear: both
+    float: right
+    color: $light_blue
+    font-style: italic
+    font-size: 22px
+
+  .read-more-link-wrap
+    width: 100%
+    clear: both
+    margin-top: 10px
+
+  .pull-quote
+    *
+      font-size: 48px
+      line-height: 1.12em
+
+    @media (min-width: $screen-md)
+      padding: 18px 70px
+
+    .pull-quote-content
+      font-weight: 600
+
+    .bottom-line
+      display: block
+      max-width: 100px
+      border-bottom: 8px solid #000
+      margin-top: 18px
+
+  .block-quote
+
+@media (max-width: $screen-sm)
+  .title-box
+    left: -5px
+  .post-content-col .post .post-body
+    margin-top: 0
+
+.image-wrap
+  text-align: center
+  margin-bottom: 12px
+
+  br
+    display: none
+    height: 0
+  img
+    margin-bottom: 0
+
+  .image-caption, .image-credit
+    font-size: 14px
+    line-height: 100%
+    font-style: italic
+    text-align: center
+    margin-top: 12px
+
+  .image-caption
+    margin-top: 10px
+
+.post-img
+  margin: 12px auto 0 auto
+  padding: 12px 12px 0 12px
+  max-width: 100%
+
+.sidebar-header
+  padding: 12px 20px
+  color: #fff
+
+  h3
+    display: inline-block
+    color: #fff
+    border-bottom: 4px solid #fff
+    text-transform: uppercase
+    font-size: 21px
+    margin-bottom: 0
+
+  #menu-toggle
+    cursor: pointer
+    font-size: 18px
+    z-index: 999
+    display: block
+    color: #fff
+    opacity: 1
+
+#sidebar-wrapper
+  float: left
+  z-index: 10
+  overflow-y: hidden
+  min-height: 1500px
+
+  @media (max-width: $screen-sm-max)
+    display: none
+
+  .posts-sidebar
+    overflow-y: auto
+    position: absolute
+    min-height: 1500px
+    background: $body_text_color
+
+
+.no-sidebar .post-banner-img .post-banner-inner,
+.no-sidebar .post-content
+  max-width: 1300px
+
+.post-banner-inner
+  height: auto
+  padding: 0 15px
+  max-width: 1200px
+  margin: 0 auto
+
+.no-sidebar
+  #sidebar-wrapper
+    display: none
+
+  #page-content-wrapper
+    padding-left: 0
+    background: $post_bg
+
+  .below-post
+    max-width: 1300px
+    margin: 50px auto
+    padding: 0 15px 0 36px
+
+    @media (max-width: $screen-sm-max)
+      padding: 0 15px
+
+@media (max-width: $screen-md-max)
+  #sidebar-wrapper
+    display: none
+
+body.posts.show
+  .page-group
+    max-width: none
+
+
+.post-sidebar-thumb
+  position: relative
+  cursor: pointer
+  padding: 12px 20px 16px 20px
+  display: block
+
+  &:hover
+    text-decoration: none
+
+  .post-sidebar-thumb-img
+    +img_background
+    position: relative
+    padding: 12px
+    min-height: 130px
+    width: 100%
+
+
+  .pub-date
+    color: #6e6e6e
+    +book_font
+    font-style: italic
+    font-size: 16px
+    margin: 6px 0 0 0
+
+  .headline
+    font-weight: 500
+    font-size: 18px
+    color: #fff
+    line-height: 142%
+    margin-bottom: 12px
+
+.below-post
+  padding: 50px 36px 0 266px
+  background: $post_bg
+
+
+.post-banner-img
+  width: 100%
+  +img_background
+  position: relative
+
+  .overlay
+    z-index: 1
+    position: absolute
+    width: 100%
+    height: 100%
+    opacity: 0.50
+    background: #000
+    top: 0
+    left: 0
+
+.post-banner-img, .post-banner-img .title-col
+  height: 440px
+
+  @media (max-width: $screen-xs-max)
+    height: 225px
+
+.post-banner-img .title-col
+  @media (min-width: $screen-sm)
+    margin-left: 18px
+
+.category-label, .post-tag
+  padding: 5px 9px
+  border: 2px solid #888
+  color: #888
+  text-align: center
+  display: inline-block
+  text-transform: uppercase
+  +heavy_font
+  font-weight: 400
+  font-size: 14px
+
+.post-content
+  background: $post_bg
+
+  &.no-img
+    margin-top: 0
+
+    .post-full
+      padding-top: 0
+
+    .author-info-wrap
+      @media (max-width: $screen-xs-max)
+        margin-top: 0
+
+  .divider
+    border-bottom: 8px solid #000
+    max-width: 100px
+
+  .share-links-wrap
+    margin-top: 15px
+
+  .post-bottom
+    padding-top: 20px
+    padding-bottom: 75px
+
+    @media (min-width: $screen-md)
+      padding-left: 26px
+
+
+.post-tag-list
+  text-transform: uppercase
+  +light_bold_font
+  margin-top: 40px
+  font-size: 24px
+
+  li
+    padding-left: 2px
+    padding-right: 2px
+
+  li.title
+    color: #000
+
+  li a, li.slash
+    color: #b9b9b9
+
+.most-popular-posts-box.mini
+  margin-top: 30px
+
+  @media (max-width: $screen-md)
+    margin-top: 10px
+
+  .most-popular-posts-heading
+    padding: 6px 18px 3px 18px
+    text-transform: uppercase
+    border-bottom: 8px solid #000
+
+  ul.popular-posts
+    li.popular-post
+      padding: 0 17px
+
+      .post-headline
+        .text
+          line-height: 27px
+
+      .post-byline
+        line-height: 18px
+
+    .popular-more-link
+      padding: 10px 17px
+
+.posts-index
+  .show-all-link-wrap
+    text-align: center
+    border-bottom: none
+    margin: 0 auto
+    padding: 0 0 32px 0
+
+  .show-all-link
+    display: inline-block
+    padding: 18px 40px
+    color: #fff
+    background: #000
+    text-align: center
+    font-size: 19px
+
+.post-byline
+  &, a
+    color: #888
+    font-style: italic
+
+.author-posts
+  .post-short
+    .post-title
+      font-size: 41px
+
+.blockquote-wrap
+  .blockquote-title
+    font-weight: 600
+    margin-bottom: 20px
+
+blockquote
+  clear: both
+  font-size: 21px
+  line-height: 1.62em
+  color: #333
+  border-left: 5px solid #ccc
+  padding: 15px 20px 15px 20px
+  margin: 32px 0
+  font-style: italic
+
+  p
+    margin: 0 !important
+    padding-bottom: 20px
+
+    &:last-child
+      padding-bottom: 0
+
+  cite
+    clear: both
+    display: block
+    text-align: right
+    margin-top: 5px
+
+.post, .post-banner-img
+  .title-box
+    position: absolute
+    bottom: -44px
+    z-index: 999
+    padding: 0
+
+    @media (max-width: $screen-xs-max)
+      bottom: -22px
+
+    @media (max-width: $screen-sm)
+      bottom: -62px
+
+    .post-tag, .category-label
+      background: #fff
+      border: none
+      color: $dark_color
+      padding: 9px 11px 7px 11px
+      margin-left: -10px
+      font-size: 19px
+
+      @media (max-width: $screen-xs-max)
+        font-size: 14px
+        padding: 7px 9px 5px 9px
+
+  &.no-img
+    &, & .title-col
+      background: $post_bg
+      height: auto
+
+    .title-box
+      position: relative
+      bottom: auto
+      padding-top: 35px
+
+      .category-label
+        border: 2px solid $dark_color
+        margin-left: 5px
+
+      h2.post-title
+        margin-top: 19px
+
+  h2.post-title
+    color: #242424
+    font-size: 57px
+    line-height: 1.26em
+    margin-top: 8px
+    margin-bottom: 0
+
+    @media (max-width: $screen-xs-max)
+      font-size: 38px
+
+    a
+      color: #000
+      +extrabold_font
+
+      &:hover
+        text-decoration: none
+        color: #000
+
+body.browser-mozilla
+  .feature-heading .feature-post-box.long-headline .post-headline,
+  .feature-heading .feature-post-box.extralong-headline .post-headline
+    padding-bottom: 1px
+
+
+.latest-posts-page
+  padding-top: 80px
+
+  .latest-posts-wrap
+
+
+.video-embed-wrap
+  // max-width: 800px
+  margin: 0 auto 15px auto
+
+
+.related-posts
+  .recommendations-head
+    color: $hover_color
+    text-transform: uppercase
+    font-size: 64px
+    line-height: 1em
+    border-bottom: 8px solid $hover_color
+    display: inline-block
+    float: left
+    margin-right: 15px
+
+  .related-post-items
+    .post-thumb-box
+      float: left
+      width: 290px
+
+      .author-info
+        margin-top: 6px
+
+      .post-thumb-box-img
+        height: 186px
+
+      .post-thumb-text .post-thumb-headline
+        font-size: 27px
+
+      &:last-child
+        @media (max-width: 1388px)
+          display: none
+
+.post-comments
+  margin-top: 20px