chore: more cleaning

limbo-works · May 22, 2024 · 76163e9 · 76163e9
1 parent 23c9ea6
commit 76163e9
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 28 deletions.
diff --git a/0-1-intro/index.html b/0-1-intro/index.html
@@ -13,7 +13,7 @@
     </header>
 
     <div
-      class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col gap-[64px]"
+      class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col gap-[64px] pb-[32px]"
     >
       <section>
         <span>Topic</span>

diff --git a/1-2-clippath/styles.css b/1-2-clippath/styles.css
@@ -1,3 +1,28 @@
+.target {
+  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
+  transition: 800ms cubic-bezier(0.5, 0, 0.2, 1);
+}
+
+.container:hover .target {
+  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+}
+
+.target:nth-child(1) {
+  transition-delay: 0ms;
+}
+.target:nth-child(2) {
+  transition-delay: 100ms;
+}
+.target:nth-child(3) {
+  transition-delay: 200ms;
+}
+.target:nth-child(4) {
+  transition-delay: 300ms;
+}
+
+/** 
+  The rest isn't related to the clip-path animation.
+*/
 .target {
   position: relative;
   flex: 1;
@@ -7,9 +32,6 @@
   background-image: url(https://images.unsplash.com/photo-1716125583397-e7cc7469c3f2?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
   background-size: cover;
   background-position: center;
-
-  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
-  transition: 800ms cubic-bezier(0.5, 0, 0.2, 1);
 }
 
 .container::after {
@@ -24,20 +46,3 @@
   mix-blend-mode: multiply;
   opacity: 0.1;
 }
-
-.container:hover .target {
-  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
-}
-
-.target:nth-child(1) {
-  transition-delay: 0ms;
-}
-.target:nth-child(2) {
-  transition-delay: 100ms;
-}
-.target:nth-child(3) {
-  transition-delay: 200ms;
-}
-.target:nth-child(4) {
-  transition-delay: 300ms;
-}
diff --git a/4-1-mouse/styles.css b/4-1-mouse/styles.css
@@ -2,18 +2,18 @@
   position: fixed;
   top: 0;
   left: 0;
-  width: 128px;
-  height: 128px;
-  border-radius: 32px;
+  width: 256px;
+  height: 256px;
+  border-radius: 128px;
   background-color: var(--color-beige);
+  transform: translate(-50%, -50%);
+  opacity: 0.5;
 
   /**
     Moves the element to the cursor position,
     using the css variables we set through the
     script file.
   */
-
-  transform: translate(calc(var(--x) - 50%), calc(var(--y) - 50%));
-
-  /* transform: translate(var(--x), var(--y)); */
+  top: var(--y);
+  left: var(--x);
 }