ngn/libremdb
1
0
Fork 0
Code Issues 1 Pull Requests 9 Actions Packages Activity

implemented lazy loading and other small fixes

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

12
views/pug/base.pug
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

7
views/pug/movie.pug
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

25
views/sass/_abstracts.scss
View File

@@ -95,6 +95,7 @@ $font-type-map: (
// using em for accessibility reasons(see: https://zellwk.com/blog/media-query-units/)
// 1em = 16px
$breakpoints: (
bp-1800: 112.5em,
bp-1100: 68.75em,
bp-900: 56.25em,
bp-725: 45.32em,
@@ -105,7 +106,7 @@ $breakpoints: (
);
// mixin to handle known and unknown breakpoints:
@mixin bp($given-breakpoint) {
@mixin bp($given-breakpoint, $min:false) {
// just assigning the given value to a new variable since we're going to change it conditionally;
$breakpoint: $given-breakpoint;
// if $breakpoints map contains the given variable then getting it's value
@@ -113,7 +114,12 @@ $breakpoints: (
$breakpoint: map.get($breakpoints, $breakpoint);
}
// and then using it for media query. This will also work for straight out values(50em or 800px, for example)
@media screen and (max-width: $breakpoint) {
$expr: 'max-width: #{$breakpoint}';
@if($min) {
$expr: 'min-width: #{$breakpoint}';
}
@media screen and ($expr) {
@content;
}
}
@@ -160,6 +166,7 @@ $misc-variables: (
spacer-200: 2rem,
spacer-050: 0.5rem,
spacer-100: 1rem,
spacer-150: 1.5rem,
spacer-300: 3rem,
spacer-500: 5rem,
spacer-800: 8rem,
@@ -176,12 +183,12 @@ $themed-variables: (
dark: color.scale($clr-tertiary, $lightness: -82%),
),
clr-base-heading: (
light: darken($clr-tertiary, 9%),
dark: color.scale($clr-primary, $lightness: -10%, $saturation: -70%),
),
clr-base-heading-alt-alpha: (
light: initial,
dark: initial,
light: color.scale($clr-tertiary, $lightness: -35%),
dark: $clr-primary,
),
clr-base-heading-alt-alpha: (
light: color.scale($clr-tertiary, $lightness: -15%),
dark: color.scale($clr-secondary, $lightness: 95%),
),
clr-base-text: (
light: $clr-alpha,
@@ -239,7 +246,7 @@ $themed-variables: (
),
clr-card-heading: (
light: color.scale($clr-tertiary, $lightness: -35%),
dark: color.scale($clr-secondary, $lightness: 85%, $saturation: 0%),
dark: color.scale($clr-secondary, $lightness: 90%, $saturation: 0%),
),
clr-card-heading-alt-alpha: (
light: color.scale($clr-tertiary, $lightness: -15%),

4
views/sass/_base.scss
View File

@@ -14,10 +14,6 @@ html {
scroll-behavior: smooth;
font-size: 62.5%;
@include bp(bp-725) {
font-size: 58%;
}
@include bp(bp-350) {
font-size: 55%;
}

2
views/sass/_components.scss
View File

@@ -356,7 +356,7 @@
.features {
display: grid;
grid-template-rows: max-content auto;
grid-template-columns: repeat(auto-fit, minmax(35rem, 1fr));
grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
gap: var(--spacer-500);
@include bp(bp-550) {

6
views/sass/_layout.scss
View File

@@ -280,8 +280,10 @@
// MAIN
////////////////////////////////////////////////////////////////
.main {
// max-width: 200rem;
// margin-inline: auto;
@include bp(bp-1800, true) {
width: 180rem;
margin-inline: auto;
}
padding: 2rem;
@include bp(bp-450) {

46
views/sass/_pages.scss
View File

@@ -31,10 +31,10 @@
}
.go-to-page {
margin: 3rem 5rem;
margin: var(--spacer-300) var(--spacer-500);
display: grid;
grid-auto-flow: column;
gap: 5rem;
gap: var(--spacer-500);
place-content: center;
place-items: center;
@@ -44,8 +44,8 @@
}
&__icon {
height: 3rem;
width: 3rem;
height: var(--fs-300);
width: var(--fs-300);
fill: var(--clr-button-alt-alpha);
}
@@ -68,14 +68,14 @@
////////////////////////////////////////////////////////////////
.overview {
&__nav-box {
padding: 5rem 2rem;
padding: var(--spacer-500) var(--spacer-200);
@include bp(bp-725) {
padding: 2rem;
padding: var(--spacer-200);
}
@include bp(bp-550) {
padding: 2rem 0;
padding: var(--spacer-200) 0;
}
}
@@ -86,7 +86,7 @@
}
&__nav {
padding: 0 2rem;
padding: 0 var(--spacer-200);
display: flex;
flex-wrap: wrap;
justify-content: center;
@@ -94,7 +94,7 @@
// overflow-x: scroll;
@include bp(bp-725) {
padding: 0 1rem;
padding: 0 var(--spacer-100);
}
@include bp(bp-550) {
@@ -159,7 +159,7 @@
}
&__features {
padding: 6rem;
padding: var(--spacer-500);
// display: grid;
// grid-template-rows: max-content auto;
@@ -167,8 +167,8 @@
// gap: 6rem;
// padding: 6rem;
@include bp(bp-450) {
padding: 1rem;
@include bp(bp-550) {
padding: var(--spacer-100);
}
}
@@ -184,7 +184,7 @@
max-width: 120rem;
margin: 0 auto;
@include bp(bp-450) {
@include bp(bp-550) {
padding: 5rem 1rem;
}
}
@@ -222,7 +222,7 @@
&__item {
// background-color: var(--color-secondary);
display: grid;
gap: 1.5rem;
gap: var(--spacer-150);
}
&__item-heading {
@@ -275,7 +275,7 @@
&__ways {
text-align: center;
padding: 1rem;
padding: var(--spacer-100);
}
&__ways-image {
@@ -496,17 +496,20 @@
&__heading-main {
font-size: var(--fs-350);
font-family: var(--ff-alt-alpha);
color: var(--clr-card-heading);
color: var(--clr-base-heading);
@include bp(bp-900) {
font-size: 3rem;
font-size: var(--fs-300);
}
@include bp(bp-550) {
font-size: var(--fs-250);
}
}
&__heading-sub {
font-size: 1em;
font-weight: 600;
font-family: var(--ff-alt-alpha);
color: var(--clr-card-heading-alt-alpha);
color: var(--clr-base-heading-alt-alpha);
}
&__storyline,
@@ -584,11 +587,6 @@
max-height: 30rem;
flex: 1 0 30rem;
max-width: 30rem;
@include bp(bp-900) {
max-height: 20rem;
flex: 1 0 20rem;
}
}
&__media-box {
display: flex;
@@ -637,6 +635,6 @@
}
@include bp(bp-550) {
padding: var(--spacer-200);
padding-inline: var(--spacer-200);
}
}