From 4f1986931f228d06b00123df952e92e07557eadf Mon Sep 17 00:00:00 2001
From: VladImpaler <fake@email.com>
Date: Fri, 21 Apr 2023 13:42:57 -0600
Subject: [PATCH] =?utf8?q?Los=20article=20parecidos=20al=20mockup,=20cread?=
 =?utf8?q?a=20secci=C3=B3n=20de=20juegos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

---
 themes/droda/assets/css/main.css           | 37 +++++++++++++++++-----
 themes/droda/layouts/_default/article.html |  9 ++++--
 themes/droda/layouts/_default/list.html    |  2 +-
 3 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/themes/droda/assets/css/main.css b/themes/droda/assets/css/main.css
index 2998fa7..f18e782 100644
--- a/themes/droda/assets/css/main.css
+++ b/themes/droda/assets/css/main.css
@@ -19,8 +19,8 @@
 
 :root {
    --bgColorDark: #0e0e0e;
-   --bgColorMidDark: #353b43;
-   --bgColorLightDark: #4f5864;
+   --bgColorMidDark: #292e35;
+   --bgColorLightDark: #373d46;
    --bgColorLight: #D2D2D2;
    --bgColorBlue: #1b6694;
    --bgColorSalamandra: rgb(236, 162, 143);
@@ -212,6 +212,7 @@ main {
    background-position-x: right;
    background-position-y: bottom;
    background-repeat: no-repeat;
+   overflow-y: auto;
 }
 
 /* Regla que aplica solo a firefox */
@@ -227,19 +228,39 @@ main hr {
    width: 100%;
 }
 
-.articles {
+main div {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    justify-content: space-between;
 }
 
-.articles article {
-   width: 30rem;
-   border: 1px solid;
-   border-radius: 0.5rem;
-   padding: 1rem;
+main div > article {
+   display: inline-block;
+   width: calc(50% - 2rem);
    margin: 1rem;
+   border-radius: 0.5rem;
+
+   max-height: 20rem;
+   min-height: 20rem;
+
+   background-color: var(--bgColorLightDark);
+   box-shadow: 0 4px 1px 0.2px var(--bgColorDark);
+
+   overflow-y: auto;
+}
+
+main div > article img {
+   width: 100%;
+   min-height: 12rem;
+   max-height: 12rem;
+   background-color: var(--bgColorLight);
+}
+
+main div > article span {
+   padding: 0 1rem;
+   word-break: break-all;
+   display: block;
 }
 
 .content table {
diff --git a/themes/droda/layouts/_default/article.html b/themes/droda/layouts/_default/article.html
index 970cf53..c39d399 100644
--- a/themes/droda/layouts/_default/article.html
+++ b/themes/droda/layouts/_default/article.html
@@ -1,5 +1,8 @@
 <article>
-  <p>{{ .Description }}</p>
-  <hr>
-  <a href="{{ .Permalink }}">{{ .Title }}</a>
+  <img src="{{ .Params.image | absURL }}">
+  <span>
+    <a href="{{ .Permalink }}">{{ .Title }}</a>
+    <hr>
+    <p>{{ .Description }}</p>
+  </span>
 </article>
diff --git a/themes/droda/layouts/_default/list.html b/themes/droda/layouts/_default/list.html
index 8ef3831..aec3c21 100644
--- a/themes/droda/layouts/_default/list.html
+++ b/themes/droda/layouts/_default/list.html
@@ -1,6 +1,6 @@
 {{ define "main" }}
 <main>
-  <div class="articles">
+  <div>
     {{ $paginator := .Paginate (where .Data.Pages "Section" .Section) }}
     {{ range $paginator.Pages }}
     {{ .Render "article" }}
-- 
2.25.1