Skip to content

Commit 8744427

Browse files
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]>
1 parent f2196b1 commit 8744427

File tree

4 files changed

+102
-36
lines changed

4 files changed

+102
-36
lines changed

pycltheme/static/css/cl.css

Lines changed: 99 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,54 @@
11
:root {
22
--cl-blue: #0057a8;
33
--cl-red: #e22914;
4+
5+
/* Colores principales (brand) */
6+
--color-primary: #007BFF;
7+
--color-primary-light: #4DAFFF;
8+
9+
/* Colores de énfasis y acción */
10+
--color-accent: #D41C0F;
11+
--color-highlight: #FFC300;
12+
13+
/* Colores neutrales/base */
14+
--color-text: #151F27;
15+
--color-text-secondary: #333333;
16+
17+
/* Colores de fondo */
18+
--color-background: #FFFFFF;
19+
--color-background-alt: #FAFAFA;
20+
--color-background-dark: #151F27;
21+
22+
/* Colores de interfaz */
23+
--color-border: #C4C4C4;
24+
}
25+
26+
.bg-gradiente {
27+
background: linear-gradient(to bottom, var(--cl-blue) 0%, var(--color-primary) 90%, var(--color-primary-light) 100%);
428
}
529

630
* {
731
font-family: 'Open Sans', sans-serif;
832
}
933

34+
35+
h1, h2, h3, h4, h5, h6 {
36+
font-family: 'Montserrat', sans-serif;
37+
font-weight: 700;
38+
}
39+
40+
41+
.body {
42+
background-color: var(--color-background);
43+
color: var(--color-text);
44+
}
45+
1046
.navbar-dark .navbar-nav .nav-link {
1147
color: white;
1248
}
1349

1450
.navbar-dark .navbar-nav .nav-link:hover {
15-
color: #e1432e;
51+
color: var(--color-highlight);
1652
}
1753

1854
.navbar-dark .navbar-brand {
@@ -21,20 +57,20 @@
2157
}
2258

2359
a {
24-
color: var(--cl-blue);
60+
color: var(--color-primary);
2561
text-decoration: underline;
2662
}
2763

2864
a:hover {
29-
color: var(--cl-red);
65+
color: var(--color-accent);
3066
}
3167

3268

3369
.cabecera-index {
3470
color: white;
3571
height: 20vh;
3672
min-height: 230px;
37-
background-color: #343a40;
73+
background-color: var(--color-background-dark);
3874
background-size: cover;
3975
background-position: center;
4076
background-repeat: no-repeat;
@@ -44,7 +80,7 @@ a:hover {
4480
color: white;
4581
height: 5vh;
4682
min-height: 80px;
47-
background-color: #343a40;
83+
background-color: var(--color-background-dark);
4884
background-size: cover;
4985
background-position: center;
5086
background-repeat: no-repeat;
@@ -99,7 +135,7 @@ a:hover {
99135
}
100136

101137
.entradas-blog {
102-
background: #e3e3e3;
138+
background: var(--color-background-alt);
103139
}
104140

105141
.redes-sociales {
@@ -110,13 +146,15 @@ a:hover {
110146

111147
.plataformas {
112148
/*background: #343a40;*/
113-
background: var(--cl-blue);
149+
/*background: var(--cl-blue);*/
150+
background: linear-gradient(to bottom, var(--cl-blue) 0%, var(--color-primary) 60%, var(--color-primary-light) 100%);
151+
114152
padding-top: 10px;
115153
padding-bottom: 10px;
116154
}
117155

118156
.fondo-noche {
119-
background: #132e45;
157+
background: var(--color-background-dark);
120158
padding-top: 10px;
121159
padding-bottom: 10px;
122160
}
@@ -128,7 +166,7 @@ a:hover {
128166
}
129167

130168
.fondo-celeste {
131-
background: #4182bf;
169+
background: var(--color-primary);
132170
padding-top: 10px;
133171
padding-bottom: 10px;
134172
}
@@ -140,7 +178,7 @@ a:hover {
140178
}
141179

142180
.fab:hover {
143-
color: rgba(255, 67, 46, 1);
181+
color: var(--color-highlight);
144182
}
145183

146184
.patrocinadores {
@@ -154,6 +192,7 @@ a:hover {
154192
height: 8vw;
155193
object-fit: cover;
156194
max-height: 30vh;
195+
border-radius: 1em 1em 0 0;
157196
}
158197

159198
.card-img-top-coord {
@@ -167,22 +206,38 @@ a:hover {
167206
margin: 0 auto; /* Added */
168207
float: none; /* Added */
169208
margin-bottom: 10px; /* Added */
209+
border-radius: 1em;
210+
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;
170211
}
171212

172213
.card-text-coord {
173214
font-size: 10pt;
174215
}
175216

176-
.card-footer {
177-
padding: 5px;
178-
}
179-
180217
.card-title {
181218
font-size: 0.9em;
182219
}
183220

184221
.card-subtitle {
222+
font-size: 0.7em;
223+
}
224+
225+
226+
.card-footer {
227+
padding: 1em;
185228
font-size: 0.9em;
229+
background-color: var(--color-border);
230+
border-top: 1px solid var(--color-border);
231+
border-radius: 0 0 1em 1em !important;
232+
}
233+
234+
235+
.card-footer .url.fn {
236+
color: var(--color-primary);
237+
/*background-color: var(--color-background-dark);*/
238+
padding: 0.5em;
239+
border-radius: 0.5em;
240+
font-size: 1em;
186241
}
187242

188243
.list-inline-item {
@@ -191,8 +246,8 @@ a:hover {
191246

192247
/* Footer */
193248
.footer {
194-
background: var(--cl-blue);
195-
color:white;
249+
background: var(--color-background-dark);
250+
color:white !important;
196251
}
197252

198253
.enlaces ul {
@@ -227,7 +282,7 @@ a:hover {
227282
}
228283

229284
.published {
230-
color: #0157a8;
285+
color: var(--cl-blue);
231286
font-size: 0.9em;
232287
}
233288

@@ -236,19 +291,19 @@ a:hover {
236291
}
237292

238293
.entry-subtitle {
239-
color: #58636d;
240-
border-left: 5px solid rgba(225, 45, 27, 0.8);
241-
padding-left: 5px;
242-
margin-left: 5px;
294+
color: var(--color-text-secondary);
295+
border-left: 0.5em solid var(--color-accent);
296+
padding-left: 0.5em;
297+
margin-left: 0.5em;
243298
}
244299

245300
blockquote {
246-
color: #58636d;
247-
border-left: 5px solid rgba(1, 87, 168, 0.8);
301+
color: var(--color-primary);
302+
border-left: 5px solid var(--color-primary-light);
248303
padding-left: 15px;
249304
padding-top: 5px;
250305
padding-bottom: 5px;
251-
background-color: #f5f8f8;
306+
background-color: var(--color-background);
252307
}
253308

254309
.vauto {
@@ -266,7 +321,7 @@ blockquote {
266321
}
267322

268323
.red {
269-
color: #e12d1b;
324+
color: var(--cl-red);
270325
font-style: normal;
271326
}
272327

@@ -287,15 +342,19 @@ blockquote {
287342
.btn-default:active,
288343
.btn-default:visited,
289344
.btn-default:focus {
290-
background-color: #132e45;
291-
border-color: white;
345+
background-color: var(--color-accent);
292346
color:white;
293347
display: flex;
294348
align-items: center;
295-
}
349+
text-decoration: none;
350+
font-weight: 600;
351+
text-transform: uppercase;
352+
padding: 0.5em;
353+
border-radius: 0.8em !important;
354+
}
296355
.btn-default:hover {
297-
background-color: #859bee;
298-
border-color: #859bee;
356+
background-color: var(--cl-blue);
357+
border-color: var(--cl-blue);
299358
text-decoration: none;
300359
}
301360

@@ -435,7 +494,6 @@ ul.navbar-nav {
435494

436495
.bg-pyladies {
437496
background-color: pink !important;
438-
439497
}
440498

441499
.bg-pyladies a {
@@ -450,8 +508,9 @@ ul.navbar-nav {
450508
}
451509

452510
.titulo-bold {
453-
color: #343a40;
454-
font-weight: 800;
511+
color: var(--color-text);
512+
font-family: 'Montserrat', sans-serif;
513+
font-weight: 700;
455514
}
456515

457516
.w-30 {
@@ -467,8 +526,13 @@ ul.navbar-nav {
467526
}
468527

469528
.btn-primary {
470-
background-color: var(--cl-blue);
529+
background-color: var(--color-primary);
530+
color: white;
471531
text-decoration: none;
532+
font-weight: 600;
533+
text-transform: uppercase;
534+
padding: 0.5em;
535+
border-radius: 0.8em !important;
472536
}
473537

474538

@@ -494,3 +558,4 @@ ul.navbar-nav {
494558
max-height: 75vh;
495559
object-fit: cover;
496560
}
561+

pycltheme/templates/footer.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ <h4 class="mt-lg-0 mt-sm-4">Contacto</h4>
4242
</div>
4343
<div class="row mt-5">
4444
<div class="col copyright text-center">
45-
<p class=""><small class="text-white-50">Copyright © 2022 Python Chile. Todos los derechos reservados</small></p>
45+
<p class=""><small class="text-white-50">Copyright © 2022 - 2025 Python Chile. Todos los derechos reservados</small></p>
4646
</div>
4747
</div>
4848
</div>

pycltheme/templates/headermeta.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
<link rel="shortcut icon" type="image/png" href="{{ SITEURL }}/images/favicon.png"/>
1414
<link rel="preconnect" href="https://fonts.googleapis.com">
1515
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
16+
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
1617
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;800&display=swap" rel="stylesheet">
1718
<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>
1819
<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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ <h3 class="text-center pb-5 mb-3 titulo-bold">ÚLTIMAS ENTRADAS</h3>
2525

2626
{% include 'communities.html'%}
2727
<!-- Patrocinios -->
28-
<section class="fondo-gris pt-3 pb-1">
28+
<section class="bg-gradiente pt-3 pb-1">
2929
<div class="container">
3030
<div class="text-white pb-3 text-center">
3131
<h2>Nuestros Patrocinantes</h2>

0 commit comments

Comments
 (0)