Some improvements to the front page components

pycltheme/static/css/cl.css

@@ -1,3 +1,8 @@
+:root {
+    --cl-blue: #0057a8;
+    --cl-red: #e22914;
+}
+
 * {
   font-family: 'Open Sans', sans-serif;
 }
@@ -15,6 +20,15 @@
   font-weight: bold;
 }
 
+a {
+    color: var(--cl-blue);
+    text-decoration: underline;
+}
+
+a:hover {
+    color: var(--cl-red);
+}
+
 
 .cabecera-index {
   color: white;
@@ -96,7 +110,7 @@
 
 .plataformas {
   /*background: #343a40;*/
-  background: #0057a8;
+  background: var(--cl-blue);
   padding-top: 10px;
   padding-bottom: 10px;
 }
@@ -108,7 +122,7 @@
 }
 
 .fondo-azul {
-  background: #0057a8;
+  background: var(--cl-blue);
   padding-top: 10px;
   padding-bottom: 10px;
 }
@@ -177,7 +191,7 @@
 
 /* Footer */
 .footer {
-  background: #0057a8;
+  background: var(--cl-blue);
   color:white;
 }
 
@@ -257,7 +271,7 @@ blockquote {
 }
 
 .blue {
-  color: #0057a7;
+  color: var(--cl-blue);
   font-style: normal;
 }
 
@@ -439,3 +453,20 @@ ul.navbar-nav {
   color: #343a40;
   font-weight: 800;
 }
+
+.w-30 {
+    width: 30% ! important;
+}
+
+.w-40 {
+    width: 40% ! important;
+}
+
+.w-60 {
+    width: 60% ! important;
+}
+
+.btn-primary {
+    background-color: var(--cl-blue);
+    text-decoration: none;
+}

pycltheme/templates/card.html

@@ -13,18 +13,25 @@ <h6 class="card-subtitle text-muted text-right">por
               <a class="url fn" href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a>
             {% endfor %}
           </h6>
-          <h6 class="card-subtitle text-muted text-right mt-1">
-            <time class="published" datetime="{{ article.date.isoformat() }}">
-              {{ article.locale_date  }}
-            </time>
-          </h6>
           <div class="mt-auto">
-          <a href="{{ SITEURL }}/{{ article.url }}" class="btn btn-primary float-right">Ver publicación</a>
+          <a href="{{ SITEURL }}/{{ article.url }}" class="btn btn-primary w-100">Ver publicación</a>
           </div>
         </div>
         <div class="card-footer">
-          <h6 style="font-size: 90%;" class="text-muted text-right">
-            <a class="url fn" href="{{ SITEURL }}/{{ article.category.url }}">#{{ article.category }}</a>
+          <div class="row">
+            <div class="w-30 ml-3">
+              <h6 style="font-size: 90%;" class="text-muted text-left">
+                <time class="published" datetime="{{ article.date.isoformat() }}">
+                  {{ article.locale_date  }}
+                </time>
+              </h6>
+            </div>
+            <div class="w-60 mr-3">
+              <h6 style="font-size: 90%;" class="text-muted text-right">
+              <a class="url fn" href="{{ SITEURL }}/{{ article.category.url }}">#{{ article.category }}</a>
+              </h6>
+            </div>
+          </div>
         </div>
       </div>
     </div>

pycltheme/templates/communities.html

@@ -1,6 +1,6 @@
 
 <section id="content" >
-  <div class="pt-5 pb-5 blog-entries">
+  <div class="pt-1 pb-1 blog-entries">
     <div class="container">
       {% block content_title %}
       {% endblock %}

pycltheme/templates/index.html

@@ -19,7 +19,7 @@ <h3 class="text-center pb-5 mb-3 titulo-bold">PRÓXIMO EVENTO</h3>
 </div>
 
   <!-- Entradas Blog -->
-<div class="pt-5 pb-5 blog-entries">
+<div class="pt-1 pb-1 blog-entries">
   <div class="container">
     {% block content_title %}
     {% endblock %}
@@ -40,7 +40,7 @@ <h3 class="text-center pb-5 mb-3 titulo-bold">ÚLTIMAS ENTRADAS</h3>
 
 {% include 'communities.html'%}
 <!-- Patrocinios -->
-<section class="fondo-gris pt-5 pb-3">
+<section class="fondo-gris pt-3 pb-1">
   <div class="container">
     <div class="text-white pb-3 text-center">
       <h2>Nuestros Patrocinantes</h2>