improve: Improved login page design in mobile environment

CHANGELOG_CHERRYPICK.md

@@ -25,6 +25,7 @@
 - 클라이언트: 알림 디자인 개선
 - 클라이언트: welcomeBack 알림을 옆으로 스와이프 해서 지울 수 있도록 개선
 - 클라이언트: 새 노트 알림에 '노트 수 표시' 및 '알림 표시하지 않음' 옵션 추가
+- 클라이언트: 모바일 환경에서 로그인 페이지 디자인 개선
 
 ### Bugfixes
 - 클라이언트: 채팅방에서 메시지를 입력하고 있을 때 움직이지 않는 온점(.)이 표시되는 문제

packages/client/src/pages/welcome.entrance.a.vue

@@ -27,9 +27,9 @@
 					<div class="desc" v-html="meta.description || i18n.ts.headlineMisskey"></div>
 				</div>
 				<div class="action">
-					<MkButton inline rounded gradate data-cy-signup style="margin-right: 12px;" @click="signup()">{{ i18n.ts.signup }}</MkButton>
-					<MkButton inline rounded data-cy-signin style="margin-right: 12px;" @click="signin()">{{ i18n.ts.login }}</MkButton>
-					<MkButton inline rounded @click="mainRouter.push('/explore')">{{ i18n.ts.explore }}</MkButton>
+					<MkButton inline rounded gradate data-cy-signup class="button" @click="signup()">{{ i18n.ts.signup }}</MkButton>
+					<MkButton inline rounded data-cy-signin class="button" @click="signin()">{{ i18n.ts.login }}</MkButton>
+					<MkButton inline rounded class="button" @click="mainRouter.push('/explore')">{{ i18n.ts.explore }}</MkButton>
 				</div>
 			</div>
 		</div>
@@ -264,6 +264,23 @@ function showMenu(ev) {
 					> * {
 						line-height: 28px;
 					}
+
+					@media (min-width: 501px) {
+						button:not(:last-child) {
+							margin-right: 12px;
+						}
+					}
+
+					@media (max-width: 500px) {
+						button:not(:first-child) {
+							margin-top: 10px;
+						}
+
+						> .button {
+							width: 90%;
+							margin-right: initial;
+						}
+					}
 				}
 			}
 		}