[Update] Config Page: About VRCT: Apply a responsive design.

src-ui/app/config_page/setting_section/setting_box/about_vrct/AboutVrct.jsx

@@ -3,10 +3,20 @@ import dev_section_title from "@images/about_vrct/dev_section_title.png";
 import dev_misya from "@images/about_vrct/dev_misya.png";
 import dev_shiina from "@images/about_vrct/dev_shiina.png";
 import vrct_logo_for_about_vrct from "@images/about_vrct/vrct_logo_for_about_vrct.png";
+
 import contributors_section_title from "@images/about_vrct/contributors_section_title.png";
-import contributors_members from "@images/about_vrct/contributors_members.png";
+import contributor_done from "@images/about_vrct/contributor_done.png";
+import contributor_iya from "@images/about_vrct/contributor_iya.png";
+import contributor_rera from "@images/about_vrct/contributor_rera.png";
+import contributor_poposuke from "@images/about_vrct/contributor_poposuke.png";
+import contributor_kumaguma from "@images/about_vrct/contributor_kumaguma.png";
+
 import localization_section_title from "@images/about_vrct/localization_section_title.png";
-import localization_members from "@images/about_vrct/localization_members.png";
+import localization_1 from "@images/about_vrct/localization_1.png";
+import localization_2 from "@images/about_vrct/localization_2.png";
+import localization_3 from "@images/about_vrct/localization_3.png";
+import localization_4 from "@images/about_vrct/localization_4.png";
+import localization_5 from "@images/about_vrct/localization_5.png";
 
 import special_thanks_section_title from "@images/about_vrct/special_thanks_section_title.png";
 import special_thanks_members from "@images/about_vrct/special_thanks_members.png";
@@ -15,8 +25,6 @@ import special_thanks_message_ja from "@images/about_vrct/special_thanks_message
 
 import poster_showcase_section_title from "@images/about_vrct/poster_showcase_section_title.png";
 
-import vrchat_disclaimer from "@images/about_vrct/vrchat_disclaimer.png";
-
 import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import { useStore_UiLanguage } from "@store";
@@ -43,7 +51,9 @@ export const AboutVrct = () => {
             </div>
 
             <div className={styles.project_links_and_logo_section}>
-                <img src={vrct_logo_for_about_vrct} className={styles.about_vrct_logo} />
+                <div className={styles.about_vrct_logo_wrapper}>
+                    <img src={vrct_logo_for_about_vrct} className={styles.about_vrct_logo} />
+                </div>
                 <div className={styles.project_links_wrapper}>
                     <OpenLinkContainer className={styles.project_link} href_id="project_link_booth" />
                     <OpenLinkContainer className={styles.project_link} href_id="project_link_documents" />
@@ -55,19 +65,46 @@ export const AboutVrct = () => {
             <div className={styles.contributors_section}>
                 <img src={contributors_section_title} className={clsx(styles.section_title, styles.contributors)} />
                 <div className={styles.contributors_img_wrapper}>
-                    <img src={contributors_members} className={clsx(styles.contributors_img, styles.contributors)} />
-                    <OpenLinkContainer className={styles.contributors_done_san_x} href_id="contributors_done_san_x" />
-                    <OpenLinkContainer className={styles.contributors_iya_x} href_id="contributors_iya_x" />
-                    <OpenLinkContainer className={styles.contributors_rera_x} href_id="contributors_rera_x" />
-                    <OpenLinkContainer className={styles.contributors_rera_github} href_id="contributors_rera_github" />
-                    <OpenLinkContainer className={styles.contributors_poposuke_x} href_id="contributors_poposuke_x" />
-                    <OpenLinkContainer className={styles.contributors_kumaguma_x} href_id="contributors_kumaguma_x" />
+                    <div className={styles.contributor_card_wrapper}>
+                        <img src={contributor_done} className={clsx(styles.contributors_img, styles.contributors)} />
+                        <OpenLinkContainer className={styles.contributors_done_san_x} href_id="contributors_done_san_x" />
+                    </div>
+                    <div className={styles.contributor_card_wrapper}>
+                        <img src={contributor_iya} className={clsx(styles.contributors_img, styles.contributors)} />
+                        <OpenLinkContainer className={styles.contributors_iya_x} href_id="contributors_iya_x" />
+                    </div>
+                    <div className={styles.contributor_card_wrapper}>
+                        <img src={contributor_rera} className={clsx(styles.contributors_img, styles.contributors)} />
+                        <OpenLinkContainer className={styles.contributors_rera_x} href_id="contributors_rera_x" />
+                        <OpenLinkContainer className={styles.contributors_rera_github} href_id="contributors_rera_github" />
+                    </div>
+                    <div className={styles.contributor_card_wrapper}>
+                        <img src={contributor_poposuke} className={clsx(styles.contributors_img, styles.contributors)} />
+                        <OpenLinkContainer className={styles.contributors_poposuke_x} href_id="contributors_poposuke_x" />
+                    </div>
+                    <div className={styles.contributor_card_wrapper}>
+                        <img src={contributor_kumaguma} className={clsx(styles.contributors_img, styles.contributors)} />
+                        <OpenLinkContainer className={styles.contributors_kumaguma_x} href_id="contributors_kumaguma_x" />
+                    </div>
                 </div>
             </div>
 
             <div className={styles.localization_section}>
                 <img src={localization_section_title} className={clsx(styles.section_title, styles.localization)} />
-                <img src={localization_members} className={clsx(styles.localization_members_img, styles.localization)} />
+                <div className={styles.localization_members_wrapper}>
+                    <div className={styles.localization_members_row_wrapper}>
+                        <img src={localization_1} className={styles.localization_members_img} />
+                        <img src={localization_2} className={styles.localization_members_img} />
+                    </div>
+                    <div className={styles.localization_members_row_wrapper}>
+                        <img src={localization_3} className={styles.localization_members_img} />
+                        <img src={localization_4} className={styles.localization_members_img} />
+                    </div>
+                    <div className={styles.localization_members_row_wrapper}>
+                        <img src={localization_5} className={styles.localization_members_img} />
+                        {/* <img src={localization_6} className={styles.localization_members_img} /> */}
+                    </div>
+                </div>
             </div>
 
             <div className={styles.special_thanks_section}>
@@ -87,7 +124,7 @@ export const AboutVrct = () => {
             </div>
 
             <div className={styles.vrchat_disclaimer_section}>
-                <img src={vrchat_disclaimer} className={styles.vrchat_disclaimer} />
+                <p className={styles.vrchat_disclaimer}>VRCT is not endorsed by VRChat and does not reflect the views or opinions of VRChat or anyone officially involved in producing or managing VRChat properties. VRChat and all associated properties are trademarks or registered trademarks of VRChat Inc. VRChat © VRChat Inc.</p>
             </div>
 
 

src-ui/app/config_page/setting_section/setting_box/about_vrct/AboutVrct.module.scss

@@ -1,10 +1,11 @@
 .container {
     display: flex;
     gap: 2.2rem;
+    justify-content: center;
+    align-items: center;
     flex-direction: column;
-    width: 72rem;
+    max-width: 72rem;
     margin: auto;
-    // background-color: gray;
 }
 
 .section_title {
@@ -31,20 +32,23 @@
 }
 .dev_section_wrapper {
     display: flex;
-    justify-content: space-between;
+    gap: 2rem;
+    flex-wrap: wrap;
+    width: 100%;
+    justify-content: center;
 }
 .dev_card_wrapper {
-    width: 34.6rem;
     position: relative;
+    // width: 100%;
 }
 .dev_card_img {
-    width: 100%;
+    width: 34.6rem;
 }
 
 @mixin dev_sns_styles($right) {
     position: absolute;
     right: $right;
-    bottom: 1.2rem;
+    bottom: 0.6rem;
     width: 2.8rem;
     padding: 0.4rem;
     border-radius: 0.4rem;
@@ -70,8 +74,16 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    text-align: center;
     padding: 0 5.5rem;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+.about_vrct_logo_wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    padding: 2rem 0;
 }
 .about_vrct_logo {
     width: 20rem;
@@ -79,7 +91,7 @@
 }
 .project_links_wrapper {
     display: flex;
-    flex-direction: column;
+    flex-wrap: wrap;
     gap: 0.2rem;
     align-items: start;
 }
@@ -88,6 +100,7 @@
     height: 2.6rem;
     padding: 0.4rem 1rem;
     border-radius: 0.4rem;
+    flex-shrink: 0;
     &:hover {
         background-color: var(--dark_850_color);
     }
@@ -97,19 +110,27 @@
 }
 
 .contributors_img_wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    justify-content: center;
+    align-items: center;
+}
+.contributor_card_wrapper {
     position: relative;
 }
 .contributors_img {
-    width: 100%;
+    width: 22rem;
 }
 
-@mixin contributors_sns_styles($top, $left) {
+@mixin contributors_sns_styles($bottom, $left) {
     position: absolute;
     left: $left;
-    top: $top;
+    bottom: $bottom;
     width: 2.4rem;
     padding: 0.4rem;
     border-radius: 0.4rem;
+    transform: translate(50%, 50%);
     &:hover {
         background-color: var(--dark_825_color);
     }
@@ -118,34 +139,51 @@
     }
 }
 
-$first_line_top: 6.2rem;
+$bottom_pos: 16%;
+$sns_left_pos: 0.8rem;
 .contributors_done_san_x {
-    @include contributors_sns_styles($first_line_top, 2rem);
+    @include contributors_sns_styles($bottom_pos, $sns_left_pos);
 }
 .contributors_iya_x {
-    @include contributors_sns_styles($first_line_top, 27.6rem);
+    @include contributors_sns_styles($bottom_pos, $sns_left_pos);
 }
 .contributors_rera_x {
-    @include contributors_sns_styles($first_line_top, 52.2rem);
+    @include contributors_sns_styles($bottom_pos, calc($sns_left_pos - 1.4rem));
 }
 .contributors_rera_github {
-    @include contributors_sns_styles($first_line_top, 55rem);
+    @include contributors_sns_styles($bottom_pos, calc($sns_left_pos + 1.4rem));
 }
 
-$second_line_top: 16.6rem;
 .contributors_poposuke_x {
-    @include contributors_sns_styles($second_line_top, 14.8rem);
+    @include contributors_sns_styles($bottom_pos, $sns_left_pos);
 }
 .contributors_kumaguma_x {
-    @include contributors_sns_styles($second_line_top, 40.8rem);
+    @include contributors_sns_styles($bottom_pos, $sns_left_pos);
 }
 
 .localization_section {
     display: flex;
     flex-direction: column;
+    width: 100%;
+    gap: 0.6rem;
+}
+.localization_members_wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: start;
+    column-gap: 6rem;
+    row-gap: 1rem;
+    flex-wrap: wrap;
+}
+.localization_members_row_wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: start;
+    gap: 0.2rem;
 }
 .localization_members_img {
-    width: 100%;
+    height: 2.2rem;
 }
 
 .special_thanks_section {
@@ -164,9 +202,11 @@ $second_line_top: 16.6rem;
 .poster_showcase_section {
     display: flex;
     flex-direction: column;
+    width: 100%;
 }
 
 .vrchat_disclaimer {
-    width: 100%;
+    font-size: 1.2rem;
     margin-top: 8rem;
+    color: var(--dark_600_color);
 }

src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/PosterShowcaseContents.module.scss

@@ -1,6 +1,7 @@
 .container {
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
     align-items: start;
     gap: 2rem;
+    flex-wrap: wrap;
 }

src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/poster_showcase_worlds_contents/PosterShowcaseWorldsContents.module.scss

@@ -1,9 +1,10 @@
 .container {
     display: flex;
     flex-direction: column;
-    flex: 1;
+    // flex: 1;
     gap: 1rem;
     justify-content: space-between;
+    width: 42rem;
 }
 $image_height: 2.8rem;
 $y_padding: 0.4rem;
@@ -32,6 +33,7 @@ $image_height_gap: 0.4rem;
 }
 .poster_showcase_world_img {
     height: $image_height;
+    flex-shrink: 0;
 }
 
 .pagination_container {

src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/posters_contents/PostersContents.module.scss

@@ -3,6 +3,7 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    flex-shrink: 0;
 }
 .poster_pagination_wrapper {
     display: flex;