pan-am/styling.sass

// version 0.2.3

@import "normalize"
@import "noisy-uris/sass_vars/base-noise-uris"
@import "noisy-uris/sass_vars/dark-noise-uris"
@import "noisy-uris/sass_vars/light-noise-uris"
@import "//fonts.googleapis.com/css?family=Libre+Baskerville:400,400italic,700"
@import "//fonts.googleapis.com/css?family=Source+Code+Pro:400,400italic,700,700italic"

// colors

$background: #F8F8F8
$foreground: #111
$footnote-color: #666
$indent-color: #BBB
$rule-color: $indent-color
$block-border-color: $rule-color
$block-background: #DDD
$table-rule-color: #222

%background-noise
  background-image: url($base-noise-005)

// typography

body
  font-family: "Libre Baskerville", Baskerville, Georgia, serif
  @extend %background-noise
  background-color: $background
  color: $foreground
  @media (max-width: 400px)
    font-size: 12px
    margin-left: 10px
    margin-right: 10px
    margin-top: 10px
    margin-bottom: 15px
  @media (min-width: 401px) and (max-width: 600px)
    font-size: 14px
    margin-left: 10px
    margin-right: 10px
    margin-top: 10px
    margin-bottom: 15px
  @media (min-width: 601px) and (max-width: 900px)
    font-size: 15px
    margin-left: 100px
    margin-right: 100px
    margin-top: 20px
    margin-bottom: 25px
  @media (min-width: 901px) and (max-width: 1800px)
    font-size: 17px
    margin-left: 200px
    margin-right: 200px
    margin-top: 30px
    margin-bottom: 25px
    max-width: 800px
  @media (min-width: 1801px)
    font-size: 18px
    margin-left: 20%
    margin-right: 20%
    margin-top: 30px
    margin-bottom: 25px
    max-width: 1000px
  line-height: 1.3
  text-align: justify
  -moz-hyphens: auto
  -ms-hyphens: auto
  -webkit-hyphens: auto
  hyphens: auto

p
  margin-top: 10px
  margin-bottom: 18px

em
  font-style: italic

strong
  font-weight: bold

// headers

h1, h2, h3, h4, h5, h6
  font-weight: bold
  padding-top: .25em
  margin-bottom: .15em

header
  &>h1
    border: none
    padding: 0
    margin: 0
    font-size: 225%
  &>h2
    border: none
    padding: 0
    margin: 0
    font-style: normal
    font-size: 175%
  &>h3
    padding: 0
    margin: 0
    font-size: 125%
    font-style: italic
  line-height: 2.25*1.1em
  padding-bottom: 0.7em
  border-bottom: 1px solid $rule-color
  margin-bottom: 1.2em
  & + h1
    border-top: none
    padding-top: 0px

h1
  border-top: 1px solid $rule-color
  &:first-of-type
    border: none
  padding-top: 15px
  font-size: 150%
  margin-bottom: 10px

h2
  font-size: 125%
  font-style: italic

h3
  font-size: 105%
  font-style: italic

// horizonal rules

hr
  border: 0px
  border-top: 1px solid $rule-color
  width: 100%
  height: 0px
  & + h1
    border-top: none
    padding-top: 0px

// lists

%list
  font-size: 90%
  margin-top: 10px
  margin-bottom: 15px
  padding-left: 30px

ul
  @extend %list
  list-style: circle

ol
  @extend %list
  list-style: decimal

ul ul, ol ol, ul ol, ol ul
  font-size: inherit

li
  margin-top: 5px
  margin-bottom: 7px

// quotes

q
  font-style: italic
  font-size: 90%

blockquote
  @extend q
  quotes: none
  border-left: .35em $indent-color solid
  padding-left: 1.15em
  margin: 0 1.5em 0 0

blockquote blockquote, ol blockquote, ul blockquote, blockquote ol,
blockquote ul
  font-size: inherit

// links

a, a:link, a:visited, a:hover
  color: inherit
  text-decoration: none
  border-bottom: 1px dashed $foreground
  &:hover
    border-bottom-style: solid
  &.footnoteRef
    border-bottom: none
    color: $footnote-color

// inline code and code blocks

code
  font-family: "Source Code Pro", "Consolas", "Monaco", monospace
  font-size: 85%
  @extend %background-noise
  background-color: $block-background
  border: 1px solid $block-border-color
  padding: 0px 0.15em 0px 0.15em
  -webkit-border-radius: 3px
  -moz-border-radius: 3px
  border-radius: 3px

pre
  margin-right: 1.5em
  display: block
  &>code
    display: block
    font-size: 70%
    padding: 10px
    -webkit-border-radius: 5px
    -moz-border-radius: 5px
    border-radius: 5px
    overflow-x: auto

blockquote pre, ul pre, ol pre
  margin-left: 0
  margin-right: 0
  &>code
    font-size: (70%/0.9)

// tabular data

caption
  &:empty
    display: none
  font-size: 80%
  font-style: italic
  text-align: right
  margin-bottom: 5px

table
  width: 100%
  margin-top: 1em
  margin-bottom: 1em
  & + h1
    border-top: none

tr
  td, th
    padding: 0.2em 0.7em

  &.header
    border-top: 1px solid $table-rule-color
    border-bottom: 1px solid $table-rule-color
    font-weight: 700

  &.odd
    @extend %background-noise
    background-color: #EEEEEE

  &.even
    @extend %background-noise
    background-color: #CCCCCC

tbody:last-child // last row
  border-bottom: 1px solid $table-rule-color

// definition lists

dt
  font-weight: 700
  &:after
    font-weight: normal
    content: ":"

dd
  @extend blockquote
  margin-bottom: 10px

// images

figure
  margin: 1.3em 0 1.3em 0
  text-align: center
  padding: 0px
  width: 100%
  @extend %background-noise
  background-color: $block-background
  border: 1px solid $block-border-color
  -webkit-border-radius: 8px
  -moz-border-radius: 8px
  border-radius: 8px
  overflow: hidden

img
  display: block
  margin: 0px auto
  padding: 0px
  max-width: 100%

figcaption
  @extend caption
  margin: 5px 10px 5px 30px

// footnotes

.footnotes
  color: $footnote-color
  font-size: 70%
  font-style: italic
  // don't use an underline for the return link icon
  li p:last-child a:last-child
    border-bottom: none