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