From e16b6403d63c3c63a2633f28efefbec659a368f4 Mon Sep 17 00:00:00 2001 From: "Glenn Y. Rolland" Date: Mon, 20 Jun 2022 12:04:43 +0200 Subject: [PATCH] feat: Add support for rows/colums in marp --- .marp/theme.scss | 86 ++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 69 insertions(+), 17 deletions(-) diff --git a/.marp/theme.scss b/.marp/theme.scss index 27fd7c1..a7490eb 100644 --- a/.marp/theme.scss +++ b/.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; +} +