Playing around with title layouts

for Литературни разговори

by Alon Rotem

HTML

<div class="mainheading">
  <span class="sitetitlecontainer">
  <span class="sitetitle">Литературни разговори
 <div class="lead" style="">
 с Антония Апостолова <img src="https://literaturnirazgovori.com/assets/images/facebook.png"></div></span></span>
</div>
abc


<div class="mainheading">
      <!-- UNHIDE THE CMS -->
      <h1 class="sitetitle"><a class="nav-link" href="">Литературни разговори</a></h1>
      <p class="lead">
        
        <a href="https://www.facebook.com/literaturnirazgovori/" target="_blank">
          
          с Антония Апостолова
          
          
        </a>
        
      </p>
    </div>

CSS

.mainheading{
  font-family: B52; 
  background-color:green;
  margin-bottom:10px;
}

.sitetitlecontainer{
  background-color: yellow; 
  font-size: 4em; 
  padding-right:40px;
  background-image: url('https://literaturnirazgovori.com/assets/images/typebar-upright.png');
  background-repeat: no-repeat;
  background-position-x:right; 
  display:inline-block;
  height:100%;
}

.sitetitle{
  margin-top:10px;
  display:inline-block;
  padding-bottom:20px;
}

.lead{
  font-size: 1.25rem;
  margin-top:1px;
}