andras/schmelczer-dev
1
0
Fork 0
Code Issues Pull requests 6 Projects Releases Packages Wiki Activity Actions

Make body width more responsive

Browse source
This commit is contained in:
Andras Schmelczer 2022-09-26 16:22:01 +02:00
parent eb16cda173
commit b1d3639794
No known key found for this signature in database
GPG key ID: 0EA1BC97D0AB076E
3 changed files with 10 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/page/header/theme-switcher/theme-switcher.scss
View file

@ -3,9 +3,9 @@
#theme-switcher { #theme-switcher {
@include on-large-screen { @include on-large-screen {
position: absolute; position: absolute;
top: calc(-1 * var(--small-margin)); top: calc(-1 * var(--normal-margin));
right: calc(-1 * (50vw - var(--body-width) / 2) + var(--normal-margin)); left: calc(50% + 50vw);
transform: translateY(-100%); transform: translateX(calc(-100% - var(--normal-margin))) translateY(-50%);
} }
@include on-small-screen { @include on-small-screen {

15
src/style/mixins.scss
View file

@ -1,4 +1,4 @@
$breakpoint-width: 925px !default; $breakpoint-width: 800px !default;
@mixin on-small-screen() { @mixin on-small-screen() {
@media (max-width: ($breakpoint-width - 1px)) { @media (max-width: ($breakpoint-width - 1px)) {
@ -44,9 +44,9 @@ $breakpoint-width: 925px !default;
content: '#'; content: '#';
position: absolute; position: absolute;
left: -0.5ch; left: -0.5ch;
top: 0; top: 50%;
opacity: 0; opacity: 0;
transform: translateX(-100%); transform: translateX(-100%) translateY(-50%);
transition: opacity var(--transition-time); transition: opacity var(--transition-time);
} }
@ -87,7 +87,6 @@ $breakpoint-width: 925px !default;
@mixin title-font() { @mixin title-font() {
font: 400 3rem 'Comfortaa', sans-serif; font: 400 3rem 'Comfortaa', sans-serif;
font-style: normal;
color: var(--normal-text-color); color: var(--normal-text-color);
line-height: 1; line-height: 1;
transition: color var(--transition-time); transition: color var(--transition-time);
@ -101,7 +100,6 @@ $breakpoint-width: 925px !default;
@mixin sub-title-font() { @mixin sub-title-font() {
font: 400 1.75rem 'Comfortaa', sans-serif; font: 400 1.75rem 'Comfortaa', sans-serif;
color: var(--normal-text-color); color: var(--normal-text-color);
font-style: normal;
hyphens: auto; hyphens: auto;
transition: color var(--transition-time); transition: color var(--transition-time);
} }
@ -117,6 +115,7 @@ $breakpoint-width: 925px !default;
@mixin special-text-font() { @mixin special-text-font() {
font: 400 1rem 'Open Sans', sans-serif; font: 400 1rem 'Open Sans', sans-serif;
color: var(--special-text-color); color: var(--special-text-color);
hyphens: auto;
font-style: italic; font-style: italic;
transition: color var(--transition-time); transition: color var(--transition-time);
} }
@ -160,9 +159,7 @@ $breakpoint-width: 925px !default;
); );
} }
&:hover { &:hover:before {
&:before { transform: translateX(-$border-shift);
transform: translateX(-$border-shift);
}
} }
} }

2
src/style/vars.scss
View file

@ -27,7 +27,7 @@
--inset-shadow: inset 0 -9px 7px -7px rgb(0, 0, 0, 0.15); --inset-shadow: inset 0 -9px 7px -7px rgb(0, 0, 0, 0.15);
--icon-size: 45px; --icon-size: 45px;
--large-icon-size: 60px; --large-icon-size: 60px;
--body-width: 830px; --body-width: min(85%, 830px);
} }
} }