feat: Add support for rows/colums in marp

This commit is contained in:
Glenn Y. Rolland 2022-06-20 12:04:43 +02:00
parent b56d7c4d20
commit e16b6403d6

View file

@ -1,21 +1,30 @@
/* @theme glenux */ /* @theme glenux */
@import-theme 'default'; @import-theme 'default';
$primaryColor: #662d91;
$secondaryColor: #241c1c;
$tertiaryColor: #111111;
$textColor: #111111;
body { body {
--primary-color: #009fcb; --primary-color: $primaryColor;
--secondary-color: #241c1c; --secondary-color: $secondaryColor;
--text-color: #111111; } --text-color: $tertiaryColor;
}
section { section {
font-size: 24px; font-size: 24px;
justify-content: start; } justify-content: start;
padding: 120px 80px 80px 80px;
}
section footer { section footer {
opacity: 0.75; opacity: 0.75;
color: #888; } color: $textColor; }
section::after { section::after {
opacity: 0.5; opacity: 0.5;
color: black; } color: $textColor; }
section[id="1"] h1, section[id="1"] h1,
section[id="1"] h2, section[id="1"] h2,
@ -34,6 +43,17 @@ section[id="1"] footer {
section.chapter { section.chapter {
justify-content: center; } justify-content: center; }
section.chapter > bc-title:first-child,
section.chapter > h1:first-child,
section.chapter > h2:first-child,
section.chapter > h3:first-child,
section.chapter > h4:first-child,
section.chapter > h5:first-child,
section.chapter > h6:first-child {
position: relative;
top: -40px;
}
/* /*
section.chapter h1:first-child::before, section.chapter h1:first-child::before,
section.chapter h2:first-child::before, section.chapter h2:first-child::before,
@ -66,10 +86,12 @@ section > h4:first-child,
section > h5:first-child, section > h5:first-child,
section > h6:first-child { section > h6:first-child {
font-family: "Droid Sans Mono", monospace; font-family: "Droid Sans Mono", monospace;
color: #662d91; color: $primaryColor;
font-weight: bold; font-weight: bold;
position: relative; // position: relative;
top: -40px; // top: -40px;
position: absolute;
top: 50px;
} }
section > bc-title:first-child::before, section > bc-title:first-child::before,
@ -102,7 +124,8 @@ section > h6:first-child::before
left: -100px; left: -100px;
width: 70px; width: 70px;
height: 0.9em; height: 0.9em;
background-color: #662d91; } background-color: $primaryColor;
}
section:not(.chapter) > h2:first-child { section:not(.chapter) > h2:first-child {
@ -124,19 +147,36 @@ bc-row {
display: flex; display: flex;
} }
bc-row > bc-column { bc-row[bc-height-full] {
/* outline: 1px solid red; */ flex: 1 1 0;
margin-left: 100px;
flex-basis: 100%;
height: 100%;
} }
bc-row > bc-column { bc-row > bc-column {
/* outline: 1px solid red; */ /* outline: 1px solid red; */
margin-left: 100px; margin-left: 100px;
flex-basis: 100%; flex-basis: 100%;
height: 100%; height: inherit;
flex: 1 1 0;
}
bc-row > bc-column[bc-text-small] {
font-size: 90%;
}
bc-row > bc-column[bc-width-large] {
flex: 2 1 0;
}
bc-row > bc-column[bc-primary] {
background-color: $primaryColor;
color: white;
padding: 24px;
}
bc-row > bc-column[bc-secondary] {
background-color: $secondaryColor;
color: white;
padding: 24px;
} }
bc-row > bc-column[bc-grey] { bc-row > bc-column[bc-grey] {
@ -144,6 +184,12 @@ bc-row > bc-column[bc-grey] {
padding: 24px; padding: 24px;
} }
bc-row > bc-column[bc-invert] {
color: white;
background-color: $textColor;
padding: 24px;
}
bc-row > bc-column:first-of-type { bc-row > bc-column:first-of-type {
margin-left: 0px; margin-left: 0px;
} }
@ -157,3 +203,9 @@ bc-row > bc-column > h6:first-child {
margin-top: 0; margin-top: 0;
} }
p img:first-child:last-child[alt*="center"] {
display: block;
margin-left: auto;
margin-right: auto;
}