Custom sass para o site tarrafahc.github.io

tarrafahc.css

a, a:hover, a:active, a:visited, a:link
  outline: none
  text-decoration: none

.copyleft
  -moz-transform: scaleX(-1)
  -o-transform: scaleX(-1)
  -webkit-transform: scaleX(-1)
  transform: scaleX(-1)
  display: inline-block

// The ultimade tarrafa hackerbar

$bgDefault    : rgb(248, 248, 248)
$bgHighlight  : rgb(231, 231, 231)
$colDefault   : rgb(49, 47, 43)
$colHighlight : rgb(49, 47, 43)

.navbar-default
  font-family: sans-serif
  background-color: $bgDefault
  border-color: $bgHighlight
  .navbar-brand
    color: $colDefault
    &:hover, &:focus
      color: $colHighlight
  .navbar-text
    color: $colDefault
  .navbar-nav
    > li
      > a
        color: $colDefault
        &:hover,  &:focus
          color: $colHighlight
    > .active
      > a, > a:hover, > a:focus
        color: $colHighlight
        background-color: $bgHighlight
    > .open
      > a, > a:hover, > a:focus
        color: $colHighlight
        background-color: $bgHighlight
  .navbar-toggle
    border-color: $bgHighlight
    &:hover, &:focus
      background-color: $bgHighlight
    .icon-bar
      background-color: $colDefault
  .navbar-collapse,
  .navbar-form
    border-color: $colDefault
  .navbar-link
    color: $colDefault
    &:hover
      color: $colHighlight

@media (max-width: 767px)
  .navbar-default .navbar-nav .open .dropdown-menu
    > li > a
      color: $colDefault
      &:hover, &:focus
        color: $colHighlight
    > .active
      > a, > a:hover, > a:focus,
        color: $colHighlight
        background-color: $bgHighlight

// Detalhes para as tags e autores.

.piece
  display: inline
  padding: 1px
  font-size: 75%
  font-weight: bold
  line-height: 2.5
  color: rgb(255, 255, 255)
  text-align: center
  white-space: nowrap
  vertical-align: baseline
  border-radius: 0.25em
  margin: 2px 3px auto auto

.notations-block
  @extend #sneaky-border
  border-bottom: 2px solid rgba(0, 39, 59, 0.08)
  color: rgb(170, 170, 170)
  padding: 10px 0px
  font-size: 11px

$tagsBgColor: rgb(254, 217, 0)
$tagsFontColor: rgb(49, 47, 43)

.author-piece
  @extend .piece
  background-color: $tagsBgColor
  color: $tagsFontColor

.tag-piece
  @extend .piece
  background-color: $tagsBgColor
  color: $tagsFontColor

// Major Scalling, Content Sizing, Dentre outros.

$bgWrapContentColor: rgb(255, 255, 255)
$boxShadowColor: rgba(44, 44, 44, 0.2)

#wrap-content
  background-color: $bgWrapContentColor
  box-shadow: 1px 1px 3px 1px $boxShadowColor
  max-width: 660px
  padding-left: 20px
  padding-right: 20px
  margin-bottom: 18px
  padding-bottom: 18px
  min-height: 100%
  height: auto !important
  height: 100%
  padding-top: 60px

#sneaky-border
  border-top: 2px solid rgba(0, 39, 59, 0.08)
  border-color: rgba(0, 39, 59, 0.08)

#footer
  @extend #sneaky-border
  clear: both
  padding-top: 14px

#wrap-content > .container
  padding: 60px 15px 0

.container .credit
  padding-left: 20px
  padding-right: 20px

#footer > .container
  padding-left: 15px
  padding-right: 15px

#disqus_thread
  padding: 5%
  margin: auto auto

$bgMasterHeaderColor: rgb(49, 47, 43)
$bgMasterHeaderColorRightSide: rgb(254, 217, 0)
$bgMasterHeaderFontColor: rgb(221, 238, 221)
$bgCardColor: rgb(49, 47, 43)

#masthead
  min-height: 370px
  background-color: $bgMasterHeaderColor
  color: $bgMasterHeaderFontColor
  padding-top: 50px
  h2
    font-size: 55px
    line-height: 1
    padding: 3%
  .well
    margin-top: 16%
    background-color: $bgMasterHeaderColorRightSide
    border-color: $bgMasterHeaderColorRightSide
    color: $bgCardColor

@media screen and (min-width: 768px)
  #masthead h1
    font-size: 100px

.lead
  padding: 5%
  font-size: 16px
  max-width: 378px

.sombra-no-post
  box-shadow: 0px 0px 0px 16px $bgCardColor

.widget-wrapper
  background-color: $bgWrapContentColor
  box-shadow: 1px 1px 3px 1px $boxShadowColor
  margin: 0 0 20px
  padding: 20px