styles.sass

// Fix navbar hamburgering too early
$navbar-breakpoint: 720px // when logged_in navbar items start overlapping

// Extend from Bulma defaults
@import "./node_modules/bulma/bulma.sass"

input
  &[disabled],
  fieldset[disabled] &
    -webkit-text-fill-color: $input-disabled-color
    opacity: 1

.has-text-no-underline
  text-decoration: none !important

// Slightly reduce navbar height
.navbar-item
  padding: 0.3rem 0.75rem

.image .is-rounded
  object-fit: cover

body
  scroll-behavior: smooth
  height: 100%


body, .panel
  font-size: .9rem


#wrapper
  position: relative


.router
  min-height: 50vh


.section
  padding: 2rem 1.5rem 3rem


@media (max-width: 768px)
  .section
    padding-top: 1rem



.content a
  display: inline-block
  word-break: break-all


a.has-text-grey-light:hover
  color: hsl(0, 0%, 48%)!important


.responsive-video-outer
  max-width: 560px


.responsive-video-inner
  overflow: hidden
  position: relative
  padding-top: 25px
  padding-bottom: 56.25%
  height: 0


.responsive-video-inner iframe
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%


// https://github.com/jgthms/bulma/issues/727
.fix-bulma-centered-text
  display: inline-block !important


.content s
  opacity: 0.65


.border-radius-small
  border-radius: 2px


// responsive table style
.table .responsive-label
  display: none


@media screen and (max-width: 800px)
  .table td.responsive-inline-block
    display: inline-block
    text-color: inherit

  .is-responsive
    width: 100%
    border-collapse: collapse
    border-spacing: 0
    display: block
    position: relative


  .responsive-bold
    font-weight: bold


  .table.is-responsive .responsive-label
    display: inline

  .table.is-responsive td
    margin: 0
    padding: 0 .5em
    vertical-align: top

  .is-responsive thead
    display: none

  .is-responsive tbody
    display: block
    width: 100%
    position: relative

  .is-responsive tbody tr
    border-bottom: 1px solid #EEE
    display: block
    vertical-align: top
    padding-bottom: 1rem

  .is-responsive tr
    text-align: left
    border: none

  .is-responsive td
    border: none
    display: block
    min-height: 1.25em
    text-align: left !important

  .is-responsive td:first-child
    padding-top: 1rem

  .is-responsive td:empty
    display: none