style.sass

/*
  Theme Name: Quest WP Theme
  Theme URI: 
  Author: Will Jones
  Author URI: 
  Description: Custom theme for the Quest website.
  Version: 0.1
  License: GNU General Public License v2 or later
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
  Tags: responsive, newspaper, 
  Text Domain: questwptheme

  This theme, like WordPress, is licensed under the GPL.
  Use it to make something cool, have fun, and share what you've learned with others.

/***************************   COLORS   ****************************/
$reedred: #5E0501
$brightred: #AA1913
$green: #656B0C
$darkblue: #105591
$lightblue: #0A60AA
$gutter: 2rem
$maxwidth: 1200px

/**************************   TYPOGRAPHY   **************************/
body
  font-family: Georgia, serif
  color: rgb(51,51,51)
  background: $reedred
  margin: 0
  -webkit-font-smoothing: antialiased !important
  -moz-osx-font-smoothing: grayscale
  margin-top: 50px
  font-size: 18px
  @media screen and (max-width: 767px)
    font-size: 16px
a, a:visited
  color: $lightblue

h1, h2, h3, h4
  font-family: 'Lora', Georgia, serif
  font-weight: bold
  -webkit-font-smoothing: antialiased !important
  -moz-osx-font-smoothing: grayscale
  

h1 a, h2 a, h3 a, h4 a
  color: inherit
  text-decoration: none
  &:hover
    text-decoration: underline
  &:active
    color: $darkblue
    text-decoration: underline
img
  max-width: 100%
  height: auto
article
  padding: 1rem
  @media screen and (max-width: 767px)
    padding: 0
    .headline
      font-size: 1.5em
    .subtitle
      font-size: 1.1em
  p
    line-height: 1.8em
  img
    max-width: 100%
    height: auto
  .wp-caption
    max-width: 100%
  li
    line-height: 1.8em



.featured-headline
  margin: 0.5em 0 0
  a
    color: inherit

.headline
  font-size: 2.2em
  text-align: center

.subtitle
  font-size: 1.5em
  text-align: center
  font-style: italic
  font-weight: normal
  font-family: Georgia, serif

.center
  text-align: center

.text-right
  text-align: right

.pagination-container
  margin: 0.6em 0 0.6em

.page-numbers, a.page-numbers
  background: none
  display: inline-block
  margin: 0.2em 0 0.2em
  color: rgb(100,100,100)
  padding: 0.2em 0.5em
  font-weight: bold
  text-decoration: none
  border-radius: 2px
  border: 1px solid rgb(248,248,248)
  &.current
    color: $reedred

a.page-numbers:hover, a.page-numbers:active
  border: 1px solid rgb(230,230,230)
  border-radius: 2px
  color: rgb(51,51,51)
  background: linear-gradient(rgb(255,255,255), rgb(248,248,248))
  box-shadow: inset 0px 1px 0px rgba(255,255,255, 0.8), 0px 1px 3px rgba(0,0,0,0.1)

/****************************   TABLES  ****************************/
article table
  border-spacing: 0
  td
    border-bottom: 1px solid #eee
    padding: 0.5em
  th
    border-color: $reedred


/***************************   LAYOUT   ****************************/
.section
  clear: both
  padding: 0
  margin: 0

.main-wrapper
  overflow: auto
  background: white

.center-container
  margin: 0 auto
  padding: 0
  max-width: $maxwidth

.left
  width: 66.66%
  float: left
  box-sizing: border-box
  border-right: 1px solid #ddd
  box-shadow: 0 0 5px rgba(0,0,0,0.2)

.right
  width: 33.33%
  float: left

@media screen and (max-width: 767px)
  .left
    width: 100%
  .right
    display: none

/* Background Colors */
#featured-news
  /* style for news stories on front page */
  $border-width: 0.25
  border: ($border-width * $gutter / 2) $darkblue solid
  border-left: ($border-width * $gutter / 2) $darkblue solid
  background: white
  padding: 0
  margin: 0
  .story-list
    padding: 0 ((1-$border-width) * $gutter / 2) 0
  h3
    a
      color: white
      font-size: 1.2em
    background: $darkblue
    margin: 0 0 0.5 * $gutter/2 0
    padding: 0.75 * $gutter/2  ((1 - $border-width) * $gutter/2) 0.2 * $gutter/2
#featured-letters
  .story-list
    h4
      font-size: 1rem
      
.lightblue
  background: $lightblue
  color: white
.darkblue
  background: $darkblue
  color: white
  a
    color: white
.white
  background: white

.col
  display: block
  float: left
  // 1.5 * 2 = 3 rems for gutter
  padding: 1rem 2rem 1rem
  box-sizing: border-box
  &:first-child
    // 3 rems for left gutter
    padding-left: 2rem
  &:last-child
    // 3 rems for right gutter
    padding-right: 2rem
.group
  clear: both
  &:after, &:before
    content: ""
    display: table
  &:after
    clear: both
// Widths of the columns out of 12 cols
.span2
  width: 16.66%
.span3
  width: 25%
.span4
  width: 33.33%
.span5
  width: 41.66%
.span6
  width: 50%
.span7
  width: 58.33%
.span8
  width: 66.66%
.span9
  width: 75%
.span10
  width: 83.33%
.span12
  width: 100%
.padded
  box-sizing: border-box
  padding: 0 2rem
@media screen and (max-width: 767px)
  .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span12
    width: 100%
  .col
    padding: 1rem
    &:first-child, &:last-child
      padding: 1rem
/* Lists of Stories */
.story-list
  list-style-type: none
  margin: 0
  padding: 0
  li
    box-sizing: border-box
    margin: 0
    padding: 0.5em 0
    border-bottom: 1px solid rgb(200,200,200)
    &:nth-of-type(1)
      h4
        font-size: 1.4em
  h2.headline
    font-size: 1.3em
    color: black
    opacity: 0.75
    a
      text-decoration: none
      color: inherit
    &:hover
      opacity: 1
  h3
    background: $reedred
    display: inline-block
    a
      color: white
    text-align: center
    padding: 0.3rem 0.5rem 0.3rem
    font-size: 1em
    margin: 0
  h4
    color: $darkblue
    font-size: 1em
    padding: 0.1rem 0 0.1rem
    margin: 0
  p
    font-size: 0.9em
    margin: 0.5em 0
  .byline
    font-size: 0.8rem


/***************************   HEADER   ****************************/
.admin-bar
  .header
    top: 32px

.header
  padding: 0.2rem 2rem 0.1rem
  box-sizing: border-box
  overflow: auto
  background: white
  color: $reedred
  top: 0
  left: 0
  z-index: 100
  position: fixed
  @media screen and (max-width: 767px)
    background-color: white
    margin: 0
    padding: 0.2rem 0 0
.mobile-header
  display: inline-block
  @media screen and (max-width: 767px)
    display: block
    border-bottom: 1px solid rgb(51,51,51)
    height: 45px



/* Quest Icon */
#questQ
  path
    fill: $reedred
  &:hover
    path
      cursor: pointer
#questQsvg
  float: left

/* Title of website i.e. The Reed College Quest */
.title
  padding: 0.7rem 0.5rem 0
  font-size: 1.2em
  display: inline-block
  margin: 0
  @media screen and (max-width: 1060px)
    display: block
    text-align: center
    margin: 0 40px 0 40px
    font-size: 1em

/* The Main Menu */
.main-menu
  margin: 0 0 0 2em
  padding: 0
  display: inline-block
  list-style-type: none
  position: relative
  font-weight: bold
  float: none
  &:hover
    li
      opacity: 0.3
  li
    display: inline-block
    padding: 0.5rem 1rem 0.8rem
    margin: 0
    opacity: 1
    transition: opacity 0.2s
    &:hover
      opacity: 1
    a
      color: inherit
      text-decoration: none
/* Mobile editon */
@media screen and (max-width: 767px)
  .main-menu
    margin-left: 0
    display: block
    // makes sure floats go ~inside~ the container:
    //overflow: auto 
    li
      display: inline-block
      float: left
      width: 50%
      padding: 0
      margin: 0
      text-align: center
      a
        box-sizing: border-box
        display: block
        padding: 1rem
        width: 100%
        color: inherit
        text-decoration: none
        
/* The Search Box */
.header
  .search-box
    display: inline-block
    float: right
    position: relative
.search-box
  position: relative
.search-box-input, .search-box-submit
  margin: 0.5rem 0 0
  font-size: 0.9em
  box-sizing: border-box
.header
  .search-box-input
    width: 10em
    border: none
    &:focus
      width: 15em
.search-box-input
  padding: 0.4rem 1rem 0.4rem 1.75em 
  width: 100%
  transition: width 0.2s ease
  border-radius: 2px
  border: 1px solid rgb(150,150,150)
  color: $reedred
  &:focus
    width: 15em
.search-box-submit
  display: hidden
  width: 5em
  position: relative
  padding: 6px 15px
  left: -8px
  border: none
  background: none
  background-color: white
  color: $reedred
  &:hover
    cursor: pointer
    background-color: $brightred
#search-icon
  position: absolute
  top: 1rem
  left: 0.4rem
  path
    fill: $reedred
// Override mobile appearance
input[type='submit']
  appearance: none
  border-radius: 0

@media screen and (max-width: 767px)
  .header
    .search-box
      margin: 0
    .search-box-input
      width: 100%
      box-sizing: border-box
      &:focus
        width: 100%
  .search-box
    display: block
    float: none
    width: 100%
    margin: 0.5rem 5% 0.5rem
    box-sizing: border-box
  fieldset
    border: none
    padding: none
    margin: none
  .search-box-input
    border: 1px solid rgb(150,150,150)
    width: 90%
    &:focus
      width: 90%
    // Some margin on the left
  .search-box-submit
    width: 0
    // Some margin on the right
    margin: 0 5% 0 0

/* Menu icon */
.mobile
  @media screen and (min-width: 768px)
    display: none
.icon
  background: none
  border: none
  @media screen and (max-width: 767px)
    display: block
  float: left
  position: absolute
  top: 7px
  right: 5px
  path
    fill: $reedred
.active-button
  path
    fill: $lightblue

.navigation-container
  max-height: 800px
  //transition: max-height 0.2s
  margin: 0
  padding: 0
  overflow: hidden
  display: inline
  @media screen and (max-width: 767px)
    background: white
    color: rgb(51,51,51)
    display: block
    &.closed
      max-height: 0
      //transition: max-height 0.2s

/***************************   FOOTER   ****************************/
.footer
  ul
    list-style-type: none
    padding: 0
    margin: 0
    li
      display: inline-block
      padding: 1rem
      margin: 0






/**************************   GALLERY   **************************/
/* Gallery */
.gallery-container
  padding: 1rem 0 2rem
  background: rgb(10,10,10)
  color: white
  width: 100%
  padding: 0
  margin: 0
  overflow: hidden
  position: relative
  visbility: hidden
.featured-gallery
  background: rgb(10,10,10)
  display: block
  margin: 0
  padding: 0
  //width: 500%
  //  max-height: 500px
  top: 0
  left: 0
  //transition: left 2s
  clear: both
  position: relative
  overflow: hidden
  .slide
    width: 100%
    //width: 20%
    box-sizing: border-box
    float: left
    position: relative
    padding: 0
    max-height: 600px
    overflow: hidden
  .headline
    position: absolute
    bottom: 1em
    width: 100%
  .headline a
    display: block
    text-shadow: 0 1px 3px black
  img
    //max-height: 500px
    width: 100%
    margin: 0 auto
  @media screen and (max-width: 767px)
    .slide
      padding: 0
    .headline
      width: calc(100% - 2rem)
      font-size: 1.4em
// Part that give you current location
.counter
  width: 170px
  position: relative
  top: -30px
  padding: 0
  margin: 0 auto
  height: 0
  clear: both
  div
    width: 12px
    height: 12px
    border-radius: 50%
    padding: 0
    margin: 10px 10px
    display: inline-block
    //float: left
    background: white
    transition: opacity 0.2s
    opacity: 0.8
    box-shadow: 0 0 2px #333
    &:hover
      opacity: 1
      cursor: pointer
  .counter-on
    background: $reedred
    transition: opacity 0.2s
    opacity: 1
    &:hover
      background: $reedred
/* positions for the featured images to be in */
//.fp0
//  left: 0
//.fp1
//  left: 20%
//.fp2
//  left: 40%
//.fp3
//  left: 60%
//.fp4
//  left: 80% 
/**************************   IMAGES   **************************/
.full-width
  width: 100%
  //max-height: 600px
  display: block
  margin: 0 auto
.image
  width: 100%
.caption
  margin-top: 0.1rem 0 1rem
  padding: 0 
  font-size: 0.8em


/***************************   COMMENTS   ****************************/
.button
  box-sizing: border-box
  padding: 0.2em 0.5em 0.2em
  border-radius: 2px
  border: 1px solid rgba(51,51,51,0.1)
  text-decoration: none
  display: inline-block
  &:hover, &:active
    border: 1px solid rgba(51,51,51, 0.2)
    box-shadow: inset 1px 1px 2px rgba(255,255,255, 0.2), 1px 1px 3px rgba(0,0,0,0.1)


.comments-container
  margin: 0 -1em 0
  padding: 0 2em 1em
  @media screen and (max-width: 767px)
    padding: 0 1em 1em
#respond
  background: white
  margin: 0
  padding: 1em 0 1em
  border-radius: 4px
  input, textarea
    max-width: calc(100% - 2em)
    font-size: 1rem
    margin: 0.5em 0 0.5em
    border-radius: 2px
    border: 1px solid rgb(200,200,200)
  #submit
    font-family: Georgia, serif
    background: white
    font-size: 1rem
    padding: 0.2em 0.5em 0.2em
    border-radius: 2px
    border: 1px solid rgba(51,51,51,0.1)
    &:hover, &:active
      border: 1px solid rgba(51,51,51, 0.2)
      box-shadow: inset 1px 1px 2px rgba(255,255,255, 0.2), 1px 1px 3px rgba(0,0,0,0.1)

    
ol.commentlist
  list-style-type: none
  padding: 0
  ol, ul
    list-style-type: none
    padding-left: 0.2em
  li
    border: 1px solid #ddd
    border-left: 6px solid $reedred
    padding-bottom: 0.5em
    padding: 1em
    margin-bottom: 1.5em
    margin-right: 1em
    margin-left: 1em
    border-radius: 4px
    background: white
  .comment-body
    padding-bottom: 1em
  .comment-meta
    font-size: 0.8em
    a
      color: rgb(100,100,100)
  .reply a
    padding: 0.2em 0.5em 0.2em
    border-radius: 2px
    border: 1px solid rgb(248,248,248)
    color: rgb(51,51,51)
    text-decoration: none
    &:hover
      border: 1px solid rgb(230,230,230)
      border-radius: 2px
      background: linear-gradient(rgb(255,255,255), rgb(248,248,248))
      box-shadow: inset 0px 1px 0px rgba(255,255,255, 0.8), 0px 1px 3px rgba(0,0,0,0)
  &> li
    margin-left: 0

  

/***************************   PRINTING   ****************************/
@media print
  .right
    display: none
  .header
    display: none
  .comments-container
    display: none
  .left
    width: calc(100%-4em)
    padding: 0 4em 0
    margin: 0
  .footer
    display: none
  body
    font-size: 14px