From ec241d07273a94ca50b4a502c32a3152de69e549 Mon Sep 17 00:00:00 2001
From: Tiago Porto <tiago@tiagoporto.com>
Date: Sun, 3 Mar 2024 22:54:11 -0300
Subject: [PATCH] Add initial simplified version

---
 src/index.html                                |  8 +--
 src/styles/components/_main.scss              |  6 ++
 src/styles/components/_sign-of-the-horns.scss | 67 ++++++++++++-------
 src/styles/index.scss                         |  1 +
 4 files changed, 51 insertions(+), 31 deletions(-)
 create mode 100644 src/styles/components/_main.scss

diff --git a/src/index.html b/src/index.html
index 059d43f..6af4335 100644
--- a/src/index.html
+++ b/src/index.html
@@ -72,7 +72,6 @@
         f.parentNode.insertBefore(j, f)
       })(window, document, 'script', 'dataLayer', '%VITE_GTM_ID%')
     </script>
-    <!-- End Google Tag Manager -->
 
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
@@ -94,7 +93,6 @@
         style="display: none; visibility: hidden"
       ></iframe
     ></noscript>
-    <!-- End Google Tag Manager (noscript) -->
 
     <header class="header">
       <h1>Sign Of The Horns <span>(Rock On!)</span></h1>
@@ -123,18 +121,18 @@ <h2>Single DIV</h2>
       </a>
     </header>
 
-    <main>
+    <main class="main">
       <div
         id="sign-of-the-horns"
         aria-label="Emoji hand doing a sign of the horns"
         class="sign-of-the-horns sign-of-the-horns_detailed"
       ></div>
 
-      <!-- <input type="checkbox" id="switch-input" />
+      <input type="checkbox" id="switch-input" />
       <label for="switch-input" class="switch">
         <span>Detailed</span>
         <span>Simplified</span>
-      </label> -->
+      </label>
     </main>
 
     <!-- <audio autoplay loop>
diff --git a/src/styles/components/_main.scss b/src/styles/components/_main.scss
new file mode 100644
index 0000000..a34c9fc
--- /dev/null
+++ b/src/styles/components/_main.scss
@@ -0,0 +1,6 @@
+.main {
+  display: flex;
+  flex-direction: column;
+  row-gap: 40px;
+  align-items: center;
+}
diff --git a/src/styles/components/_sign-of-the-horns.scss b/src/styles/components/_sign-of-the-horns.scss
index da7898d..33fb5b0 100644
--- a/src/styles/components/_sign-of-the-horns.scss
+++ b/src/styles/components/_sign-of-the-horns.scss
@@ -27,7 +27,7 @@
     height: math.div($height, 2.5);
     margin-top: math.round($height - math.div($height, 2.2));
 
-    background: var(--bg-color);
+    background-color: var(--bg-color);
     border-radius: 0 0 50% 50% / 0 50% 100% 90%;
 
     // index finger
@@ -82,64 +82,79 @@
   }
 
   &_simplified {
-    $width: math.round(math.div($height, 1.48));
+    $width: math.round(math.div($height, 1.6));
     $stroke-size: math.round($width * 0.03);
     $finger-width: math.round($width * 0.213);
-    $finger-height: math.round(math.div($width, 1.9));
-    $top-finger: 60px;
+    $finger-height: math.round(math.div($width, 2.2));
+    $finger-down-top: math.round(math.div($finger-height, 1.8));
+    $finger-down-stroke-top: math.round($finger-down-top * 1.08);
 
-    --bg-color: #fff;
-    --stroke-color: #000;
+    --bg-color: white;
+    --stroke-color: black;
 
     position: relative;
 
     width: $width;
-    height: 280px;
-    margin-top: 175px;
+    height: math.div($height, 2.3);
+    margin-top: 240px;
+    margin-right: 12px;
 
-    background: var(--bg-color);
+    background-color: var(--bg-color);
     border: $stroke-size solid var(--stroke-color);
     border-top: 0;
-    border-radius: 0 0 40% 40% / 40%;
+    border-radius: 0 0 35% 35% / 50%;
 
+    // Pinky finger
     &::before {
       @extend %pseudo-element;
 
-      top: -110px;
+      top: -170px;
 
       width: $finger-width;
       height: $finger-height;
 
       background: var(--bg-color);
-      border-radius: 50% / 15%;
+      border-radius: 50% / 20%;
+
+      // Pinky finger
       box-shadow:
-        0 20px 0 var(--bg-color),
+        0 80px 0 var(--bg-color),
         0 0 0 $stroke-size var(--stroke-color),
-        ($finger-width + $stroke-size) $top-finger 0 var(--bg-color),
-        ($finger-width + $stroke-size) $top-finger 0 $stroke-size
+        0 60px 0 $stroke-size var(--stroke-color),
+        // Ring finger
+        ($finger-width + $stroke-size) $finger-down-top 0 var(--bg-color),
+        ($finger-width + $stroke-size) $finger-down-top 0 $stroke-size
           var(--stroke-color),
-        (($finger-width * 2) + ($stroke-size * 2)) $top-finger 0 var(--bg-color),
-        (($finger-width * 2) + ($stroke-size * 2)) $top-finger 0 $stroke-size
+        // Middle finger
+        (($finger-width * 2) + ($stroke-size * 2)) $finger-down-top 0
+          var(--bg-color),
+        (($finger-width * 2) + ($stroke-size * 2)) $finger-down-top 0
+          $stroke-size var(--stroke-color),
+        // Index finger
+        (($finger-width * 3) + ($stroke-size * 3)) -60px 0 var(--bg-color),
+        (($finger-width * 3) + ($stroke-size * 3)) 35px 0 var(--bg-color),
+        (($finger-width * 3) + ($stroke-size * 3)) 90px 0 var(--bg-color),
+        (($finger-width * 3) + ($stroke-size * 3)) -60px 0 $stroke-size var(--stroke-color),
+        (($finger-width * 3) + ($stroke-size * 3)) 35px 0 $stroke-size
           var(--stroke-color),
-        (($finger-width * 3) + ($stroke-size * 3)) 0 0 var(--bg-color),
-        (($finger-width * 3) + ($stroke-size * 3)) 20px 0 var(--bg-color),
-        (($finger-width * 3) + ($stroke-size * 3)) 0 0 $stroke-size
+        (($finger-width * 3) + ($stroke-size * 3)) 60px 0 $stroke-size
           var(--stroke-color);
     }
 
+    // Thumb
     &::after {
       @extend %pseudo-element;
 
-      top: 50px;
-      right: -20px;
-      transform: rotate(5deg);
+      top: -25px;
+      right: 10px;
+      transform: rotate(100deg);
 
-      width: 100px;
-      height: $finger-width;
+      width: $finger-width + $stroke-size * 2;
+      height: $finger-height + $stroke-size * 2;
 
       background: var(--bg-color);
       border: $stroke-size solid var(--stroke-color);
-      border-radius: 25px;
+      border-radius: 60% / 22% 22% 26% 28%;
     }
   }
 }
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 6c26d75..6cc66b8 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -5,5 +5,6 @@
 @import 'components/header';
 @import 'components/sign-of-the-horns';
 @import 'components/headers';
+@import 'components/main';
 @import 'components/github-corner';
 @import 'components/switch';