rescue/khaganat-web
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases Packages Wiki Activity

implantation CSS

Browse source 
navbar, footer, tile, column
couleur de Khaganat et Khanat
This commit is contained in:
deed 2019-07-18 12:47:30 +02:00
parent 741d36dad6
commit 9581ca16ab
2 changed files with 353 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
khaganat/templates/khaganat/base.html
View file

@ -40,10 +40,22 @@
</section>
<footer class="footer">
<div class="container">
{% get_page 'legal' as legal_page %}
<ul>
<li><a href="https://khaganat.net/wikhan/fr:licence">Licences</a></li>
{% if legal_page %}<li><a href="{% url 'page' 'legal' %}">{{ legal_page.title }}</a></li>{% endif %}
{% get_page 'licences' as licences_page %}
{% if licences_page %}
<a href="{% url 'page' 'licences' %}">{{ licences_page.title }}</a>
{% endif %}
--
{% get_page 'legal' as legal_page %}
{% if legal_page %}
<a href="{% url 'page' 'legal' %}">{{ legal_page.title }}</a>
{% endif %}
--
{% get_page 'contact' as contact_page %}
{% if contact_page %}
<a href="{% url 'page' 'contact' %}">{{ contact_page.title }}</a>
{% endif %}
</ul>
</div>
</footer>

331
static_extra/bulma/sass/style.sass
View file

@ -2,10 +2,341 @@
@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
// 3. Import the rest of Bulma
@import "./node_modules/bulma/bulma"
// 4. Import your stuff here
//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-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
.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 > .navbar-item,
.navbar.is-light .navbar-brand .navbar-link
background-color: white
color: white
margin-left: auto
.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-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 pour les mobiles
.navbar-dropdown a.navbar-item:hover
background-color: $primary
color: white
.navbar-item,
.navbar-link
font-weight: bold
//bouton de la navbar
.button.is-link
background-color: $primary
border-color: transparent
color: #fff
.button.is-link:hover, .button.is-link.is-hovered
background-color: $primary
border-color: transparent
color: #fff
//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%
.footer:after
border-right: 2.5rem solid transparent
border-bottom: 2.5rem solid $link
margin-right: -10%
//footer special mobile
.footer
padding: 0
display: flex
background-color: $link
margin: 0 auto
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
.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 img
height: 24px
.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
.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 les pages
.tile.is-success
background-color: white
color: $text-light
border-radius: 2rem
padding: 1rem 1rem 1rem 1rem
.tile.is-success .title, .tile.is-success a:link
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, .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
color: $link
text-align: center
//section retreci
.section
padding: 1rem 1.5rem