diff --git a/src/components/atoms/Button.module.scss b/src/components/atoms/Button.module.scss index 59e1cfb..56078f2 100644 --- a/src/components/atoms/Button.module.scss +++ b/src/components/atoms/Button.module.scss @@ -8,8 +8,8 @@ border-radius: $border-radius; padding: $spacer / 4 $spacer / 2; transition-property: all; - background: rgba(#fff, .15); - border: .05rem solid rgba($brand-cyan, .75); + background: rgba(#fff, 0.15); + border: 0.05rem solid rgba($brand-cyan, 0.75); font-size: $font-size-small; text-transform: uppercase; cursor: pointer; @@ -22,8 +22,8 @@ svg { fill: $brand-grey-light; margin-right: $spacer / 3; - transition: .2s ease-out; - margin-bottom: -.1rem; + transition: 0.2s ease-out; + margin-bottom: -0.1rem; width: $font-size-small; height: $font-size-small; } @@ -31,15 +31,15 @@ &:hover, &:focus { color: lighten($brand-cyan, 10%); - border-color: rgba(lighten($brand-cyan, 10%), .75); - transform: translate3d(0, -.1rem, 0); - box-shadow: 0 6px 10px rgba($brand-main, .1), - 0 10px 25px rgba($brand-main, .05); + border-color: rgba(lighten($brand-cyan, 10%), 0.75); + transform: translate3d(0, -0.1rem, 0); + box-shadow: 0 6px 10px rgba($brand-main, 0.1), + 0 10px 25px rgba($brand-main, 0.05); } &:active { transition: none; - background: rgba(#fff, .15); + background: rgba(#fff, 0.15); } :global(.dark) & { @@ -47,8 +47,8 @@ &:hover, &:focus { - box-shadow: 0 6px 10px rgba(darken($brand-main, 20%), .1), - 0 10px 25px rgba(darken($brand-main, 20%), .2); + box-shadow: 0 6px 10px rgba(darken($brand-main, 20%), 0.1), + 0 10px 25px rgba(darken($brand-main, 20%), 0.2); } } } diff --git a/src/components/atoms/HostnameCheck.module.scss b/src/components/atoms/HostnameCheck.module.scss index 58b6f61..94557d4 100644 --- a/src/components/atoms/HostnameCheck.module.scss +++ b/src/components/atoms/HostnameCheck.module.scss @@ -7,10 +7,10 @@ padding: $spacer / 3; font-size: $font-size-small; font-weight: bold; - background: rgba($brand-light, .8); + background: rgba($brand-light, 0.8); :global(.dark) & { - background: rgba($body-background-color--dark, .8); + background: rgba($body-background-color--dark, 0.8); } p { diff --git a/src/components/atoms/Icons.module.scss b/src/components/atoms/Icons.module.scss index fdd5639..a4b56c5 100644 --- a/src/components/atoms/Icons.module.scss +++ b/src/components/atoms/Icons.module.scss @@ -6,5 +6,5 @@ fill: $brand-grey-light; stroke: none; vertical-align: baseline; - margin-bottom: -.04rem; + margin-bottom: -0.04rem; } diff --git a/src/components/atoms/ProjectImage.module.scss b/src/components/atoms/ProjectImage.module.scss index b4524d4..17bda44 100644 --- a/src/components/atoms/ProjectImage.module.scss +++ b/src/components/atoms/ProjectImage.module.scss @@ -4,8 +4,8 @@ margin-left: auto; margin-right: auto; display: block; - box-shadow: 0 3px 5px rgba($brand-main, .15), - 0 5px 16px rgba($brand-main, .15); + box-shadow: 0 3px 5px rgba($brand-main, 0.15), + 0 5px 16px rgba($brand-main, 0.15); @media (min-width: $projectImageMaxWidth) { max-width: $projectImageMaxWidth; @@ -14,8 +14,8 @@ } :global(.dark) & { - box-shadow: 0 3px 5px rgba(darken($brand-main, 20%), .15), - 0 5px 16px rgba(darken($brand-main, 20%), .15); + box-shadow: 0 3px 5px rgba(darken($brand-main, 20%), 0.15), + 0 5px 16px rgba(darken($brand-main, 20%), 0.15); } img { diff --git a/src/components/molecules/Availability.module.scss b/src/components/molecules/Availability.module.scss index b7ab80d..b2148c3 100644 --- a/src/components/molecules/Availability.module.scss +++ b/src/components/molecules/Availability.module.scss @@ -17,12 +17,12 @@ } a { - border-bottom: 1px solid rgba($brand-cyan, .4); + border-bottom: 1px solid rgba($brand-cyan, 0.4); } } .available { - background: rgba($brand-light, .8); + background: rgba($brand-light, 0.8); color: $brand-main; position: fixed; bottom: $spacer; @@ -30,7 +30,7 @@ transform: translateX(-50%); :global(.dark) & { - background: rgba($body-background-color--dark, .8); + background: rgba($body-background-color--dark, 0.8); color: $brand-light; } } diff --git a/src/components/molecules/LogoUnit.module.scss b/src/components/molecules/LogoUnit.module.scss index 35fca41..024fd2b 100644 --- a/src/components/molecules/LogoUnit.module.scss +++ b/src/components/molecules/LogoUnit.module.scss @@ -35,7 +35,7 @@ &::before, &::after { - opacity: .4; + opacity: 0.4; } &::before { @@ -54,7 +54,7 @@ &, &:hover, &:focus { - transform: scale(.7); + transform: scale(0.7); transform-origin: top center; transform-box: border-box; } @@ -70,6 +70,6 @@ .logo { margin-bottom: $spacer / 3; - opacity: .5; + opacity: 0.5; } } diff --git a/src/components/molecules/ProjectNav.module.scss b/src/components/molecules/ProjectNav.module.scss index 0a81744..9459b3c 100644 --- a/src/components/molecules/ProjectNav.module.scss +++ b/src/components/molecules/ProjectNav.module.scss @@ -52,12 +52,12 @@ .image { margin: 0; - box-shadow: 0 3px 5px rgba($brand-main, .15), - 0 5px 16px rgba($brand-main, .15); + box-shadow: 0 3px 5px rgba($brand-main, 0.15), + 0 5px 16px rgba($brand-main, 0.15); :global(.dark) & { - box-shadow: 0 3px 5px rgba(darken($brand-main, 20%), .15), - 0 5px 16px rgba(darken($brand-main, 20%), .15); + box-shadow: 0 3px 5px rgba(darken($brand-main, 20%), 0.15), + 0 5px 16px rgba(darken($brand-main, 20%), 0.15); } } diff --git a/src/components/molecules/ProjectTechstack.module.scss b/src/components/molecules/ProjectTechstack.module.scss index 08f9f47..ae28902 100644 --- a/src/components/molecules/ProjectTechstack.module.scss +++ b/src/components/molecules/ProjectTechstack.module.scss @@ -14,9 +14,9 @@ justify-content: center; padding: $spacer / 4; text-align: center; - background: rgba(#fff, .15); + background: rgba(#fff, 0.15); border-radius: $border-radius; - border: .05rem solid transparent; + border: 0.05rem solid transparent; color: $brand-grey-light; font-size: $font-size-small; diff --git a/src/components/molecules/Repository.module.scss b/src/components/molecules/Repository.module.scss index 1fb3941..6637706 100644 --- a/src/components/molecules/Repository.module.scss +++ b/src/components/molecules/Repository.module.scss @@ -3,17 +3,17 @@ .repo { padding: $spacer; border-radius: $border-radius; - background: rgba(#fff, .15); - box-shadow: 0 3px 5px rgba($brand-main, .1), - 0 5px 16px rgba($brand-main, .1); + background: rgba(#fff, 0.15); + box-shadow: 0 3px 5px rgba($brand-main, 0.1), + 0 5px 16px rgba($brand-main, 0.1); display: flex; flex-wrap: wrap; align-items: flex-start; :global(.dark) & { background: darken($body-background-color--dark, 1%); - box-shadow: 0 3px 5px rgba(darken($brand-main, 20%), .1), - 0 5px 16px rgba(darken($brand-main, 20%), .1); + box-shadow: 0 3px 5px rgba(darken($brand-main, 20%), 0.1), + 0 5px 16px rgba(darken($brand-main, 20%), 0.1); } > * { diff --git a/src/components/molecules/ThemeSwitch.module.scss b/src/components/molecules/ThemeSwitch.module.scss index 45f6fc6..5ac2517 100644 --- a/src/components/molecules/ThemeSwitch.module.scss +++ b/src/components/molecules/ThemeSwitch.module.scss @@ -7,15 +7,15 @@ z-index: 10; svg { - width: .8rem; - height: .8rem; - margin-top: -.05rem; + width: 0.8rem; + height: 0.8rem; + margin-top: -0.05rem; fill: $brand-grey-light; &:last-child { - margin-top: -.1rem; - width: .7rem; - height: .7rem; + margin-top: -0.1rem; + width: 0.7rem; + height: 0.7rem; } } } @@ -47,7 +47,7 @@ $knob-space: 1px; height: $knob-size; background-color: $brand-grey-light; border-radius: 15rem; - transition: transform .2s $easing; + transition: transform 0.2s $easing; transform: translate3d(0, 0, 0); } }