fix new layout

_includes/SideBar.html

@@ -1,4 +1,4 @@
-<div class="SideBar ">
+<div class="SideBar">
 	
 	<div class="top-sidebar">
 		<img

assets/css/stylesheet.css

@@ -71,13 +71,12 @@ h1, h2, h3, h4, h5, h6 {
 
     justify-content: center;
     
-    padding: 30px 25px;
+    padding: 100px 0px;
 }
 
 .page-sidebar{
     width: auto;
-    flex-grow: 1;
-    margin: 0 25px;
+    /* margin: 0 25px; */
 
     
 }
@@ -95,57 +94,57 @@ h1, h2, h3, h4, h5, h6 {
 
 /* ================================================================================================================================== */
 /* SideBar _include/SideBar.html */
-.SideBar{
+.SideBar {
     display: flex;
-    flex-direction: column;
-    height: 100vh;
-    position: fixed;
-
+    flex-direction: row;
+    height: 8vh;
+    width: 100vw;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: var(--background-color);
+    opacity: 0.7;
+    align-items: center;
+    padding: 0 20px;
+    backdrop-filter: blur(10px); /* Adiciona o efeito de blur */
+    -webkit-backdrop-filter: blur(10px); 
+    /* box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); */
 }
 
-.SideBar .top-sidebar{
-    flex-grow: 1;
-    align-items: end;
-    justify-content: start;
-}
-.SideBar aside{
-    flex-grow: 6;
-    
-}
-
-.SideBar .button-sidebar{
-    flex-grow: 1;
-}
-
-.SideBar .image{
-    width: 60%;
+.SideBar .image {
+    width: 100px; /* Ajuste conforme necessário */
     height: auto;
-    margin: 10px 0px;
+    margin-left: 50px;
+    margin-right: 1000px;
 }
 
-.menu{
-    color: var(--text-color);
-}
-
-.menu li{
+.SideBar .menu {
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+    margin-left: auto;
     list-style: none;
     font-family: var(--font-family);
-
-    padding: 15px 10px;
-   
 }
-.menu li:hover{
-    /* background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(75,144,248,1) 19%, rgba(97,157,246,1) 85%, rgba(241,241,230,0) 100%); */
-    padding: 15px 15px;
+
+.SideBar .menu li {
+    display: inline-block;
+    padding: 10px 15px;
     cursor: pointer;
 }
 
-.menu a{
+.SideBar .menu li:hover {
+    /* background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(75,144,248,1) 19%, rgba(97,157,246,1) 85%, rgba(241,241,230,0) 100%); */
+    border-radius: 5px;
+
+}
+
+.SideBar .menu a {
     color: var(--text-color);
     text-decoration: none;
 }
 
-.menu a:hover{
+.SideBar .menu a:hover {
     color: var(--secondary-text-color);
 }
 
@@ -175,7 +174,7 @@ h1, h2, h3, h4, h5, h6 {
 .home-content .banner{
     height: 500px;
     width: 100%;
-    background: url('/assets/images/background.svg') ;
+    background: var(--deep-ruby) ;
     background-size: cover;
     background-position: center;
     border-radius: 30px;
@@ -212,17 +211,16 @@ h1, h2, h3, h4, h5, h6 {
 
 }
 
-.lasted .content-box{
+.lasted .content-box {
     width: 100%;
-
     margin: 25px 0;
-
-    display: flex;
-    align-items: center;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+    gap: 25px;
     justify-content: center;
-
 }
 
+
 .lasted .content-box .box{
     height: 500px;
     width: 400px;

pages/index.html

@@ -16,11 +16,12 @@ permalink: /
 
         <div class="content-box">
             {% assign aulas = site.data.aulas | sort: 'date' | reverse %}
-            {% assign max_aulas = 3 %}
+            {% assign max_aulas = 6 %}
             {% assign count = 0 %}
 
             {% for aula in aulas %}
             {% if count < max_aulas %}
+            {% assign count = count | plus: 1 %}
             {% assign nome = aula.name | replace: ".md","" %}
             <div class="box">
                 <div class="box-top">