diff --git a/src/page/background/background.scss b/src/page/background/background.scss index df0fda6..cc4b7d3 100644 --- a/src/page/background/background.scss +++ b/src/page/background/background.scss @@ -2,34 +2,29 @@ #background { transform-style: preserve-3d; - z-index: -1; - position: absolute; -} - -.blob { - position: absolute; - left: 0; - top: 0; - border-radius: 1000px; - transition: background-color var(--transition-time); - - &:nth-child(odd) { - background-color: #fff9e0; - } - - &:nth-child(even) { - background-color: #ffd6d6; - } @media print { - & { - display: none; + display: none; + } + + > div { + position: absolute; + width: 140px; + border-radius: 1000px; + transition: background-color var(--transition-time); + + &:nth-child(odd) { + background-color: #fff9e0; + } + + &:nth-child(even) { + background-color: #ffd6d6; } } } @include in-dark-mode { - .blob { + #background > div { background-color: #2c477a; } } diff --git a/src/page/footer/footer.scss b/src/page/footer/footer.scss index f6fd419..9b5489c 100644 --- a/src/page/footer/footer.scss +++ b/src/page/footer/footer.scss @@ -4,19 +4,19 @@ text-align: center; margin-top: var(--large-margin); - h2 { + > h2 { @include title-font(); } - .links { + > .links { margin: var(--normal-margin) 0 0 var(--normal-margin); display: inline-block; } - aside { + > aside { margin: var(--large-margin) auto var(--line-height) auto; - p { + > p { @include special-text-font(); color: var(--normal-text-color); opacity: 0.75; diff --git a/src/page/header/header.scss b/src/page/header/header.scss index b5dd400..f2e033b 100644 --- a/src/page/header/header.scss +++ b/src/page/header/header.scss @@ -13,6 +13,10 @@ color: var(--accent-color); } + :focus:not(:hover) { + outline: var(--very-light-text-color) solid 3px !important; + } + h1, .placeholder { @include title-font(); @@ -27,7 +31,6 @@ } p { - @include main-font(); text-align: justify; } diff --git a/src/page/header/theme-switcher/theme-switcher.scss b/src/page/header/theme-switcher/theme-switcher.scss index af41f7f..7210ffe 100644 --- a/src/page/header/theme-switcher/theme-switcher.scss +++ b/src/page/header/theme-switcher/theme-switcher.scss @@ -54,7 +54,7 @@ &:before { transform: translateY(-50%) translateX(calc(3 * #{$margin} + #{$icon-size})); - animation: shine 3s linear alternate infinite; + animation: shine 2s linear alternate infinite; background-color: var(--sun-color); @keyframes shine { from { @@ -63,7 +63,7 @@ } to { - filter: brightness(1.1); + filter: brightness(1.2); box-shadow: 0 0 15px 2px var(--sun-color); } } diff --git a/src/page/image-viewer/image-viewer.scss b/src/page/image-viewer/image-viewer.scss index afe5a9a..4647ae8 100644 --- a/src/page/image-viewer/image-viewer.scss +++ b/src/page/image-viewer/image-viewer.scss @@ -32,8 +32,8 @@ right: 0; top: 0; - svg { - stroke: var(--normal-text-color); + &:focus:not(:hover) { + outline: var(--very-light-text-color) solid 3px !important; } } } diff --git a/src/page/timeline/timeline-element/timeline-element.scss b/src/page/timeline/timeline-element/timeline-element.scss index e286996..00dde88 100644 --- a/src/page/timeline/timeline-element/timeline-element.scss +++ b/src/page/timeline/timeline-element/timeline-element.scss @@ -168,13 +168,11 @@ @include square(var(--icon-size)); svg { - stroke: var(--normal-text-color); transition: stroke var(--transition-time), transform var(--transition-time); } } p { - @include main-font(); padding-bottom: var(--small-margin); font-size: 0.9rem; font-style: italic; diff --git a/src/style/mixins.scss b/src/style/mixins.scss index 1eaf5b4..9e438b0 100644 --- a/src/style/mixins.scss +++ b/src/style/mixins.scss @@ -18,16 +18,6 @@ $breakpoint-width: 925px !default; } } -html[animations='off'] { - &, - *, - *::before, - *::after { - transition: none !important; - animation: none !important; - } -} - @mixin image-button($icon-size) { display: block; box-sizing: content-box; diff --git a/src/styles.scss b/src/styles.scss index f09789f..605106c 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -14,6 +14,16 @@ } } +html[animations='off'] { + &, + *, + *::before, + *::after { + transition: none !important; + animation: none !important; + } +} + html { height: 100%; @@ -44,6 +54,10 @@ body { } } +svg { + stroke: var(--normal-text-color); +} + p { @include main-font(); } @@ -51,6 +65,7 @@ p { noscript { @include square(100%); @include center-children(); + @include sub-title-font(); } .start-button { @@ -115,7 +130,7 @@ iframe { outline: none; &:not(:hover) { - outline: var(--accent-color) solid 2px; + outline: var(--accent-color) solid 3px; } }