working on some css

wasm/app.go

@@ -69,9 +69,9 @@ func (v *detailsView) Render() app.UI {
 		),
 		app.Pre().Body(
 			app.Div().ID("yaml-sample-"+v.version.Version).Body(app.If(v.renderErr != nil, func() app.UI {
-				return app.Div().Class("language-yaml").Body(app.Text(v.renderErr.Error()))
+				return app.Div().Class("yaml-text").Body(app.Text(v.renderErr.Error()))
 			}).Else(func() app.UI {
-				return app.Div().Class("language-yaml").Body(app.Text(v.content))
+				return app.Div().Class("yaml-text").Body(app.Text(v.content))
 			})),
 		),
 	)

wasm/main.go

@@ -57,6 +57,7 @@ func main() {
 		},
 		Styles: []string{
 			"web/css/alert.css",
+			"web/css/yaml.css",
 			// "https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-twilight.min.css",
 			"https://cdn.jsdelivr.net/npm/[email protected]/css/halfmoon.min.css",
 			"https://cdn.jsdelivr.net/npm/[email protected]/css/cores/halfmoon.modern.css",

wasm/web/css/yaml.css

@@ -0,0 +1,29 @@
+.language-yaml {
+    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    /*font-size: 2em;*/
+    font-weight: bold;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+    animation: shimmer 2s ease-in-out infinite;
+}
+
+@keyframes shimmer {
+    0% { opacity: 0.8; }
+    50% { opacity: 1; }
+    100% { opacity: 0.8; }
+}
+
+.yaml-text {
+    font-family: 'Consolas', 'Monaco', monospace;
+    font-size: 14px;
+    white-space: pre-wrap;
+    line-height: 1.5;
+    background-color: #f6f8fa;
+    color: #24292e;
+    padding: 16px;
+    border-radius: 6px;
+    border: 1px solid #e1e4e8;
+    overflow-x: auto;
+}