pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adjust title font sizes, fix placeholder sizing

Browse source
This commit is contained in:
jeffvli 2023-07-24 15:07:56 -07:00
parent 230fa33525
commit 8e83beffcc
2 changed files with 38 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/renderer/features/shared/components/item-image-placeholder.tsx
View file

@ -1,4 +1,5 @@
import { Center } from '@mantine/core'; import { Center } from '@mantine/core';
import clsx from 'clsx';
import { memo } from 'react'; import { memo } from 'react';
import { RiAlbumFill, RiPlayListFill, RiUserVoiceFill } from 'react-icons/ri'; import { RiAlbumFill, RiPlayListFill, RiUserVoiceFill } from 'react-icons/ri';
import styles from './item-image-placeholder.module.scss'; import styles from './item-image-placeholder.module.scss';
@ -25,7 +26,7 @@ const Image = memo(function Image(props: ItemImagePlaceholderProps) {
export const ItemImagePlaceholder = ({ itemType }: ItemImagePlaceholderProps) => { export const ItemImagePlaceholder = ({ itemType }: ItemImagePlaceholderProps) => {
return ( return (
<Center className={styles.imagePlaceholder}> <Center className={clsx(styles.imagePlaceholder, 'item-image-placeholder')}>
<Image itemType={itemType} /> <Image itemType={itemType} />
</Center> </Center>
); );

40
src/renderer/features/shared/components/library-header.module.scss
View file

@ -12,11 +12,16 @@
max-height: 500px; max-height: 500px;
padding: 5rem 2rem 2rem; padding: 5rem 2rem 2rem;
:global(.item-image-placeholder) {
width: 175px !important;
height: 175px;
}
@container (min-width: 600px) { @container (min-width: 600px) {
grid-template-columns: 175px minmax(0, 1fr); grid-template-columns: 175px minmax(0, 1fr);
h1 { h1 {
font-size: 3rem; font-size: 4.5rem;
} }
.image { .image {
@ -25,13 +30,18 @@
height: 175px; height: 175px;
} }
} }
:global(.item-image-placeholder) {
width: 175px !important;
height: 175px;
}
} }
@container (min-width: 600px) { @container (min-width: 600px) {
grid-template-columns: 200px minmax(0, 1fr); grid-template-columns: 200px minmax(0, 1fr);
h1 { h1 {
font-size: 4.5rem; font-size: 5rem;
} }
.image { .image {
@ -40,13 +50,18 @@
height: 200px; height: 200px;
} }
} }
:global(.item-image-placeholder) {
width: 200px !important;
height: 200px;
}
} }
@container (min-width: 768px) { @container (min-width: 768px) {
grid-template-columns: 225px minmax(0, 1fr); grid-template-columns: 225px minmax(0, 1fr);
h1 { h1 {
font-size: 5rem; font-size: 6rem;
} }
.image { .image {
@ -55,13 +70,18 @@
height: 225px; height: 225px;
} }
} }
:global(.item-image-placeholder) {
width: 225px !important;
height: 225px;
}
} }
@container (min-width: 1200px) { @container (min-width: 1200px) {
grid-template-columns: 250px minmax(0, 1fr); grid-template-columns: 250px minmax(0, 1fr);
h1 { h1 {
font-size: 5.5rem; font-size: 6.5rem;
} }
.image { .image {
@ -70,6 +90,17 @@
height: 250px; height: 250px;
} }
} }
:global(.item-image-placeholder) {
width: 250px !important;
height: 250px;
}
}
@container (min-width: 1500px) {
h1 {
font-size: 7rem;
}
} }
} }
@ -120,6 +151,7 @@
.title { .title {
overflow: hidden; overflow: hidden;
color: var(--main-fg); color: var(--main-fg);
font-size: 3.5rem;
line-height: 1.15; line-height: 1.15;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;