Skip to content

Commit 94564f5

Browse files
Amey-ThakurAmey-Thakur
committed
MATH-SPRINT-GAME
1 parent 7c073db commit 94564f5

1 file changed

Lines changed: 229 additions & 10 deletions

File tree

‎Source Code/style.css‎

Lines changed: 229 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -738,41 +738,260 @@ button:active {
738738
}
739739

740740
/* Media Query: Large Smartphone (Vertical) */
741-
@media screen and (max-width: 500px) {
741+
@media screen and (max-width: 600px) {
742742
.game-container {
743743
width: 100%;
744+
height: 100vh;
745+
max-height: 100vh;
746+
border-radius: 0;
744747
margin-top: 0;
745748
border: none;
749+
box-shadow: none;
746750
}
747751

748752
.header {
749-
font-size: 1.2rem;
753+
height: 60px;
754+
}
755+
756+
.header h1 {
757+
font-size: 28px;
758+
/* Significantly reduced for mobile */
750759
}
751760

752761
.countdown {
753-
margin-top: 60%;
762+
margin-top: 0;
763+
/* Center vertically properly */
764+
font-size: 80px;
754765
}
755766

767+
/* Selection Page Adjustments */
756768
.selection-container {
757-
top: 100px;
769+
justify-content: center;
770+
gap: 15px;
758771
}
759772

760773
.radio-container {
761-
width: 93%;
762-
margin: 15px;
774+
width: 95%;
775+
height: 70px;
776+
/* Slightly compact */
777+
margin: 5px auto;
763778
}
764779

765780
label {
766-
font-size: 1.7rem;
781+
font-size: 1.4rem;
782+
margin-left: 15px;
767783
}
768784

769785
.best-score {
770-
font-size: 1rem;
771-
left: 245px;
786+
position: relative;
787+
/* Remove absolute to prevent overlap */
788+
right: auto;
789+
width: auto;
790+
margin-right: 15px;
791+
margin-left: auto;
792+
/* Push to right */
793+
text-align: right;
794+
}
795+
796+
.best-score span:first-child {
797+
font-size: 12px;
798+
}
799+
800+
.best-score span:last-child {
801+
font-size: 18px;
772802
}
773803

774804
.selection-footer {
775-
top: 183px;
805+
height: 80px;
806+
}
807+
808+
/* Game Page Adjustments */
809+
.item h1 {
810+
font-size: 24px;
811+
/* Smaller equations */
812+
}
813+
814+
.equation-grid {
815+
gap: 2px;
816+
}
817+
818+
.timer-display,
819+
.score-pill {
820+
font-size: 18px;
821+
padding: 4px 12px;
822+
}
823+
824+
.item-footer button {
825+
font-size: 20px;
826+
}
827+
828+
/* Score Page Adjustments */
829+
.final-time {
830+
font-size: 4rem;
831+
/* Fit screen */
832+
}
833+
834+
.score-container .title {
835+
font-size: 1.8rem;
836+
}
837+
838+
.stats-grid {
839+
gap: 15px;
840+
width: 95%;
841+
}
842+
843+
.stat-box {
844+
min-width: 100px;
845+
padding: 10px;
846+
}
847+
848+
.base-time,
849+
.best-time,
850+
.penalty-time {
851+
font-size: 1.5rem;
852+
}
853+
854+
.score-footer {
855+
flex-direction: column;
856+
gap: 15px;
857+
margin-bottom: 20px;
858+
}
859+
860+
.score-btn {
861+
width: 80%;
862+
height: 45px;
863+
font-size: 1.2rem;
864+
margin-left: 0;
865+
/* Reset margin for share btn */
866+
}
867+
}
868+
869+
/* Media Query: Landscape Mode (Mobile) */
870+
@media screen and (max-height: 500px) and (orientation: landscape) {
871+
.game-container {
872+
height: 100vh;
873+
margin-top: 0;
874+
flex-direction: row;
875+
/* Horizontal layout */
876+
flex-wrap: wrap;
877+
/* Allow wrapping if really needed */
878+
justify-content: center;
879+
align-items: center;
880+
overflow-y: auto;
881+
/* Allow scrolling if content is too tall */
882+
}
883+
884+
.header {
885+
width: 100%;
886+
height: 40px;
887+
/* Slim header */
888+
}
889+
890+
.header h1 {
891+
font-size: 20px;
892+
}
893+
894+
.card {
895+
height: auto;
896+
/* Let content dictate height */
897+
justify-content: center;
898+
}
899+
900+
.selection-container {
901+
flex-direction: row;
902+
flex-wrap: wrap;
903+
top: 0;
904+
gap: 10px;
905+
padding-top: 10px;
906+
}
907+
908+
.radio-container {
909+
width: 45%;
910+
/* 2x2 grid */
911+
height: 50px;
912+
margin: 5px;
913+
}
914+
915+
label {
916+
font-size: 1.2rem;
917+
}
918+
919+
.best-score {
920+
font-size: 0.8rem;
921+
}
922+
923+
.selection-footer,
924+
.item-footer {
925+
height: 50px;
926+
}
927+
928+
button {
929+
height: 40px;
930+
font-size: 18px;
931+
}
932+
933+
/* Game Page compact */
934+
.game-content-wrapper {
935+
height: calc(100vh - 100px);
936+
/* Leave room for header/footer */
937+
}
938+
939+
.item {
940+
height: 50px;
941+
}
942+
943+
.item h1 {
944+
font-size: 20px;
945+
}
946+
947+
.selected-item {
948+
top: 150px;
949+
/* Adjust highlight position */
950+
height: 50px;
951+
}
952+
953+
.score-container {
954+
flex-direction: row;
955+
flex-wrap: wrap;
956+
}
957+
}
958+
959+
/* Media Query: Small Phones (320px width) */
960+
@media screen and (max-width: 350px) {
961+
.header h1 {
962+
font-size: 22px;
963+
}
964+
965+
.best-score {
966+
display: none;
967+
/* Hide best score on tiny screens to prevent clutter */
968+
}
969+
970+
.radio-container {
971+
height: 60px;
972+
}
973+
974+
label {
975+
font-size: 1.2rem;
976+
}
977+
978+
.final-time {
979+
font-size: 3rem;
980+
}
981+
982+
.stats-grid {
983+
gap: 5px;
984+
}
985+
986+
.stat-box {
987+
min-width: 80px;
988+
padding: 5px;
989+
}
990+
991+
.base-time,
992+
.best-time,
993+
.penalty-time {
994+
font-size: 1.2rem;
776995
}
777996
}
778997

0 commit comments

Comments
 (0)