Better style for the articles list.

public/css/styles.css

@@ -68,17 +68,31 @@ body {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap; }
-        body div.page-contents div.description div.articles img {
+        body div.page-contents div.description div.articles div.image-container {
+          margin-left: 2.5%;
+          margin-top: 10px;
+          height: 95%;
+          width: 95%;
+          display: flex;
+          min-height: 130px;
+          justify-content: center;
+          align-items: center; }
+          body div.page-contents div.description div.articles div.image-container img {
+            max-height: 100%;
+            max-width: 100%;
+            min-width: 277px;
             border: solid 1px black; }
         body div.page-contents div.description div.articles a {
+          min-height: 90%;
           width: 100%;
           display: block;
           text-decoration: none;
           text-overflow: ellipsis;
-          margin-bottom: 10px; }
+          margin-bottom: 30px; }
           body div.page-contents div.description div.articles a article {
             word-wrap: break-word;
             width: 90%;
+            height: 90%;
             padding: 5%;
             padding-top: 1%;
             background: #f2eb8c;
@@ -87,6 +101,13 @@ body {
             border: 3px solid black; }
             body div.page-contents div.description div.articles a article p, body div.page-contents div.description div.articles a article h4, body div.page-contents div.description div.articles a article h3, body div.page-contents div.description div.articles a article h2 {
               margin: 0px; }
+            body div.page-contents div.description div.articles a article p {
+              font-size: 0.9rem; }
+            body div.page-contents div.description div.articles a article div.article-up-part {
+              height: 12em; }
+            body div.page-contents div.description div.articles a article div.article-down-part {
+              margin-top: 2em;
+              height: 9em; }
             body div.page-contents div.description div.articles a article:hover {
               background: blueviolet;
               color: #f2eb8c; }
@@ -201,9 +222,16 @@ body {
     body div.page-contents nav.mobile-shortcuts {
       display: none; } }
 
-@media (min-width: 1222px) {
+@media (min-width: 694px) {
   body div.page-contents div.description {
     margin-top: auto; }
     body div.page-contents div.description div.articles a {
       width: 45%;
       margin-left: 5%; } }
+
+@media (min-width: 1333px) {
+  body div.page-contents div.description {
+    margin-top: auto; }
+    body div.page-contents div.description div.articles a {
+      width: 30%;
+      margin-left: 3%; } }

public/css/styles.scss

@@ -17,16 +17,20 @@ body {
   p, h1, h2, h3, h4, a {
     font-family: 'arial';
   }
+
   margin: 0;
   padding: 0;
   overflow: hidden;
   min-height: 100%;
   width: 100%;
   height: 100%;
+
   div.site-wrapper {
     display: table;
     width: 100%;
-		height: 100%; /* For at least Firefox */
+    height: 100%;
+
+    /* For at least Firefox */
     min-height: 100%;
     color: $color;
     background: $background;
@@ -34,6 +38,7 @@ body {
     background-size: cover;
     overflow: hidden;
   }
+
   div.page-contents {
     position: absolute;
     position: fixed;
@@ -44,86 +49,134 @@ body {
     top: 0%;
     left: 0%;
     height: 100%;
+
     div.child-categories-mobile a {
       padding-left: 2.5rem;
     }
+
     width: 100%;
+
     img {
       max-width: 100%;
       margin-left: auto;
       margin-right: auto;
       display: block;
     }
+
     table {
       color: $background_div;
       background: $color_div;
       border: 3px solid $background_div;
       border-collapse: collapse;
       width: 100%;
+
       td, th {
         font-size: 9px;
       }
+
       table-layout: fixed;
     }
+
     th, td {
       border: 3px solid $background_div;
       border-collapse: collapse;
       padding-right: 10px;
       margin: 0;
     }
+
     div.description {
       input {
         display: block;
       }
+
       word-wrap: break-word;
+
       div.suscribirse-rss {
         img {
           max-height: 300px;
         }
       }
+
       padding: 1%;
       margin-left: 3%;
       margin-right: 3%;
       margin-bottom: 1%;
       margin-top: 10%;
+
       div.articles {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
+
+        div.image-container {
+            margin-left: 2.5%;
+            margin-top: 10px;
+            height: 95%;
+            width: 95%;
+            display: flex;
+            min-height: 130px;
+            justify-content: center;
+            align-items: center;
             img {
+              max-height: 100%;
+              max-width: 100%;
+              min-width: 277px;
               border: solid 1px black;
             }
+        }
+
         a {
+          min-height: 90%;
           width: 100%;
           display: block;
           text-decoration: none;
           text-overflow: ellipsis;
-					margin-bottom: 10px;
+          margin-bottom: 30px;
+
           article {
             word-wrap: break-word;
             width: 90%;
+            height: 90%;
+
             p, h4, h3, h2 {
               margin: 0px;
             }
-						padding: 5%;;
+            p {
+                font-size: 0.9rem;
+            }
+
+            div.article-up-part {
+                height: 12em;
+            }
+
+            div.article-down-part {
+                margin-top: 2em; 
+                height: 9em;
+            }
+
+            padding: 5%;
             padding-top: 1%;
             background: $color_div;
             color: $background_div;
             box-shadow: 8px 8px 1px 0px #8ddfd6;
             border: 3px solid black;
+
             &:hover {
               background: $background_div;
               color: $color_div;
             }
+
             p.date {
               text-align: right;
             }
+
             p.author {
               text-align: right;
             }
           }
         }
       }
+
       a.suscribe-category-rss {
         background: $background_div;
         width: 40px;
@@ -131,38 +184,46 @@ body {
         padding: 10px;
         border-radius: 5px;
         display: inline-block;
+
         img {
           width: 40px;
           height: 40px;
         }
       }
     }
+
     nav > a.menu-expand > img {
       width: 30px;
       height: 30px;
       padding-top: 15px;
     }
+
     nav > a > img.index-image-menu {
       vertical-align: middle;
       width: 50px;
       height: 50px;
       padding-bottom: 10px;
     }
+
     nav.desktop {
       display: none;
+
       a {
         vertical-align: middle;
         background: $background_div;
       }
     }
+
     nav {
       overflow: auto;
       display: block;
       font-size: 25px;
       margin: 0px;
+
       a.go-to-index img {
         margin-top: 5%;
       }
+
       a {
         padding-left: 10px;
         padding-right: 10px;
@@ -170,24 +231,30 @@ body {
         text-decoration: none;
         color: $color_div;
         margin: 0;
+
         &:hover {
           background: $color_div;
           color: $background_div;
         }
+
         &.selected {
           background: $color_div;
           color: $background_div;
         }
       }
+
       a.menu-expand {
         padding-bottom: 9px;
+
         .open-menu-icon-hover {
           display: none;
         }
+
         &:hover {
           .open-menu-icon-hover {
             display: block;
           }
+
           .open-menu-icon {
             display: none;
           }
@@ -201,24 +268,29 @@ body {
       width: 100%;
       background: $background_div;
       height: 60px;
+
       a {
         height: 100%;
         width: (100% / 6);
       }
+
       div {
-				width: (100% * 4 / 6);
+        width: 100% * 4 / 6;
       }
     }
+
     nav.mobile-foldable {
       display: none;
       background: $background_div;
       color: $color_div;
+
       a {
         //background: $color_div;
         //color: $background_div;
         display: block;
       }
     }
+
     nav.mobile-foldable.show {
       display: block;
     }
@@ -231,16 +303,17 @@ body {
       p, h1, h2, h3, h4, a {
         font-size: initial;
       }
+
       a.suscribe-category-rss {
         padding: 7px;
       }
+
       a.suscribe-category-rss, a.suscribe-category-rss > img {
         width: 20px;
         height: 20px;
       }
     }
   }
-
 }
 
 @media (min-width: 450px) {
@@ -261,24 +334,30 @@ body {
       nav.mobile-foldable, nav.mobile-foldable.show {
         display: none;
       }
+
       div.description {
         margin-left: 10%;
         margin-right: 10%;
         margin-top: auto;
       }
+
       nav.desktop {
         display: block;
         height: auto;
+
         a {
           display: table-cell;
+
           img.index-image-menu {
             padding-top: 15px;
           }
         }
       }
+
       nav.mobile-shortcuts {
         display: none;
       }
+
       top: 0%;
       left: 5%;
       height: 100%;
@@ -287,11 +366,12 @@ body {
   }
 }
 
-@media (min-width: 1222px) {
+@media (min-width: 694px) {
   body {
     div.page-contents {
       div.description {
         margin-top: auto;
+
         div.articles {
           a {
             width: 45%;
@@ -302,3 +382,19 @@ body {
     }
   }
 }
+@media (min-width: 1333px) {
+  body {
+    div.page-contents {
+      div.description {
+        margin-top: auto;
+
+        div.articles {
+          a {
+            width: 30%;
+            margin-left: 3%;
+          }
+        }
+      }
+    }
+  }
+}

templates/page/_list_posts.html.ep

@@ -9,17 +9,22 @@
         <article><%
     my $date_article = DateTime::Format::ISO8601->parse_datetime($post->{date});
     $date_article->set_time_zone('Europe/Madrid');
-            %><p class="date"><%= ''.$date_article %></p><%
+            %><div class="article-up-part">
+                <p class="date"><%= ''.$date_article %></p><%
     if (defined $post->{image}) {
-            %><img alt="Portada de <%=$post->{title}%>" src="<%=$post->{image}%>"/><%
+        %><div class="image-container">
+                <img alt="Portada de <%=$post->{title}%>" src="<%=$post->{image}%>"/>
+          </div><%
     }
-            %><h3><%=$post->{title}%></h3><%
+            %></div><div class="article-down-part">
+                <h3><%=$post->{title}%></h3><%
     my $xml = Mojo::DOM->new($post->{content});
     my $text = $xml->all_text;
     if (length($text) > 120) {
         $text = substr($text, 0, 100).'...';
     }
-            %><p><%=$text%></p><p class="author">Escrito por <%=$post->{author}%></p></article>
+                %><p><%=$text%></p><p class="author">Escrito por <%=$post->{author}%></p>
+            </div></article>
     </a>
 %	}
 </div>