Mega Wysivyg blocks

by Petr Haluza

HTML

<section class="mw-wrap">


<!-- Multi blok (sloupcový obsah) -->
<div class="mw-block mw-multi mw-s-row mw-s-a-top mw-s-left mw-s-mb-3 mw-s-sp-1">

	<div class="bl-col"><!-- ?:  bl-mob-hidden / bl-hidden -->
		<h3 class="bl-h3">Nadpis</h3><!-- ?:  bl-hidden -->
		<div class="bl-img"><!-- ?:  bl-hidden -->
			<img src="https://picsum.photos/600/200" alt="vyplnit alt">
		</div>
		<h4 class="bl-h4">Nadpis</h4><!-- ?:  bl-hidden -->
		<div class="bl-text"><!-- ?:  bl-hidden -->
			<p>Prostor pro text, prostor pro text, prostor pro text, prostor pro text, prostor pro text.</p>
		</div>
		<div class="bl-list"><!-- ?:  bl-hidden -->
			<ul>
				<li>Seznam</li>
				<li>Seznam</li>
				<li>Seznam</li>
			</ul>
		</div>
		<div class="bl-btn"><!-- ?:  bl-hidden -->
			<a href="#">tlačítko</a>
		</div>
	</div><!-- /.bl-col -->
	
	<div class="bl-col"><!-- ?:  bl-mob-hidden / bl-hidden -->
		<h3 class="bl-h3">Nadpis</h3><!-- ?:  bl-hidden -->
		<div class="bl-img"><!-- ?:  bl-hidden -->
			<img src="https://picsum.photos/600/200" alt="vyplnit alt">
		</div>
		<h4 class="bl-h4">Nadpis</h4><!-- ?:  bl-hidden -->
		<div class="bl-text"><!-- ?:  bl-hidden -->
			<p>Prostor pro text, prostor pro text, prostor pro text, prostor pro text, prostor pro text.</p>
		</div>
		<div class="bl-list"><!-- ?:  bl-hidden -->
			<ul>
				<li>Seznam</li>
				<li>Seznam</li>
				<li>Seznam</li>
			</ul>
		</div>
		<div class="bl-btn"><!-- ?:  bl-hidden -->
			<a href="#">tlačítko</a>
		</div>
	</div><!-- /.bl-col -->
	
	<div class="bl-col"><!-- ?:  bl-mob-hidden / bl-hidden -->
		<h3 class="bl-h3">Nadpis</h3><!-- ?:  bl-hidden -->
		<div class="bl-img"><!-- ?:  bl-hidden -->
			<img src="https://picsum.photos/600/200" alt="vyplnit alt">
		</div>
		<h4 class="bl-h4">Nadpis</h4><!-- ?:  bl-hidden -->
		<div class="bl-text"><!-- ?:  bl-hidden -->
			<p>Prostor pro text, prostor pro text, prostor pro text, prostor pro text, prostor pro text.</p>
		</div>
		<div class="bl-list"><!-- ?:  bl-hidden...

CSS

/* jádro MegaWysiwyg */
.mw-wrap { display: flex; flex-direction: column; gap: 0; max-width: 1100px; margin: 0 auto}
.mw-block {}

.mw-block .bl-h3,
.mw-block .bl-h4 { margin: 0 0 1em}
.mw-block .bl-text p h3 {margin: 0 0 1em}
.mw-block .bl-btn { display: flex; gap: 1em}
.mw-block .bl-btn > a { padding: .5em 1em; text-decoration:none; display: inline-flex;}
.mw-block .bl-list ul {padding: 0; margin: 0 0 1em 1em; list-style: disc}
.mw-block .bl-img > img { max-width: 100%; object-fit: contain;}

/* skryto nastavením v editoru bloku */
.mw-block .bl-hidden { display: none} /* vypnuto nastavením, nehzobrazuje se v editoru, neprojde do exportu */
@media (max-width:768px) {
	.mw-block .bl-mob-hidden { display: none} /* na mobilech není blok viditelný, v editoru se zobrazuje, prochází do exportu */
}

/* bloky */
.mw-basic /* Nadpis Text Tlačitko Obrázek */
	{ justify-content: space-between; align-items: center; gap: 1em}
	.mw-basic > div { flex-basis: 50%}
	@media (max-width:768px) { .mw-basic > div { flex-basis: 100%}}

.mw-multi /* vícesloupcový zákadní blok */
	{}

.mw-pics /* Obrázek(ky)*/
	{ display:flex; justify-content: center } 
	@media (max-width:768px) { .mw-pics { flex-wpra: wrap}}
	.mw-pics img {vertical-align: middle; border: none; padding: 0; margin: 0}


/* nastavení bloku .mw-s-xxx */

/* zarovnání obsahu left/center/right (default je left)*/
.mw-s-left * { text-align: left} .mw-s-left { justify-content: left}
.mw-s-center * { text-align: center} .mw-s-center { justify-content: center}
.mw-s-right * { text-align: right} .mw-s-right { justify-content: right}
.mw-s-a-top { align-items: initial}
.mw-s-a-center { align-items: center}

/* blok řádek / řádek reverz. / sloupec / sloupec reverzně (default je řádek)*/
.mw-s-row { display:flex}
.mw-s-rowRew { display:flex; flex-direction: row-reverse}
.mw-s-col { display:flex; flex-direction: column}
.mw-s-colRew { display:flex; flex-direction: column-reverse}
@media (max-width:768px) {
	.mw-s-row,...