diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 5b962e5..e474666 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -2,70 +2,12 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -223,10 +166,14 @@ - + - + + + + + diff --git a/src/index.html b/src/index.html index a8f05b3..8c7d5bd 100644 --- a/src/index.html +++ b/src/index.html @@ -17,8 +17,6 @@ Portfolio - András Schmelczer -
- -
+ diff --git a/src/page/background/background.scss b/src/page/background/background.scss index 6787986..77a01b7 100644 --- a/src/page/background/background.scss +++ b/src/page/background/background.scss @@ -3,8 +3,8 @@ @include responsive() using ($vars) { div.background-element { position: absolute; - left: 0; top: 0; + left: 0; border-radius: 100px; width: 140px; @@ -16,12 +16,6 @@ } } - @media print { - & { - display: none; - } - } - transition: transform map_get($vars, $transition-time), opacity map_get($vars, $transition-time), background-color map_get($vars, $transition-time); diff --git a/src/page/background/background.ts b/src/page/background/background.ts index 72fae9c..63d6974 100644 --- a/src/page/background/background.ts +++ b/src/page/background/background.ts @@ -9,7 +9,11 @@ export class PageBackground extends PageElement { private readonly blobs: Array = []; private readonly blobSpacing = 350; - public constructor(private start: PageElement, private end: PageElement) { + public constructor( + private readonly start: PageElement, + private readonly inBetween: Array, + private readonly end: PageElement + ) { super(); Blob.initialize(10, 30, 5); } @@ -35,7 +39,7 @@ export class PageBackground extends PageElement { } private resize(parent: PageElement, heightChange?: number) { - const siblings: Array = PageBackground.getSiblings(parent); + const siblings: Array = this.getSiblings(); const width = document.body.clientWidth; let height = sum(siblings.map(getHeight)); @@ -72,9 +76,7 @@ export class PageBackground extends PageElement { }); } - private static getSiblings(parent: PageElement): Array { - return Array.prototype.slice - .call(parent.element.children) - .filter((e: HTMLElement) => !e.classList.contains('background-element')); + private getSiblings(): Array { + return [this.start, ...this.inBetween, this.end].map(e => e.element); } } diff --git a/src/page/index.ts b/src/page/index.ts index cdae1b0..5ee76d8 100644 --- a/src/page/index.ts +++ b/src/page/index.ts @@ -8,16 +8,15 @@ import { ContainerPage } from '../framework/container-page'; export const create = ({ header, timeline, footer }: Portfolio) => { const pageHeader = new PageHeader(header); + const pageTimeline = new PageTimeline(timeline); const pageFooter = new PageFooter(footer); new ContainerPage(document.body, [ new PageImageViewer(), - new ContainerPage(document.body.querySelector('.main'), [ - pageHeader, - new PageTimeline(timeline), - pageFooter, - new PageBackground(pageHeader, pageFooter), - ]), + pageHeader, + pageTimeline, + pageFooter, + new PageBackground(pageHeader, [pageTimeline], pageFooter), ]).setAsMain(); addSupportForTabNavigation(); diff --git a/src/styles.scss b/src/styles.scss index c83ae56..5ccdc7a 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -5,6 +5,9 @@ @include responsive() using ($vars) { & { height: 100%; + overflow: hidden; + + transform-style: preserve-3d; background-color: map_get($vars, $background); transition: background-color map_get($vars, $transition-time); @@ -12,7 +15,13 @@ touch-action: manipulation; @include on-small-screen { - font-size: 0.8em; + font-size: 0.8rem; + } + + @media print { + & { + font-size: 0.75rem; + } } } @@ -39,6 +48,8 @@ *::after { @include main-font($vars); + transform-style: preserve-3d; + margin: 0; padding: 0; box-sizing: border-box; @@ -82,39 +93,39 @@ } body { - height: 100%; - - overflow: hidden; - //noinspection CssInvalidFunction - padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) - env(safe-area-inset-bottom, 20px) env(safe-area-inset-left, 20px); + padding: env(safe-area-inset-top) env(safe-area-inset-right) + env(safe-area-inset-bottom) env(safe-area-inset-left); - .main { - height: 100vh; // to take mobile nav-bar into account - overflow-y: scroll; - overflow-x: hidden; - - will-change: transform; - - perspective: 5px; - perspective-origin: center center; - - noscript { - @include square(100%); - @include center-children(); + @media print { + & { + height: auto; } + } - @include on-large-screen { - &::-webkit-scrollbar-track, - &::-webkit-scrollbar { - background-color: transparent; - width: 12px; - } - &::-webkit-scrollbar-thumb { - background-color: map_get($vars, $accent-color); - border-radius: map_get($vars, $border-radius); - } + max-height: 100%; // to take mobile nav-bar into account + overflow-x: hidden; + overflow-y: scroll; + + //will-change: transform; + + perspective: 5px; + perspective-origin: center center; + + noscript { + @include square(100%); + @include center-children(); + } + + @include on-large-screen { + &::-webkit-scrollbar-track, + &::-webkit-scrollbar { + background-color: transparent; + width: 12px; + } + &::-webkit-scrollbar-thumb { + background-color: map_get($vars, $accent-color); + border-radius: map_get($vars, $border-radius); } } }