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

Remove zoom, improve performance and style

Browse source
This commit is contained in:
Andras Schmelczer 2022-09-28 15:19:51 +02:00
parent c206471b87
commit 3d0449a4f2
No known key found for this signature in database
GPG key ID: 0EA1BC97D0AB076E
9 changed files with 60 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/index.scss
View file

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

1
src/page/figure/figure.scss
View file

@ -2,7 +2,6 @@
.figure-container {
box-shadow: var(--inset-shadow);
transition: box-shadow var(--transition-time);
position: relative;
cursor: pointer;

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

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

2
src/page/header/header.ts
View file

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

69
src/page/timeline-element/timeline-element.scss
View file

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

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

@ -13,7 +13,7 @@
position: fixed;
bottom: var(--small-margin);
right: var(--normal-margin);
padding: 4px;
padding: 0.25rem;
&:hover {
transform: scale(1.1);

11
src/style/mixins.scss
View file

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

32
src/style/vars.scss
View file

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

2
static/icons/loading.svg
View file

@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<g transform="rotate(0 50 50)">
<rect x="45" y="2" rx="5" ry="5" width="10" height="10" fill="#b7455e">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"></animate>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

Before After
Before After