Марп (IT) пользовательская тема ⇐ Html

[Anonymous]

Я оцениваю MARP как кодовую базу для слайдов лекций. Для начала я хотел использовать тему в стиле Metropolis (Latex Beamer). Я собираю что-то вместе, что работает большую часть времени: < /p>

Код: Выделить всё

/* @theme metropolis */
/* ===== Metropolis-like for Marp (H2 top bar; works with bg images) ===== */
section {
position: relative; /* anchor abs elements */
font-family: "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #333;
background: #fff;
padding: 60px;
font-size: 28px;
}

/* Keep H1 slides as-is (no top bar). */
section > h1:first-of-type {
font-weight: 700;
letter-spacing: .02em;
margin: 200px 0 .6em 0;
border-bottom: 3px solid #e07a1f;
padding-bottom: .25em;
}

/* Slides whose first heading level is H2 get the dark top bar */
section:not(:has(> h1)):has(> h2:first-of-type) {
padding-top: 90px; /* make room for the bar */
}

/* Place the H2 as the bar title */
section > h2:first-of-type {
position: absolute;
top: 22px; left: 68px; right: 68px;
margin: 0;
color: #eef2f3;
font-weight: 500;
font-size: 1.5em;
z-index: 1; /* above bar and bg */
}

/* Draw the dark bar behind the H2 (avoid using section::before) */
section > h2:first-of-type::before {
content: "";
position: absolute;
top: -22px;               /* aligns bar to section top */
left: -68px; right: -68px;/* extend to slide edges */
height: 84px;
background: #222222; /* #23373b; */      /* Metropolis dark teal */
z-index: -1;              /* behind the H2 text */
pointer-events: none;
}

/* Optional: a thin orange underline for H3 (body subheads) */
section h3 {
font-weight: 600;
margin: .4em 0 .2em 0;
padding-bottom: .15em;
border-bottom: 2px solid #e07a1f;
}

a { color: #e07a1f; text-decoration: none; }
strong { font-weight: 700; }
em { font-style: italic; }

/* Footer-style pagination on the right (ensure above bg) */
section::after {
content: attr(data-marpit-pagination) " / " attr(data-marpit-pagination-total);
position: absolute;
bottom: -40px;
right: -30px;
font-size: .7em;
color: #999;
z-index: 2;
}

footer {
position: absolute;
bottom: 19px;
left: 20px;
/* right: 0; */
text-align: center;
font-size: 0.8em;
color: gray;
}

Теперь я обнаружил супер удобные функции изображения «Bg», которые плит макет горизонтально, например,! [Bg справа: 40%] (img.png) . Однако это ломает мой макет. Верхняя полоса составляет всего так широко до тех пор, пока не запустится раздел BG IMG. Вот пример: < /p>
---

## Outline


- Processes
- Process context
- Creating processes
- Process states and management
- Foreground and background processes

---
< /code>
Результаты: < /p>









Outline

• Processes
  
  Process context
• Creating processes
• Process states and management
• Foreground and background processes

Prof. Dr.-Ing. Jens Heuschkel · Hochschuel Darmstadt · WS25


< /code>
и здесь немного IMG для изнасилования. Вот как это выглядит:

И так я хочу:

Я был бы рад за любые предложения!

Подробнее здесь: https://stackoverflow.com/questions/797 ... stom-theme