Адаптивный вид материалов статей и блог uCoz

<div class="post">
<div class="shortstory-images">
<a href="$ENTRY_URL$" title=""><img src="$IMG_URL1$" alt="$TITLE$"></a>
<div class="news-date">$CATEGORY_NAME$</div>
<div class="post-title">   
<a href="$ENTRY_URL$">$TITLE$</a>   
<?if($MODER_PANEL$)?><div style="float:right;display: block; margin: -5px auto;z-index: 100; opacity: 0.5; padding-right: 30px;">$MODER_PANEL$</div><?endif?>   
</div>   
</div>   
<div class="post-content">   
   $MESSAGE$   
</div>   
<div class="shortstory-bottom">   
<span class="shortstory-date"><i class="fa fa-calendar"></i> $DATE$</span>   
<span class="shortstory-comments"><i class="fa fa-comment-o"></i> $COMMENTS_NUM$</span>   
<a href="$ENTRY_URL$" class="shortstory-more">Читать далее</a>   
</div>   
</div>   
<p> </p>
<style>
.news-date{
position: absolute;
top: 6px;
left: 6px;
padding: 2px 7px;
color: #fff;
background: #01B94C;
opacity: 0.7; /* Полупрозрачный фон */
filter: alpha(Opacity=70); /* Прозрачность в IE */
font-size: 14px;
font-weight: 700;   
text-shadow: #06375C 0 1px 1px;   
}   
.shortstory-bottom{background: #6D7E8C;color:#fff;position:relative;height:38px;line-height:38px;overflow:hidden;padding-left:20px;}   
.shortstory-date, .shortstory-comments{font-size:11px;}   
.shortstory-date i, .shortstory-comments i{font-size:14px;margin-right:5px;}   
.shortstory-comments{padding-left:10px;}   
.shortstory-bottom .shortstory-more{background:#2E815A;color:#fff;position:absolute;right:0;width:110px;display:inline-block;font-size:12px;text-align:center;text-shadow:1px 1px 1px rgba(255,255,255,0.2);}   
.shortstory-bottom .shortstory-more:hover{background: #246246;color:#fff;}   
.post {   
margin: 20px 0px;   
background: #FCFFF5;   
box-shadow: 0 6px 10px 0 rgba(0,0,0,0.3);
position:relative;   
}   
.post-content {   
   padding: 10px;   
}   
.shortstory-images a img{ position:relative;max-height: 300px;width:100%;object-fit:cover}
.shortstory-images a:hover img{opacity:0.8}   
.post-title {   
   padding: 10px;   
   background: #6D7E8C;   
}   
.post-title a {   
   color: white;   
   font-weight: bold;   
}
.post-title a:hover {color:#D6D6CB;}   
.post-title img{   
   float: right;   
}   
</style>