Propuesta Identidad Visual (#132)

* Propuesta de diseño en base a colores para identidad visual

* Corregir color y peso para los tags

* Update pycltheme/static/css/cl.css

Agrega sugerencia respecto al tamaño del texto de los tags

Co-authored-by: Carlos Carrasco Varas <[email protected]>

---------

Co-authored-by: Carlos Carrasco Varas <[email protected]>

Author: crizconzeta

pycltheme/static/css/cl.css

@@ -1,18 +1,54 @@
 :root {
     --cl-blue: #0057a8;
     --cl-red: #e22914;
+
+    /* Colores principales (brand) */
+    --color-primary: #007BFF;     
+    --color-primary-light: #4DAFFF; 
+    
+    /* Colores de énfasis y acción */
+    --color-accent: #D41C0F;     
+    --color-highlight: #FFC300;  
+    
+    /* Colores neutrales/base */
+    --color-text: #151F27;        
+    --color-text-secondary: #333333; 
+    
+    /* Colores de fondo */
+    --color-background: #FFFFFF;   
+    --color-background-alt: #FAFAFA; 
+    --color-background-dark: #151F27; 
+
+    /* Colores de interfaz */
+    --color-border: #C4C4C4;     
+}
+
+.bg-gradiente {
+  background: linear-gradient(to bottom, var(--cl-blue) 0%, var(--color-primary) 90%, var(--color-primary-light) 100%);
 }
 
 * {
   font-family: 'Open Sans', sans-serif;
 }
 
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 700;
+}
+
+
+.body {
+  background-color: var(--color-background);
+  color: var(--color-text);
+}
+
 .navbar-dark .navbar-nav .nav-link {
   color: white;
 }
 
 .navbar-dark .navbar-nav .nav-link:hover {
-  color: #e1432e;
+  color: var(--color-highlight);
 }
 
 .navbar-dark .navbar-brand {
@@ -21,20 +57,20 @@
 }
 
 a {
-    color: var(--cl-blue);
+    color: var(--color-primary);
     text-decoration: underline;
 }
 
 a:hover {
-    color: var(--cl-red);
+    color: var(--color-accent);
 }
 
 
 .cabecera-index {
   color: white;
   height: 20vh;
   min-height: 230px;
-  background-color: #343a40;
+  background-color: var(--color-background-dark);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
@@ -44,7 +80,7 @@ a:hover {
   color: white;
   height: 5vh;
   min-height: 80px;
-  background-color: #343a40;
+  background-color: var(--color-background-dark);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
@@ -99,7 +135,7 @@ a:hover {
 }
 
 .entradas-blog {
-  background: #e3e3e3;
+  background: var(--color-background-alt);
 }
 
 .redes-sociales {
@@ -110,13 +146,15 @@ a:hover {
 
 .plataformas {
   /*background: #343a40;*/
-  background: var(--cl-blue);
+  /*background: var(--cl-blue);*/
+  background: linear-gradient(to bottom, var(--cl-blue) 0%, var(--color-primary) 60%, var(--color-primary-light) 100%);
+
   padding-top: 10px;
   padding-bottom: 10px;
 }
 
 .fondo-noche {
-  background: #132e45;
+  background: var(--color-background-dark);
   padding-top: 10px;
   padding-bottom: 10px;
 }
@@ -128,7 +166,7 @@ a:hover {
 }
 
 .fondo-celeste {
-  background: #4182bf;
+  background: var(--color-primary);
   padding-top: 10px;
   padding-bottom: 10px;
 }
@@ -140,7 +178,7 @@ a:hover {
 }
 
 .fab:hover {
-  color: rgba(255, 67, 46, 1);
+  color: var(--color-highlight);
 }
 
 .patrocinadores {
@@ -154,6 +192,7 @@ a:hover {
   height: 8vw;
   object-fit: cover;
   max-height: 30vh;
+  border-radius: 1em 1em 0 0;
 }
 
 .card-img-top-coord {
@@ -167,22 +206,38 @@ a:hover {
   margin: 0 auto; /* Added */
   float: none; /* Added */
   margin-bottom: 10px; /* Added */
+  border-radius: 1em;
+  box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;
 }
 
 .card-text-coord {
   font-size: 10pt;
 }
 
-.card-footer {
-  padding: 5px;
-}
-
 .card-title {
   font-size: 0.9em;
 }
 
 .card-subtitle {
+  font-size: 0.7em;
+}
+
+
+.card-footer {
+  padding: 1em;
   font-size: 0.9em;
+  background-color: var(--color-border);
+  border-top: 1px solid var(--color-border);
+  border-radius: 0 0 1em 1em !important;
+}
+
+
+.card-footer .url.fn {
+  color: var(--color-primary);
+  /*background-color: var(--color-background-dark);*/
+  padding: 0.5em;
+  border-radius: 0.5em;
+  font-size: 1em;
 }
 
 .list-inline-item {
@@ -191,8 +246,8 @@ a:hover {
 
 /* Footer */
 .footer {
-  background: var(--cl-blue);
-  color:white;
+  background: var(--color-background-dark);
+  color:white !important;
 }
 
 .enlaces ul {
@@ -227,7 +282,7 @@ a:hover {
 }
 
 .published {
-  color: #0157a8;
+  color: var(--cl-blue);
   font-size: 0.9em;
 }
 
@@ -236,19 +291,19 @@ a:hover {
 }
 
 .entry-subtitle {
-  color: #58636d;
-  border-left:  5px solid rgba(225, 45, 27, 0.8);
-  padding-left: 5px;
-  margin-left: 5px;
+  color: var(--color-text-secondary);
+  border-left:  0.5em solid var(--color-accent);
+  padding-left: 0.5em;
+  margin-left: 0.5em;
 }
 
 blockquote {
-  color: #58636d;
-  border-left:  5px solid rgba(1, 87, 168, 0.8);
+  color: var(--color-primary);
+  border-left:  5px solid var(--color-primary-light);
   padding-left: 15px;
   padding-top: 5px;
   padding-bottom: 5px;
-  background-color: #f5f8f8;
+  background-color: var(--color-background);
 }
 
 .vauto {
@@ -266,7 +321,7 @@ blockquote {
 }
 
 .red {
-  color: #e12d1b;
+  color: var(--cl-red);
   font-style: normal;
 }
 
@@ -287,15 +342,19 @@ blockquote {
  .btn-default:active,
  .btn-default:visited,
  .btn-default:focus {
-    background-color: #132e45;
-    border-color: white;
+    background-color: var(--color-accent);
     color:white;
     display: flex;
     align-items: center;
-}
+    text-decoration: none;
+    font-weight: 600;
+    text-transform: uppercase;
+    padding: 0.5em;
+    border-radius: 0.8em !important;
+  }
  .btn-default:hover {
-   background-color: #859bee;
-   border-color: #859bee;
+   background-color: var(--cl-blue);
+   border-color: var(--cl-blue);
    text-decoration: none;
 }
 
@@ -435,7 +494,6 @@ ul.navbar-nav {
 
 .bg-pyladies {
   background-color: pink !important;
-
 }
 
 .bg-pyladies a {
@@ -450,8 +508,9 @@ ul.navbar-nav {
 }
 
 .titulo-bold {
-  color: #343a40;
-  font-weight: 800;
+  color: var(--color-text);
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 700;
 }
 
 .w-30 {
@@ -467,8 +526,13 @@ ul.navbar-nav {
 }
 
 .btn-primary {
-    background-color: var(--cl-blue);
+    background-color: var(--color-primary);
+    color: white;
     text-decoration: none;
+    font-weight: 600;
+    text-transform: uppercase;
+    padding: 0.5em;
+    border-radius: 0.8em !important;
 }
 
 
@@ -494,3 +558,4 @@ ul.navbar-nav {
   max-height: 75vh;
   object-fit: cover;
 }
+

pycltheme/templates/footer.html

@@ -42,7 +42,7 @@ <h4 class="mt-lg-0 mt-sm-4">Contacto</h4>
       </div>
       <div class="row mt-5">
         <div class="col copyright text-center">
-          <p class=""><small class="text-white-50">Copyright © 2022 Python Chile. Todos los derechos reservados</small></p>
+          <p class=""><small class="text-white-50">Copyright © 2022 - 2025 Python Chile. Todos los derechos reservados</small></p>
         </div>
       </div>
     </div>

pycltheme/templates/headermeta.html

@@ -13,6 +13,7 @@
         <link rel="shortcut icon" type="image/png" href="{{ SITEURL }}/images/favicon.png"/>
         <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
         <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;800&display=swap" rel="stylesheet">
         <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/js/all.min.js" integrity="sha512-b+nQTCdtTBIRIbraqNEwsjB6UvL3UEMkXnhzd8awtCYh0Kcsjl9uEgwVFVbhoj3uu1DO1ZMacNvLoyJJiNfcvg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

pycltheme/templates/index.html

@@ -25,7 +25,7 @@ <h3 class="text-center pb-5 mb-3 titulo-bold">ÚLTIMAS ENTRADAS</h3>
 
 {% include 'communities.html'%}
 <!-- Patrocinios -->
-<section class="fondo-gris pt-3 pb-1">
+<section class="bg-gradiente pt-3 pb-1">
   <div class="container">
     <div class="text-white pb-3 text-center">
       <h2>Nuestros Patrocinantes</h2>