Try template with grid layout

EsupPortail · Dec 18, 2024 · 75511c0 · 75511c0
1 parent c4bca65
commit 75511c0
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 14 deletions.
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -42,21 +42,23 @@
       </a>
     </div>
 
-    <!-- Side bar -->
-    <div class="offcanvas offcanvas-end show" tabindex="-1" id="toc-page"
-         aria-labelledby="toc-page-label">
-      <div class="offcanvas-header">
-        <h5 class="offcanvas-title" id="toc-page-label">On this page</h5>
-      </div>
-      <div class="offcanvas-body">
-        {% include toc.html html=content %}
-      </div>
-    </div>
+    <main class="main-grid">
+      <!-- Side bar -->
+      <nav class="offcanvas offcanvas-end show position-static" tabindex="-1" id="toc-page"
+          aria-labelledby="toc-page-label" data-bs-scroll="true">
+        <div class="offcanvas-header">
+          <h5 class="offcanvas-title" id="toc-page-label">On this page</h5>
+        </div>
+        <div class="offcanvas-body">
+          {% include toc.html html=content %}
+        </div>
+      </nav>
 
-    <!-- MAIN CONTENT -->
-    <section id="main_content" class="container mt-sm-2 mt-3">
-      {{ content }}
-    </section>
+      <!-- MAIN CONTENT -->
+      <section id="main-content" class="container mt-sm-2 mt-3">
+        {{ content }}
+      </section>
+    </main>
 
     <!-- FOOTER  -->
     <footer class="container-fluid pt-1 mt-2">

diff --git a/docs/assets/css/style.css b/docs/assets/css/style.css
@@ -23,3 +23,10 @@ footer {
 [data-bs-theme="dark"] {
   --bs-heading-color: var(--bs-body-color);
 }
+
+.main-grid {
+  display: grid;
+  grid-template-areas: "intro   toc";
+  grid-template-rows: auto 1fr;
+  grid-template-columns: 4fr 1fr;
+}
diff --git a/docs/assets/css/syntax_highlight.scss b/docs/assets/css/syntax_highlight.scss
@@ -6,3 +6,7 @@
 pre.highlight{
   padding: 1rem;
 }
+
+.highlight .nv {
+  color: #027F88;
+}