レシピ用のCSS ＠Hatena Blog

hatenablog-css-for-recipe.css

/*
	2017-02-02 for Recipe (not Rich Snippet)
	2017-03-23 外部 CSS - スマホ用
*/
.recipe .ingredients > li {
	position: relative;
}
.recipe .ingredients li::before {
	content: "";
	display: block;
	width: 100%;
	position: absolute;
	margin: 0.5em 0;
	border-top: 1px dashed silver;
}
.recipe .ingredients > li > .name {
	background-color: white;
	position: absolute;
	padding-right: 1em;
}
.recipe .ingredients >  li >.amount {
	right: 0;
	position: absolute;
	background-color: white;
	padding-left: 1em;
}

.recipe ul.ingredients {
	width: 70%;
}
.recipe .instructions p {
	margin: 0;
	padding-left: 1em;
}
.recipe .instructions > li {
	margin-top: 0.5em;
}
.recipe .instructions > li > ul {
	margin-top: 0;
	margin-bottom: 0;
}