mega-component library v1

by Petr Haluza

HTML

<!-- ikony z https://www.svgrepo.com/collections/ -->

<mega-container>
  <mega-content data-theme="light">
  
  
  <!-- // content-is-left / content-is-right / content-is-centered -->
  <!-- // has-image-right / has-image-left + ratio-50-50 / ratio-70-30 / ratio-30-70  -- pouze u komponentu "hero"-->
  <!-- // bg-effect1 / bg-effect2  -->
      <section class="mega-component mega-component-hero content-is-left has-image-right ratio-70-30">
       <div class="mega-col">
        <div class="mega-row">
          <h5>Já jsem supnabpis</h5>
          <h2>Já jsem komponenta obsahu a jmenuji se <span>Hero</span></h2>
        </div>
        <div class="mega-row mt-15">
          <p>Většinou se používám na začátku stránky a mohu být i jedinou komponentou stránky, pokud říkám vše jasně.</p>
        </div>
        <div class="mega-row mt-15">
          <div class="mega-button-row flex fw fg-1">
            <a href="#" class="mega-button">Podružné tlačítko</a>
            <a href="#" class="mega-button mega-button-cta">Hlavní CTA tlačítko</a>
          </div>
        </div>
       </div><!-- /mega-col -->
       <div class="mega-col">
         <div class="mega-row mt-15">
           <img class="is-image" src="https://assets.stickpng.com/images/5de026f911d7f40602e05bae.png">
         </div>
       </div><!-- /mega-col -->
    </section>


      <section class="mega-component mega-component-hero content-is-left has-image-right ratio-50-50">
       <div class="mega-col">
        <div class="mega-row">
          <h5>Já jsem supnabpis</h5>
          <h2>Já jsem komponenta obsahu a jmenuji se <span>Hero</span></h2>
        </div>
        <div class="mega-row mt-15">
          <p>Většinou se používám na začátku stránky a mohu být i jedinou komponentou stránky, pokud říkám vše jasně.</p>
        </div>
        <div class="mega-row mt-15">
          <div class="mega-button-row flex fw fg-1">
            <a href="#" class="mega-button">Podružné tlačítko</a>
            <a href="#"...

CSS

/* nastavení pro demo*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;400;600;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;500;700;900&display=swap');
* {box-sizing:border-box; }
body {font-family: 'Open Sans', sans-serif; font-size:14px}
/* /nastavení pro demo*/
    

:root {
  --primary-text-color: #1f2937; /* barva podkladů bloků */
  --primary-background-color: #f1f5f9; /* barva podkladů bloků */
  --primary-element-color: #1e90ff; /* barva primárních tlačítek */
  --primary-element-textcolor: #fff; /* barva textu primárních tlačítek */  
  --secondary-element-color: #ea0000; /* barva motivu sekundární */
  --secondary-element-textcolor: #fff; /* barva motivu text na sekundárním podkladu */
  
}

mega-container {display:block; width:100%}
mega-content {display:block; width:100%; max-width:990px; margin: 0 auto; container: mega-content / inline-size}
mega-content[data-theme="light"] { background:var(--primary-background-color); color: var(--primary-text-color)}

.mega-component { position: relative}
.mega-component .mega-row { position:relative; z-index:10} /* z-index kvůli efektu na podkladu*/

/* zkratky a flex */
.mega-component .mt-15 { margin-top: 1.5em} 
.mega-component .flex { display:flex}
.mega-component .fw { flex-wrap:wrap}
.mega-component .fg-1 { gap:1em}
.mega-component .is-image { width:100%; max-width:100%} /*fix pro responzivní obrázky*/

/* barva v nadpisech */
.mega-component h2 span,
.mega-component h3 span{ color: var(--secondary-element-color)}

/* efekt na podkladu */
mega-content [class*="bg-effect"]::before { content: ""; display: block;  filter: blur(100px); position: absolute; z-index: 1;  width: 100%; height: 100%; top: 0; left:0; right:0; bottom: 0 }
.bg-effect1::before { /* modra/cervena/modra */ background: linear-gradient(100deg, rgba(48, 196, 247, 0.3) 15.74%, rgba(255, 67, 67, 0.3) 56.49%, rgba(32, 195, 244, 0.3) 115.91%);}
.bg-effect2::before { /*...