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

refactor: make components more modular

Browse Source 
would help in implementing name route

also did some stylistic changes
This commit is contained in:
zyachel
2023-04-15 20:56:15 +05:30
parent 8ce02d0236
commit 18ca98fd4a
43 changed files with 757 additions and 796 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/styles/abstracts/variables/_misc.scss
View File

@ -21,8 +21,8 @@ $breakpoints: (
);
// 1. colors
$clr-primary: hsl(240, 31%, 25%);
$clr-secondary: hsl(344, 79%, 40%);
$clr-tertiary: hsl(176, 43%, 46%);
$clr-quatenary: hsl(204, 4%, 23%);
$clr-quintenary: hsl(0, 0%, 100%);
// $clr-primary: hsl(240, 31%, 25%);
// $clr-secondary: hsl(344, 79%, 40%);
// $clr-tertiary: hsl(176, 43%, 46%);
// $clr-quatenary: hsl(204, 4%, 23%);
// $clr-quintenary: hsl(0, 0%, 100%);

8
src/styles/abstracts/variables/_themes.scss
View File

@ -22,17 +22,13 @@ $_light: (
// 4.2 for borders, primarily
fill-muted: hsl(0, 0%, 80%),
// shadows on cards
shadow: 0 0 1rem hsla(0, 0%, 0%, 0.2),
shadow: 0 0 0.5em hsla(0, 0%, 0%, 0.2),
// keyboard, focus hightlight
highlight: hsl(176, 43%, 46%),
// for gradient behind hero text on about page.
gradient:
(
radial-gradient(
at 23% 32%,
hsla(344, 79%, 40%, 0.15) 0px,
transparent 70%
),
radial-gradient(at 23% 32%, hsla(344, 79%, 40%, 0.15) 0px, transparent 70%),
radial-gradient(at 72% 55%, hsla(344, 79%, 40%, 0.2) 0px, transparent 50%)
),
// changes color of native html elemnts, either 'light' or 'dark' must be set.

97
src/styles/modules/components/card/card-basic.module.scss Normal file
View File

@ -0,0 +1,97 @@
@use '../../../abstracts' as helper;
.container {
margin-inline: auto;
display: grid;
grid-template-columns: minmax(25rem, 30rem) 1fr;
@include helper.bp('bp-900') {
grid-template-columns: none;
grid-template-rows: 30rem min-content;
}
@include helper.bp('bp-700') {
grid-template-rows: 25rem min-content;
}
}
.imageContainer {
display: flex; // for bringing out image__NA out of blur
position: relative;
height: auto;
width: auto;
overflow: hidden;
background-size: cover;
background-position: top;
place-items: center;
@include helper.bp('bp-900') {
padding: var(--spacer-2);
isolation: isolate;
// for adding layer of color on top of background image
&::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to top,
var(--clr-bg-accent) 10%,
transparent
);
backdrop-filter: blur(8px);
}
}
}
.image {
object-fit: cover;
object-position: center;
@include helper.bp('bp-900') {
z-index: 1;
object-fit: contain;
outline: 3px solid var(--clr-fill);
outline-offset: 5px;
max-height: 100%;
margin: auto;
// overrriding nex/future/image defaults
height: initial !important;
width: initial !important;
position: relative !important;
}
}
.imageNA {
z-index: 1;
fill: var(--clr-fill-muted);
}
.info {
padding: var(--spacer-2) var(--spacer-4);
display: flex;
flex-direction: column;
gap: var(--spacer-2);
@include helper.bp('bp-900') {
// text-align: center;
// align-items: center;
}
@include helper.bp('bp-450') {
gap: var(--spacer-1);
}
}
.title {
line-height: 1;
@include helper.bp('bp-900') {
text-align: center;
}
}

44
src/styles/modules/components/card/card-cast.module.scss Normal file
View File

@ -0,0 +1,44 @@
.item {
height: 100%;
display: grid;
grid-template-rows: minmax(auto, 65%) auto;
text-decoration: none;
color: currentColor;
}
.imgContainer {
justify-self: stretch;
position: relative;
// for icon when image is unavailable
display: grid;
place-items: center;
}
.img {
height: 100%;
object-fit: cover;
}
.imgNA {
fill: var(--clr-fill-muted);
height: 40%;
}
.textContainer {
display: grid;
gap: var(--spacer-1);
padding: var(--spacer-1);
text-align: center;
justify-items: center;
align-content: start;
}
.name {
font-size: 1.2em;
}
.role {
font-size: .95em;
}

62
src/styles/modules/components/card/card-result.module.scss Normal file
View File

@ -0,0 +1,62 @@
@use '../../../abstracts' as helper;
.item {
--width: 10rem;
--height: var(--width);
display: grid;
grid-template-columns: var(--width) auto;
text-decoration: none;
color: inherit;
@include helper.bp('bp-450') {
--height: 15rem;
grid-template-columns: auto;
}
}
.sansImage {
grid-template-columns: auto;
padding: var(--spacer-1);
.imgContainer {
display: none;
}
}
.imgContainer {
display: grid;
place-items: center;
min-height: var(--height);
position: relative;
}
.img {
object-fit: cover;
object-position: center 25%; // most of the time, person's face is visible at 1/4 of height in a potrait image.
}
.imgNA {
width: 80%;
fill: var(--clr-fill-muted);
}
.info {
display: grid;
padding: var(--spacer-3);
gap: var(--spacer-0);
@include helper.bp('bp-450') {
padding: var(--spacer-1);
}
& :empty {
display: none;
}
}
.heading {
font-size: var(--fs-4);
text-decoration: none;
}

56
src/styles/modules/components/card/card-title.module.scss Normal file
View File

@ -0,0 +1,56 @@
.item {
height: 100%;
display: grid;
grid-template-rows: minmax(auto, 65%) auto;
text-decoration: none;
color: currentColor;
}
.imgContainer {
justify-self: stretch;
position: relative;
// for icon when image is unavailable
display: grid;
place-items: center;
}
.img {
height: 100%;
object-fit: cover;
}
.imgNA {
fill: var(--clr-fill-muted);
height: 40%;
}
.textContainer {
display: grid;
gap: var(--spacer-1);
padding: var(--spacer-1);
text-align: center;
justify-items: center;
align-content: start;
}
.name {
font-size: 1.2em;
}
.rating {
display: flex;
align-items: center;
gap: var(--spacer-0);
line-height: 1;
flex-wrap: wrap;
justify-content: center;
}
.ratingIcon {
--dim: 1em;
height: var(--dim);
width: var(--dim);
fill: var(--clr-fill);
}

11
src/styles/modules/components/card/card.module.scss Normal file
View File

@ -0,0 +1,11 @@
.card {
overflow: hidden;
border-radius: 5px;
background-color: var(--clr-bg-accent);
box-shadow: var(--clr-shadow);
}
.hoverable:hover,
.hoverable:focus-within {
background-color: var(--clr-bg-muted);
}

13
src/styles/modules/components/find/company.module.scss
View File

@ -1,13 +0,0 @@
.company {
background: var(--clr-bg-accent);
box-shadow: var(--clr-shadow);
border-radius: 5px;
display: grid;
padding: var(--spacer-3);
gap: var(--spacer-0);
}
.heading {
font-size: var(--fs-4);
text-decoration: none;
}

13
src/styles/modules/components/find/keyword.module.scss
View File

@ -1,13 +0,0 @@
.keyword {
background: var(--clr-bg-accent);
box-shadow: var(--clr-shadow);
border-radius: 5px;
display: grid;
padding: var(--spacer-3);
gap: var(--spacer-0);
}
.heading {
font-size: var(--fs-4);
text-decoration: none;
}

63
src/styles/modules/components/find/person.module.scss
View File

@ -1,57 +1,4 @@
@use '../../../abstracts' as helper;
.person {
--width: 10rem;
--height: var(--width);
background: var(--clr-bg-accent);
box-shadow: var(--clr-shadow);
border-radius: 5px;
overflow: hidden; // for background image
display: grid;
grid-template-columns: var(--width) auto;
@include helper.bp('bp-450') {
--height: 15rem;
grid-template-columns: auto;
}
}
.imgContainer {
display: grid;
place-items: center;
min-height: var(--height);
}
.img {
object-fit: cover;
object-position: center 25%; // most of the time, person's face is visible at 1/4 of height in a potrait image.
}
.imgNA {
width: 80%;
fill: var(--clr-fill-muted);
}
.info {
display: grid;
padding: var(--spacer-3);
gap: var(--spacer-0);
@include helper.bp('bp-450') {
padding: var(--spacer-1);
}
}
.heading {
font-size: var(--fs-4);
text-decoration: none;
}
.basicInfo, .seriesInfo {
.basicInfo {
display: flex;
list-style: none;
flex-wrap: wrap;
@ -64,11 +11,3 @@
font-size: var(--fs-5);
}
}
.stars {
span {
font-weight: var(--fw-bold);
}
}

8
src/styles/modules/components/find/results.module.scss
View File

@ -10,7 +10,10 @@
}
}
.titles, .people, .companies, .keywords {
.titles,
.people,
.companies,
.keywords {
display: grid;
gap: var(--spacer-2);
@ -18,8 +21,5 @@
padding: var(--spacer-2);
display: grid;
gap: var(--spacer-4);
// justify-self: start;
}
}

54
src/styles/modules/components/find/title.module.scss
View File

@ -1,57 +1,5 @@
@use '../../../abstracts' as helper;
.title {
--width: 10rem;
--height: 10rem;
background: var(--clr-bg-accent);
box-shadow: var(--clr-shadow);
border-radius: 5px;
overflow: hidden; // for background image
display: grid;
grid-template-columns: var(--width) auto;
@include helper.bp('bp-450') {
--height: 15rem;
grid-template-columns: auto;
}
}
.imgContainer {
min-height: var(--height);
display: grid;
place-items: center;
position: relative;
}
.img {
object-fit: cover;
@include helper.bp('bp-450') {
object-position: center 25%;
}
}
.imgNA {
width: 80%;
fill: var(--clr-fill-muted);
}
.info {
display: grid;
gap: var(--spacer-0);
padding: var(--spacer-3);
@include helper.bp('bp-450') {
padding: var(--spacer-1);
}
}
.heading {
font-size: var(--fs-4);
text-decoration: none;
}
.basicInfo,
.seriesInfo {
@ -59,7 +7,7 @@
list-style: none;
flex-wrap: wrap;
& * + ::before {
& :not(:last-child)::after {
content: '\00b7';
padding-inline: var(--spacer-1);
font-weight: 900;

0
src/styles/modules/components/title/media.module.scss → src/styles/modules/components/media/media.module.scss
View File

92
src/styles/modules/components/title/basic.module.scss
View File

@ -1,97 +1,5 @@
@use '../../../abstracts' as helper;
.container {
margin-inline: auto;
background: var(--clr-bg-accent);
box-shadow: var(--clr-shadow);
border-radius: 5px;
overflow: hidden; // for background image
display: grid;
grid-template-columns: minmax(25rem, 30rem) 1fr;
@include helper.bp('bp-900') {
grid-template-columns: none;
grid-template-rows: 30rem min-content;
}
@include helper.bp('bp-700') {
grid-template-rows: 25rem min-content;
}
}
.imageContainer {
display: flex; // for bringing out image__NA out of blur
position: relative;
height: auto;
width: auto;
overflow: hidden;
background-size: cover;
background-position: top;
place-items: center;
@include helper.bp('bp-900') {
padding: var(--spacer-2);
isolation: isolate;
// for adding layer of color on top of background image
&::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to top,
var(--clr-bg-accent) 10%,
transparent
);
backdrop-filter: blur(8px);
}
}
}
.image {
object-fit: cover;
object-position: center;
@include helper.bp('bp-900') {
z-index: 1;
object-fit: contain;
outline: 3px solid var(--clr-fill);
outline-offset: 5px;
max-height: 100%;
margin: auto;
// overrriding nex/future/image defaults
height: initial !important;
width: initial !important;
position: relative !important;
}
&__NA {
z-index: 1;
fill: var(--clr-fill-muted);
}
}
.info {
padding: var(--spacer-2) var(--spacer-4);
display: flex;
flex-direction: column;
gap: var(--spacer-2);
@include helper.bp('bp-900') {
text-align: center;
align-items: center;
}
@include helper.bp('bp-450') {
gap: var(--spacer-1);
}
}
.title {
line-height: 1;
}

50
src/styles/modules/components/title/cast.module.scss
View File

@ -24,53 +24,3 @@
--min-height: 30rem;
}
}
.member {
height: 100%;
display: grid;
grid-template-rows: minmax(auto, 70%) min-content auto;
justify-items: center;
text-align: center;
font-size: var(--fs-5);
overflow: hidden;
border-radius: 5px;
box-shadow: var(--clr-shadow);
background-color: var(--clr-bg-accent);
&__imgContainer {
justify-self: stretch;
position: relative;
// for icon when image is unavailable
display: grid;
place-items: center;
}
&__img {
height: 100%;
object-fit: cover;
}
&__imgNA {
fill: var(--clr-fill-muted);
height: 40%;
}
&__textContainer {
display: grid;
gap: var(--spacer-0);
padding: var(--spacer-0);
// place-content: center;
text-align: center;
justify-items: center;
align-content: start;
}
&__name {
@include helper.prettify-link(var(--clr-link));
}
&__role {
font-size: 0.9em;
}
}

74
src/styles/modules/components/title/more-like-this.module.scss
View File

@ -29,77 +29,3 @@
min-height: 37rem;
}
}
.item {
overflow: hidden;
border-radius: 5px;
box-shadow: var(--clr-shadow);
height: 100%;
display: grid;
grid-template-rows: minmax(auto, 70%) auto;
background-color: var(--clr-bg-accent);
text-decoration: none;
color: currentColor;
&__imgContainer {
justify-self: stretch;
position: relative;
// for icon when image is unavailable
display: grid;
place-items: center;
}
&__textContainer {
display: grid;
gap: var(--spacer-1);
padding: var(--spacer-1);
// place-content: center;
text-align: center;
justify-items: center;
align-content: start;
}
&__img {
height: 100%;
object-fit: cover;
}
&__imgNA {
fill: var(--clr-fill-muted);
height: 40%;
// vertical-align: center;
}
&__heading {
}
&__genres {
}
&__rating {
// font-size: 0.9em;
display: flex;
align-items: center;
gap: var(--spacer-0);
line-height: 1;
flex-wrap: wrap;
justify-content: center;
}
&__ratingNum {
}
&__ratingIcon {
--dim: 1em;
height: var(--dim);
width: var(--dim);
fill: var(--clr-fill);
}
&:hover {
background-color: var(--clr-bg-muted);
}
}

6
src/styles/modules/layout/footer.module.scss
View File

@ -23,10 +23,10 @@
&__link {
@include helper.prettify-link(var(--clr-link));
}
&__linkActive {
@include helper.prettify-link(var(--clr-link), $animate: false);
&[aria-current] {
@include helper.prettify-link(var(--clr-link), $animate: false);
}
}
}