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