gergelypolonkai-web-jekyll/css/style.sass

---
---

$main-font: sans-serif
$page-background: #333333
$content-background: #ffffff
$content-text: #544240
$header-background: #4d4d4d
$header-text: #ffffff
$menu-background: #f18137
$menu-text: #ffffff
$footer-text: #7f7f7f
$well-background: #ccc
$link-color: #018cb0
$light-color: #666

=border-top-right-radius($value)
  border-top-right-radius: $value
  -moz-border-radius-topright: 2px
  -webkit-border-top-right-radius: $value

=border-top-left-radius($value)
  border-top-left-radius: $value
  -moz-border-radius-topleft: $value
  -webkit-border-top-left-radius: $value

=border-bottom-right-radius($value)
  border-bottom-right-radius: $value
  -moz-border-radius-bottomright: $value
  -webkit-border-bottom-right-radius: $value

=border-bottom-left-radius($value)
  border-bottom-left-radius: $value
  -moz-border-radius-bottomleft: $value
  -webkit-border-bottom-left-radius: $value

=border-radius($tr, $br: $tr, $bl: $br, $tl: $tr)
  +border-top-right-radius($tr)
  +border-bottom-right-radius($br)
  +border-bottom-left-radius($bl)
  +border-top-left-radius($tl)

=background-clip-padding-box
  -moz-background-clip: padding
  -webkit-background-clip: padding-box
  background-clip: padding-box

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6
  color: $content-text

a
  color: $link-color

#main-container
  background-color: $content-background

.popover
  max-width: 100%

.navbar-inverse
  background-color: $menu-background

  a.navbar-brand
    color: $menu-text

  .navbar-nav
    li
      a
        color: $menu-text
        font-weight: bold

    li.open
      background-color: $menu-background

      a.dropdown-toggle
        background-color: $menu-background

    ul.dropdown-menu
      background-color: $content-background
      color: $content-text

      li
        background-color: $content-background
        color: $content-text

        a
          background-color: $content-background
          color: $content-text
          font-weight: normal

article.post
  div.meta
    font-size: 80%
    color: $light-color
    margin-top: .8em
    margin-bottom: .5em

.gist-data
  max-height: 300px
  overflow: auto

body
  background-color: $page-background
  margin: 50px 0 0 0

  .well, .jumbotron
    background-color: $well-background
    color: $content-text

    small
      color: $content-background

  .jumbotron
    margin-top: 20px

  #about-well-image
    img
      padding-right: 1em

  #keywords-button
    font-size: 50%
    color: #7f7f7f
    font-weight: normal
    text-decoration: none

  #keywords-button:hover
    background-color: #4d4d4d
    color: #ffffff
    cursor: pointer

  .keyword-first-letter
    font-weight: bold
    color: #f18137

  .i
    font-style: italic

  .b
    font-weight: bold

  .post
    margin-bottom: 2em

  p.article-date
    text-indent: 0
    font-size: 80%
    color: #7f7f7f

  .paginator
    margin: .5em 0

  .plusone-container
    margin-left: 1em
    display: inline

.tag-label
  +border-radius(2px, 2px, 0, 0)
  +background-clip-padding-box
  float: left
  position: relative
  background: #ccc
  margin-left: 16px
  margin-top: 3px
  padding: 0 15px 0 14px
  line-height: 24px
  font-size: 12px
  color: #555
  display: inline-block

.tag-label:first-child
  margin-left: 7px

.tag-label:before
  position: absolute
  left: -7px
  top: 0
  width: 0
  height: 0
  display: block
  border-style: solid
  border-width: 12px 7px 12px 0
  border-color: transparent #ccc transparent transparent
  content: ""

/* the "hole" on the left end */
.tag-label:after
  content: ""
  position: absolute
  width: 5px
  height: 5px
  background: $content-background
  top: 9px
  left: -1px
  border-radius: 50%
  box-shadow: inset 0 1px 1px #aaa

.tag-label:hover:before
  border-color: transparent $menu-background transparent transparent

.tag-label:hover
  background: $menu-background
  color: $menu-text
  text-decoration: none

.tag-label:hover:after
  box-shadow: inset 0 1px 1px $menu-background