Skip to content

Commit f160fd3

Browse files
crizconzetacrizconzeta
committed
Propuesta de diseño en base a colores para identidad visual
1 parent 4d6d224 commit f160fd3

File tree

4 files changed

+100
-33
lines changed

4 files changed

+100
-33
lines changed

‎pycltheme/static/css/cl.css‎

Lines changed: 97 additions & 31 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
}
@@ -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,39 @@ 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+
color: white !important;
230+
background-color: var(--color-border);
231+
border-top: 1px solid var(--color-border);
232+
border-radius: 0 0 1em 1em !important;
233+
}
234+
235+
236+
.card-footer .url.fn {
237+
color: var(--color-highlight);
238+
background-color: var(--color-background-dark);
239+
padding: 0.5em;
240+
border-radius: 0.5em;
241+
font-size: 0.75em;
186242
}
187243

188244
.list-inline-item {
@@ -191,8 +247,8 @@ a:hover {
191247

192248
/* Footer */
193249
.footer {
194-
background: var(--cl-blue);
195-
color:white;
250+
background: var(--color-background-dark);
251+
color:white !important;
196252
}
197253

198254
.enlaces ul {
@@ -236,19 +292,19 @@ a:hover {
236292
}
237293

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

245301
blockquote {
246-
color: #58636d;
247-
border-left: 5px solid rgba(1, 87, 168, 0.8);
302+
color: var(--color-primary);
303+
border-left: 5px solid var(--color-primary-light);
248304
padding-left: 15px;
249305
padding-top: 5px;
250306
padding-bottom: 5px;
251-
background-color: #f5f8f8;
307+
background-color: var(--color-background);
252308
}
253309

254310
.vauto {
@@ -287,15 +343,19 @@ blockquote {
287343
.btn-default:active,
288344
.btn-default:visited,
289345
.btn-default:focus {
290-
background-color: #132e45;
291-
border-color: white;
346+
background-color: var(--color-accent);
292347
color:white;
293348
display: flex;
294349
align-items: center;
295-
}
350+
text-decoration: none;
351+
font-weight: 600;
352+
text-transform: uppercase;
353+
padding: 0.5em;
354+
border-radius: 0.8em !important;
355+
}
296356
.btn-default:hover {
297-
background-color: #859bee;
298-
border-color: #859bee;
357+
background-color: var(--cl-blue);
358+
border-color: var(--cl-blue);
299359
text-decoration: none;
300360
}
301361

@@ -435,7 +495,6 @@ ul.navbar-nav {
435495

436496
.bg-pyladies {
437497
background-color: pink !important;
438-
439498
}
440499

441500
.bg-pyladies a {
@@ -450,8 +509,9 @@ ul.navbar-nav {
450509
}
451510

452511
.titulo-bold {
453-
color: #343a40;
454-
font-weight: 800;
512+
color: var(--color-text);
513+
font-family: 'Montserrat', sans-serif;
514+
font-weight: 700;
455515
}
456516

457517
.w-30 {
@@ -467,8 +527,13 @@ ul.navbar-nav {
467527
}
468528

469529
.btn-primary {
470-
background-color: var(--cl-blue);
530+
background-color: var(--color-primary);
531+
color: white;
471532
text-decoration: none;
533+
font-weight: 600;
534+
text-transform: uppercase;
535+
padding: 0.5em;
536+
border-radius: 0.8em !important;
472537
}
473538

474539

@@ -494,3 +559,4 @@ ul.navbar-nav {
494559
max-height: 75vh;
495560
object-fit: cover;
496561
}
562+

‎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://kit.fontawesome.com/6cf87c29c5.js" crossorigin="anonymous"></script>
1819

‎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)