fix: optimisation

components/footer-content.php

@@ -25,19 +25,19 @@
   </ul>
 
   <div class="container columns">
-    <section class="col-12 col-md-4" aria-labelledby="title-footer-section-1">
+    <section class="col" 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-12 col-md-4" aria-labelledby="title-footer-section-2">
+    <section class="col" 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-12 col-md-4" aria-labelledby="title-footer-section-3">
+    <section class="col" 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,17 +6,16 @@
       $page = get_page_by_path( 'home' );
       if ($page != null) {
   ?>
-  <section class="columns p-0">
+  <section id="description" class="p-0">
-    <h1 class="col-12 page-title pb-0" id="desc-title"><?php echo get_the_title( $page ); ?></h1>
+    <h1 id="desc-title" class="page-title"><?php echo get_the_title( $page ); ?></h1>
-    <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>
+    <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-8 col-12">
+    <div id="description-content">
-        <div aria-libelledby="desc-title" class="mb-1"><?php echo $page->post_content; ?></div>
+        <div aria-libelledby="desc-title" class="post-content"><?php echo $page->post_content; ?></div>
-        <div class="align-center d-none d-block-xl"><a href="/about" class="btn btn-primary">Plus d'info</a></div>
+        <div class="align-centered-block"><a href="/about" class="btn btn-primary">Plus d'info</a></div>
     </div>
   </section>
   <section class="mb-2 d-none d-block-xl">
-    <h1 class="screen-reader-text">Mes sites web</h1>
+    <nav aria-label="Mes sites web">
-    <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,13 +21,38 @@
     &-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;
@@ -35,6 +60,11 @@
   }
 }
 
+.align-centered-block {
+  text-align:center;
+  padding:1rem;
+}
+
 #page-header {
     background: get-color("skyblue") url('img/background.png');
     border-top: 6px solid get-color("dark");
@@ -199,6 +229,16 @@ 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,192 +220,6 @@ 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;
@@ -1261,20 +1075,40 @@ 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("img/background.png");
+  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>');
   border-top: 6px solid #002b36;
   background-position: bottom center;
   background-repeat: repeat-x;
@@ -1415,6 +1249,13 @@ 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; }