[how-to] WIP layout + graphism

Author: paulgirard

src/pages/how-to/index.astro

@@ -1,5 +1,6 @@
 ---
-import Gephi from "../../components/how-to/Gephi.astro";
+import { Image } from "astro:assets";
+import Gephi from "../../components/how-to/Gephi.md";
 import GephiLite from "../../components/how-to/GephiLite.md";
 import Layout from "../../layouts/Layout.astro";
 ---
@@ -14,11 +15,37 @@ import Layout from "../../layouts/Layout.astro";
   <main class="py-5">
     <section class="how-to container">
       <article class="how-to-column" id="gephi">
-        <h2>Gephi</h2>
+        <h2>
+          <label class="form-check-label" for="viewGephiHowTo">
+            <Image
+              src="/icons/gephi-desktop-logo-inverted.svg"
+              class="mb-3 mb-md-0"
+              alt="Gephi logo"
+              width="100"
+              height="100"
+            />
+            <span class="label-content">Gephi</span></label
+          >
+
+          <input class="form-check-input bg-gephi-lite" type="checkbox" role="switch" id="viewGephiHowTo" checked />
+        </h2>
         <Gephi />
       </article>
       <article class="how-to-column" id="gephi-lite">
-        <h2>Gephi Lite</h2>
+        <h2>
+          <label class="form-check-label" for="viewGephiLiteHowTo">
+            <span class="label-content">Gephi Lite</span>
+
+            <Image
+              src="/icons/gephi-lite-logo-inverted.svg"
+              class="mb-3 mb-md-0"
+              alt="Gephi logo"
+              width="100"
+              height="100"
+            />
+          </label>
+          <input class="form-check-input bg-gephi-lite" type="checkbox" role="switch" id="viewGephiLiteHowTo" checked />
+        </h2>
         <GephiLite />
       </article>
     </section>

src/styles/_how-to.scss

@@ -2,13 +2,49 @@
   $nb-sections: 50; // Nombre de sections par article
   display: grid;
   grid-template-columns: 50% 50%;
-  @include media-breakpoint-down(lg) {
-    grid-template-columns: 1fr;
-  }
+
   grid-auto-rows: minmax(100px, auto);
-  grid-column-gap: 1rem;
+  grid-column-gap: 3rem;
   grid-row-gap: 1rem;
 
+  // &:has(.form-check-input:not(:checked)) {
+  // }
+  .form-check-input {
+    display: none;
+  }
+
+  &:has(#viewGephiHowTo:checked):has(#viewGephiLiteHowTo:not(:checked)) {
+    // Gephi only
+    grid-template-columns: 1fr 100px;
+
+    #gephi-lite {
+      section,
+      .label-content {
+        display: none;
+      }
+    }
+  }
+
+  &:has(#viewGephiHowTo:not(:checked)):has(#viewGephiLiteHowTo:checked) {
+    // Gephi lite only
+    grid-template-columns: 100px 1fr;
+    #gephi {
+      section,
+      .label-content {
+        display: none;
+      }
+    }
+    #gephi-lite {
+      section {
+        h2,
+        h3,
+        h4 {
+          text-align: start;
+        }
+      }
+    }
+  }
+
   #gephi {
     > h2 {
       grid-column: 1;
@@ -19,22 +55,30 @@
     > h2 {
       grid-column: 2;
       grid-row: 1;
-      @include media-breakpoint-down(lg) {
-        grid-column: 1;
-        grid-row: 2;
-      }
+      justify-content: end;
     }
-
-    @include media-breakpoint-down(lg) {
-      text-align: end;
+    section {
+      h2,
+      h3,
+      h4 {
+        text-align: end;
+      }
     }
   }
 
   .how-to-column {
     display: contents;
-    h2 {
+
+    > h2 {
+      display: flex;
+      align-items: center;
+      column-gap: 0.5rem;
+
       @include media-breakpoint-up(lg) {
-        text-align: center;
+        // text-align: center;
+      }
+      .form-check-input {
+        margin: 0;
       }
     }
     section {
@@ -83,18 +127,22 @@
   // place sections in the right rows
   @for $i from 1 through $nb-sections {
     #gephi > section:nth-child(#{$i}) {
-      grid-column: 1;
       @include media-breakpoint-down(lg) {
         grid-row: 2 * $i - 2 + 1;
+        grid-column: 1/3;
+        margin-right: 5rem;
       }
       @include media-breakpoint-up(lg) {
         grid-row: $i;
+        grid-column: 1;
       }
     }
     #gephi-lite > section:nth-child(#{$i}) {
       @include media-breakpoint-down(lg) {
         grid-row: 2 * $i - 1 + 1;
-        grid-column: 1;
+        grid-column: 1/3;
+        border-right: 4px solid $gephi-lite-bg;
+        margin-left: 5rem;
       }
       @include media-breakpoint-up(lg) {
         grid-row: $i;