diff --git a/src/page/header/theme-switcher/theme-switcher.scss b/src/page/header/theme-switcher/theme-switcher.scss index 7210ffe..d5280e4 100644 --- a/src/page/header/theme-switcher/theme-switcher.scss +++ b/src/page/header/theme-switcher/theme-switcher.scss @@ -3,9 +3,9 @@ #theme-switcher { @include on-large-screen { position: absolute; - top: calc(-1 * var(--small-margin)); - right: calc(-1 * (50vw - var(--body-width) / 2) + var(--normal-margin)); - transform: translateY(-100%); + top: calc(-1 * var(--normal-margin)); + left: calc(50% + 50vw); + transform: translateX(calc(-100% - var(--normal-margin))) translateY(-50%); } @include on-small-screen { diff --git a/src/style/mixins.scss b/src/style/mixins.scss index dc59aca..cf18fcb 100644 --- a/src/style/mixins.scss +++ b/src/style/mixins.scss @@ -1,4 +1,4 @@ -$breakpoint-width: 925px !default; +$breakpoint-width: 800px !default; @mixin on-small-screen() { @media (max-width: ($breakpoint-width - 1px)) { @@ -44,9 +44,9 @@ $breakpoint-width: 925px !default; content: '#'; position: absolute; left: -0.5ch; - top: 0; + top: 50%; opacity: 0; - transform: translateX(-100%); + transform: translateX(-100%) translateY(-50%); transition: opacity var(--transition-time); } @@ -87,7 +87,6 @@ $breakpoint-width: 925px !default; @mixin title-font() { font: 400 3rem 'Comfortaa', sans-serif; - font-style: normal; color: var(--normal-text-color); line-height: 1; transition: color var(--transition-time); @@ -101,7 +100,6 @@ $breakpoint-width: 925px !default; @mixin sub-title-font() { font: 400 1.75rem 'Comfortaa', sans-serif; color: var(--normal-text-color); - font-style: normal; hyphens: auto; transition: color var(--transition-time); } @@ -117,6 +115,7 @@ $breakpoint-width: 925px !default; @mixin special-text-font() { font: 400 1rem 'Open Sans', sans-serif; color: var(--special-text-color); + hyphens: auto; font-style: italic; transition: color var(--transition-time); } @@ -160,9 +159,7 @@ $breakpoint-width: 925px !default; ); } - &:hover { - &:before { - transform: translateX(-$border-shift); - } + &:hover:before { + transform: translateX(-$border-shift); } } diff --git a/src/style/vars.scss b/src/style/vars.scss index c7752fd..c283c0c 100644 --- a/src/style/vars.scss +++ b/src/style/vars.scss @@ -27,7 +27,7 @@ --inset-shadow: inset 0 -9px 7px -7px rgb(0, 0, 0, 0.15); --icon-size: 45px; --large-icon-size: 60px; - --body-width: 830px; + --body-width: min(85%, 830px); } }