From aa9047c0d8c985e2cf869c14035ddeb67dfea29f Mon Sep 17 00:00:00 2001 From: Andras Schmelczer Date: Mon, 26 Sep 2022 23:09:40 +0200 Subject: [PATCH] Fix compatibility and sizing --- src/index.scss | 9 ++ src/page/contact/contact.scss | 3 +- src/page/header/header.html.ts | 7 +- src/page/header/header.scss | 118 ++++++++++-------- .../header/theme-switcher/theme-switcher.scss | 27 ++-- src/page/image-viewer/image-viewer.scss | 8 +- src/page/up-arrow-button/up-arrow-button.scss | 2 +- src/style/mixins.scss | 11 +- src/style/vars.scss | 3 +- 9 files changed, 107 insertions(+), 81 deletions(-) diff --git a/src/index.scss b/src/index.scss index 59be739..ac9f203 100644 --- a/src/index.scss +++ b/src/index.scss @@ -37,6 +37,15 @@ a { html { height: 100%; + overflow: hidden; + @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); + } + @include on-small-screen { font-size: 0.8rem; } diff --git a/src/page/contact/contact.scss b/src/page/contact/contact.scss index fc7310a..c6cacde 100644 --- a/src/page/contact/contact.scss +++ b/src/page/contact/contact.scss @@ -18,7 +18,8 @@ } > aside { - margin: var(--large-margin) auto var(--line-height) auto; + margin: var(--large-margin) auto 0 auto; + padding-bottom: var(--line-height); // margin-bottom doesn't work in Firefox > p { @include special-text-font(); diff --git a/src/page/header/header.html.ts b/src/page/header/header.html.ts index 1d34db5..00f9faf 100644 --- a/src/page/header/header.html.ts +++ b/src/page/header/header.html.ts @@ -11,9 +11,10 @@ export const generate = ({ photo: html; }): html => `
- ${photo} - -
+
+ ${photo} +
+

${name}

diff --git a/src/page/header/header.scss b/src/page/header/header.scss index c277d2f..784e0df 100644 --- a/src/page/header/header.scss +++ b/src/page/header/header.scss @@ -2,53 +2,23 @@ @use '../../style/mixins' as *; #about { - text-align: center; box-shadow: var(--shadow); padding: var(--normal-margin); background-color: var(--accent-color); - font-size: 0; - - ::selection { - background-color: var(--very-light-text-color); - color: var(--accent-color); - } - - h1, - .placeholder { - @include title-font(); - } - - $img-size: 125px; - .image { - @include square($img-size); - border-radius: 100%; - box-shadow: var(--shadow); - margin: auto; - } - - p { - text-align: justify; - } - - h1, - p, - a { - color: var(--very-light-text-color); - margin-top: var(--line-height); - - :focus:not(:hover) { - outline: var(--very-light-text-color) solid var(--line-width); - } - } - - a { - border-bottom: 2px solid var(--very-light-text-color); - } @include on-small-screen { :focus:not(:hover) { outline: var(--very-light-text-color) solid var(--line-width); } + + $img-size: 125px; + > .photo-container > .image { + @include square($img-size); + } + + > h1 { + text-align: center; + } } @include on-large-screen { @@ -57,27 +27,65 @@ width: var(--body-width); margin: calc(#{var(--normal-margin)} + #{$img-size} * 1 / 3) auto var(--large-margin) auto; - position: relative; border-radius: var(--border-radius); - .image { - @include square($img-size); - position: absolute; - left: 0; - top: 0; - transform: translateY(math.div(-$img-size, 3)) translateX(math.div(-$img-size, 3)); + > .photo-container { + position: relative; + + > .image { + @include square($img-size); + position: absolute; + left: calc(#{math.div(-$img-size, 3)} - var(--normal-margin)); + top: calc(#{math.div(-$img-size, 3)} - var(--normal-margin)); + } + + > .placeholder { + @include square(calc(#{$img-size} * 2 / 3 - #{var(--normal-margin)})); + box-sizing: content-box; + float: left; + margin: 0 0.75ex 0.5ex 0; + } } - .placeholder { - @include square(calc(#{$img-size} * 2 / 3 - #{var(--normal-margin)})); - box-sizing: content-box; - float: left; - margin: 0 0.75ex 0.5ex 0; - } - - h1 { - text-align: left; + > h1 { margin-top: 0; } } + + ::selection { + background-color: var(--very-light-text-color); + color: var(--accent-color); + } + + > h1, + > .photo-container > .placeholder { + @include title-font(); + } + + > .photo-container { + > .image { + border-radius: 100%; + box-shadow: var(--shadow); + margin: auto; + } + } + + > h1, + > p, + a { + color: var(--very-light-text-color); + margin-top: var(--line-height); + + :focus:not(:hover) { + outline: var(--very-light-text-color) solid var(--line-width); + } + } + + > p { + text-align: justify; + } + + a { + border-bottom: 2px solid var(--very-light-text-color); + } } diff --git a/src/page/header/theme-switcher/theme-switcher.scss b/src/page/header/theme-switcher/theme-switcher.scss index d5280e4..a3fc123 100644 --- a/src/page/header/theme-switcher/theme-switcher.scss +++ b/src/page/header/theme-switcher/theme-switcher.scss @@ -1,22 +1,11 @@ @use '../../../style/mixins' as *; #theme-switcher { - @include on-large-screen { - position: absolute; - top: calc(-1 * var(--normal-margin)); - left: calc(50% + 50vw); - transform: translateX(calc(-100% - var(--normal-margin))) translateY(-50%); - } - - @include on-small-screen { - position: relative; - margin-top: var(--normal-margin); - } - - background-color: var(--accent-color); cursor: pointer; + background-color: var(--accent-color); -webkit-appearance: none; -moz-appearance: none; + display: block; $size: var(--icon-size); width: calc(2 * #{$size}); @@ -27,6 +16,17 @@ border-radius: 1000px; box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.175), inset 0 0 1px rgba(0, 0, 0, 0.4); + @include on-large-screen { + position: absolute; + top: var(--normal-margin); + right: var(--normal-margin); + } + + @include on-small-screen { + position: relative; + margin: var(--normal-margin) auto 0 auto; + } + &:before { // moon + sun @include square($icon-size); @@ -70,7 +70,6 @@ } &:after { - background-color: transparent; transform: translateY(-50%) translateX(calc(#{$size} * 2 - #{$icon-size})); } } diff --git a/src/page/image-viewer/image-viewer.scss b/src/page/image-viewer/image-viewer.scss index 1312087..e7402c3 100644 --- a/src/page/image-viewer/image-viewer.scss +++ b/src/page/image-viewer/image-viewer.scss @@ -15,13 +15,13 @@ @include square(auto); @include on-large-screen { - max-width: 80vw; - max-height: 80vh; + max-width: 80%; + max-height: 80%; } @include on-small-screen { - max-width: 95vw; - max-height: 80vh; + max-width: 95%; + max-height: 80%; } } diff --git a/src/page/up-arrow-button/up-arrow-button.scss b/src/page/up-arrow-button/up-arrow-button.scss index f6e1826..62df3e0 100644 --- a/src/page/up-arrow-button/up-arrow-button.scss +++ b/src/page/up-arrow-button/up-arrow-button.scss @@ -12,7 +12,7 @@ position: fixed; bottom: var(--small-margin); - right: var(--small-margin); + right: var(--normal-margin); padding: 4px; &:hover { diff --git a/src/style/mixins.scss b/src/style/mixins.scss index 4b48ff2..df48f10 100644 --- a/src/style/mixins.scss +++ b/src/style/mixins.scss @@ -1,4 +1,6 @@ -$breakpoint-width: 800px !default; +@use 'sass:math'; + +$breakpoint-width: 700px !default; @mixin on-small-screen() { @media (max-width: ($breakpoint-width - 1px)) { @@ -18,6 +20,13 @@ $breakpoint-width: 800px !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; diff --git a/src/style/vars.scss b/src/style/vars.scss index c283c0c..7fba600 100644 --- a/src/style/vars.scss +++ b/src/style/vars.scss @@ -8,7 +8,6 @@ --accent-color: #b7455e; --sun-color: #f7f78c; --very-light-text-color: #ffffff; - --background: #ffffff; --normal-text-color: #31343f; --card-color: #ffffff; @@ -27,7 +26,7 @@ --inset-shadow: inset 0 -9px 7px -7px rgb(0, 0, 0, 0.15); --icon-size: 45px; --large-icon-size: 60px; - --body-width: min(85%, 830px); + --body-width: min(80%, 830px); } }