From 11089fee9018ef0c2d7b4349ffa7d53170827299 Mon Sep 17 00:00:00 2001
From: doup <asier@illarra.com>
Date: Thu, 10 Apr 2025 10:55:39 +0200
Subject: [PATCH 1/2] Show example explanation as a new tab

---
 sass/components/_tabs.scss     |  5 +++++
 templates/layouts/example.html | 17 +++++++++++++----
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/sass/components/_tabs.scss b/sass/components/_tabs.scss
index 2825057401..8f7d6e7165 100644
--- a/sass/components/_tabs.scss
+++ b/sass/components/_tabs.scss
@@ -17,6 +17,7 @@
     padding: 12px $h-padding;
     position: relative;
     border-radius: 8px;
+    user-select: none;
 
     &:hover {
       background-color: var(--tabs-bg-hover-color);
@@ -38,6 +39,10 @@
       right: $h-padding;
       transition: background-color $duration;
     }
+
+    code {
+      font-size: 0.9em;
+    }
   }
 
   &__panel {
diff --git a/templates/layouts/example.html b/templates/layouts/example.html
index 7105551770..601a36df73 100644
--- a/templates/layouts/example.html
+++ b/templates/layouts/example.html
@@ -24,11 +24,20 @@ <h2 class="example__title">{{ category.title }} / {{ page.title }}</h2>
         {% block callout %}{% endblock callout %}
       </aside>
     </div>
-    
     <div class="example__code-tabs tabs">
+      {% if page.content %}
+        <input class="tabs__radio" name="tabs" tabindex="1" type="radio" id="tab-explanation" checked="checked">
+        <label class="tabs__label" for="tab-explanation">Explanation</label>
+        <div class="tabs__panel" tabindex="1">
+          <div class="example__content media-content">
+            {{ page.content | safe }}
+          </div>
+        </div>
+      {% endif %}
+
       {% set filename = page.extra.code_path | split(pat="/") | last %}
-      <input class="tabs__radio" name="tabs" tabindex="1" type="radio" id="tab0" checked="checked">
-      <label class="tabs__label" for="tab0">{{ filename }}</label>
+      <input class="tabs__radio" name="tabs" tabindex="1" type="radio" id="tab0" {% if page.content == "" %}checked="checked"{% endif %}>
+      <label class="tabs__label" for="tab0"><code>{{ filename }}</code></label>
       <div class="tabs__panel" tabindex="1">
         <div class="example__code media-content">
           {% set code = load_data(path=page.extra.code_path) %}
@@ -39,7 +48,7 @@ <h2 class="example__title">{{ category.title }} / {{ page.title }}</h2>
       
       {% for shader in page.extra.shader_code_paths %}
         <input class="tabs__radio" tabindex="1" name="tabs" type="radio" id="tab{{ loop.index }}">
-        <label class="tabs__label" for="tab{{ loop.index }}">{{ shader }}</label>
+        <label class="tabs__label" for="tab{{ loop.index }}"><code>{{ shader }}</code></label>
         <div class="tabs__panel" tabindex="1">
           <div class="example__code media-content">
             {% set code = load_data(path="static/assets/examples/" ~ shader) %}

From 45dc3194c974338f0a00e2db16ee16051b432166 Mon Sep 17 00:00:00 2001
From: doup <asier@illarra.com>
Date: Sun, 27 Apr 2025 11:23:46 +0200
Subject: [PATCH 2/2] Show explanation above code

---
 sass/components/_example.scss  |  5 +++++
 templates/layouts/example.html | 17 ++++++-----------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/sass/components/_example.scss b/sass/components/_example.scss
index 199a2215f0..8b454406a3 100644
--- a/sass/components/_example.scss
+++ b/sass/components/_example.scss
@@ -47,6 +47,11 @@
     text-align: right;
   }
 
+  &__explanation {
+    padding-inline: 16px;
+    margin-block: 32px;
+  }
+
   &__code-tabs {
     margin-top: 16px;
   }
diff --git a/templates/layouts/example.html b/templates/layouts/example.html
index 601a36df73..7ad1fe50fa 100644
--- a/templates/layouts/example.html
+++ b/templates/layouts/example.html
@@ -24,19 +24,14 @@ <h2 class="example__title">{{ category.title }} / {{ page.title }}</h2>
         {% block callout %}{% endblock callout %}
       </aside>
     </div>
+    {% if page.content %}
+      <div class="example__explanation media-content">
+        {{ page.content | safe }}
+      </div>
+    {% endif %}
     <div class="example__code-tabs tabs">
-      {% if page.content %}
-        <input class="tabs__radio" name="tabs" tabindex="1" type="radio" id="tab-explanation" checked="checked">
-        <label class="tabs__label" for="tab-explanation">Explanation</label>
-        <div class="tabs__panel" tabindex="1">
-          <div class="example__content media-content">
-            {{ page.content | safe }}
-          </div>
-        </div>
-      {% endif %}
-
       {% set filename = page.extra.code_path | split(pat="/") | last %}
-      <input class="tabs__radio" name="tabs" tabindex="1" type="radio" id="tab0" {% if page.content == "" %}checked="checked"{% endif %}>
+      <input class="tabs__radio" name="tabs" tabindex="1" type="radio" id="tab0" checked="checked">
       <label class="tabs__label" for="tab0"><code>{{ filename }}</code></label>
       <div class="tabs__panel" tabindex="1">
         <div class="example__code media-content">