Refactor layout structure by adding a content wrapper for improved styling and responsiveness; remove exercises section from lesson layout; introduce JavaScript functionality to dynamically adjust content height based on scaling.

Author: cleberhensel

_layouts/default.html

@@ -42,10 +42,12 @@
     </aside>
 
     <div class="main-container">
-      <main class="content">
-        {% include breadcrumbs.html %}
-        {{ content }}
-      </main>
+      <div class="content-wrapper">
+        <main class="content">
+          {% include breadcrumbs.html %}
+          {{ content }}
+        </main>
+      </div>
     </div>
   </div>
 
@@ -56,6 +58,7 @@
   <script src="{{ '/assets/js/progress-tracker.js' | relative_url }}"></script>
   <script src="{{ '/assets/js/analytics.js' | relative_url }}"></script>
   <script src="{{ '/assets/js/theme-toggle.js' | relative_url }}"></script>
+  <script src="{{ '/assets/js/fix-content-height.js' | relative_url }}"></script>
   <script>
     window.siteData = {
       modules: {{ site.data.modules.modules | jsonify }},

_layouts/lesson.html

@@ -66,21 +66,6 @@ <h1>{{ page.title }}</h1>
   {% include lesson-navigation.html %}
 </nav>
 
-<section class="exercises">
-  <h2>Exercícios Práticos</h2>
-  {% if page.exercises %}
-    {% for exercise_id in page.exercises %}
-      {% assign exercise = site.data.exercises.exercises | where: "id", exercise_id | first %}
-      {% if exercise %}
-        <div class="exercise-card">
-          <h3>{% if exercise.title %}{{ exercise.title }}{% else %}{{ exercise.slug | replace: '-', ' ' | capitalize }}{% endif %}</h3>
-          <a href="{{ exercise.url | relative_url }}">Ver exercício</a>
-        </div>
-      {% endif %}
-    {% endfor %}
-  {% endif %}
-</section>
-
 <script src="{{ '/assets/js/podcast-player.js' | relative_url }}"></script>
 <script src="{{ '/assets/js/video-player.js' | relative_url }}"></script>
 

assets/js/fix-content-height.js

@@ -0,0 +1,40 @@
+(function() {
+  'use strict';
+  
+  function fixContentHeight() {
+    const contentWrapper = document.querySelector('.content-wrapper');
+    const content = document.querySelector('.main-container .content');
+    
+    if (!contentWrapper || !content) {
+      return;
+    }
+    
+    // Aguardar o conteúdo carregar completamente
+    setTimeout(() => {
+      // Obter a altura real do conteúdo (com scale aplicado)
+      const contentHeight = content.scrollHeight;
+      // Calcular a altura visual (80% devido ao scale 0.8)
+      const visualHeight = contentHeight * 0.8;
+      // Ajustar o wrapper para cortar o espaço extra
+      contentWrapper.style.height = visualHeight + 'px';
+      contentWrapper.style.overflow = 'hidden';
+    }, 100);
+    
+    // Recalcular quando imagens ou outros recursos carregarem
+    window.addEventListener('load', () => {
+      setTimeout(() => {
+        const contentHeight = content.scrollHeight;
+        const visualHeight = contentHeight * 0.8;
+        contentWrapper.style.height = visualHeight + 'px';
+      }, 200);
+    });
+  }
+  
+  // Executar quando o DOM estiver pronto
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', fixContentHeight);
+  } else {
+    fixContentHeight();
+  }
+})();
+

assets/main.scss

@@ -225,7 +225,6 @@ body {
   flex-direction: row !important;
   align-items: flex-start !important;
   width: 100% !important;
-  min-height: calc(100vh - 80px);
   box-sizing: border-box;
   margin: 0;
   padding: 0;
@@ -257,14 +256,53 @@ body {
   padding: 0;
 }
 
+.main-container .content-wrapper {
+  width: 100%;
+  max-width: $container-max-width;
+  overflow: hidden;
+  position: relative;
+}
+
 .main-container .content {
   max-width: $container-max-width;
   width: 100%;
   padding: $spacing-lg;
   box-sizing: border-box;
-  transform: scale(0.8);
-  transform-origin: top left;
-  margin-bottom: -20%;
+  zoom: 0.8;
+  padding-bottom: $spacing-lg;
+  display: block;
+  
+  > *:last-child {
+    margin-bottom: 0 !important;
+  }
+  
+  .exercises {
+    margin-bottom: 0 !important;
+    padding-bottom: 0 !important;
+    
+    > *:last-child {
+      margin-bottom: 0 !important;
+    }
+  }
+  
+  section:last-child,
+  .exercises:last-child,
+  nav:last-child,
+  .lesson-navigation:last-child {
+    margin-bottom: 0 !important;
+    padding-bottom: 0 !important;
+  }
+  
+  article:last-child,
+  .lesson-content:last-child {
+    margin-bottom: 0 !important;
+    padding-bottom: 0 !important;
+  }
+  
+  .lesson-actions {
+    margin-bottom: 0 !important;
+    padding-bottom: 0 !important;
+  }
 }
 
 .container {
@@ -591,7 +629,7 @@ body {
 }
 
 .lesson-navigation {
-  margin: $spacing-xl 0;
+  margin: $spacing-xl 0 0 0;
   padding: $spacing-lg;
   background: var(--color-bg-secondary);
   border-radius: 8px;
@@ -613,6 +651,8 @@ body {
 
 .exercises {
   margin-top: $spacing-xl;
+  margin-bottom: 0;
+  padding-bottom: 0;
 
   h2 {
     font-size: $font-size-h2;
@@ -708,9 +748,12 @@ body {
     height: auto;
   }
 
+  .main-container .content-wrapper {
+    overflow: visible;
+  }
+  
   .main-container .content {
-    transform: scale(1);
-    margin-bottom: 0;
+    zoom: 1;
   }
 
   .container {