{layout name="layout/main"} 
<style type="text/css">
.wrapper{
	top: 0;
	background: white;
	box-sizing: border-box;
	padding: 10px;
}
.post_title{
	word-wrap: break-word;
	font-weight: bold;
	font-size: 18px;
	text-align: center;
}
#first_div{
	padding: 15px 10px;
}
#first_div img{
	width: 100%;
}
#seconde_div {
    color: #494949;
    padding-top: 15px;
    border-top: 1px solid #ccc;
    overflow: hidden;
}
#seconde_div img
{
	max-width: 480px;
}
</style>

<section class="wrapper">
	<div id="first_div">
		<img src="{$post.poster}" alt="">
		<span class="post_title">
			<?=$post->title?>
		</span>
	</div>
	<div id="seconde_div">
		<?php echo htmlspecialchars_decode($post->content); ?>
	</div>
</section>

<script type="text/javascript">
$(function(){
	var width = $(document).width();
	if (width <= 480) {
		$('#seconde_div img').css({"max-width": width+"px"});
	}
});
</script>

</script>
