From 2cd70ffa66b51fd2d3f5a8e72854001463d78373 Mon Sep 17 00:00:00 2001
From: VladImpaler <fake@email.com>
Date: Fri, 21 Apr 2023 17:51:45 -0600
Subject: [PATCH] =?utf8?q?Vista=20tarjeta=20ajustada,=20a=C3=B1adida=20sec?=
 =?utf8?q?ci=C3=B3n=20games?=
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

---
 themes/droda/assets/css/main.css | 60 +++++++++++++++++++++++++++-----
 themes/droda/assets/js/main.js   |  4 +--
 2 files changed, 53 insertions(+), 11 deletions(-)

diff --git a/themes/droda/assets/css/main.css b/themes/droda/assets/css/main.css
index f18e782..021b173 100644
--- a/themes/droda/assets/css/main.css
+++ b/themes/droda/assets/css/main.css
@@ -185,6 +185,7 @@ nav button {
    width: 4rem;
    height: 4rem;
    right: 0.4rem;
+   border-radius: 20px;
 
    background-image: url('../images/menu.png');
    background-color: transparent; /* Cuando usamos background-image se pone el background-color en blanco por default por eso le indicamos que sea transparente para que se pueda ver la imagen. */
@@ -194,9 +195,11 @@ nav button {
 
    border: none;
    cursor: pointer;
+   user-select: none;
+}
 
-   transition: background-image ease 0.2s;
-
+nav button:hover{
+   background-color: var(--bgColorMidDark);
 }
 
 nav button[data-visible="true"] {
@@ -231,8 +234,9 @@ main hr {
 main div {
    display: flex;
    flex-flow: row wrap;
-   align-items: flex-start;
+   align-items: center;
    justify-content: space-between;
+   color: var(--bgColorLight);
 }
 
 main div > article {
@@ -241,8 +245,9 @@ main div > article {
    margin: 1rem;
    border-radius: 0.5rem;
 
-   max-height: 20rem;
-   min-height: 20rem;
+   max-height: 25rem;
+   min-height: 25rem;
+   min-width: 20rem;
 
    background-color: var(--bgColorLightDark);
    box-shadow: 0 4px 1px 0.2px var(--bgColorDark);
@@ -251,15 +256,16 @@ main div > article {
 }
 
 main div > article img {
-   width: 100%;
+   display: block;
+   margin: 1rem auto;
    min-height: 12rem;
    max-height: 12rem;
-   background-color: var(--bgColorLight);
 }
 
 main div > article span {
    padding: 0 1rem;
-   word-break: break-all;
+   word-break: normal;
+   overflow-wrap: break-word;
    display: block;
 }
 
@@ -296,7 +302,16 @@ footer {
    margin: 0 auto;
 }
 
-@media screen and (min-width: 780px) {
+@media screen and (max-width: 480px) {
+   body {
+      min-width: 25rem;
+   }
+   main div > article {
+      min-width: calc(100% - 2rem);
+   }
+}
+
+@media screen and (min-width: 840px) {
    :root {
       --globalScale: 1.5;
    }
@@ -320,6 +335,14 @@ footer {
    nav button, aside li a {
       display: none;
    }
+
+   main div {
+      justify-content: space-evenly;
+   }
+
+   main div > article {
+      max-width: 30rem;
+   }
    
 }
 
@@ -327,5 +350,24 @@ footer {
    :root {
       --globalScale: 2;
    }
+
+   main div > article img {
+      min-height: 5rem;
+      max-height: 5rem;
+   }
+   
+
+   main div article {
+      width: calc(30% - 2rem);
+   
+      max-height: 15rem;
+      min-height: 15rem;
+      min-width: 10rem;
+
+   }
+
+   main div article p, a{
+      font-size: 1rem;
+   }
 }
 
diff --git a/themes/droda/assets/js/main.js b/themes/droda/assets/js/main.js
index 37ebccc..d9ac03d 100644
--- a/themes/droda/assets/js/main.js
+++ b/themes/droda/assets/js/main.js
@@ -8,9 +8,9 @@ console.log("Gracias por visitar a " + title.innerHTML);
 hamButton.addEventListener("click", (e)=>{
     if(e.target.attributes[0].nodeValue === 'true'){
         e.target.attributes[0].nodeValue = false;
-        aside.setAttribute("style", "display: none");
+        aside.setAttribute("style", "display: none;");
     } else {
         e.target.attributes[0].nodeValue = true;
-        aside.setAttribute("style", "display: flex");
+        aside.setAttribute("style", "display: flex;");
     }
 });
-- 
2.25.1