style: changes in skeletons and other details

Franqsanz · Aug 13, 2024 · 0af66bd · 0af66bd
1 parent 4d05afe
commit 0af66bd
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 4 deletions.
diff --git a/src/components/MostViewed.tsx b/src/components/MostViewed.tsx
@@ -27,6 +27,15 @@ export function MostViewed() {
                 my='1'
                 fontSize='sm'
                 _hover={{ color: 'green.500', outline: 'none' }}
+                sx={{
+                  display: '-webkit-box',
+                  '-webkit-box-orient': 'vertical',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  '-webkit-line-clamp': '2',
+                  lineHeight: 1.5,
+                  maxHeight: 'calc(1.5em * 2)',
+                }}
               >
                 {title}
               </Link>

diff --git a/src/components/MySliderCategories.tsx b/src/components/MySliderCategories.tsx
@@ -71,7 +71,7 @@ export function MySliderCategories() {
         <Box
           id='slider'
           display='flex'
-          w='5xl'
+          w={{ base: '68rem', '2xl': '84rem' }}
           overflowX={{ base: 'auto', md: 'hidden' }}
           scrollBehavior='smooth'
           flexDirection='row'

diff --git a/src/components/cards/Card.tsx b/src/components/cards/Card.tsx
@@ -112,12 +112,21 @@ export function Card({
             >
               <Box
                 w='full'
-                maxW='240px'
+                maxW={{ base: '130px', lg: '210px' }}
                 fontSize={{ base: 'xs', sm: 'md' }}
                 fontWeight='400'
                 mx='1'
                 mb='2'
                 textTransform='uppercase'
+                sx={{
+                  display: '-webkit-box',
+                  '-webkit-box-orient': 'vertical',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  '-webkit-line-clamp': '2',
+                  lineHeight: 1.5,
+                  maxHeight: 'calc(1.5em * 2)',
+                }}
               >
                 {title}
               </Box>

diff --git a/src/components/skeletons/SkeletonABooks.tsx b/src/components/skeletons/SkeletonABooks.tsx
@@ -31,7 +31,7 @@ export function SkeletonAllBooks({ showTags = true }: SkeletonType) {
       )}
       <Flex
         direction={{ base: 'column', md: 'row' }}
-        maxW='1800px'
+        maxW={{ base: '1260px', '2xl': '1560px' }}
         m='0 auto'
         px={{ base: 5, md: 10, '2xl': 16 }}
       >

diff --git a/src/components/skeletons/SkeletonTags.tsx b/src/components/skeletons/SkeletonTags.tsx
@@ -9,7 +9,13 @@ export function SkeletonTags() {
   return (
     <>
       <Flex justify='center' overflow='hidden'>
-        <HStack w='5xl' spacing='4' mt='5' mb='5' mx='10'>
+        <HStack
+          w={{ base: '68rem', '2xl': '84rem' }}
+          spacing='4'
+          mt='5'
+          mb='5'
+          mx='10'
+        >
           {TagCategories}
         </HStack>
       </Flex>