refactor: css semantic

DevSaLLein · Jul 6, 2024 · b93eb34 · b93eb34
1 parent 54f0d28
commit b93eb34
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 19 deletions.
diff --git a/index.html b/index.html
@@ -128,9 +128,9 @@ <h2 class="title-page">A creative landing page for you creative <span>webs.</spa
                     </button>
                 </div>
                 <figure data-aos="fade-left">
-                    <div class="geometricShapes geometricBlue"></div>
-                    <div class="geometricShapes geometricRed"></div>
-                    <div class="geometricShapes geometricYellow"></div>
+                    <div class="geometric-sharpe geometric-blue"></div>
+                    <div class="geometric-sharpe geometric-red"></div>
+                    <div class="geometric-sharpe geometric-yellow"></div>
                     <div class="play-container">
                         <img src="./assets/images/play-icon.png" alt="play-icon">
                     </div>

diff --git a/script.js b/script.js
@@ -16,7 +16,7 @@ window.addEventListener('load', () => {
     toggleButton.addEventListener('click', () => {
 
         toggleButton.children.item(0).classList.toggle('toggleModeSun');
-        document.body.classList.toggle('darkMode');
+        document.body.classList.toggle('dark-mode');
     });
 
     hamburger.addEventListener('click', () => {

diff --git a/style.css b/style.css
@@ -26,14 +26,14 @@ html ::-webkit-scrollbar {
   display: none;
 }
 
-body.darkMode {
+body.dark-mode {
   background-color: var(--text-color);
   color: white;
   --border-color: rgba(255, 255, 255, 0.1);
   --background-color-menuDropDown: #101720;
 }
 
-body.darkMode > header {
+body.dark-mode > header {
   background-color: var(--text-color);
 }
 
@@ -126,7 +126,7 @@ header > div > section > nav > ul > li {
   transition: all 0.2s ease;
 }
 
-body.darkMode .menu-container > svg {
+body.dark-mode .menu-container > svg {
   fill: white;
 }
 
@@ -343,38 +343,38 @@ main > section {
   position: relative;
 }
 
-.home > figure > .geometricShapes {
+.home > figure > .geometric-sharpe {
   position: absolute;
 }
 
-.home > figure > .geometricBlue {
+.home > figure > .geometric-blue {
   padding: 10%;
   top: -10px;
   left: -10px;
   border-radius: 10px 10px 100% 10px;
   background-color: #0d6efd;
-  animation: geometricShapeBlue-animation 6000ms infinite ease;
+  animation: geometric-shape-blue-animation 6000ms infinite ease;
 }
 
-.home > figure > .geometricYellow {
+.home > figure > .geometric-yellow {
   border-radius: 100% 0 100% 100%;
   background-color: #f1c40f;
   bottom: -20px;
   left: -20px;
   padding: 6%;
-  animation: geometricShapeYellow-animation 8000ms infinite ease;
+  animation: geometric-shape-yellow-animation 8000ms infinite ease;
 }
 
-.home > figure > .geometricRed {
+.home > figure > .geometric-red {
   border-radius: 50% 10px 50% 10px;
   background-color: #f4284a;
   padding: 20% 10%;
   bottom: -40px;
   right: -40px;
-  animation: geometricShapeRed-animation 9000ms infinite ease;
+  animation: geometric-shape-red-animation 9000ms infinite ease;
 }
 
-@keyframes geometricShapeBlue-animation {
+@keyframes geometric-shape-blue-animation {
   0% {
     transform: rotateZ(0deg);
   }
@@ -396,7 +396,7 @@ main > section {
   }
 }
 
-@keyframes geometricShapeYellow-animation {
+@keyframes geometric-shape-yellow-animation {
   0% {
     transform: rotateZ(0deg);
   }
@@ -418,7 +418,7 @@ main > section {
   }
 }
 
-@keyframes geometricShapeRed-animation {
+@keyframes geometric-shape-red-animation {
   0% {
     transform: rotateZ(0deg);
   }
@@ -765,11 +765,11 @@ button > span {
     font-size: 14px;
   }
 
-  body.darkMode .line {
+  body.dark-mode .line {
     stroke: white;
   }
 
-  body.darkMode .menu-mobile {
+  body.dark-mode .menu-mobile {
     background-color: var(--text-color);
   }