better UI for flox

src/html/head.rs

@@ -49,6 +49,6 @@ where
 
 fn render_style(style: &HashedStyle) -> impl Renderable + '_ {
 	maud_move!(
-		link rel="stylesheet" href=(style.path.as_str()) integrity=(&style.sri);
+		link rel="stylesheet" href=(style.path.as_str());
 	)
 }

src/html/mod.rs

@@ -222,19 +222,25 @@ where
 	page(
 		sack,
 		maud!(
-			main .flox {
+			main {
-                div {
+                div .flox-playground {
-                    h2 { "Flox" }
+                    div .cell {
-                    div #editor {}
+                        header {
-                    button #run { "Run!" }
+                            h2 { "Flox" }
-                }
+                        }
-                div {
+                        div .editor {
-                    h2 { "Output" }
+                            div #editor {}
-                    div #output {}
+                            button #run .run { "Run!" }
+                        }
+                    }
+                    div .cell {
+                        h2 { "Output" }
+                        pre #output {}
+                    }
                 }
             }
 			script type="module" { (Raw("import 'editor';")) }
 		),
-		String::from("Search"),
+		String::from("Flox"),
 	)
 }

src/html/post.rs

@@ -91,3 +91,4 @@ where
 
 	crate::html::page(sack, main, metadata.title.clone())
 }
+

styles/_flox.scss

@@ -1,6 +1,32 @@
 
-.flox {
+.flox-playground {
-  display: flex;
+  display: grid;
-  flex-direction: row;
+  grid-template-columns: 1fr 1fr;
-  margin: 1em;
+  grid-template-rows: max(24rem, 0.5vh);
+  gap: 1em;
+  margin-block: 0.5em;
+  padding: 1em;
+
+  .editor, #output {
+    height: calc(100% - 4em);
+    overflow-y: auto;
+    border: 1px dashed black;
+    border-radius: 0.5em;
+    background-color: white;
+  }
+
+  .editor {
+    position: relative;
+
+    #run {
+      position: absolute;
+      right: 0.5em;
+      bottom: 0.5em;
+      padding: 0.25em 0.5em;
+    }
+  }
+
+  #output {
+    padding: 1em;
+  }
 }