diff --git a/client/src/styles/styles.scss b/client/src/styles/styles.scss index 01bed32ab..a152e5ba1 100644 --- a/client/src/styles/styles.scss +++ b/client/src/styles/styles.scss @@ -1,24 +1,3 @@ -body{ - overflow-y:scroll; - - &::-webkit-scrollbar-track { - border: 1px solid #000; - padding: 2px 0; - background-color: #404040; - } - - &::-webkit-scrollbar { - width: 10px; - } - - &::-webkit-scrollbar-thumb { - border-radius: 10px; - box-shadow: inset 0 0 6px rgba(0,0,0,.3); - background-color: #737272; - border: 1px solid #000; - } -} - $break-big: 1280px; $break-middle: 992px; $break-small: 768px; @@ -40,6 +19,52 @@ $transition-time: 0.3s; $advanced-algos-red: rgb(245,88,88); +@function strip-unit($value) { + @return $value / ($value * 0 + 1); +} + +@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) { + $u1: unit($min-vw); + $u2: unit($max-vw); + $u3: unit($min-font-size); + $u4: unit($max-font-size); + + @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 { + & { + + font-size: $min-font-size; + @media screen and (min-width: $min-vw) { + font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})); + } + + @media screen and (min-width: $max-vw) { + font-size: $max-font-size; + } + } + } +} + +body{ + overflow-y:scroll; + + &::-webkit-scrollbar-track { + border: 1px solid #000; + padding: 2px 0; + background-color: #404040; + } + + &::-webkit-scrollbar { + width: 10px; + } + + &::-webkit-scrollbar-thumb { + border-radius: 10px; + box-shadow: inset 0 0 6px rgba(0,0,0,.3); + background-color: #737272; + border: 1px solid #000; + } +} + header.menu{ transition: $transition-time; &.notOnTop{ @@ -293,13 +318,14 @@ header.menu{ font-size: 64px; line-height: 78px; font-weight: 100; + @include fluid-type($break-extra-small, $break-big, 26px, 64px); } .text{ color: white; - font-size: 20px; line-height: 30px; font-weight: 600; padding: 20px 0 0.5em 0; + @include fluid-type($break-extra-small, $break-big, 18px, 20px); } } }