From f813fb414c6ae7a6f8d6ae6d29bdcbdc890a8998 Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Sun, 24 Nov 2024 22:16:59 +0500
Subject: [PATCH] refactor: change color scheme
---
index.html | 8 +--
static/tailwind.css | 151 +++++++++++++++++---------------------------
tailwind.config.js | 6 +-
3 files changed, 66 insertions(+), 99 deletions(-)
diff --git a/index.html b/index.html
index 7e76eaf..c074114 100644
--- a/index.html
+++ b/index.html
@@ -147,10 +147,10 @@
</div>
</div>
<div class="flex flex-col overflow-hidden rounded-lg">
- <div class="flex items-center justify-center w-full p-8 bg-bg-pink">
+ <div class="flex items-center justify-center w-full p-8 bg-pink-600">
<p class="text-4xl font-bold">Music</p>
</div>
- <div class="flex justify-center px-8 py-4 bg-opacity-50 bg-bg-pink">
+ <div class="flex justify-center px-8 py-4 bg-opacity-50 bg-pink-600">
<p class="text-lg font-light">I listen a lot of various music, but mainly listen to
EDM \ Happy Hardcore \ Tech \ Rock \ Alternative. By artist like: S3RL, Camellia,
t+pazolite, BTMH, Saint Motel, and more...</p>
@@ -308,7 +308,7 @@
<div class="flex flex-wrap w-full gap-1">
<div
class="w-full aspect-[2/1] border-transparent border-2 border-solid max-h-[182px] overflow-hidden rounded-lg">
- <div class="flex items-end justify-end w-full h-full bg-bg-blue">
+ <div class="flex items-end justify-end w-full h-full bg-blue-500">
<p class="font-bold text-4xl p-[8px]">SOCIAL MEDIA</p>
</div>
</div>
@@ -454,7 +454,7 @@
<div class="flex flex-wrap w-full gap-1">
<div
class="w-full aspect-[2/1] border-transparent border-2 border-solid max-h-[182px] overflow-hidden rounded-lg">
- <div class="flex items-end justify-end w-full h-full bg-bg-pink">
+ <div class="flex items-end justify-end w-full h-full bg-pink-600">
<p class="font-bold text-4xl p-[8px]">CONTACT</p>
</div>
</div>
diff --git a/static/tailwind.css b/static/tailwind.css
index e863731..24d8647 100644
--- a/static/tailwind.css
+++ b/static/tailwind.css
@@ -698,10 +698,6 @@ video {
margin-top: 0.25rem;
}
-.mt-4 {
- margin-top: 1rem;
-}
-
.block {
display: block;
}
@@ -929,11 +925,56 @@ video {
border-color: transparent;
}
+.bg-\[\#05539f\] {
+ --tw-bg-opacity: 1;
+ background-color: rgb(5 83 159 / var(--tw-bg-opacity));
+}
+
.bg-\[\#0E1621\] {
--tw-bg-opacity: 1;
background-color: rgb(14 22 33 / var(--tw-bg-opacity));
}
+.bg-\[\#1f6cc5\] {
+ --tw-bg-opacity: 1;
+ background-color: rgb(31 108 197 / var(--tw-bg-opacity));
+}
+
+.bg-\[\#2d347e\] {
+ --tw-bg-opacity: 1;
+ background-color: rgb(45 52 126 / var(--tw-bg-opacity));
+}
+
+.bg-\[\#2f7ca3\] {
+ --tw-bg-opacity: 1;
+ background-color: rgb(47 124 163 / var(--tw-bg-opacity));
+}
+
+.bg-\[\#353231\] {
+ --tw-bg-opacity: 1;
+ background-color: rgb(53 50 49 / var(--tw-bg-opacity));
+}
+
+.bg-\[\#3b79a7\] {
+ --tw-bg-opacity: 1;
+ background-color: rgb(59 121 167 / var(--tw-bg-opacity));
+}
+
+.bg-\[\#3c72a1\] {
+ --tw-bg-opacity: 1;
+ background-color: rgb(60 114 161 / var(--tw-bg-opacity));
+}
+
+.bg-\[\#615141\] {
+ --tw-bg-opacity: 1;
+ background-color: rgb(97 81 65 / var(--tw-bg-opacity));
+}
+
+.bg-\[\#715b38\] {
+ --tw-bg-opacity: 1;
+ background-color: rgb(113 91 56 / var(--tw-bg-opacity));
+}
+
.bg-\[\#F5F5F5\] {
--tw-bg-opacity: 1;
background-color: rgb(245 245 245 / var(--tw-bg-opacity));
@@ -941,17 +982,17 @@ video {
.bg-bg-black {
--tw-bg-opacity: 1;
- background-color: rgb(32 32 32 / var(--tw-bg-opacity));
+ background-color: rgb(18 27 44 / var(--tw-bg-opacity));
}
.bg-bg-blue {
--tw-bg-opacity: 1;
- background-color: rgb(41 143 245 / var(--tw-bg-opacity));
+ background-color: rgb(146 207 245 / var(--tw-bg-opacity));
}
.bg-bg-gray {
--tw-bg-opacity: 1;
- background-color: rgb(41 41 41 / var(--tw-bg-opacity));
+ background-color: rgb(38 38 38 / var(--tw-bg-opacity));
}
.bg-bg-pink {
@@ -989,94 +1030,29 @@ video {
background-color: rgb(234 179 8 / var(--tw-bg-opacity));
}
-.bg-\[\#615141\] {
+.bg-pink-600 {
--tw-bg-opacity: 1;
- background-color: rgb(97 81 65 / var(--tw-bg-opacity));
+ background-color: rgb(219 39 119 / var(--tw-bg-opacity));
}
-.bg-\[\#353231\] {
+.bg-blue-600 {
--tw-bg-opacity: 1;
- background-color: rgb(53 50 49 / var(--tw-bg-opacity));
+ background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}
-.bg-\[\#05539f\] {
+.bg-blue-500 {
--tw-bg-opacity: 1;
- background-color: rgb(5 83 159 / var(--tw-bg-opacity));
+ background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}
-.bg-\[\#2684f0\] {
+.bg-blue-700 {
--tw-bg-opacity: 1;
- background-color: rgb(38 132 240 / var(--tw-bg-opacity));
+ background-color: rgb(29 78 216 / var(--tw-bg-opacity));
}
-.bg-\[\#3b79a7\] {
+.bg-pink-500 {
--tw-bg-opacity: 1;
- background-color: rgb(59 121 167 / var(--tw-bg-opacity));
-}
-
-.bg-\[\#4786bc\] {
- --tw-bg-opacity: 1;
- background-color: rgb(71 134 188 / var(--tw-bg-opacity));
-}
-
-.bg-\[\#3c72a1\] {
- --tw-bg-opacity: 1;
- background-color: rgb(60 114 161 / var(--tw-bg-opacity));
-}
-
-.bg-\[\#e4b76f\] {
- --tw-bg-opacity: 1;
- background-color: rgb(228 183 111 / var(--tw-bg-opacity));
-}
-
-.bg-\[\#715b38\] {
- --tw-bg-opacity: 1;
- background-color: rgb(113 91 56 / var(--tw-bg-opacity));
-}
-
-.bg-\[\#2174d3\] {
- --tw-bg-opacity: 1;
- background-color: rgb(33 116 211 / var(--tw-bg-opacity));
-}
-
-.bg-\[\#1f6cc5\] {
- --tw-bg-opacity: 1;
- background-color: rgb(31 108 197 / var(--tw-bg-opacity));
-}
-
-.bg-\[\#3e47ab\] {
- --tw-bg-opacity: 1;
- background-color: rgb(62 71 171 / var(--tw-bg-opacity));
-}
-
-.bg-\[\#368bb6\] {
- --tw-bg-opacity: 1;
- background-color: rgb(54 139 182 / var(--tw-bg-opacity));
-}
-
-.bg-\[\#38419b\] {
- --tw-bg-opacity: 1;
- background-color: rgb(56 65 155 / var(--tw-bg-opacity));
-}
-
-.bg-\[\#323a8b\] {
- --tw-bg-opacity: 1;
- background-color: rgb(50 58 139 / var(--tw-bg-opacity));
-}
-
-.bg-\[\#2d347e\] {
- --tw-bg-opacity: 1;
- background-color: rgb(45 52 126 / var(--tw-bg-opacity));
-}
-
-.bg-\[\#3281a8\] {
- --tw-bg-opacity: 1;
- background-color: rgb(50 129 168 / var(--tw-bg-opacity));
-}
-
-.bg-\[\#2f7ca3\] {
- --tw-bg-opacity: 1;
- background-color: rgb(47 124 163 / var(--tw-bg-opacity));
+ background-color: rgb(236 72 153 / var(--tw-bg-opacity));
}
.bg-opacity-40 {
@@ -1259,10 +1235,6 @@ video {
filter: darken(10%);
}
-.\[flex-grow\:1\] {
- flex-grow: 1;
-}
-
@font-face {
font-family: 'Inter';
@@ -1321,7 +1293,7 @@ body {
.hover\:border-bg-blue:hover {
--tw-border-opacity: 1;
- border-color: rgb(41 143 245 / var(--tw-border-opacity));
+ border-color: rgb(146 207 245 / var(--tw-border-opacity));
}
.hover\:underline:hover {
@@ -1408,11 +1380,6 @@ body {
padding-right: 0px;
}
- .sm\:px-4 {
- padding-left: 1rem;
- padding-right: 1rem;
- }
-
.sm\:py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
diff --git a/tailwind.config.js b/tailwind.config.js
index 3ce1d47..67d01a7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,9 +5,9 @@ module.exports = {
extend: {
colors: {
"bg-pink": "#FF478B",
- "bg-blue": "#298FF5",
- "bg-black": "#202020",
- "bg-gray": "#292929",
+ "bg-blue": "#92cff5",
+ "bg-black": "#121b2c",
+ "bg-gray": "#262626",
},
screens: {
xs: "370px",