@import "~bulma/sass/utilities/initial-variables"

// Config vars
$brand-black: #000
$brand-black-invert: #fff

$primary: $brand-black
$primary-invert: $brand-black-invert
$body-color: #333
$black: #2b2523

.navbar .navbar-menu
  box-shadow:none !important

.content .taglist
  list-style: none
  margin-bottom: 0
  margin-left: 0
  margin-right: 1.5rem
  margin-top: 1.5rem
  display: flex
  flex-wrap: wrap
  justify-content: left
  align-items: center
  li
    padding: 0 2rem 1rem 0
    margin-bottom: 1.5rem
    margin-top: 0

// Helper Classes
.full-width-image-container
  width: 100vw
  height: 200px
  position: relative
  left: 50%
  right: 50%
  margin: 2em -50vw
  background-size: cover
  background-position: bottom
  display: flex
  justify-content: center
  align-items: center

.full-width-image
    width: 100vw
    height: 400px
    background-size: cover
    background-position: bottom
    display: flex
    justify-content: center
    align-items: center

.btn
    display: inline-block
    padding: 12px 16px 10px
    font-size: 18px
    font-size: 1rem
    line-height: 1.25
    background-color: #fff
    border: 2px solid #000
    text-decoration: none
    font-weight: 700
    color: #000
    text-align: center
    transition: all .15s ease
    cursor: pointer

.margin-top-0
  margin-top: 0 !important

.navbar-item .icon
  color: $primary
// Override for use of svg's from https://simpleicons.org/
.icon svg
  width: 1.5rem
  height: 1.5rem
  fill: currentColor
.navbar-brand .navbar-item.logo
  padding: 0 1rem
footer.footer
  padding: 0rem 0rem 0rem 0rem
  background-color: transparent

//Menu overrides
$menu-item-color: $white-ter
$menu-item-hover-color: $black !important
$menu-item-hover-background-color: $black
$menu-item-active-color: $brand-black-invert
$menu-item-active-background-color:	$brand-black-invert
$menu-list-border-left: 1px solid $brand-black-invert
$menu-label-color: $white-ter


.menu-label
  font-size: 1em !important
  text-align: left
.menu-list
  list-style: none !important
  text-align: left
.social
  padding: 2em
.social a
    padding: .5em .5em .3em .5em
    border-radius: 1em
    background-color: $white-ter
    margin: .5em
    width: 1em
    height: 1em
    vertical-align: middle
    display: inline

// blog roll
.blog-list-item
  border-radius: 0 !important
  border-left: 4px solid #000 !important
  box-shadow: none !important
  background-color: #fff !important
.blog-list-item.is-featured:before
  border: 2px solid #000
  color: #000
  content: "Featured Blog Post"
  font-size: .8rem
  font-variant: all-small-caps;
  padding: .2rem
  position: relative
  top: -10px
.blog-list-item.is-featured .blog-list-item .featured-thumbnail
  flex-basis: 15%
.blog-list-item header
  display: flex;
  margin-bottom: 1em;
.blog-list-item .featured-thumbnail
  flex-basis: 35%;
  margin: 0 1.5em 0 0;
.blog-list-item .button, .blog-list-item .button:hover
  background-color: #000
  border-color: #000
  border-radius: 0
  color: #fff

.frontpage > div
  max-height: 150px

@import "~bulma"

// responsiveness
+tablet-only
  .blog-list-item .featured-thumbnail
    flex-basis: 50%;

+mobile
  .blog-list-item header
    display: block
  .blog-list-item .featured-thumbnail
    text-align: center;
    max-width: 70%;
    margin: 0 0 1em;

// overrides

a.navbar-item
  max-height: 3rem

.navbar-item img
  max-height: 125px

.has-background-black
  background-color: #000000 !important
