Refactor index.html and style.css, update button styling and colors

Anto426 · Oct 10, 2024 · 3d92786 · 3d92786
1 parent 6705479
commit 3d92786
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 59 deletions.
diff --git a/index.html b/index.html
@@ -51,28 +51,15 @@ <h6 class="p" id="anto-About-fild"></h6>
                     </div>
                     <div class="p-5 d-flex flex-column justify-content-center align-items-center">
                         <h4 class="h4" id="anto-Social-fild">—͟͞͞📱】Social:</h4>
-                        <div class="p-1 w-100">
-                            <a
-                                href="https://x.com/anto4_2_6"
-                                id="anto-Social-x"
-                                class="btn btn-outline-primary btn-lg m-1 w-100"
-                                target="_blank"
-                            >
-                                <i class="bi bi-twitter-x w-100"></i>
-                                Twitter
-                            </a>
-                        </div>
-                        <div class="p-1 w-100">
-                            <a
-                                href="https://github.com/Anto426/"
-                                id="anto-Social-github"
-                                class="btn btn-outline-dark btn-lg m-1 w-100"
-                                target="_blank"
-                            >
-                                <i class="bi bi-github"></i>
-                                GitHub
-                            </a>
-                        </div>
+                        <a class="p-1 btn anto-btn w-100 p" id="anto-btn" >
+                            <i class="bi bi-github"></i>
+                            Github
+                        </a>
+
+                        <a class="p-1 btn anto-btn w-100 p" id="anto-btn" >
+                            <i class="bi bi-twitter-x"></i>
+                            Twitter
+                        </a>
                     </div>
                 </div>
             </div>

diff --git a/src/css/style.css b/src/css/style.css
@@ -1,13 +1,13 @@
 :root {
-    --default-text-color: #5f105b;
+    --default-item-color: #5f105b;
     --default-bg-gradient: linear-gradient(90deg, #5c0749fd, #42075e, #570645fd);
     --default-prymarybox-bg: rgb(255, 255, 255, 0.35);
 }
 
 
 
 .anto-bg-gradient {
-    color: var(--default-text-color);
+    color: var(--default-item-color);
     background: var(--default-bg-gradient);
     background-size: 400% 400%;
     animation: animationbg 25s alternate infinite;
@@ -17,6 +17,13 @@
 
 
 
+#anto-btn {
+    color: var(--default-item-color) !important;
+    background-color: transparent !important;
+    width: 100vw;
+}
+
+
 #anto-prymarycontainer {
     height: 100vh;
     width: 100vw;
@@ -34,7 +41,7 @@
 
 
 #anto-prymarybox {
-    display: none ;
+    display: none;
     flex-direction: row;
     justify-content: center;
     align-items: center;
@@ -55,7 +62,7 @@
     height: 130px;
     width: 130px;
     border-radius: 100px;
-    border: var(--text-color) 2px solid;
+    border: var(--default-item-color) 2px solid;
     margin: 0, 0, 0, 0;
 }
 
@@ -67,41 +74,16 @@
 
 }
 
-@keyframes animationbg {
-    from {
-        background-position: 0% 50%;
-    }
-
-    to {
-        background-position: 100% 50%;
-    }
-
-}
-
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-
-
-
-
-
 .loader {
     width: 40vw;
     height: 22px;
     border-radius: 40px;
-    color: #514b82;
+    color: var(--default-item-color);
     border: 2px solid;
     position: relative;
-  }
+}
 
-  .loader::before {
+.loader::before {
     content: "";
     position: absolute;
     margin: 2px;
@@ -112,10 +94,36 @@
     border-radius: inherit;
     background: currentColor;
     animation: l3 1s infinite linear;
-  }
+}
+
+
+
+@keyframes l3 {
+    50% {
+        left: 100%;
+        transform: translateX(calc(-100% - 4px))
+    }
+}
 
 
+@keyframes animationbg {
+    from {
+        background-position: 0% 50%;
+    }
 
-  @keyframes l3 {
-      50% {left:100%;transform: translateX(calc(-100% - 4px))}
-  }
+    to {
+        background-position: 100% 50%;
+    }
+
+}
+
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
diff --git a/src/js/class/DynamicColor.js b/src/js/class/DynamicColor.js
@@ -93,7 +93,7 @@ class DynamicColor {
         console.log("New Text color " + textcolor);
 
         const paletteColors = this.Palette.map(color => `rgb(${color[0]}, ${color[1]}, ${color[2]})`);
-        document.documentElement.style.setProperty('--default-text-color', this.ColorFunctions.ArrayToRgb(textcolor));
+        document.documentElement.style.setProperty('--default-item-color', this.ColorFunctions.ArrayToRgb(textcolor));
         document.documentElement.style.setProperty('--default-bg-gradient', `linear-gradient(to right, ${paletteColors.join(', ')})`);
 
     }