Skip to content

Commit 405250f

Browse files
MiguelGalpMiguelGalp
committed
[render-examples#5] - Sistema de colores - Tailwind
1 parent 10d109c commit 405250f

File tree

2 files changed

+91
-23
lines changed

2 files changed

+91
-23
lines changed

‎static/css/output.css

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -588,6 +588,30 @@ video {
588588
position: relative;
589589
}
590590

591+
.right-1 {
592+
right: 0.25rem;
593+
}
594+
595+
.top-6 {
596+
top: 1.5rem;
597+
}
598+
599+
.top-4 {
600+
top: 1rem;
601+
}
602+
603+
.top-3 {
604+
top: 0.75rem;
605+
}
606+
607+
.right-2 {
608+
right: 0.5rem;
609+
}
610+
611+
.right-4 {
612+
right: 1rem;
613+
}
614+
591615
.mx-1 {
592616
margin-left: 0.25rem;
593617
margin-right: 0.25rem;
@@ -610,6 +634,46 @@ video {
610634
margin-top: 0.25rem;
611635
}
612636

637+
.mr-20 {
638+
margin-right: 5rem;
639+
}
640+
641+
.mt-4 {
642+
margin-top: 1rem;
643+
}
644+
645+
.mt-2 {
646+
margin-top: 0.5rem;
647+
}
648+
649+
.mr-4 {
650+
margin-right: 1rem;
651+
}
652+
653+
.-mt-24 {
654+
margin-top: -6rem;
655+
}
656+
657+
.-mt-6 {
658+
margin-top: -1.5rem;
659+
}
660+
661+
.-mt-7 {
662+
margin-top: -1.75rem;
663+
}
664+
665+
.-mt-4 {
666+
margin-top: -1rem;
667+
}
668+
669+
.mr-6 {
670+
margin-right: 1.5rem;
671+
}
672+
673+
.mr-8 {
674+
margin-right: 2rem;
675+
}
676+
613677
.block {
614678
display: block;
615679
}
@@ -703,6 +767,10 @@ video {
703767
padding-right: 1rem;
704768
}
705769

770+
.pr-4 {
771+
padding-right: 1rem;
772+
}
773+
706774
.text-center {
707775
text-align: center;
708776
}
@@ -711,6 +779,10 @@ video {
711779
text-align: right;
712780
}
713781

782+
.font-extrabold {
783+
font-weight: 800;
784+
}
785+
714786
.filter {
715787
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
716788
}

‎templates/index.html

Lines changed: 19 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -9,32 +9,29 @@
99
<div class="flex flex-wrap items-center justify-center custom-position-content"
1010
style="--tw-translate-x: 35px; @media (min-width: 768px) { --tw-translate-x: 35px; } @media (min-width: 1024px) { --tw-translate-x: 100px; } @media (min-width: 1280px) { --tw-translate-x: 130px; }"
1111
x-data
12-
x-init="$el.style.transform = `translateX(${getComputedStyle($el).getPropertyValue('--tw-translate-x')})`">
13-
<!-- Converted to Tailwind; kept custom and inline styles -->
12+
x-init="$el.style.transform = `translateX(${getComputedStyle($el).getPropertyValue('--tw-translate-x')})`">
1413
<div class="w-full md:w-1/12 md:ml-2/12 text-center avatars-positions"
1514
style="margin-top: -4px; position: relative; right: 4px;">
1615
<img id="avatar_1" src="./static/public/Argentina.png" alt="MG" width="28" height="28" />
1716
<br><br>
1817
<img id="avatar_2" src="./static/public/Chile.png" alt="LA" width="28" height="28" />
1918
</div>
20-
<div class="w-full md:w-4/12 lg:w-4/12 xl:w-4/12 custom-margin-top" style="max-width: 250px;">
19+
<div class="w-full md:w-4/12 lg:w-4/12 xl:w-4/12" style="max-width: 250px;"> <!-- COLUMNA DASHBOARD -->
2120
<div class="mb-1">
22-
<div class="flex justify-between" style="width: 100%;">
23-
<!-- Template logic retained -->
21+
<div class="flex justify-between">
2422
{% if last_total_increase %}
2523
{% set now = datetime.now(pytz.timezone('America/Montevideo')) - timedelta(minutes=180) %}
2624
{% set time_diff = now - last_total_increase.timestamp %}
2725
{% set minutes_diff = time_diff.total_seconds() // 60 %}
28-
<div class="rounded-lg" style="width: 50%;"><mark class="ml-3 rounded-md">{{
26+
<div class="rounded-lg" style="width: 75%;"><mark class="ml-3 rounded-md">{{
2927
minutes_diff }} minutos atrás</mark>
3028
</div>
31-
<div class="text-right" style="width: 50%; position: relative; bottom: 1px; right: 110px;">
29+
<div class="text-right mr-20 mt-1"> <!-- VER POSICION PARA MOBILE Y EN ERROR-->
3230
<a href="https://github.com/MiguelGalp/opiodelospueblos"><img id="github_icon"
33-
src="./static/public/github-logo.png" alt="GitHub" width="12" height="12" /></a>
31+
src="./static/public/github-logo.png" alt="GitHub" width="20" height="20" /></a>
3432
</div>
3533
{% else %}
36-
<div class="rounded-lg" style="width: 50%"><mark class="ml-3 rounded-md">estamos viendo que
37-
pasa...</mark>
34+
<div class="rounded-lg" style="width: 50%"><mark class="ml-3 rounded-md">algo pasa...</mark>
3835
</div>
3936
<div class="text-right" style="width: 50%; position: relative; bottom: 5px;">
4037
<a href="https://github.com/MiguelGalp/opiodelospueblos"><img id="github_icon"
@@ -43,11 +40,10 @@
4340
{% endif %}
4441
</div>
4542
</div>
46-
<div class="relative flex flex-col min-w-0 break-words bg-white bg-clip-border border border-solid border-gray-200 rounded-md"
47-
style="height: 86px;">
43+
<!-- COMPONENTE ÍNDICE-->
44+
<div class="relative flex flex-col min-w-0 break-words bg-white bg-clip-border border border-solid border-gray-200 rounded-md">
4845
<div class="card-body p-5" style="background-color: var(--background-body);">
49-
<div class="p-0"
50-
style="background-color: var(--texto-azul-pleno); opacity: 39%; border-radius: 0.5rem; margin-top: -8px; margin-bottom:-8px;">
46+
<div class="p-0">
5147
<div
5248
style="height: 40px; width: {{ '%.2f'|format(min(total_engagement * 1000, 100)) }}%; background-color: #000; opacity: 30%;">
5349
</div>
@@ -56,23 +52,23 @@
5652
</div>
5753
<div class="flex justify-between" style="margin-top: 3px; margin-left: 30px;">
5854
<div class="flex items-center"
59-
style="filter: var(--legibilidad); font-size: 24px; font-weight: 900; color: var(--texto-amarillo-pleno); width: 50%; position: relative; bottom: 59px; left: 50px; z-index: 2;">
55+
style="filter: var(--legibilidad); font-size: 24px; font-weight: 900; color: var(--texto-amarillo-pleno); width: 50%; position: relative; bottom: 62px; left: 55px; z-index: 2;">
6056
{{ '%.2f'|format(min(total_engagement * 1000, 100)) }}%
6157
</div>
6258
</div>
6359
</div>
64-
<div class="w-full md:w-3/12 mx-1" style="filter: brightness(90%);">
65-
<div class="mt-1" style="letter-spacing: 0%;">
66-
<div class="text-uppercase inline"
67-
style="font-size: 20px; font-weight: 900; color: rgba(169, 198, 180, 0.7);">
68-
ODIO <div class="inline" style="color: rgba(250, 196, 111, 1);">OÍDO:</div>
60+
<div class="w-full md:w-3/12 mx-1">
61+
<div class="-mt-4 text-center mr-8 relative right-4" style="letter-spacing: 0%;">
62+
<div class="text-uppercase inline mr-20 relative right-1 top-3 font-extrabold"
63+
style="font-size: 20px;">
64+
ODIO <div class="inline" style="opacity: 40%;">OÍDO:</div>
6965
</div>
7066
<div class="text-uppercase"
7167
style="font-size: 28px; font-weight: 900; margin-top: -4px; color: var(--texto-azul-pleno);">
72-
TOXICIDAD <div class="inline" style="color: var(--texto-amarillo-pleno);">EN</div>
68+
TOXICIDAD <div class="inline">EN</div>
7369
</div>
74-
<p class="text-uppercase"
75-
style="font-size: 44px; font-weight: 900; margin-top: -7px; color: var(--texto-azul-pleno); opacity: 39%; position: relative; right: 1px;">
70+
<p class="text-uppercase text-44 font-extrabold relative right-1"
71+
style="font-size: 44px; opacity: 40%; margin-top: -26px;"> <!-- CLASES NO TAILWIND-->
7672
TWITTER
7773
</p>
7874
</div>

0 commit comments

Comments
 (0)