feat: Add support for rows/colums in marp

.marp/theme.scss

@@ -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;
+}
+