docmachine-containers/.marp/theme.scss

/* @theme glenux */
@import-theme 'default';

$primaryColor: #662d91;
$secondaryColor: #f60;
$tertiaryColor: #241c1c;
$textColor: #111111;

body {
  --primary-color: $primaryColor;
  --secondary-color: $secondaryColor;
  --tertiary-color: $tertiaryColor;
  --text-color: $textColor;
}

section {
  font-size: 24px; 
  justify-content: start; 
  padding: 120px 80px 80px 80px;
}

// https://github.com/marp-team/marp-vscode/issues/146
.highlighted-line {
  background-color: #ff0;
  display: block;
  margin: 0 -16px;
  padding: 0 16px;
}

section footer {
  opacity: 0.75;
  color: $textColor; }

section::after {
  opacity: 0.5;
  color: $textColor; }

section[id="1"] h1,
section[id="1"] h2,
section[id="1"] h3,
section[id="1"] h4,
section[id="1"] h5,
section[id="1"] h6 {
  /* color: white !important; */ }

section[id="1"]::after {
  color: var(--text-color); }

section[id="1"] footer {
  color: var(--text-color); }

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,
section.chapter h3:first-child::before,
section.chapter h4:first-child::before,
section.chapter h5:first-child::before {
  display: none;
}
*/

section > ul {
  padding-left: 1em;
}

section > bc-title {
  line-height: 39px;
  font-size: 32px;
  padding-bottom: 9.36px;
}

section > h1 {
  color: var(--text-color);
}

section > bc-title:first-child,
section > h1:first-child,
section > h2:first-child,
section > h3:first-child,
section > h4:first-child,
section > h5:first-child,
section > h6:first-child {
  font-family: "Droid Sans Mono", monospace;
  color: $primaryColor;
  font-weight: bold;
  // position: relative; 
  // top: -40px;
  position: absolute; 
  top: 50px;
}

section > bc-title:first-child::before,
section > h1:first-child::before,
section > h2:first-child::before,
section > h3:first-child::before {
  content: "";
  position: absolute;
  display: block;
  top: 0.2em;
  left: -100px;
  width: 70px;
  height: 0.9em;
  background-color: white; 
}


section > bc-title:first-child::before,
section > h1:first-child::before,
section > h2:first-child::before,
section > h3:first-child::before,
section > h4:first-child::before,
section > h5:first-child::before,
section > h6:first-child::before
{
  content: "";
  position: absolute;
  display: block;
  top: 0.2em;
  left: -100px;
  width: 70px;
  height: 0.9em;
  background-color: $primaryColor;
}


section:not(.chapter) > h2:first-child {
  font-size: 100%; }

section.draft {
    box-shadow: inset 20px 20px 0px red, inset -20px 20px 0px red, inset 20px -20px 0px red, inset -20px -20px 0px red;

}

section.draft::before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-30deg);
font-size: 100px;
display: block;
content: "DRAFT";
color: darkred;
opacity: 0.25;
}

a {
  color: inherit;
  text-decoration: underline; }

blockquote {
  color: inherit; }

bc-row {
  margin-top: 20px;
  margin-bottom: auto;
  /* outline: 1px solid red; */
  /* padding: 10px; */
  box-sizing: border-box;
  display: flex;
}

bc-row[bc-height-full] {
  flex: 1 1 0;
}

bc-row > bc-column {
  /* outline: 1px solid red; */
  margin-left: 100px;
  flex-basis: 100%;
  height: inherit;
  flex: 1 1 0;
}

bc-row > bc-column[bc-margin-small] {
  margin-left: 50px;
}

bc-row > bc-column[bc-margin-tiny] {
  margin-left: 25px;
}

bc-row > bc-column[bc-text-small] {
  font-size: 90%;
}

bc-row > bc-column[bc-text-tiny] {
  font-size: 80%;
}

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-tertiary] {
  background-color: $tertiaryColor;
  color: white;
  padding: 24px;
}

bc-row > bc-column[bc-grey] {
  background-color: #eeeeee;
  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;
}

bc-row > bc-column p:only-child {
  margin-bottom: 0px;
}

bc-row > bc-column > h1:first-child,
bc-row > bc-column > h2:first-child,
bc-row > bc-column > h3:first-child,
bc-row > bc-column > h4:first-child,
bc-row > bc-column > h5:first-child,
bc-row > bc-column > h6:first-child {
  margin-top: 0;
}

p img:only-child[alt*="center"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}