[Task] #77, changed responsive design for mobile

Type-Style · Sep 1, 2024 · e14ffd7 · e14ffd7
1 parent c5eb790
commit e14ffd7
Showing 1 changed file with 37 additions and 18 deletions.
diff --git a/src/client/css/start.css b/src/client/css/start.css
@@ -29,6 +29,7 @@
 			width: 100%;
 			justify-content: space-between;
 			padding: 0.5em 0.8em;
+
 			@media (min-width: 30em) {
 				padding: 0.7em 2em;
 			}
@@ -46,9 +47,9 @@
 			grid-column: 1;
 			grid-row: 2 / span 3;
 			margin-right: 1em;
-			
+
 			background-color: color-mix(in oklab, transparent 50%, var(--main));
-			
+
 			@media (max-width: 35em) {
 				grid-column: 1 / -1;
 				margin-right: 0;
@@ -76,13 +77,14 @@
 
 				--shadowColor: var(--text);
 				filter: url(#rough-light);
-        box-shadow: 0 0 0.2em var(--shadowColor);
+				box-shadow: 0 0 0.2em var(--shadowColor);
 			}
+
 			[data-mui-color-scheme="dark"] &::after {
 				--shadowColor: var(--main);
 				filter: url(#rough-light) drop-shadow(0 3px 5px var(--shadowColor));
 			}
-			
+
 		}
 
 		&.images {
@@ -91,45 +93,49 @@
 
 			display: grid;
 			overflow: auto;
+
 			@media (max-width: 35em) {
 				display: none;
 			}
 		}
 
 		.image {
 			display: inline-block;
-      aspect-ratio: 16/9;			
-			background-color: moccasin;
-		}
+			aspect-ratio: 16/9;
+			margin-bottom: 0.5rem;
+			cursor: pointer;
 
-		.image+.image {
-			background-color: lightgoldenrodyellow;
-		}
-		.image+.image+.image {
-			background-color: antiquewhite;
+			> * {
+				width: 100%;
+				height: 100%;
+			}
 		}
 
+
 		&.subinfo {
 			grid-column: 1 / -1;
 			padding: 0.5em 0.8em;
+
 			@media (min-width: 35em) {
 				padding: 0.7em 2em;
 				grid-column: 1;
 			}
 
 			.MuiLinearProgress-root {
 				margin: -0.5em 0 1em -0.8em;
+
 				@media (min-width: 30em) {
 					margin: -0.7em -1em 1em -2em;
-				}				
+				}
 			}
 
 			.info {
 				display: inline-block;
 				padding-inline: 1em;
 				border-right: 0.1rem solid;
-
-				&:last-child, &.noDivider  {
+
+				&:last-child,
+				&.noDivider {
 					border: none;
 					padding-right: 0;
 				}
@@ -158,15 +164,23 @@
 
 		.title {
 			font-size: 1.1em;
-			@media (min-width: 30em) { font-size: inherit;	}
+
+			@media (min-width: 30em) {
+				font-size: inherit;
+			}
+
 			width: 100%;
 			text-align: center;
 		}
 	}
 
 	.loginButton {
 		color: white;
-		[data-mui-color-scheme="dark"] & { color: black;}
+
+		[data-mui-color-scheme="dark"] & {
+			color: black;
+		}
+
 		margin-left: auto;
 		cursor: pointer;
 		white-space: nowrap;
@@ -177,23 +191,28 @@
 		@media (min-width: 30em) {
 			/* reset to MUI default */
 			font-size: 1.3rem;
-			padding: 8px 22px; 
+			padding: 8px 22px;
 		}
 
 		.MuiButton-icon {
 			font-size: 1.3rem;
+
 			@media (min-width: 30em) {
 				font-size: inherit;
 			}
 		}
+
 		.MuiButton-startIcon {
 			margin-left: 6px;
+
 			@media (min-width: 30em) {
 				margin-left: 0px;
 			}
 		}
+
 		.MuiButton-endIcon {
 			margin-left: 0;
+
 			@media (min-width: 30em) {
 				margin-left: 4px;
 			}