implantation CSS

navbar, footer, tile, column
couleur de Khaganat et Khanat

khaganat/templates/khaganat/base.html

@@ -40,12 +40,24 @@
           </section>
           <footer class="footer"> 
           <div class="container">
+<ul>
+              {% 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 %}
-              <ul>
+              {% if legal_page %}
-                  <li><a href="https://khaganat.net/wikhan/fr:licence">Licences</a></li>
+<a href="{% url 'page' 'legal' %}">{{ legal_page.title }}</a>
-                  {% if legal_page %}<li><a href="{% url 'page' 'legal' %}">{{ legal_page.title }}</a></li>{% endif %}
+{% endif %}
-              </ul>
+--
-          </div>
+              {% get_page 'contact' as contact_page %}
+              {% if contact_page %}
+<a href="{% url 'page' 'contact' %}">{{ contact_page.title }}</a> 
+{% endif %}
+
+</ul>
+</div>
       </footer>
   </body>
 </html>

static_extra/bulma/sass/style.sass

@@ -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