Update style

This commit is contained in:
ef3d0c3e 2024-07-31 11:56:48 +02:00
parent 131d3b30ee
commit 12e15321a4
2 changed files with 67 additions and 21 deletions

View file

@ -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)] #[derive(Debug)]
@ -158,6 +184,8 @@ impl LayoutRule {
let mut layouts: HashMap<String, Rc<dyn LayoutType>> = HashMap::new(); let mut layouts: HashMap<String, Rc<dyn LayoutType>> = HashMap::new();
let layout_centered = default_layouts::Centered {}; let layout_centered = default_layouts::Centered {};
layouts.insert(layout_centered.name().to_string(), Rc::new(layout_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 { Self {
re: [ re: [
@ -328,7 +356,7 @@ impl RegexRule for LayoutRule {
Some(last) => last, Some(last) => last,
}; };
if layout_type.expects().end >= tokens.len() if layout_type.expects().end < tokens.len()
// Too many blocks // Too many blocks
{ {
reports.push( reports.push(
@ -372,7 +400,7 @@ impl RegexRule for LayoutRule {
Some(last) => last, Some(last) => last,
}; };
if layout_type.expects().start < tokens.len() if layout_type.expects().start > tokens.len()
// Not enough blocks // Not enough blocks
{ {
reports.push( reports.push(

View file

@ -17,6 +17,24 @@ body {
width: 100%; 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 */ /* Styles */
em { em {
padding-left: .1em; padding-left: .1em;
@ -42,22 +60,22 @@ a.inline-code {
.navbar { .navbar {
display: none; 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; height: 100vh;
position: fixed; position: fixed;
margin-right: 1em; margin-right: 1em;
overflow-y: auto; 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; color: #aaa;
font-size: 0.9em; font-size: 0.9em;
font-weight: bold; font-weight: bold;
} }
@ -108,15 +126,15 @@ a.inline-code {
} }
.navbar summary:before { .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 { .navbar details[open] > summary:before {
content: ""; content: "";
} }
/* Code blocks */ /* Code blocks */
@ -126,11 +144,10 @@ div.code-block-title {
} }
div.code-block-content { div.code-block-content {
max-height: 20em; max-height: 38em;
margin-bottom: 0.2em; margin-bottom: 0.2em;
width: auto;
overflow: auto; overflow: scroll;
background-color: #0f141a; background-color: #0f141a;
} }
@ -143,6 +160,7 @@ div.code-block-content td {
div.code-block-content pre { div.code-block-content pre {
border: 0; border: 0;
margin: 0; margin: 0;
tab-size: 4;
} }
div.code-block-content .code-block-gutter { div.code-block-content .code-block-gutter {
@ -220,6 +238,6 @@ a:hover.medium-ref img {
margin: auto; margin: auto;
display: inline-block; display: inline-block;
position: absolute; 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);
} }