diff --git a/src/pages/Characters/index.scss b/src/pages/Characters/index.scss index e0a5160..b923064 100644 --- a/src/pages/Characters/index.scss +++ b/src/pages/Characters/index.scss @@ -918,11 +918,55 @@ button.character_library_sections__card { } .character_library_sections__grid { - grid-template-columns: repeat(auto-fill, 182px); - justify-content: center; + grid-template-columns: repeat(2, minmax(0, 1fr)); + justify-content: stretch; } .character_library_sections__category_control .categoryDropdown__trigger { width: 94px; } } + +@media (max-width: 480px) { + .character_library_sections__section_head { + gap: 12px; + } + + .character_library_sections__filter_row { + width: 100%; + } + + .character_library_sections__search { + flex: 1 1 160px; + } + + .character_library_sections__grid { + gap: 12px; + } + + .character_library_sections__card { + width: 100%; + height: auto; + min-height: 230px; + flex-basis: auto; + padding: 8px; + } + + .character_library_sections__card_image { + width: 100%; + height: auto; + aspect-ratio: 1 / 1; + border-radius: 16px; + } + + .character_library_sections__card_meta { + height: 40px; + padding-right: 10px; + grid-template-columns: 30px minmax(0, 1fr) auto; + } + + .character_library_sections__card_author_avatar { + width: 30px; + height: 30px; + } +} diff --git a/src/pages/index/index.scss b/src/pages/index/index.scss index 3587751..f10bb27 100644 --- a/src/pages/index/index.scss +++ b/src/pages/index/index.scss @@ -1373,7 +1373,6 @@ @media (max-width: 1100px) { .index_product_detail { - .index_product_detail_tv, .index_product_detail_mcn { grid-template-columns: 1fr; @@ -1635,7 +1634,6 @@ } @media (max-width: 640px) { - .index_hero_container, .index_products_container, .index_popiart_container, @@ -1695,7 +1693,6 @@ } .index_product_detail { - .index_product_detail_tv_img, .index_product_detail_mcn_img { width: 100%; @@ -1707,4 +1704,153 @@ aspect-ratio: 792 / 439; } } -} \ No newline at end of file +} + +@media (max-width: 480px) { + .index_header { + top: 8px; + height: 108px; + margin-top: 24px; + margin-bottom: -132px; + + .index_header_inner { + width: calc(100% - 24px); + row-gap: 10px; + } + + .index_header_brand { + width: 96px; + height: 42px; + } + + .index_header_brand_logo { + width: 84px; + height: 32px; + } + + .index_header_nav { + width: 100%; + height: 50px; + gap: 6px; + padding: 6px; + } + + .index_header_nav_btn { + min-width: 0; + height: 38px; + flex: 1 1 0; + padding: 10px 8px; + font-size: 14px; + } + + .index_header_login { + width: 78px; + height: 36px; + padding: 8px 12px; + } + + .index_header_login_text { + font-size: 14px; + } + + .index_header_dropdown { + top: 112px; + left: 0; + width: 100%; + transform: none; + } + + .index_header_dropdown_inner { + width: 100%; + } + } + + .index_hero { + min-height: 680px; + + .index_hero_content { + min-height: 680px; + padding-top: 100px; + gap: 22px; + } + + .index_hero_title { + font-size: 34px; + } + + .index_hero_subtitle { + font-size: 25px; + } + + .index_hero_desc { + font-size: 15px; + line-height: 1.6; + } + + .index_hero_actions { + width: 100%; + gap: 12px; + } + + .index_hero_btn { + width: 100%; + min-height: 52px; + padding: 14px 18px; + font-size: 18px; + } + } + + .index_products, + .index_popiart, + .index_product_detail, + .index_workflow, + .index_cloud, + .index_vision { + padding-top: 72px; + padding-bottom: 72px; + } + + .index_products_heading_title, + .index_popiart_heading_title, + .index_popiart_assets_heading_title, + .index_product_detail_tv_heading_title, + .index_product_detail_mcn_heading_title, + .index_workflow_heading_title, + .index_cloud_heading_title, + .index_vision_heading_title { + font-size: 26px; + } + + .index_product_detail { + .index_product_detail_container { + gap: 96px; + } + + .index_product_detail_tv, + .index_product_detail_mcn { + gap: 28px; + min-height: auto; + } + + .index_product_detail_tv_copy, + .index_product_detail_mcn_copy { + gap: 24px; + } + } + + .index_cloud { + .index_cloud_card { + min-height: auto; + padding: 24px; + } + } + + .index_footer { + padding-top: 72px; + + .index_footer_nav { + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 28px 18px; + } + } +}