diff --git a/src/elements/layout.rs b/src/elements/layout.rs index e86ff73..abfaa57 100644 --- a/src/elements/layout.rs +++ b/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 { 2..usize::MAX } + + fn compile( + &self, + token: LayoutToken, + _id: usize, + compiler: &Compiler, + _document: &dyn Document, + ) -> Result { + match compiler.target() { + Target::HTML => match token { + LayoutToken::BEGIN => Ok(r#"
"#.to_string()), + LayoutToken::NEXT => Ok(r#"
"#.to_string()), + LayoutToken::END => Ok(r#"
"#.to_string()), + }, + _ => todo!(""), + } + } + } } #[derive(Debug)] @@ -158,6 +184,8 @@ impl LayoutRule { let mut layouts: HashMap> = 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( diff --git a/style.css b/style.css index f29798c..a79d686 100644 --- a/style.css +++ b/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; - top: 0; - bottom: 0; - width: max(calc((100vw - 99ch) / 2 - 15vw), 24ch); + left: 0; + top: 0; + bottom: 0; + width: max(calc((100vw - 99ch) / 2 - 15vw), 24ch); height: 100vh; position: fixed; margin-right: 1em; overflow-y: auto; - box-sizing: border-box; - overscroll-behavior-y: contain; + box-sizing: border-box; + 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: "+"; - color: #ffb454; - float: left; - text-align: center; - width: 1em; + content: "+"; + color: #ffb454; + float: left; + text-align: center; + 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 { @@ -220,6 +238,6 @@ a:hover.medium-ref img { margin: auto; 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); }