techtransthai/ai-english-tutor-poc
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make items fit better on small screens

Browse source
This commit is contained in:
Late Night Defender 2025-05-19 01:41:51 +07:00
parent 762ec2a664
commit ed3fa529f4
1 changed files with 18 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/App.css
View file

@ -2,11 +2,13 @@
box-sizing: border-box; box-sizing: border-box;
} }
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom, #bae6fd, #ffffff); background: linear-gradient(to bottom, #bae6fd, #ffffff);
color: #1f2937; color: #1f2937;
height: 100vh; height: 100vh;
@ -17,21 +19,21 @@ body {
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center;
align-items: center; align-items: center;
justify-content: center;
padding: 1rem; padding: 1rem;
} }
.scene-wrapper { .scene-wrapper {
position: relative;
max-width: 640px;
width: 100%;
padding: 1rem; padding: 1rem;
display: flex;
flex-direction: column;
align-items: center;
} }
.avatar { .avatar {
width: 256px; width: 200px;
height: 256px; height: 200px;
border-radius: 50%; border-radius: 50%;
border: 4px solid white; border: 4px solid white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
@ -44,13 +46,13 @@ body {
border: 1px solid #d1d5db; border: 1px solid #d1d5db;
border-radius: 1.5rem; border-radius: 1.5rem;
padding: 1.5rem; padding: 1.5rem;
margin-top: 6rem; margin-top: 1.5rem;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
animation: fadeIn 0.5s ease-in-out; animation: fadeIn 0.5s ease-in-out;
} }
.dialogue-text { .dialogue-text {
font-size: 20pt; font-size: 18pt;
color: #374151; color: #374151;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@ -59,6 +61,11 @@ body {
color: #111827; color: #111827;
} }
.page-title {
position: absolute;
top: 2%;
}
.control-button { .control-button {
margin-top: 1.5rem; margin-top: 1.5rem;
padding: 0.75rem 1.5rem; padding: 0.75rem 1.5rem;
@ -66,7 +73,7 @@ body {
font-weight: 700; font-weight: 700;
color: white; color: white;
width: 8cm; width: 8cm;
height: 2cm; height: 3cm;
border: none; border: none;
border-radius: 9999px; border-radius: 9999px;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);