fix: demo style

magic-akari · Apr 22, 2024 · dd293c8 · dd293c8
1 parent 1c78fde
commit dd293c8
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 33 deletions.
diff --git a/dprint.json b/dprint.json
@@ -4,10 +4,13 @@
 	"lineWidth": 120,
 	"includes": ["*.{ts,json,md,html}"],
 	"excludes": ["**/lib", "**/node_modules", "**/*-lock.json"],
+	"malva": {
+		"declarationOrder": "concentric"
+	},
 	"plugins": [
-		"https://plugins.dprint.dev/biome-0.4.1.wasm",
-		"https://plugins.dprint.dev/g-plane/malva-v0.1.5.wasm",
-		"https://plugins.dprint.dev/g-plane/markup_fmt-v0.6.0.wasm",
+		"https://plugins.dprint.dev/biome-0.5.0.wasm",
+		"https://plugins.dprint.dev/g-plane/malva-v0.3.0.wasm",
+		"https://plugins.dprint.dev/g-plane/markup_fmt-v0.7.0.wasm",
 		"https://plugins.dprint.dev/markdown-0.16.4.wasm"
 	]
 }
diff --git a/index.html b/index.html
@@ -11,36 +11,44 @@
 		}
 
 		.main {
-			margin: 100px;
 			display: grid;
 			justify-items: center;
+			margin: 100px;
 		}
 
 		.editor-header {
+			display: flex;
 			position: absolute;
-			height: 40px;
 			top: -40px;
-			width: 100%;
-			color: inherit;
-			background-color: inherit;
-			display: flex;
 			align-items: center;
 			gap: 20px;
-			padding-inline: 20px;
 			box-sizing: border-box;
 			border-radius: 8px 8px 0 0;
+			background-color: inherit;
+			padding-inline: 20px;
+			width: 100%;
+			height: 40px;
+			color: inherit;
 		}
 
 		.editor-header select {
-			color: inherit;
-			background: inherit;
 			border-color: transparent;
+			background: inherit;
+			color: inherit;
+		}
+
+		.editor-footer {
+			position: absolute;
+			bottom: -8px;
+			border-radius: 0 0 8px 8px;
+			background-color: inherit;
+			width: 100%;
+			height: 8px;
 		}
 
 		#container {
 			width: 1000px;
 			height: 800px;
-			border-radius: 0 0 8px 8px;
 			font-size: 14px;
 			line-height: 1.7;
 		}
@@ -54,6 +62,7 @@
 					<select id="lang_list"></select>
 					<select id="theme_list"></select>
 				</header>
+				<footer class="editor-footer"></footer>
 			</div>
 		</main>
 		<script type="importmap">

diff --git a/src/style.ts b/src/style.ts
@@ -1,36 +1,36 @@
 const style = `.shikicode.input, .shikicode.output {
+	position: absolute;
+	margin: 0;
+	inset: 0;
+	border: 0;
+	padding: 0;
 	font-size: inherit;
 	line-height: inherit;
 	tab-size: var(--tab-size);
-	border: 0;
-	margin: 0;
-	padding: 0;
-	position: absolute;
-	inset: 0;
 }
 
 .shikicode.input, .shikicode.output, .shikicode.output code {
 	font-family: var(--font-family, monospace);
 }
 
 .shikicode.input {
-	resize: none;
-	color: transparent;
-	caret-color: var(--fg, black);
-	white-space: pre;
 	box-sizing: border-box;
-	background-color: transparent;
 	outline: none;
+	background-color: transparent;
+	padding-left: 2em;
 	width: 100%;
 	height: 100%;
-	padding-left: 2em;
 	overflow: auto;
+	resize: none;
+	color: transparent;
+	caret-color: var(--fg, black);
+	white-space: pre;
 }
 
 .shikicode.output {
-	pointer-events: none;
 	counter-reset: shiki-line 0;
 	overflow: hidden;
+	pointer-events: none;
 }
 
 .shikicode.output > pre {
@@ -42,21 +42,21 @@ const style = `.shikicode.input, .shikicode.output {
 }
 
 .shikicode.output .line::before {
-	content: counter(shiki-line);
-	color: var(--bg);
-	background-color: var(--bg);
-	text-align: right;
-	box-sizing: border-box;
-	width: 2em;
 	display: inline-block;
 	position: sticky;
 	left: 0;
+	box-sizing: border-box;
+	background-color: var(--bg);
+	width: 2em;
+	content: counter(shiki-line);
+	color: var(--bg);
+	text-align: right;
 }
 
 .shikicode.output.line-numbers .line::before {
-	color: var(--fg);
-	width: 5em;
 	padding-right: 2em;
+	width: 5em;
+	color: var(--fg);
 }
 
 .shikicode.input.line-numbers {