Kind of works
This commit is contained in:
Schmelczer András
parent
0429ea7f72
commit
65c0e3469e
6 changed files with 64 additions and 113 deletions
69
.idea/workspace.xml
generated
69
.idea/workspace.xml
generated
|
|
@ -2,70 +2,12 @@
|
|||
<project version="4">
|
||||
<component name="ChangeListManager">
|
||||
<list default="true" id="8edc47ab-1265-4111-9771-536b24cc9310" name="Default Changelist" comment="">
|
||||
<change afterPath="$PROJECT_DIR$/src/framework/framework.scss" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/src/framework/styles/dark-mode/dark-mode.scss" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/src/framework/styles/index.scss" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/src/framework/styles/wrapper.scss" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/src/static/media/my-notes.png" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/src/style/_id.scss" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/src/style/configured-responsive.scss" afterDir="false" />
|
||||
<change afterPath="$PROJECT_DIR$/src/style/include.scss" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/.idea/inspectionProfiles/Project_Default.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/inspectionProfiles/Project_Default.xml" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/README.md" beforeDir="false" afterPath="$PROJECT_DIR$/README.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/custom.d.ts" beforeDir="false" afterPath="$PROJECT_DIR$/custom.d.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/framework/container-page.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/container-page.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/framework/event-broadcaster.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/events/event-broadcaster.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/framework/helper/animations/animations.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/styles/animations/animations.scss" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/framework/helper/animations/animations.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/styles/animations/animations.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/framework/helper/create-element.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/helper/create-element.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/framework/helper/dark-mode.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/styles/dark-mode/dark-mode.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/framework/index.scss" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/framework/page-element.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/page-element.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/framework/page-event.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/events/page-event.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/framework/primitives/implementations/anchor.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/primitives/implementations/anchor.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/framework/primitives/implementations/image.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/primitives/implementations/image.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/framework/primitives/implementations/text.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/primitives/implementations/text.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/framework/primitives/implementations/video.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/primitives/implementations/video.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/framework/primitives/primitive.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/primitives/primitive.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/framework/primitives/primitives.scss" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.html" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/model/misc.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/model/misc.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/model/portfolio.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/model/portfolio.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/page/about/about.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/about/about.html.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/page/about/about.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/about/about.scss" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/page/about/about.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/about/about.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/page/background/background.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/blob.html.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/page/background/background.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.scss" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/page/background/background.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/page/background/blob.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/blob.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/page/content/content.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/content/content.html.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/page/content/content.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/content/content.scss" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/page/footer/footer.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/footer/footer.html.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/page/footer/footer.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/footer/footer.scss" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.html.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.scss" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/image-viewer/image-viewer.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/page/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/index.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/page/theme-switcher/theme-switcher.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/theme-switcher/theme-switcher.html.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/page/theme-switcher/theme-switcher.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/theme-switcher/theme-switcher.scss" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/page/theme-switcher/theme-switcher.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/theme-switcher/theme-switcher.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.html.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.scss" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/page/timeline/timeline.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline.html.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/page/timeline/timeline.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline.scss" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/page/timeline/timeline.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/portfolio.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/portfolio.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/static/media/my-notes.jpg" beforeDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/style/a.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/style/a.scss" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/style/fonts.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/style/fonts.scss" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/style/mixins.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/style/mixins.scss" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/style/vars.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/style/vars.scss" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/src/styles.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles.scss" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/webpack.config.js" beforeDir="false" afterPath="$PROJECT_DIR$/webpack.config.js" afterDir="false" />
|
||||
</list>
|
||||
<option name="SHOW_DIALOG" value="false" />
|
||||
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
||||
|
|
@ -183,7 +125,8 @@
|
|||
<workItem from="1578472848376" duration="13670000" />
|
||||
<workItem from="1578556192921" duration="3098000" />
|
||||
<workItem from="1578559306201" duration="8231000" />
|
||||
<workItem from="1578641947739" duration="23098000" />
|
||||
<workItem from="1578641947739" duration="28021000" />
|
||||
<workItem from="1578727663054" duration="2241000" />
|
||||
</task>
|
||||
<servers />
|
||||
</component>
|
||||
|
|
@ -223,10 +166,14 @@
|
|||
<screen x="0" y="27" width="2560" height="1053" />
|
||||
</state>
|
||||
<state x="1664" y="411" width="502" height="292" key="ANALYSIS_DLG_com.intellij.analysis.BaseAnalysisAction$1/0.27.2560.1053@0.27.2560.1053" timestamp="1578563647005" />
|
||||
<state x="1072" y="473" width="415" height="167" key="com.intellij.openapi.vcs.update.UpdateOrStatusOptionsDialogupdate-v2" timestamp="1578659707248">
|
||||
<state x="1380" y="127" width="1080" height="853" key="DiffContextDialog" timestamp="1578686003357">
|
||||
<screen x="0" y="27" width="2560" height="1053" />
|
||||
</state>
|
||||
<state x="1072" y="473" width="415" height="167" key="com.intellij.openapi.vcs.update.UpdateOrStatusOptionsDialogupdate-v2/0.27.2560.1053@0.27.2560.1053" timestamp="1578659707248" />
|
||||
<state x="1380" y="127" width="1080" height="853" key="DiffContextDialog/0.27.2560.1053@0.27.2560.1053" timestamp="1578686003357" />
|
||||
<state x="1072" y="473" width="415" height="167" key="com.intellij.openapi.vcs.update.UpdateOrStatusOptionsDialogupdate-v2" timestamp="1578687009013">
|
||||
<screen x="0" y="27" width="2560" height="1053" />
|
||||
</state>
|
||||
<state x="1072" y="473" width="415" height="167" key="com.intellij.openapi.vcs.update.UpdateOrStatusOptionsDialogupdate-v2/0.27.2560.1053@0.27.2560.1053" timestamp="1578687009013" />
|
||||
<state x="1603" y="289" width="774" height="677" key="find.popup" timestamp="1578682206106">
|
||||
<screen x="0" y="27" width="2560" height="1053" />
|
||||
</state>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue