diff --git a/src/styles/_base.scss b/src/styles/_base.scss index f70c46a..79a9931 100644 --- 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 index fc0fe2c..6a4d095 100644 --- 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 index dc876a1..da7898d 100644 --- a/src/styles/components/_sign-of-the-horns.scss +++ b/src/styles/components/_sign-of-the-horns.scss @@ -8,17 +8,18 @@ // 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; @@ -26,7 +27,7 @@ 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,12 +69,12 @@ 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); @@ -81,52 +82,49 @@ } &_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 index 2744569..1da1654 100644 --- 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);