WIP simplified version

tiagoporto · Mar 3, 2024 · 7a7f0f5 · 7a7f0f5
1 parent 2f066f8
commit 7a7f0f5
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 63 deletions.
diff --git a/src/styles/_base.scss b/src/styles/_base.scss
@@ -16,18 +16,26 @@ html {
 
   font-size: 100%;
 
-  background-color: var(--bg-color);
+  background-color: var(--globar-bg-color);
   background-image: radial-gradient(
-    circle at center 65%,
-    #202020 0,
-    var(--bg-color) 70%
+    circle at center 60%,
+    #202020 10%,
+    var(--globar-bg-color) 70%
   );
 
-  @media screen and (width <= 600px) {
+  @media screen and (orientation: portrait) and (height <= 2000px) {
     background-image: radial-gradient(
-      circle at center 58%,
-      #4a4949 0,
-      var(--bg-color) 80%
+      ellipse closest-corner at center 30%,
+      #202020 0,
+      var(--globar-bg-color) 90%
+    );
+  }
+
+  @media screen and (orientation: portrait) and (height <= 1000px) {
+    background-image: radial-gradient(
+      circle at center 50%,
+      #202020 25%,
+      var(--globar-bg-color) 100%
     );
   }
 }

diff --git a/src/styles/components/_github-corner.scss b/src/styles/components/_github-corner.scss
@@ -7,7 +7,7 @@ $animation-duration: octocat-wave 560ms ease-in-out;
     top: 0;
     right: 0;
 
-    color: var(--bg-color);
+    color: var(--globar-bg-color);
 
     border: 0;
 

diff --git a/src/styles/components/_sign-of-the-horns.scss b/src/styles/components/_sign-of-the-horns.scss
@@ -8,25 +8,26 @@
 
 // Palm
 .sign-of-the-horns {
+  $height: 500px;
+
   &_detailed {
-    $height: 500px;
     $width: math.round(math.div($height, 1.6));
     $finger-height: math.round(math.div($height, 2.85));
     $finger-width: math.round(math.div($width, 4.2));
-    $folded-finger-top: math.round(math.div($finger-height, 1.3));
-    $folded-shadow-finger-top: math.round($folded-finger-top * 1.08);
+    $finger-down-top: math.round(math.div($finger-height, 1.3));
+    $finger-down-shadow-top: math.round($finger-down-top * 1.08);
     $shadow-alpha: #00000060;
 
-    --color: #ffc929;
-    --shadow: color-mix(in srgb, black 34%, var(--color));
+    --bg-color: #ffc929;
+    --shadow: color-mix(in srgb, black 34%, var(--bg-color));
 
     position: relative;
 
     width: $width;
     height: math.div($height, 2.5);
     margin-top: math.round($height - math.div($height, 2.2));
 
-    background: var(--color);
+    background: var(--bg-color);
     border-radius: 0 0 50% 50% / 0 50% 100% 90%;
 
     // index finger
@@ -39,21 +40,21 @@
       width: $finger-width;
       height: $finger-height;
 
-      background: var(--color);
+      background: var(--bg-color);
       border-radius: 50% / 22%;
       box-shadow:
         // index finger
-        0 math.div($finger-height, 1.65) 0 var(--color),
+        0 math.div($finger-height, 1.65) 0 var(--bg-color),
         -($finger-width * 0.05) math.div($finger-height, 1.7) 0 $shadow-alpha,
         // middle finger
-        -$finger-width $folded-finger-top 0 var(--color),
-        -($finger-width * 1.08) $folded-shadow-finger-top 0 $shadow-alpha,
+        -$finger-width $finger-down-top 0 var(--bg-color),
+        -($finger-width * 1.08) $finger-down-shadow-top 0 $shadow-alpha,
         // ring finger
-        -($finger-width * 2) $folded-finger-top 0 var(--color),
-        -($finger-width * 2.08) $folded-shadow-finger-top 0 $shadow-alpha,
+        -($finger-width * 2) $finger-down-top 0 var(--bg-color),
+        -($finger-width * 2.08) $finger-down-shadow-top 0 $shadow-alpha,
         // pinky finger
-        -($finger-width * 3) math.div($finger-height, 3) var(--color),
-        -($finger-width * 3) $folded-finger-top var(--color);
+        -($finger-width * 3) math.div($finger-height, 3) var(--bg-color),
+        -($finger-width * 3) $finger-down-top var(--bg-color);
     }
 
     // thumb
@@ -68,65 +69,62 @@
       width: $thumb-width;
       height: math.round($finger-width * 1.08);
 
-      background: var(--color);
+      background: var(--bg-color);
       border-radius: 50% 35% 0 40% / 50% 45% 50% 45%;
       box-shadow:
-        -(math.div($thumb-width, 2)) 0 0 var(--color),
+        -(math.div($thumb-width, 2)) 0 0 var(--bg-color),
         -($thumb-width * 0.585) ($finger-height * 0.035) 0 var(--shadow),
-        -($thumb-width * 0.25) 0 0 var(--color),
+        -($thumb-width * 0.25) 0 0 var(--bg-color),
         -($thumb-width * 0.34) ($finger-height * 0.01 * -1) 0 var(--shadow),
         -($thumb-width * 0.57) ($finger-height * 0.01 * -1) 0 var(--shadow),
         -($thumb-width * 0.58) 0 0 var(--shadow);
     }
   }
 
   &_simplified {
-    $stroke-color: #fff;
-    $bg-color: #000;
-    $width: 216px;
-    $sign-of-the-horns-top-finger: 60px;
-    $stroke-size: 8px;
-    $sign-of-the-horns-finger-width: 44px;
-    $sign-of-the-horns-finger-height: 120px;
+    $width: math.round(math.div($height, 1.48));
+    $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;
+
+    --bg-color: #fff;
+    --stroke-color: #000;
 
     position: relative;
 
     width: $width;
-    height: 150px;
-    margin-top: 300px;
+    height: 280px;
+    margin-top: 175px;
 
-    background: $stroke-color;
-    border: 8px solid #000;
+    background: var(--bg-color);
+    border: $stroke-size solid var(--stroke-color);
     border-top: 0;
-    border-radius: 0 0 50px 50px;
+    border-radius: 0 0 40% 40% / 40%;
 
     &::before {
       @extend %pseudo-element;
 
-      top: -100px;
+      top: -110px;
 
-      width: $sign-of-the-horns-finger-width;
-      height: $sign-of-the-horns-finger-height;
+      width: $finger-width;
+      height: $finger-height;
 
-      background: $stroke-color;
-      border-radius: 20px;
+      background: var(--bg-color);
+      border-radius: 50% / 15%;
       box-shadow:
-        0 20px 0 $stroke-color,
-        0 0 0 $stroke-size $bg-color,
-        ($sign-of-the-horns-finger-width + $stroke-size)
-          $sign-of-the-horns-top-finger 0 $stroke-color,
-        ($sign-of-the-horns-finger-width + $stroke-size)
-          $sign-of-the-horns-top-finger 0 $stroke-size $bg-color,
-        (($sign-of-the-horns-finger-width * 2) + ($stroke-size * 2))
-          $sign-of-the-horns-top-finger 0 $stroke-color,
-        (($sign-of-the-horns-finger-width * 2) + ($stroke-size * 2))
-          $sign-of-the-horns-top-finger 0 $stroke-size $bg-color,
-        (($sign-of-the-horns-finger-width * 3) + ($stroke-size * 3)) 0 0
-          $stroke-color,
-        (($sign-of-the-horns-finger-width * 3) + ($stroke-size * 3)) 20px 0
-          $stroke-color,
-        (($sign-of-the-horns-finger-width * 3) + ($stroke-size * 3)) 0 0
-          $stroke-size $bg-color;
+        0 20px 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
+          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
+          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
+          var(--stroke-color);
     }
 
     &::after {
@@ -137,10 +135,10 @@
       transform: rotate(5deg);
 
       width: 100px;
-      height: $sign-of-the-horns-finger-width;
+      height: $finger-width;
 
-      background: $stroke-color;
-      border: $stroke-size solid $bg-color;
+      background: var(--bg-color);
+      border: $stroke-size solid var(--stroke-color);
       border-radius: 25px;
     }
   }

diff --git a/src/styles/settings/_variables.scss b/src/styles/settings/_variables.scss
@@ -1,6 +1,6 @@
 :root {
   /* Color */
-  --bg-color: #000;
+  --globar-bg-color: #000;
   --selection-color: #fff;
   --selection-bg-color: var(--primary-color);