components/footer-content.php

@@ -25,19 +25,19 @@
   </ul>
 
   <div class="container columns">
-    <section class="col" aria-labelledby="title-footer-section-1">
+    <section class="col-12 col-md-4" aria-labelledby="title-footer-section-1">
       <h2 class="sr-only" id="title-footer-section-1">Droit d'utiliations</h2>
       <p>Les contenus sont diffusé sous licence Creative Common Attribution - Partage à l'Identique 4.0 - hors mention contraire.</p>
       <p>Ces licences vous autorise à partager et copier mes travaux, tant que vous me citiez en source, et que vous autorisez la même chose pour les travaux qui en seraient dérivés. N'hésitez pas à partager ! <i class="text-red icon icon-heart" aria-hidden="true"></i></p>
     </section>
 
-    <section class="col" aria-labelledby="title-footer-section-2">
+    <section class="col-12 col-md-4" aria-labelledby="title-footer-section-2">
       <h2 class="sr-only" id="title-footer-section-2">Crédits</h2>
       <p>Ce site est propulsé par <a href="https://wordpress.org">Wordpress</a></p>
       <p>Le <a href="https://git.kobold.cafe/kazhnuz.space/kspace-wordpress-theme">theme wordpress</a> de ce site est disponible sous licence CC BY-SA et GPL v3. Il utilise <a href="https://forkawesome.github.io/Fork-Awesome/">Fork-Awesome</a> pour les icones.</p>
     </section>
 
-    <section class="col" aria-labelledby="title-footer-section-3">
+    <section class="col-12 col-md-4" aria-labelledby="title-footer-section-3">
       <h2 class="sr-only" id="title-footer-section-3">Informations annexes</h2>
       <p>Kazhnuz Space et les différents sites/services qui le composent sont fourni "tel-quel", sans garantie. Cependant, toute critique, remarque, etc. est la bienvenue. Pour cela, vous pouvez me contacter à kazhnuz [at] kobold [point] cafe ou sur les réseaux sociaux visible plus haut</p>
       <ul>

home.php

@@ -6,16 +6,17 @@
       $page = get_page_by_path( 'home' );
       if ($page != null) {
   ?>
-  <section id="description" class="p-0">
+  <section class="columns p-0">
-    <h1 id="desc-title" class="page-title"><?php echo get_the_title( $page ); ?></h1>
+    <h1 class="col-12 page-title pb-0" id="desc-title"><?php echo get_the_title( $page ); ?></h1>
-    <img class="illustration" alt="Un kobold gris et violet binoclard, avec un manteau noir plein de cables" src="<?php echo get_template_directory_uri();?>/img/zerhjyj-small.webp" height="530px" width="509px" />
+    <div class="col-xl-4 col-12"><img class="illustration" alt="Un kobold gris et violet binoclard, avec un manteau noir plein de cables" src="<?php echo get_template_directory_uri();?>/img/zerhjyj-small.webp" /></div>
-    <div id="description-content">
+    <div class="col-xl-8 col-12">
-        <div aria-libelledby="desc-title" class="post-content"><?php echo $page->post_content; ?></div>
+        <div aria-libelledby="desc-title" class="mb-1"><?php echo $page->post_content; ?></div>
-        <div class="align-centered-block"><a href="/about" class="btn btn-primary">Plus d'info</a></div>
+        <div class="align-center d-none d-block-xl"><a href="/about" class="btn btn-primary">Plus d'info</a></div>
     </div>
   </section>
   <section class="mb-2 d-none d-block-xl">
-    <nav aria-label="Mes sites web">
+    <h1 class="screen-reader-text">Mes sites web</h1>
+    <nav>
       <ul class="no-pills f-row f-between mb-1">
       <?php
         $listmenu = get_nav_menu_locations();

scss/_core.scss

@@ -2,4 +2,4 @@
 @import 'core/bases';
 @import 'core/typography';
 @import 'core/containers';
-//@import 'core/columns';
+@import 'core/columns';

scss/custom/_global.scss

@@ -21,38 +21,13 @@
     &-right {text-align: right;}
 }
 
-#description {
-  display:grid;
-  grid-template-columns: 1fr;
-  grid-template-areas:
-  "title"
-  "illustration"
-  "content";
-  @include xl() {
-    grid-template-columns: 400px auto;
-    grid-template-areas:
-    "title title"
-    "illustration content";
-  }
-}
-
-#desc-title {
-  grid-area: title;
-}
-
-#description-content {
-  grid-area:content;
-}
-
 .illustration {
+  width: 300px;
   display:block;
   margin:auto;
-  grid-area:illustration;
-  max-width:100%;
-  height:auto;
   @include xl() {
+    width: 145%;
     padding-bottom: 0;
-    max-width: 530px;
     margin-bottom: 1.5rem;
     position: relative;
     top: 0px;
@@ -60,13 +35,8 @@
   }
 }
 
-.align-centered-block {
-  text-align:center;
-  padding:1rem;
-}
-
 #page-header {
-    background: get-color("skyblue") url('data: image/svg+xml;utf8,<svg width="800" height="300" xmlns="http://www.w3.org/2000/svg"><circle cx="420" cy="440" r="300" fill="#FDF7E7" /><circle cx="700" cy="510" r="300" fill="#FDF7E7" /><circle cx="-100" cy="510" r="300" fill="#FDF7E7" /><circle cx="150" cy="380" r="150" fill="#FDF7E7" /></svg>');
+    background: get-color("skyblue") url('img/background.png');
     border-top: 6px solid get-color("dark");
     background-position: bottom center;
     background-repeat: repeat-x;
@@ -229,16 +199,6 @@ footer {
     padding-bottom:1.5rem;
     padding-top: 1.5rem;
     .columns {
-      @include md() {
-        display: grid;
-        grid-template-columns: 1fr 1fr 1fr;
-        grid-gap: $lineheight;
-      }
-
-      .col {
-        margin-bottom: $lineheight;
-      }
-
       a {
         color: $color-footer-text;
       }

style.css

@@ -220,6 +220,192 @@ pre {
   max-width: 1200px;
   margin: auto; }
 
+[class*=" col-"],
+[class^=col-] {
+  width: 100%;
+  margin: 0; }
+  [class*=" col-"] > *:last-child,
+  [class^=col-] > *:last-child {
+    margin-bottom: 0 !important; }
+
+.columns {
+  display: grid;
+  grid-gap: 1.6rem;
+  grid-template-columns: repeat(12, 1fr);
+  grid-template-rows: auto;
+  padding: 1.6rem; }
+  .columns-nogap {
+    grid-gap: 0px; }
+
+.column {
+  grid-column: span 12; }
+
+.col-1 {
+  grid-column: span 1; }
+
+.col-2 {
+  grid-column: span 2; }
+
+.col-3 {
+  grid-column: span 3; }
+
+.col-4 {
+  grid-column: span 4; }
+
+.col-5 {
+  grid-column: span 5; }
+
+.col-6 {
+  grid-column: span 6; }
+
+.col-7 {
+  grid-column: span 7; }
+
+.col-8 {
+  grid-column: span 8; }
+
+.col-9 {
+  grid-column: span 9; }
+
+.col-10 {
+  grid-column: span 10; }
+
+.col-11 {
+  grid-column: span 11; }
+
+.col-12 {
+  grid-column: span 12; }
+
+@media (min-width: 576px) {
+  .col-sm-1 {
+    grid-column: span 1; }
+  .col-sm-2 {
+    grid-column: span 2; }
+  .col-sm-3 {
+    grid-column: span 3; }
+  .col-sm-4 {
+    grid-column: span 4; }
+  .col-sm-5 {
+    grid-column: span 5; }
+  .col-sm-6 {
+    grid-column: span 6; }
+  .col-sm-7 {
+    grid-column: span 7; }
+  .col-sm-8 {
+    grid-column: span 8; }
+  .col-sm-9 {
+    grid-column: span 9; }
+  .col-sm-10 {
+    grid-column: span 10; }
+  .col-sm-11 {
+    grid-column: span 11; }
+  .col-sm-12 {
+    grid-column: span 12; } }
+
+@media (min-width: 768px) {
+  .col-md-1 {
+    grid-column: span 1; }
+  .col-md-2 {
+    grid-column: span 2; }
+  .col-md-3 {
+    grid-column: span 3; }
+  .col-md-4 {
+    grid-column: span 4; }
+  .col-md-5 {
+    grid-column: span 5; }
+  .col-md-6 {
+    grid-column: span 6; }
+  .col-md-7 {
+    grid-column: span 7; }
+  .col-md-8 {
+    grid-column: span 8; }
+  .col-md-9 {
+    grid-column: span 9; }
+  .col-md-10 {
+    grid-column: span 10; }
+  .col-md-11 {
+    grid-column: span 11; }
+  .col-md-12 {
+    grid-column: span 12; } }
+
+@media (min-width: 992px) {
+  .col-lg-1 {
+    grid-column: span 1; }
+  .col-lg-2 {
+    grid-column: span 2; }
+  .col-lg-3 {
+    grid-column: span 3; }
+  .col-lg-4 {
+    grid-column: span 4; }
+  .col-lg-5 {
+    grid-column: span 5; }
+  .col-lg-6 {
+    grid-column: span 6; }
+  .col-lg-7 {
+    grid-column: span 7; }
+  .col-lg-8 {
+    grid-column: span 8; }
+  .col-lg-9 {
+    grid-column: span 9; }
+  .col-lg-10 {
+    grid-column: span 10; }
+  .col-lg-11 {
+    grid-column: span 11; }
+  .col-lg-12 {
+    grid-column: span 12; } }
+
+@media (min-width: 1200px) {
+  .col-xl-1 {
+    grid-column: span 1; }
+  .col-xl-2 {
+    grid-column: span 2; }
+  .col-xl-3 {
+    grid-column: span 3; }
+  .col-xl-4 {
+    grid-column: span 4; }
+  .col-xl-5 {
+    grid-column: span 5; }
+  .col-xl-6 {
+    grid-column: span 6; }
+  .col-xl-7 {
+    grid-column: span 7; }
+  .col-xl-8 {
+    grid-column: span 8; }
+  .col-xl-9 {
+    grid-column: span 9; }
+  .col-xl-10 {
+    grid-column: span 10; }
+  .col-xl-11 {
+    grid-column: span 11; }
+  .col-xl-12 {
+    grid-column: span 12; } }
+
+@media (min-width: 1600px) {
+  .col-xxl-1 {
+    grid-column: span 1; }
+  .col-xxl-2 {
+    grid-column: span 2; }
+  .col-xxl-3 {
+    grid-column: span 3; }
+  .col-xxl-4 {
+    grid-column: span 4; }
+  .col-xxl-5 {
+    grid-column: span 5; }
+  .col-xxl-6 {
+    grid-column: span 6; }
+  .col-xxl-7 {
+    grid-column: span 7; }
+  .col-xxl-8 {
+    grid-column: span 8; }
+  .col-xxl-9 {
+    grid-column: span 9; }
+  .col-xxl-10 {
+    grid-column: span 10; }
+  .col-xxl-11 {
+    grid-column: span 11; }
+  .col-xxl-12 {
+    grid-column: span 12; } }
+
 .btn {
   border: 0px solid rgba(0, 0, 0, 0.3);
   border-radius: 0px 0px 0px 0px;
@@ -1075,40 +1261,20 @@ textarea {
 .align-right {
   text-align: right; }
 
-#description {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-areas: "title" "illustration" "content"; }
-  @media (min-width: 1200px) {
-    #description {
-      grid-template-columns: 400px auto;
-      grid-template-areas: "title title" "illustration content"; } }
-#desc-title {
-  grid-area: title; }
-
-#description-content {
-  grid-area: content; }
-
 .illustration {
+  width: 300px;
   display: block;
-  margin: auto;
+  margin: auto; }
-  grid-area: illustration;
-  max-width: 100%;
-  height: auto; }
   @media (min-width: 1200px) {
     .illustration {
+      width: 145%;
       padding-bottom: 0;
-      max-width: 530px;
       margin-bottom: 1.5rem;
       position: relative;
       top: 0px;
       right: 64px; } }
-.align-centered-block {
-  text-align: center;
-  padding: 1rem; }
-
 #page-header {
-  background: #0f7e84 url('data: image/svg+xml;utf8,<svg width="800" height="300" xmlns="http://www.w3.org/2000/svg"><circle cx="420" cy="440" r="300" fill="#FDF7E7" /><circle cx="700" cy="510" r="300" fill="#FDF7E7" /><circle cx="-100" cy="510" r="300" fill="#FDF7E7" /><circle cx="150" cy="380" r="150" fill="#FDF7E7" /></svg>');
+  background: #0f7e84 url("img/background.png");
   border-top: 6px solid #002b36;
   background-position: bottom center;
   background-repeat: repeat-x;
@@ -1249,13 +1415,6 @@ footer {
     width: 100%;
     z-index: 1;
     top: -24px; }
-  @media (min-width: 768px) {
-    footer .columns {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr;
-      grid-gap: 1.6rem; } }
-  footer .columns .col {
-    margin-bottom: 1.6rem; }
   footer .columns a {
     color: #FDF7E7; }