receptty.org/sass/style.scss

@import "variables";
@import "nav";
@import "lists";
@import "tags";
@import "tables";
@import "fonts";

@media screen and (max-width: 699px){

	main {
		margin:0;

		&.recipe {
			padding:1em;
			border:none;
			border-radius:0;

			table {
				float:none;
				width:100%;
				margin:0 0 2em 0;
			}
		}

		h2 { margin-top:0.85em; }
	}

	main section article {
		width:$article-width-narrow;
		margin:$article-margin-narrow;
	}

}

@media screen and (min-width: 700px){

	main {
		margin:3em auto;

		&.recipe {
			padding:1em 4em;
			border:1px solid $border;
			border-radius:8px;

			table {
				float:right;
				width:45%;
				margin:0 0 2em 2em;
			}
		}

		h2 { margin:0; }
	}

	main section article {
		width:$article-width;
		margin:$article-margin;
	}

}

html, body {
	margin:0;
}

body {
	background:$body-background-image repeat $body-background;
	color:$body-color;
	font-family:sofia;
}

a {
	color:$anchor-color;
	text-decoration:none;
	
	&:hover{
		color:$anchor-hover-color;
	}
}

img {
	width:100%;
}

main {
	max-width:$main-wrap;
	padding:$main-padding;
		
	h2 {
		font-size:3em;
		text-align:center;
	}

	&.recipe {
		background:$recipe-background;
		max-width:$recipe-wrap;

		img {
			display:block;
			margin:0 auto 2em auto;
			border-radius:5px;
			border:1px solid $border;
		}
	
		h2 { margin:0.85em 0; }
		h2, h3 { font-size:2em; }
	}

	hr {
		clear:both;
		border:0;
		height:1px;
		background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
		margin:2em 0;
	}

	.meta {
		margin-bottom:1.5em;
	}

	.pagination {
		text-align:center;
	}

	section {	

		&.list {
			display:flex;
			flex-wrap:wrap;
			justify-content:center;
		}

		article {
			display:flex;
			flex-direction:column;
			background:$article-background;
			border:1px solid $border;
			border-radius:$article-border-radius;
			overflow:hidden;
			box-sizing:border-box;

			&:hover {
				color:$anchor-hover-color;
			}

			a {
				color:$article-color;
			}

			h3 {
				margin:.5em .8em;
				text-align:center;
			}

			.date {
				align-self:flex-end;
				margin:.5em;
				margin-top: auto;
				color:$article-date-color;
			}
		}
	}
}