brainbaking/themes/brainbaking-minimal/assets/sass/_brainbaking.sass

html body
  font-family: $font-stack
html, body
  scroll-behavior: smooth

  font-size: 1.0rem
  @media (min-width: 768px)
    font-size: 1.05rem
  @media (min-width: 960px)
    font-size: 1.1rem

#logopath
  fill: $accent
  fill-opacity: 1
  stroke: $accent
  stroke-width: 2px

#logobounds
  fill: lighten($accent, 50%)
  fill-opacity: 0
  stroke: $accent
  stroke-width: 5
  stroke-opacity: 1

pre
  code
    font-size: 0.9rem

body 
  margin: 0
  min-height: calc(100vh - 55px)
  color: #333
  padding-top: 55px
  display: flex
  text-align: center
  flex-direction: column

nav, footer
  font-size: 0.85rem
  z-index: 9


.support
  font-size: 1rem
  noscript
    border-left: 5px solid darkred
    padding: 0.5rem

.avatar
  float: right
  margin-top: 0rem
  margin-left: 1.5rem
  img
    border-radius: 50%

.copyright 
    margin: 15px 0

ul 
  list-style: circle

.flexgrid
  display: flex
  flex-direction: column
  justify-content: space-between
  align-items: baseline

  &-8020
    *:nth-child(2)
      opacity: 0.7
    @media (min-width: 600px)
      flex-direction: row

      *:nth-child(1)
        flex: 3 1 15rem
        margin: 0.1em
      *:nth-child(2)
        flex: 1 2 1rem
        text-align: right

ul.small
  padding: 0
  list-style: none

div.highlight 
  padding-top: 1.5rem
  padding-bottom: 1.5rem


a, a:visited, .link
  cursor: pointer
  color: $accent
  text-decoration: none

  &:hover
    color: $grey


h4 a 
  font-weight: normal


pre 
  font-size: 1rem !important

// fix FF letter float - https://stackoverflow.com/questions/6737175/firefox-specific-margin
@-moz-document url-prefix()
  article
    &.post .content > p:first-of-type::first-letter
      margin-top: 10px    

article, main.notes, .txtblock
  margin: auto
  flex: 1 0 auto
  display: block
  line-height: 1.7
  max-width: 750px

  @media (min-width: 1600px)
    max-width: 930px !important

article
  padding-left: 1rem
  padding-right: 1rem
  padding-bottom: 1rem
  text-align: left

  &.post .content > p:first-of-type::first-letter
      font-size: 3.05em
      font-weight: bold
      line-height: 1.1em
      float: left
      margin-right: 10px

  p
    margin: 0 0 20px !important
    word-break: break-word

  blockquote p 
    margin: 0 !important

  a, .link
    border-bottom: 1px solid $accent

    &:hover, &:visited:hover
      border-bottom: 1px solid white
      border-radius: 1px
      color: white
      background-color: $accent

  .inmargin
    display: none
    border-bottom: none

    @media (min-width: 1200px)
      display: block
      right: calc(-600px + 50vw)
      position: absolute

    @media (min-width: 1600px)
      right: calc(-700px + 50vw)


.belowsingle
  background-color: $belowsingle
  border-top: 3px solid $accent
  padding-bottom: 2rem

  .page-header
    border-bottom: 1px solid darken($lightgrey, 20%)


article hr
    margin-top: 60px
    margin-bottom: 60px


.list-tags
  a
    text-decoration: none !important

header
    text-align: center
    margin: auto
    padding-top: 1rem
    padding-bottom: 3rem

    .p-author
      display: none

    h1
      color: $accent
    h2
      margin-top: -1rem
    h2, h3
      font-weight: normal
    h3
      font-size: 1.3rem
      color: grey

h1, h2, h3
  color: $grey

main
  min-height: calc(100vh - 200px)
  padding-top: 3rem
  padding-bottom: 2rem

  footer
    padding-top: 2rem
    padding-bottom: 2rem

kbd
  color: $accent
  border: 1px solid $accent
  font-size: 0.9em
  padding: 2px 4px
  border-radius: 3px
  -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.25)
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.25)
  white-space: nowrap

  &:hover
    color: white
    background-color: $accent

#skiptocontent
  z-index: 100

  a
    padding: 6px
    position: absolute
    top: 100px
    left: -200px
    color: white
    border 1px solid white
    border-top-right-radius: 8px
    border-bottom-right-radius: 8px
    background: black
    -webkit-transition: left 1s ease-out
    transition: left 1s ease-out

    &:focus
      position: absolute
      left: 0px
      top: 100px
      outline-color: transparent
      -webkit-transition: left .1s ease-in
      transition: left .1s ease-in


.sl-wrapper
  .sl-counter
    font-weight: bold
    font-size: 1.2rem !important

  .sl-caption
    text-align: center
    background: rgba(0,0,0,0.65) !important


.nowrap
  white-space: nowrap

table
  width: 100%
  margin-top: 1rem
  margin-bottom: 1rem
  border-collapse: collapse

  tbody
    border-top: 1px solid darkgrey
    tr
      &:nth-child(odd)
        background: #EEEEEE

.tagindex
  .taggrid
    display: grid
    grid-template-columns: repeat(auto-fill, minmax(10em, 1fr))
    column-gap: 1em
    row-gap: 1.2em
  
  h3
    border-bottom: 1px solid darkgrey

  ul
    padding-left: 1em