Update style

src/elements/layout.rs

@@ -76,6 +76,32 @@ mod default_layouts {
 			}
 		}
 	}
+
+	#[derive(Debug)]
+	pub struct Split;
+
+	impl LayoutType for Split {
+		fn name(&self) -> &'static str { "Split" }
+
+		fn expects(&self) -> Range<usize> { 2..usize::MAX  }
+
+		fn compile(
+			&self,
+			token: LayoutToken,
+			_id: usize,
+			compiler: &Compiler,
+			_document: &dyn Document,
+		) -> Result<String, String> {
+			match compiler.target() {
+				Target::HTML => match token {
+					LayoutToken::BEGIN => Ok(r#"<div class="split-container"><div class="split">"#.to_string()),
+					LayoutToken::NEXT => Ok(r#"</div><div class="split">"#.to_string()),
+					LayoutToken::END => Ok(r#"</div></div>"#.to_string()),
+				},
+				_ => todo!(""),
+			}
+		}
+	}
 }
 
 #[derive(Debug)]
@@ -158,6 +184,8 @@ impl LayoutRule {
 		let mut layouts: HashMap<String, Rc<dyn LayoutType>> = HashMap::new();
 		let layout_centered = default_layouts::Centered {};
 		layouts.insert(layout_centered.name().to_string(), Rc::new(layout_centered));
+		let layout_split = default_layouts::Split {};
+		layouts.insert(layout_split.name().to_string(), Rc::new(layout_split));
 
 		Self {
 			re: [
@@ -328,7 +356,7 @@ impl RegexRule for LayoutRule {
 				Some(last) => last,
 			};
 
-			if layout_type.expects().end >= tokens.len()
+			if layout_type.expects().end < tokens.len()
 			// Too many blocks
 			{
 				reports.push(
@@ -372,7 +400,7 @@ impl RegexRule for LayoutRule {
 				Some(last) => last,
 			};
 
-			if layout_type.expects().start < tokens.len()
+			if layout_type.expects().start > tokens.len()
 			// Not enough blocks
 			{
 				reports.push(

style.css

@@ -17,6 +17,24 @@ body {
 	width: 100%;
 }
 
+/* Layouts */
+div.centered {
+	text-align: center;
+}
+
+div.split-container {
+	display: flex;
+	width: 100%;
+}
+
+div.split-container > div.split {
+	flex: 1;
+	flex-shrink: 0;
+	overflow-x: auto;
+
+	margin: 0.5em;
+}
+
 /* Styles */
 em {
 	padding-left: .1em;
@@ -42,22 +60,22 @@ a.inline-code {
 .navbar {
 	display: none;
 
-    left: 0;
+	left: 0;
-    top: 0;
+	top: 0;
-    bottom: 0;
+	bottom: 0;
-    width: max(calc((100vw - 99ch) / 2 - 15vw), 24ch);
+	width: max(calc((100vw - 99ch) / 2 - 15vw), 24ch);
 	height: 100vh;
 	position: fixed;
 	margin-right: 1em;
 
 	overflow-y: auto;
-    box-sizing: border-box;
+	box-sizing: border-box;
-    overscroll-behavior-y: contain;
+	overscroll-behavior-y: contain;
 
-    background-color: #161a26;
+	background-color: #161a26;
 	color: #aaa;
 
-    font-size: 0.9em;
+	font-size: 0.9em;
 	font-weight: bold;
 }
 
@@ -108,15 +126,15 @@ a.inline-code {
 }
 
 .navbar summary:before {
-    content: "+";
+	content: "+";
-    color: #ffb454;
+	color: #ffb454;
-    float: left;
+	float: left;
-    text-align: center;
+	text-align: center;
-    width: 1em;
+	width: 1em;
 }
 
 .navbar details[open] > summary:before {
-    content: "–";
+	content: "–";
 }
 
 /* Code blocks */
@@ -126,11 +144,10 @@ div.code-block-title {
 }
 
 div.code-block-content {
-	max-height: 20em;
+	max-height: 38em;
 	margin-bottom: 0.2em;
-	width: auto;
 
-	overflow: auto;
+	overflow: scroll;
 
 	background-color: #0f141a;
 }
@@ -143,6 +160,7 @@ div.code-block-content td {
 div.code-block-content pre {
 	border: 0;
 	margin: 0;
+	tab-size: 4;
 }
 
 div.code-block-content .code-block-gutter {
@@ -221,5 +239,5 @@ a:hover.medium-ref img {
 	display: inline-block;
 	position: absolute;
 
-	box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.75);
+	box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.75);
 }