khaganat-web/static_extra/bulma/sass/style.sass

// 1. Import the initial variables
@import "./node_modules/bulma/sass/utilities/initial-variables"

// 2. Set your own initial variables
//khaganat
$primary: #9073ff
$link: #8530bf
//khanat
$info: #100873
$blue: #6359db
//couleur 3
$link-hover: #6639af
//couleur 5
$text-light: #2d1040
//couleur du fond
$background: #AFAED6

$success: turquoise


// 3. Import the rest of Bulma
@import "./node_modules/bulma/bulma"

// 4. Import your stuff here
#page_body
  background-image: url("/static/khaganat/images/bg7.jpg")


//navbar
html.has-navbar-fixed-top, body.has-navbar-fixed-top
    padding-top: 0rem

.title
  font-family: Ubuntu

.navbar.is-light 
  background-color: transparent
  color: $white

.navbar.is-light .navbar-brand > .navbar-item,
.navbar.is-light .navbar-brand .navbar-link 
  background-color: transparent
  color: $white

.navbar.is-light .navbar-brand > a.navbar-item:hover, .navbar.is-light .navbar-brand > a.navbar-item.is-active,
.navbar.is-light .navbar-brand .navbar-link:hover,
.navbar.is-light .navbar-brand .navbar-link.is-active 
  background-color: $link-hover
  
.navbar.is-light .navbar-brand .navbar-link::after 
  border-color: white

.navbar.is-light .navbar-menu .navbar-link
  background-color: $primary

.navbar.is-light .navbar-burger 
  background-color: $link
  color: white

.navbar.is-light .navbar-burger span
  height: 0.16rem
  width: 1.2rem

.navbar.is-light .navbar-burger.is-active,
.navbar.is-light .navbar-item.has-dropdown:hover .navbar-link,
.navbar.is-light .navbar-item.has-dropdown .navbar-link
  background-color: $link
  color: white
  font-weight: bold

.navbar.is-light .navbar-dropdown 
  border-color: $text-light

.navbar.is-light .navbar-divider
  color: $text-light

//navbar pour les non-mobiles
@media screen and (min-width: 1088px)
  .navbar.is-light .navbar-start > .navbar-item,
  .navbar.is-light .navbar-start .navbar-link,
  .navbar.is-light .navbar-end > .navbar-item,
  .navbar.is-light .navbar-end .navbar-link
    color: white

  .navbar.is-light
    background-color: $link
    color: white

  .navbar.is-light .navbar-brand
    display: none

  .navbar.is-light .navbar-brand img
    display: none

  .navbar.is-light .navbar-brand > a.navbar-item:hover, .navbar.is-light .navbar-brand > a.navbar-item.is-active,
  .navbar.is-light .navbar-brand .navbar-link:hover,
  .navbar.is-light .navbar-brand .navbar-link.is-active
    background-color: $link

  .navbar.is-light .navbar-start > a.navbar-item:hover, .navbar.is-light .navbar-start > a.navbar-item.is-active,
  .navbar.is-light .navbar-start .navbar-link:hover,
  .navbar.is-light .navbar-start .navbar-link.is-active,
  .navbar.is-light .navbar-end > a.navbar-item:hover,
  .navbar.is-light .navbar-end > a.navbar-item.is-active,
  .navbar.is-light .navbar-end .navbar-link:hover,
  .navbar.is-light .navbar-end .navbar-link.is-active 
    color: white

  .navbar.is-light .navbar-start .navbar-link::after,
  .navbar.is-light .navbar-end .navbar-link::after
    border-color: white

  .navbar.is-light .navbar-item.has-dropdown:hover .navbar-link,
  .navbar.is-light .navbar-item.has-dropdown.is-active .navbar-link
    background-color: $primary
    color: white

  .navbar.is-light .navbar-dropdown a.navbar-item.is-active
    background-color: $link-hover
    color: white

  .navbar.is-light .navbar-item.is-logo
    position: absolute
    left: 50%
    margin-left: -53px // 50% in my case
    height: 100%
    display: flex
    align-items: center
    background-color: white
    padding: 0

  .navbar-item.is-logo:before
    border-right: 1.6rem solid white
    border-bottom: 3.2rem solid $link
    content: " "
    width: 20%

  .navbar-item.is-logo:after
    border-left: 1.6rem solid white
    border-bottom: 3.2rem solid $link
    content: " "
    width: 20%

  .navbar-item.is-logo img
    max-height: 2rem
    height: 2rem

.navbar.is-light .navbar-item.is-logo:hover
  background-color: white

//navbar pour les mobiles
.navbar-dropdown a.navbar-item:hover
  background-color: $primary
  color: white

.navbar-item,
.navbar-link
  font-weight: bold

@media screen and (max-width: 1087px)
  .navbar-item.is-logo
    display: none
  
//bouton de la navbar
.button.is-light 
  background-color: $background
  color: white

.button.is-light:hover
  background-color: $link-hover
  color: white

.button.is-link
  background-color: $primary
  border-color: transparent
  color: white

.button.is-link:hover, .button.is-link.is-hovered
  background-color: $link-hover
  border-color: transparent
  color: white

.button.is-white
  background-color: $background
  color: white

.button.is-white:hover
  background-color: $link-hover
  color: white

.button.is-success, .button.is-sucess:hover
  color: white


//footer
@media screen and (min-width: 1088px)
  .footer
    width: 50%

  .footer:before
    border-left: 2.5rem solid transparent
    border-bottom: 2.5rem solid $link
    margin-left: -10%
    content: " "
    width: 20%

  .footer:after
    border-right: 2.5rem solid transparent
    border-bottom: 2.5rem solid $link
    margin-right: -10%
    content: " "
    width: 20%

//footer special mobile
@media screen and (max-width: 1087px)
  .footer
    width: 100%

.footer
    padding: 0
    display: flex
    background-color: $link
    margin: auto auto 0
    color: white
    box-sizing: unset
    text-align: center

.footer ul
   padding: 0.5rem 0.5rem 0.5rem 0.5rem

.footer ul li
   height: 100%
   flex-grow: 1

.footer ul li a   
   display: block
   padding: 1rem  0.5rem
   color: white

.footer a:link, .footer a:visited
   color: white
   font-weight: bold
   text-decoration-style: dotted

//tile
.tile
  max-width: 160ch
  border-radius: 0rem
  
.tile a:link, .tile a:visited
  text-decoration-style: dotted

.tile a:hover
  color: $link-hover

//tile khaganat
.tile.is-primary
  background-color: white  
  color: $text-light
  padding: 1rem 1rem 1rem 1rem
  max-width: 80ch

.tile.is-primary .title, .tile.is-primary a:link
  color: $link

.tile.is-primary a:visited
  color: $primary

.tile.is-primary a:hover
  color: $link-hover

.tile.is-primary:before 
  content: "" 
  position: absolute 
  left: 0px
  top: 0px
  border-color: $background transparent transparent transparent
  border-style: solid 
  border-width: 1.5rem 1.5rem 0rem 0rem 
  height: 0rem
  width: 0rem
  display: block

//tile khanat
.tile.is-info
  background-color: white
  color: $text-light
  padding: 1rem 1rem 1rem 1rem
  max-width: 80ch

.tile.is-info .title, .tile.is-info a:link
  color: $info

.tile.is-info a:visited
  color: $blue

.tile.is-info a:hover
  color: $link-hover

.tile.is-info:before
  content: ""
  position: absolute
  right: 0rem
  top: 0rem
  border-color: transparent $background transparent transparent
  border-style: solid
  border-width: 0rem 1.5rem 1.5rem 0rem
  height: 0rem
  width: 0rem
  display: block

//tile 4 coins
.tile.is-light
  background-color: white
  color: $text-light
  padding: 1rem 1rem 1rem 1rem
  text-align: left
  max-width: 160ch
   
.tile.is-light .title, .tile.is-light a:link
  color: $link

.tile.is-light a:visited
  color: $primary

.tile.is-light a:hover
  color: $link-hover

.tile.is-light:before
  content: ""
  position: absolute
  left: 0rem
  top: 0rem
  border-color: $background transparent transparent transparent
  border-style: solid
  border-width: 1.5rem 1.5rem 0rem 0rem
  height: 0rem
  width: 0rem
  display: block

.tile.is-light:after
  content: ""
  position: absolute
  right: 0rem
  top: 0rem
  border-color: transparent $background transparent transparent
  border-style: solid
  border-width: 0rem 1.5rem 1.5rem 0rem
  height: 0rem
  width: 0rem
  display: block

//tile pour le logo fixe
@media screen and (min-width: 770px)
  .tile.is-fixed
    position: fixed

.tile.is-fixed 
  background-color: transparent

.tile.is-fixed .title
  color: $link

//tile pour le pastebin
.tile.is-paste
  overflow: scroll hidden
  background-color: white

//colonne
//colonne index et page
.column.is-primary .title, .column.is-primary .subtitle
  color: $link
  text-align: center

.column.is-primary, .column.is-primary .image  
   text-align: center

//section retreci
.section
    padding: 1rem 1.5rem

//bas de page courte 
html
  height: 100%

body
  min-height: 100%
  display: grid
  grid-template-rows: auto 1fr auto
  grid-template-columns: 100%