diff --git a/src/index.scss b/src/index.scss index 6298818..d0c0543 100644 --- a/src/index.scss +++ b/src/index.scss @@ -27,10 +27,13 @@ html[animations='off'] { html { height: 100%; - overflow: hidden; - @include on-small-screen { + @media (min-width: 1000px) and (max-width: 1440px) { + font-size: 0.875rem; + } + + @media (max-width: 999px) { font-size: 0.8rem; } @@ -42,14 +45,6 @@ html { } body { - @media (min-width: $breakpoint-width) and (max-width: 999px) { - @include zoom(0.8); - } - - @media (min-width: 1000px) and (max-width: 1440px) { - @include zoom(0.875); - } - background-color: var(--background); transition: background-color linear var(--transition-time); diff --git a/src/page/figure/figure.scss b/src/page/figure/figure.scss index 33b4c5f..85832fb 100644 --- a/src/page/figure/figure.scss +++ b/src/page/figure/figure.scss @@ -2,7 +2,6 @@ .figure-container { box-shadow: var(--inset-shadow); - transition: box-shadow var(--transition-time); position: relative; cursor: pointer; diff --git a/src/page/header/header.scss b/src/page/header/header.scss index ea5df8d..8df3177 100644 --- a/src/page/header/header.scss +++ b/src/page/header/header.scss @@ -11,7 +11,7 @@ outline: var(--very-light-text-color) solid var(--line-width); } - $img-size: 125px; + $img-size: 11rem; > .profile-picture { @include square($img-size); margin: auto; @@ -24,7 +24,7 @@ } @include on-large-screen { - $img-size: 190px; + $img-size: 12.5rem; width: var(--body-width); margin: calc(#{var(--normal-margin)} + #{$img-size} * 1 / 3) auto var(--large-margin) @@ -44,9 +44,13 @@ @include square(calc(#{$img-size} * 2 / 3 - #{var(--normal-margin)})); box-sizing: content-box; float: left; - margin: 0 0.75ex 0.5ex 0; + margin: 0 0.75ex 0.2ex 0; } } + + > p { + text-align: justify; + } } ::selection { @@ -82,7 +86,6 @@ } > p { - text-align: justify; margin-top: var(--line-height); } diff --git a/src/page/header/header.ts b/src/page/header/header.ts index ae23f72..89e46af 100644 --- a/src/page/header/header.ts +++ b/src/page/header/header.ts @@ -32,7 +32,7 @@ export class Header extends PageElement { { image, alt: imageAltText, - sizes: '(max-width: 924px) 125px, 190px', + sizes: '(max-width: 924px) 11rem, 12.5rem', }, imageViewer ) diff --git a/src/page/timeline-element/timeline-element.scss b/src/page/timeline-element/timeline-element.scss index 31fc034..6ac0dae 100644 --- a/src/page/timeline-element/timeline-element.scss +++ b/src/page/timeline-element/timeline-element.scss @@ -26,6 +26,7 @@ > .line-container { position: relative; @include q-dependent-line-container(33%); + transform: translate3d(0, 0, 0); // fix visual glitches in webkit > .line { &, @@ -64,39 +65,6 @@ } } - @include on-large-screen { - &:first-of-type > .line-container > .line { - border-radius: 100px 100px 0 0; - } - - &:last-of-type > .line-container > .line:before { - border-radius: 0 0 100px 100px; - } - - > .line-container { - min-width: 160px; - } - - &:not(:first-of-type) > .card { - margin-top: var(--large-margin); - } - } - - @include on-small-screen { - flex-direction: column; - align-items: center; - - > .line-container { - @include q-dependent-line-container(50%); - height: 150px; - min-width: 64%; - - > .date { - transform: translateX(calc(var(--icon-size) / 2 + 12px)) translateY(-10%); - } - } - } - > .card { @include blurred-background(); box-shadow: var(--shadow); @@ -146,7 +114,6 @@ display: flex; justify-content: center; border-top: $border-width solid var(--normal-text-color); - transition: border-color var(--transition-time); margin: 0; padding: 0; @@ -157,10 +124,42 @@ &:not(:last-child) { border-right: $border-width solid var(--normal-text-color); - transition: border-color var(--transition-time); } } } } } + + @include on-large-screen { + &:first-of-type > .line-container > .line { + border-radius: 100px 100px 0 0; + } + + &:last-of-type > .line-container > .line:before { + border-radius: 0 0 100px 100px; + } + + > .line-container { + min-width: 10rem; + } + + &:not(:first-of-type) > .card { + margin-top: var(--large-margin); + } + } + + @include on-small-screen { + flex-direction: column; + align-items: center; + + > .line-container { + @include q-dependent-line-container(50%); + height: 150px; + min-width: 64%; + + > .date { + transform: translateX(calc(var(--icon-size) / 2 + 12px)) translateY(-10%); + } + } + } } diff --git a/src/page/up-arrow-button/up-arrow-button.scss b/src/page/up-arrow-button/up-arrow-button.scss index 62df3e0..2fe5ea1 100644 --- a/src/page/up-arrow-button/up-arrow-button.scss +++ b/src/page/up-arrow-button/up-arrow-button.scss @@ -13,7 +13,7 @@ position: fixed; bottom: var(--small-margin); right: var(--normal-margin); - padding: 4px; + padding: 0.25rem; &:hover { transform: scale(1.1); diff --git a/src/style/mixins.scss b/src/style/mixins.scss index df48f10..d4fd175 100644 --- a/src/style/mixins.scss +++ b/src/style/mixins.scss @@ -20,13 +20,6 @@ $breakpoint-width: 700px !default; } } -@mixin zoom($q) { - transform: scale($q); - transform-origin: top center; - height: math.div(100%, $q); - margin: 0 (0.5 - math.div(0.5, $q)) * 100%; -} - @mixin image-button($icon-size) { display: block; box-sizing: content-box; @@ -96,7 +89,6 @@ $breakpoint-width: 700px !default; font: 400 3rem 'Comfortaa', sans-serif; color: var(--normal-text-color); line-height: 1; - transition: color var(--transition-time); @include on-small-screen { font-size: 3rem; @@ -108,7 +100,6 @@ $breakpoint-width: 700px !default; font: 400 1.75rem 'Comfortaa', sans-serif; color: var(--normal-text-color); hyphens: auto; - transition: color var(--transition-time); } @mixin main-font() { @@ -116,7 +107,6 @@ $breakpoint-width: 700px !default; color: var(--normal-text-color); line-height: 1.8; hyphens: auto; - transition: color var(--transition-time); } @mixin special-text-font() { @@ -124,7 +114,6 @@ $breakpoint-width: 700px !default; color: var(--special-text-color); hyphens: auto; font-style: italic; - transition: color var(--transition-time); } @mixin link { diff --git a/src/style/vars.scss b/src/style/vars.scss index 2cc464b..6b3b6f6 100644 --- a/src/style/vars.scss +++ b/src/style/vars.scss @@ -4,7 +4,7 @@ --transition-time: 200ms; --transition-time-long: 300ms; --line-width: 4px; - --line-height: 18px; + --line-height: 1.125rem; --accent-color: #b7455e; --sun-color: #f7f78c; --very-light-text-color: #ffffff; @@ -15,31 +15,22 @@ --blur-radius: 16px; --special-text-color: var(--accent-color); --inset-shadow: inset 0 0 4px 1px rgba(0, 0, 0, 0.05), inset 0 0 5px rgba(0, 0, 0, 0.2); -} + --border-radius: 0.85rem; -@include on-large-screen { - :root { - --border-radius: 15px; - --large-margin: 80px; - --normal-margin: 45px; - --small-margin: 25px; - --shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.2); - --icon-size: 45px; - --large-icon-size: 60px; - --body-width: min(80%, 900px); - } + --large-margin: 4.6rem; + --normal-margin: 2.8rem; + --small-margin: 1.4rem; + --shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.2); + --icon-size: 2.8rem; + --large-icon-size: 3.75rem; + --body-width: min(80%, 60rem); } @include on-small-screen { :root { - --border-radius: 10px; - --large-margin: 60px; - --normal-margin: 30px; - --small-margin: 15px; - --shadow: 0 0 10px 2px rgba(0, 0, 0, 0.075), 0 0 1px rgba(0, 0, 0, 0.125); - --icon-size: 35px; - --large-icon-size: 55px; --body-width: 90%; + --large-margin: 2.8rem; + --normal-margin: 2rem; } } @@ -48,7 +39,6 @@ --normal-text-color: #ffffff; --card-color: #263551; --blurred-card-color: #212f4a77; - --blur-radius: 30px; --special-text-color: #ffffff; --inset-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.3), inset 0 0 4px rgba(0, 0, 0, 0.5); } diff --git a/static/icons/loading.svg b/static/icons/loading.svg index cc93c05..6adf461 100644 --- a/static/icons/loading.svg +++ b/static/icons/loading.svg @@ -1,4 +1,4 @@ - +