lxhome/assets/styles/web.sass

---
---

@font-face
  font-family: 'Lato'
  src: url('/assets/fonts/Lato-Regular.ttf')  format('truetype')

@font-face
  font-family: 'Lato Bold'
  src: url('/assets/fonts/Lato-Bold.ttf')  format('truetype')


$white-ter: #fafafa
$footer-background-color: $white-ter
$purple: #49438B //#4A448C //#433983
$blue: #82C2E5
$family-primary: 'Lato'
$family-secendary: 'Lato Bold'
$background: $white-ter
$primary: $purple


html, body
  min-height: 100vh
  height: auto
  margin: 0

html.light
  background: $background
  $background: $white-ter

html.dark
  background: $purple
  $background: $purple

@charset "utf-8"
@import "./bulma.sass"
@import "./code.scss"


body.light
  color: $grey-dark
  background: $background
  with: 100%
  height: 100%
  a
    color: $primary
    &:hover
      color: lighten($primary, 30%)

  a.navlink
    border-radius: $radius
    color: $grey-dark

    &:hover
      background: $purple
      color: $light

a.home
  color: $blue !important
  &:hover
    text-decoration: underline


body.dark
  .para
    p, h1, h2, h3, h4, h5, strong
      padding-top: 1em
      padding-bottom: 0.5em
      line-height: 1.5
      color: darken($white, 10%)

  color: $light
  background: $purple
  footer.footer
    background: $purple
  with: 100%
  height: 100%

  a
    color: $white

    &:hover
      color: darken($white, 30%)
  content.post
    text-align: justify
    blockquote
      font-style: italic
    h1
      @extend .is-size-2
    h2
      @extend .is-size-3
    h3
      @extend .is-size-4
    h4
      @extend .is-size-5
    h5
      @extend .is-size-6

    p, h1, h2, h3, h4, h5, strong
      padding-top: 1em
      padding-bottom: 0.5em
      line-height: 1.5
      color: darken($white, 10%)

    strong
      color: white
    p
      text-align: justify

    ul
      list-style: circle
      li
        margin-left: 1em
    a
      color: $blue
      &:hover
        text-decoration: underline

    font-size: 1.3rem

    .highlight
      line-height: 1 !important
      pre
        code
          font-size: 0.8em


    code.highlighter-rouge
      background: darken($purple, 10%)
      color: $light
      border-radius: $radius
      padding: 0.1em 0.2em
      font-size: 0.8em

    .highlight
      margin-top: 1em

  a.post-title-link
    color: $light
    &:hover
      text-decoration: underline

  a.navlink
    border-radius: $radius
    color: $light !important

    &:hover
      background: $light
      color: $grey-dark !important

  .share-page
    margin-top: 2em
    a
      color: $light
      border-radius: $radius

      &:hover
        background: $light
        color: $grey-dark

.column.is-flex.centered
  justify-content: center

.columns.is-flex.centered
  justify-content: center

.text-centered
  text-align: center

.text-justified
  text-align: justify

.cv-button
  margin-top: 3rem

.is-size-1
  font-family: 'Lato Bold' !important


span.info
  padding-right: 10px

ul.details
  a
    color: $light
    border-radius: $radius

    &:hover
      background: $light
      color: $grey-dark

  list-decoration: none
  li
    display: inline
  li.category
    padding: 0.5em

.pad
  padding-right: 5px

.navbar-menu
  a.navbar-item
    color: $purple

.is-rounded
  border-radius: 50%
  border: 3px solid darken($purple, 10%)

footer.footer
  margin-top: 5em


.right-aligned
  justify-content: end

h3.header
  margin-bottom: 1em

.avatar
  width: 150px
  height: 150px