implemented lazy loading and other small fixes

This commit is contained in:
zyachel
2022-04-18 11:54:37 +05:30
parent 33181ac11f
commit 8368c73965
19 changed files with 119 additions and 132 deletions

View File

@@ -16,15 +16,15 @@ html(lang="en")
meta(name='color-scheme', content='light dark')
meta(name='theme-color', content='#0f2c67')
meta(name='msapplication-TileColor', content='#b91d47')
link(rel='apple-touch-icon', sizes='180x180', href='/favicon/apple-touch-icon.png')
link(rel='icon', type='image/png', sizes='32x32', href='/favicon/favicon-32x32.png')
link(rel='icon', type='image/png', sizes='16x16', href='/favicon/favicon-16x16.png')
link(rel='apple-touch-icon', sizes='180x180', href='/apple-touch-icon.png')
link(rel='icon', type='image/png', sizes='32x32', href='/favicon-32x32.png')
link(rel='icon', type='image/png', sizes='16x16', href='/favicon-16x16.png')
link(rel='manifest', href='/site.webmanifest')
link(rel='mask-icon', href='/favicon/safari-pinned-tab.svg', color='#5bbad5')
link(rel='mask-icon', href='/safari-pinned-tab.svg', color='#5bbad5')
body
body
//input is actually a checkbox hack to enable changing themes without js
input#theme-switcher.theme-switcher__input(type="checkbox", name="theme switcher checkbox")
input#theme-switcher.theme-switcher__input(type="checkbox", name="theme switcher checkbox", aria-label='Change theme')
.page
include _header

View File

@@ -8,7 +8,8 @@ block content
img.basic__image(
src=movie.basic.poster,
alt=`${movie.basic.name} cover image`,
title=`${movie.basic.name} cover image`
title=`${movie.basic.name} cover image`,
loading='lazy'
)
else
svg.basic__image-na: use(href='/img/misc/sprite.svg#icon-image-slash')
@@ -64,7 +65,7 @@ block content
each cast in movie.topCast.actors
li.actor: figure.actor__details
if cast.avatar
img.actor__image(src=cast.avatar, alt=`image of ${cast.name}`)
img.actor__image(src=cast.avatar, alt=`image of ${cast.name}`, loading='lazy')
else
svg.actor__image-na: use(href='/img/misc/sprite.svg#icon-image-slash')
figcaption.actor__name= cast.name
@@ -150,6 +151,6 @@ block content
.movie__media-box
each image, index in movie.media.images
figure.movie__media-image-secondary-box
img.movie__media-image(src=image, alt=`image ${index + 1} from ${movie.basic.name}`)
img.movie__media-image(src=image, alt=`a still from ${movie.basic.name}`, loading='lazy')
-else
p.movie-media__na no media avaiable