wezm.net/content/screen.sass

$ans-serif:  Carlito, Calibri, sans-serif
$header-colour: #242424

body
  font-family: $ans-serif

  font-size: 16px
  background: #fff
  color: #464646

// HTML5 expectations - should go in reset perhaps
header, footer, nav, article, figure, figcaption
  display: block


p, li, blockquote
  line-height: 1.3


p, pre
  margin: 0 0 1em 0


ul, ol
  margin: 1em 0 1em 1em


ul
  list-style: disc


ol
  list-style: decimal


li
  margin-left: 1em


dl
  dd
    margin-left: 2em


h1, h2, h3, h4, h5, h6
  font-family: $ans-serif
  margin: 0.6em 0 0.5em 0
  color: #111
  font-weight: 500


h1
  font-size: 36px


h2
  font-size: 24px


h3
  font-size: 21px


h4
  font-size: 18px


h5
  font-size: 16px


h6
  font-size: 14px


a
  text-decoration: underline

  &:link, &:visited
    color: #36454F

h1 a
  text-decoration: none

  &:link, &:visited
    color: #111


sup
  vertical-align: super
  font-size: 0.8em


pre, code, tt
  font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "Bitstream Vera Sans Mono", "Menlo", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace

code, tt
  font-size: smaller

pre
  overflow-x: auto
  padding-bottom: 0.25em


blockquote
  border-left: 2px solid #999
  padding-left: 1em
  margin: 0 0 1em 0

figure
  margin: 1em auto
  text-align: center

  &.screenshot
    img
      max-width: 50%

figcaption
  font-size: smaller
  text-align: center
  font-style: italic

img
  max-width: 100%

img.cover-photo
  display: block
  margin: 0 auto

img.lobsters
  position: relative
  top: 2px

video
  max-width: 100%

body > header
  font-family: $ans-serif
  font-size: 18px
  color: white
  padding: 0.5em
  background-color: $header-colour

  a
    -webkit-transition: border-bottom-color 500ms ease-out
    transition: border-bottom-color 500ms ease-out
    border-bottom: 2px solid rgba(255, 255, 255, 0.0)
    &:link, &:visited
      text-decoration: none
      color: white

    &:hover
      border-bottom-color: rgba(255, 255, 255, 1.0)


#menu
  float: right
  padding-right: 0.25em

  li
    font-size: 14px
    font-weight: bold
    text-transform: uppercase
    letter-spacing: 0.5px


#content
  margin: 0 auto
  clear: both
  max-width: 728px
  font-size: 18px

footer
  color: #999
  border-top: 1px solid #999
  margin: 3em 20px 2em
  clear: both

  .copyright
    font-family: $ans-serif
    font-size: 14px
    margin-top: 1em
    display: block

.align-top
  vertical-align: top

.with-border
  border: 1px solid #D8D8D8

.no-border
  border: none
  text-decoration: none

.socials
  margin-top: 1em
  float: right

.social-icon
  margin: 0 0.5em

.social-icon-wide
  margin: 0 0.6em

.home
  h1 > a:first-child
    -webkit-transition: border-bottom-color 500ms ease-out
    transition: border-bottom-color 500ms ease-out
    border-bottom: 2px solid rgba(17, 17, 17, 0.0)

    &:hover
      border-bottom-color: rgba(17, 17, 17, 1.0)

  main
    display: flex
    margin: 0 20px
    margin: 0 auto
    padding: 0 20px
    max-width: 1200px
    min-height: 85vh

#posts
  width: 100%

#projects
  width: 300px
  flex-shrink: 0
  margin-left: 2em

ul.projects
  list-style: none
  margin: 0
  padding-top: 1em

  li
    margin: 1em 0

  img, svg
    width: 32px
    vertical-align: middle
    margin-right: 0.5em

  p
    margin-left: calc(32px + 0.5em)

ul.articles
  list-style: none
  margin: 0
  clear: left

  li
    margin: 0
    padding-top: 1em


body.articles ul.articles li
  height: auto
  padding-top: 0


ul.articles
  li:first-child
    border-top: none
    padding-top: 1em

  abbr
    display: block
    font-size: 12px
    color: #999

  strong
    font-family: $ans-serif
    margin: 0
    font-weight: normal
    display: block
    font-size: 21px

a
  &.more
    display: block
    margin: 1em 0 0 0

  &.active
    font-weight: bold

  &.affiliate
    background: url(/images/dollar.gif) no-repeat top right
    padding-right: 4px


.inline
  list-style: none
  margin: 0

  li
    display: inline

    &:first-child
      margin-left: 0


body.articles #content nav
  padding-bottom: 1em


#search
  margin: 0
  padding: 0
  display: none
  float: left
  margin-right: 20px

  fieldset
    margin: 0
    padding: 0
    border: 0

  label
    font-weight: normal
    padding-right: 10px

  input
    width: 180px


#respond
  margin: 3em 0
  clear: both

  h2
    margin-top: 0

#content
  .published
    font-family: $ans-serif
    color: #999
    padding-bottom: 10px
    font-size: 14px

  .alignleft
    float: left
    margin: 5px 10px 5px 0

  .keyboard-shortcut
    font-family: "Helvetica Neue", Helvetica, "Liberation Sans", "Bitstream Vera Sans", Tahoma, Geneva, Arial, sans-serif
    font-size: 1.5ex

img.alignleft
  float: left
  margin: 5px 10px 5px 0


.feed-icon
  -webkit-transition: opacity 500ms ease-out
  transition: opacity 500ms ease-out
  opacity: 1.0

  &:hover
    opacity: 0.75

.feed-icon-sup
  vertical-align: super

img.comment
  padding-top: 1px

#content .alignright, img.alignright
  float: right
  margin: 5px 0 5px 10px


#content .aligncenter, div.aligncenter, img.aligncenter
  text-align: center
  display: block
  margin: 10px auto

#content
  .clear
    clear: both

  hr
    border: 0
    border-top-width: 1px
    border-style: solid
    border-top-color: #999
    width: 10em
    margin: 0

  .seperator
    text-align: center
    color: #EEE
    margin-bottom: 1em
    font-size: smaller

    hr
      width: 33%
      height: 1px
      display: inline-block
      border: none
      background-color: #eeeeee
      margin: 5px 0.5em

      &.right
        background-image: -webkit-gradient(linear, left center, right center, from(rgb(238, 238, 238)), to(rgb(255, 255, 255)))
        background-image: -webkit-linear-gradient(left, rgb(238, 238, 238), rgb(255, 255, 255))
        background-image: -moz-linear-gradient(left, rgb(238, 238, 238), rgb(255, 255, 255))
        background-image: -o-linear-gradient(left, rgb(238, 238, 238), rgb(255, 255, 255))
        background-image: -ms-linear-gradient(left, rgb(238, 238, 238), rgb(255, 255, 255))
        background-image: linear-gradient(left, rgb(238, 238, 238), rgb(255, 255, 255))
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#eeeeee', EndColorStr='#ffffff')

      &.left
        background-image: -webkit-gradient(linear, right center, left center, from(rgb(238, 238, 238)), to(rgb(255, 255, 255)))
        background-image: -webkit-linear-gradient(right, rgb(238, 238, 238), rgb(255, 255, 255))
        background-image: -moz-linear-gradient(right, rgb(238, 238, 238), rgb(255, 255, 255))
        background-image: -o-linear-gradient(right, rgb(238, 238, 238), rgb(255, 255, 255))
        background-image: -ms-linear-gradient(right, rgb(238, 238, 238), rgb(255, 255, 255))
        background-image: linear-gradient(right, rgb(238, 238, 238), rgb(255, 255, 255))
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#ffffff', EndColorStr='#eeeeee')

table
  &.left_headers, &.top_headers
    border: 1px solid #D8D8D8
    border-collapse: collapse
    margin: 1em 0

  &.left_headers
    td, th
      border: 1px solid #D8D8D8
      padding: 0.3em 0.7em 0.3em 0.7em

  &.top_headers
    td, th
      border: 1px solid #D8D8D8
      padding: 0.3em 0.7em 0.3em 0.7em

  &.left_headers th
    text-align: right

  &.gallery
    border-collapse: collapse
    width: 100%

    td
      padding: 10px 0
      text-align: center
      vertical-align: middle

    img a
      border: none

.vcard .photo
  margin: 0 1em 1em 0

.text-right
  text-align: right

.heading-icon
  height: 20px
  margin-right: 0.25em

// Weather
body.weather

  #content
    max-width: 100%
    margin: 0 20px

  #current > .temperature

    .temperature
      font-family: $ans-serif

    .current
      font-size: 36px

    time
      font-size: smaller

  figure.forecast
    margin: 0 1em 1em 0
    width: 48px
    float: left

  .chart
    clear: both
    width: 100%
    height: 320px

  section, section > .temperature
    clear: both
    margin-top: 2em

  .extreme
    float: left
    margin: 0 2em 2em 0

    time.day
      display: block
      text-align: center

    div, time
      margin: 0.5em 0
      font-family: $ans-serif

  small
    display: block
    font-size: smaller
    margin-top: 1em
    color: #999

@media screen and (max-width: 768px)
  #content
    margin: 0 20px
    font-size: 20px

@media screen and (max-width: 680px)

  nav.search
    li
      display: list-item
      margin: 1em 0 0 0
      font-size: large

  #search
    float: none

  .home main
    flex-direction: column

  #projects
    width: auto
    margin-left: 0
    margin-top: 2em

  ul.projects
    padding-top: 0

@media screen and (max-width: 515px)

  body
    font-size: 20px

  body > header
    text-align: center

  #menu
    float: none
    padding: 0.5em 0 0 0
    line-height: 2

    li
      margin: 0 1em 0 0

  #content
    min-width: 0
    margin: 0 10px

    h1
      font-size: 30px

  body.weather #content
    margin: 0 10px

  ul.articles li
    margin: 0
    padding-top: 0
    height: auto

  #flickr

    header
      margin-left: 1em

    ul
      height: auto

    li, li:first-child
      margin: 0 0 1em 1em

  #respond
    .short
      margin: 0.5em 0 0 0
      display: block

  footer
    margin: 20px 10px

  figure.screenshot
    img
      max-width: 100%