optimized mobile view

3 years ago · e11d3989d1
parent 610ce2c0d3
commit e11d3989d1
1 changed files with 21 additions and 1 deletions
--- a/playground/index.php
+++ b/playground/index.php
@ -2,7 +2,7 @@
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 	<title>parkdown playground</title>
 	<script type="module">
 		const $ = selector => {
@ -179,6 +179,26 @@
 		::-webkit-scrollbar-button {
 			display:none;
 		}
+
+		@media (max-width: 920px) {
+			body {
+				grid-template-columns: 1fr !important;
+				grid-template-rows: 1fr 1fr;
+			}
+		
+			textarea, .linenumbers {
+				font-size: 1rem;
+			}
+			.linenumbers {
+				padding: 0.5rem;
+			}
+
+			.editor {
+				grid-template-columns: 50px auto;
+				gap: 1rem;
+			}
+
+		}
 	</style>
 </head>
 <body>