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

Kind of works

Browse source
This commit is contained in:
Schmelczer András 2020-01-11 09:14:52 +01:00
parent 0429ea7f72
commit 65c0e3469e
6 changed files with 64 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/index.html
View file

@ -17,8 +17,6 @@
<title>Portfolio - András Schmelczer</title>
</head>
<body>
<div class="main"> <!-- for IE11 -->
<noscript><h1>Javascript is required for this website.</h1></noscript>
</div>
<noscript><h1>Javascript is required for this website.</h1></noscript>
</body>
</html>

8
src/page/background/background.scss
View file

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

14
src/page/background/background.ts
View file

@ -9,7 +9,11 @@ export class PageBackground extends PageElement {
private readonly blobs: Array<Blob> = [];
private readonly blobSpacing = 350;
public constructor(private start: PageElement, private end: PageElement) {
public constructor(
private readonly start: PageElement,
private readonly inBetween: Array<PageElement>,
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<HTMLElement> = PageBackground.getSiblings(parent);
const siblings: Array<HTMLElement> = 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<HTMLElement> {
return Array.prototype.slice
.call(parent.element.children)
.filter((e: HTMLElement) => !e.classList.contains('background-element'));
private getSiblings(): Array<HTMLElement> {
return [this.start, ...this.inBetween, this.end].map(e => e.element);
}
}

11
src/page/index.ts
View file

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

71
src/styles.scss
View file

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