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

Refactor and fix

Browse source
This commit is contained in:
schmelczerandras 2020-11-22 22:43:28 +01:00
parent 91d92f7f48
commit 4be519f052
22 changed files with 118 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/style/animations/animations.ts
View file

@ -1,5 +1,5 @@
export const turnOnAnimations = () =>
document.body.parentElement.setAttribute('animations', 'on');
document.documentElement.setAttribute('animations', 'on');
export const turnOffAnimations = () =>
document.body.parentElement.setAttribute('animations', 'off');
document.documentElement.setAttribute('animations', 'off');

4
src/style/dark-mode/dark-mode.ts
View file

@ -2,7 +2,7 @@ export const isSystemLevelDarkModeEnabled = (): boolean =>
matchMedia && matchMedia('(prefers-color-scheme: dark)').matches;
export const turnOnDarkMode = () =>
document.body.parentElement.setAttribute('theme', 'dark');
document.documentElement.setAttribute('theme', 'dark');
export const turnOnLightMode = () =>
document.body.parentElement.setAttribute('theme', 'light');
document.documentElement.setAttribute('theme', 'light');

21
src/style/mixins.scss
View file

@ -43,11 +43,11 @@ $breakpoint-width: 925px !default;
transform: translateX(-50%) translateY(-50%);
}
@mixin card-base() {
text-align: center;
box-shadow: var(--shadow);
z-index: 1;
width: 100%;
@mixin blurred-background() {
backdrop-filter: blur(var(--blur-radius));
@supports not (backdrop-filter: blur(var(--blur-radius))) {
background-color: var(--card-color);
}
}
@mixin square($size) {
@ -55,16 +55,12 @@ $breakpoint-width: 925px !default;
height: $size;
}
@mixin max-square($size) {
max-width: $size;
max-height: $size;
}
@mixin title-font() {
font: 400 3rem 'Comfortaa', serif;
font-style: normal;
color: var(--normal-text-color);
line-height: 1;
transition: color var(--transition-time);
@include on-small-screen {
font-size: 3rem;
@ -76,18 +72,23 @@ $breakpoint-width: 925px !default;
font: 400 1.75rem 'Comfortaa', serif;
color: var(--normal-text-color);
font-style: normal;
hyphens: auto;
transition: color var(--transition-time);
}
@mixin main-font() {
font: 400 1.1rem 'Open Sans', sans-serif;
color: var(--normal-text-color);
line-height: 1.8;
hyphens: auto;
transition: color var(--transition-time);
}
@mixin special-text-font() {
font: 400 1rem 'Open Sans', sans-serif;
color: var(--special-text-color);
font-style: italic;
transition: color var(--transition-time);
}
@mixin link {