diff --git a/src/page/background/background.ts b/src/page/background/background.ts index 85ec8cc..064e12c 100644 --- a/src/page/background/background.ts +++ b/src/page/background/background.ts @@ -20,10 +20,8 @@ export class PageBackground extends PageElement { ) { super(createElement(generate())); - for (let i = 0; i < window.innerWidth / 10; i++) { + for (let i = 0; i < Math.max(30, window.innerWidth / 10); i++) { const blob = document.createElement('div'); - blob.classList.add('blob'); - blob.style.width = '140px'; const z = this.random.inInterval(PageBackground.zMin, PageBackground.zMax); blob.style.zIndex = (-z).toFixed(0); blob.style.opacity = ( @@ -62,7 +60,7 @@ export class PageBackground extends PageElement { protected initialize() { super.initialize(); - requestAnimationFrame(this.drawIfNecessary.bind(this)); + this.drawIfNecessary(); } private getSiblings(): Array { diff --git a/src/page/header/header.html.ts b/src/page/header/header.html.ts index bbca5ad..1d34db5 100644 --- a/src/page/header/header.html.ts +++ b/src/page/header/header.html.ts @@ -10,10 +10,13 @@ export const generate = ({ about: Array; photo: html; }): html => ` -
+
${photo} +
+

${name}

+ ${about.map((t) => `

${t}

`).join('')} -
+ `; diff --git a/src/page/header/header.ts b/src/page/header/header.ts index 29c3031..cdb9b4e 100644 --- a/src/page/header/header.ts +++ b/src/page/header/header.ts @@ -1,6 +1,6 @@ import { createElement } from '../../helper/create-element'; import { ResponsiveImage } from '../../types/responsive-image'; -import { Image } from '../basics/image/image.html'; +import { Image } from '../image-viewer/image/image.html'; import { PageElement } from '../page-element'; import { generate } from './header.html'; import { PageThemeSwitcher } from './theme-switcher/theme-switcher'; diff --git a/src/page/image-viewer/image-viewer.html.ts b/src/page/image-viewer/image-viewer.html.ts index 6e275f7..4ec5ccd 100644 --- a/src/page/image-viewer/image-viewer.html.ts +++ b/src/page/image-viewer/image-viewer.html.ts @@ -5,6 +5,6 @@ import './image-viewer.scss'; export const generate = (): html => `
-
${cancel}
+
${cancel}
`; diff --git a/src/page/image-viewer/image-viewer.ts b/src/page/image-viewer/image-viewer.ts index e925244..ebc9be0 100644 --- a/src/page/image-viewer/image-viewer.ts +++ b/src/page/image-viewer/image-viewer.ts @@ -7,11 +7,14 @@ export class PageImageViewer extends PageElement { super(createElement(generate())); document.body.addEventListener('click', (event: MouseEvent) => { - if ( - event.target instanceof HTMLImageElement && - !(event.target.attributes['image-viewer-ignore'] as boolean | undefined) - ) { - this.showImage(event.target); + const element = event.target as HTMLElement; + + if (element.classList?.contains('image')) { + this.showImage(element.querySelector('img')!); + } + + if (element instanceof HTMLImageElement) { + this.showImage(element); } }); @@ -25,6 +28,10 @@ export class PageImageViewer extends PageElement { } private showImage(source: HTMLImageElement) { + if (source.attributes['image-viewer-ignore'] as boolean | undefined) { + return; + } + const image = this.query('img') as HTMLImageElement; image.src = ''; image.src = source.src; diff --git a/src/page/timeline/timeline-element/timeline-element-parameters.ts b/src/page/timeline/timeline-element/timeline-element-parameters.ts index 63a921a..af76483 100644 --- a/src/page/timeline/timeline-element/timeline-element-parameters.ts +++ b/src/page/timeline/timeline-element/timeline-element-parameters.ts @@ -1,6 +1,6 @@ import { html } from '../../../types/html'; -import { Preview } from '../../basics/preview/preview'; -import { Video } from '../../basics/video/video'; +import { Preview } from '../../preview/preview'; +import { Video } from '../../video/video'; export interface TimelineElementParameters { date: string;