diff --git a/src/html/head.rs b/src/html/head.rs
index 652be79..8ff1c2f 100644
--- a/src/html/head.rs
+++ b/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());
)
}
diff --git a/src/html/mod.rs b/src/html/mod.rs
index 405b644..2a19ef0 100644
--- a/src/html/mod.rs
+++ b/src/html/mod.rs
@@ -222,19 +222,25 @@ where
page(
sack,
maud!(
- main .flox {
- div {
- h2 { "Flox" }
- div #editor {}
- button #run { "Run!" }
- }
- div {
- h2 { "Output" }
- div #output {}
+ main {
+ div .flox-playground {
+ div .cell {
+ header {
+ h2 { "Flox" }
+ }
+ div .editor {
+ div #editor {}
+ button #run .run { "Run!" }
+ }
+ }
+ div .cell {
+ h2 { "Output" }
+ pre #output {}
+ }
}
}
script type="module" { (Raw("import 'editor';")) }
),
- String::from("Search"),
+ String::from("Flox"),
)
}
diff --git a/src/html/post.rs b/src/html/post.rs
index 8a98d15..5dc2257 100644
--- a/src/html/post.rs
+++ b/src/html/post.rs
@@ -91,3 +91,4 @@ where
crate::html::page(sack, main, metadata.title.clone())
}
+
diff --git a/styles/_flox.scss b/styles/_flox.scss
index 0e45998..6b6b87b 100644
--- a/styles/_flox.scss
+++ b/styles/_flox.scss
@@ -1,6 +1,32 @@
-.flox {
- display: flex;
- flex-direction: row;
- margin: 1em;
+.flox-playground {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ 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;
+ }
}