segmentation du corps de page en fonction de la presence d'aside dans l'element main de la page et ajustement du css en consequence

content/_index.md

@@ -4,6 +4,7 @@ description = "Site portefolio de mes objectifs et accomplissements"
 
 [extra]
 keywords = ["Hatmos", "hatmos", "portefolio"]
+aside = "aside-index.md"
 +++
 
 # Accomplissements

content/aside/aside-index.md

@@ -0,0 +1,6 @@
++++
+title = "photo red glass porsche"
+description = "une photo d'une porsche 944 avec uniquement la couleur rouge et en effet verre raye"
++++
+
+{{ image(src="/porsche-944-turbo-red-glass.jpg", alt="Une photo d'une porsche 944 avec uniquement la couleur rouge et un effet de verre raye", height="100%") }}

static/style.css

@@ -57,7 +57,7 @@ footer{
   margin: 5px;
 }
 
-.layout{
+.layout:has(aside) {
   display: grid;
   grid-template-columns: 2fr 1fr;
 }

templates/base.html

@@ -16,12 +16,8 @@
     </ul>
   </nav>
   <div class="layout">
-    <main class="main-content">{% block content %} {% endblock content %}</main>
+    {% block content %} {% endblock content %}
-    {% if page.extra.aside %}
-      <aside>
     {% include "partials/aside.html" %}
-      </aside>
-    {% endif %}
    </div>
 </body>
 <footer>

templates/index.html

@@ -1,5 +1,7 @@
 {% extends "base.html" %}
 
 {% block content %}
+    <main class="main-content">
         {{ section.content | safe }}
+    </main>
 {% endblock content %}

templates/page.html

@@ -1,5 +1,7 @@
 {% extends "base.html" %}
 
 {% block content %}
+  <main class="main-content">  
     {{ page.content | safe }}
+  </main>
 {% endblock content %}

templates/partials/aside.html

@@ -1,2 +1,6 @@
-{% set aside = get_page(path="aside/" ~ page.extra.aside) %}
+{% if page.extra.aside %}
-{{ aside.content | safe }}
+<aside>
+  {% set aside = get_page(path="aside/" ~ page.extra.aside) %}
+  {{ aside.content | safe }}
+</aside>
+{% endif %}

templates/sections.html

@@ -1,12 +1,14 @@
 {% extends "base.html" %}
 
 {% block content %}
-<h1>
+<main class="main-content">
+  <h1>
     {{section.title}}
-</h1>
+  </h1>
-<ul>
+  <ul>
     {% for page in section.pages %}
     <li><a href="{{page.permalink | safe }}">{{ page.title }}</a></li>
     {% endfor %}
-</ul>
+  </ul>
+</main>  
 {% endblock content %}