diff --git a/khaganat/static/khaganat/images/logo_khaganat_128px_notrans.png b/khaganat/static/khaganat/images/logo_khaganat_128px_notrans.png new file mode 100644 index 0000000..9dcad93 Binary files /dev/null and b/khaganat/static/khaganat/images/logo_khaganat_128px_notrans.png differ diff --git a/khaganat/static/khaganat/images/logo_khanat_128px_notrans.png b/khaganat/static/khaganat/images/logo_khanat_128px_notrans.png new file mode 100644 index 0000000..6c1b67f Binary files /dev/null and b/khaganat/static/khaganat/images/logo_khanat_128px_notrans.png differ diff --git a/static_extra/bulma/sass/style.sass b/static_extra/bulma/sass/style.sass index 6d49956..ba16ba3 100644 --- a/static_extra/bulma/sass/style.sass +++ b/static_extra/bulma/sass/style.sass @@ -19,6 +19,10 @@ $background: #AFAED6 @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 @@ -30,21 +34,15 @@ html.has-navbar-fixed-top, body.has-navbar-fixed-top background-color: transparent color: $white -.navbar-brand .navbar-item img - max-height: 2rem - height: 2rem - .navbar.is-light .navbar-brand > .navbar-item, .navbar.is-light .navbar-brand .navbar-link background-color: transparent color: $white - //padding: 0.5rem 0.9rem .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: $primary - color: white + background-color: $link-hover .navbar.is-light .navbar-brand .navbar-link::after border-color: white @@ -85,17 +83,16 @@ html.has-navbar-fixed-top, body.has-navbar-fixed-top background-color: $link color: white - .navbar.is-light .navbar-brand > .navbar-item, - .navbar.is-light .navbar-brand .navbar-link - background-color: white - color: white - margin-left: auto + .navbar.is-light .navbar-brand + margin-left: 5% + + .navbar.is-light .navbar-brand img + height: 0 .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: white - color: white + .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, @@ -119,6 +116,36 @@ html.has-navbar-fixed-top, body.has-navbar-fixed-top background-color: $link-hover color: white + .navbar.is-light .navbar-end + margin-right: 5% + margin-left: 0% + + .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 pour les mobiles .navbar-dropdown a.navbar-item:hover background-color: $primary @@ -128,16 +155,36 @@ html.has-navbar-fixed-top, body.has-navbar-fixed-top .navbar-link font-weight: bold +@media screen and (max-width: 1087px) + .navbar-item.is-logo img + height: 0 + //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: #fff + color: white .button.is-link:hover, .button.is-link.is-hovered - background-color: $primary + background-color: $link-hover border-color: transparent - color: #fff + color: white + +.button.is-white + background-color: $background + color: white + +.button.is-white:hover + background-color: $link-hover + color: white //footer @media screen and (min-width: 1088px) @@ -148,30 +195,30 @@ html.has-navbar-fixed-top, body.has-navbar-fixed-top 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: 0 auto + margin: auto auto 0 color: white box-sizing: unset text-align: center -.footer:before - content: " " - width: 20% - -.footer:after - content: " " - width: 20% - .footer ul padding: 0.5rem 0.5rem 0.5rem 0.5rem @@ -299,37 +346,33 @@ html.has-navbar-fixed-top, body.has-navbar-fixed-top display: block -//tile pour les pages -.tile.is-success - background-color: white - color: $text-light - border-radius: 2rem - padding: 1rem 1rem 1rem 1rem +//tile pour le logo +@media screen and (min-width: 770px) + .tile.is-success + position: fixed -.tile.is-success .title, .tile.is-success a:link +.tile.is-success + background-color: transparent + +.tile.is-success .title color: $link -.tile.is-success a:visited - color: $primary - -.tile.is-success a:hover - color: $link-hover - //colonne //colonne index @media screen and (min-width: 770px) - .column.is-primary, .column.is-primary .image - padding-top: 5rem + .column.is-primary .image, .column.is-primary .title + //position: fixed + //top: 50% + //left: 0 .column.is-primary, .column.is-primary .image text-align: center - + .column.is-primary .title color: $link //colonne pour les pages .column.is-success - max-width: 90ch margin: 1rem .column.is-success .title, .column.is-success .subtitle @@ -340,3 +383,13 @@ html.has-navbar-fixed-top, body.has-navbar-fixed-top //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%