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

Fix compatibility and sizing

Browse source
This commit is contained in:
Andras Schmelczer 2022-09-26 23:09:40 +02:00
parent b388498e8f
commit aa9047c0d8
No known key found for this signature in database
GPG key ID: 0EA1BC97D0AB076E
9 changed files with 107 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/index.scss
View file

@ -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;
}

3
src/page/contact/contact.scss
View file

@ -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();

7
src/page/header/header.html.ts
View file

@ -11,9 +11,10 @@ export const generate = ({
photo: html;
}): html => `
<header id="about">
${photo}
<div class="placeholder"></div>
<div class="photo-container">
${photo}
<div class="placeholder"></div>
</div>
<h1>${name}</h1>

118
src/page/header/header.scss
View file

@ -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);
}
}

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

@ -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}));
}
}

8
src/page/image-viewer/image-viewer.scss
View file

@ -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%;
}
}

2
src/page/up-arrow-button/up-arrow-button.scss
View file

@ -12,7 +12,7 @@
position: fixed;
bottom: var(--small-margin);
right: var(--small-margin);
right: var(--normal-margin);
padding: 4px;
&:hover {

11
src/style/mixins.scss
View file

@ -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;

3
src/style/vars.scss
View file

@ -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);
}
}