GUP更新カーニバル用

by tea4two

HTML

<section class="carnival_sect">
	<h3 class="carnival_h">
		カーニバル <span class="carnival_num">99</span> カーニバルタイトル<br>2行目タイトル
	</h3>
	
	<div class="carnival_content">
		
	</div>
</section>

SCSS

// SCSS
// こちらのCSSは style_2017.scss にまとめられています
// 出力ファイルは style_2016.css です

* {
	margin: 0;
	padding: 0;
}
body {
		font-size: 16px;
}

.block_title {
	font-weight: bold;
	margin-bottom: 2rem;
}

.carnival {
	
	&_sect {
		margin-bottom: 4rem;
	}
	
	&_h {
		font-weight: bold;
		font-size: 18px;
		margin-bottom: 2rem;
		color: deeppink;
		padding-left: 1.4em;
		
		&:before {
			content: '◇';
			display: inline-block;
			margin-right: .2rem;
			float: left;
			margin-left: -1.4em;
		}
	}
	
	&_num {
		display: inline-block;
		border: 2px solid deeppink;
		width: 22px;
		height: 22px;
		border-radius: 30px;
		font-size: 12px;
		vertical-align: middle;
		text-align: center;
		line-height: 22px;
	}
}