receptty.org/sass/style.scss

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


*, *:before, *:after {
	box-sizing: border-box;
}

html, body {
	margin:0;
}

body {
	background:$body-background-image repeat $body-background;
	color:$body-color;
	font-family: sofia, sans-serif;
	text-rendering: optimizeLegibility;
	font-size:1em;
	min-height: 100vh;
}

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

img {
	width:100%;
}

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

	&.recipe {
		background:$recipe-background;
		max-width:$recipe-wrap;
		padding:1em 4em;
		border:1px solid $border;
		border-radius:8px;
		margin-top: 2em;

		p { line-height: 1.5 }

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

		img {
			display:block;
			margin:0 auto 2em auto;
			border-radius:5px;
			border:1px solid $border;
		}
	
		h2 { margin: 0.85em 0 }
		h3 { margin: 2em 0 1em 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 {
		display: flex;
		align-items: flex-end;
		flex-wrap: wrap;
		margin-bottom: 3em;

		.edit {
			margin-left: auto;
			font-size: 1.2em;
		}

		.item {
			display: flex;
			align-items: baseline;
			margin-right: 1.5em;
			font-size: .9rem;
			font-weight: bold;
			color: #333;
			cursor: default;

			.icon {
				margin-right: .3em;
				font-size: 1.2em;
			}
		}
	}

	.taglist {
		display: flex;
		align-items: center;
		margin-bottom: .5em;
	}

	.pagination {
		display: flex;
		align-items: center;
		justify-content: center;

		.icon {
			margin: 0 1em;
		}
	}

	section {	

		&.list {
			display:grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			column-gap: .5em;
			row-gap: 2em;
			margin-bottom: 2em;
		}

		article {
			position: relative;
			background:$article-background;
			border:1px solid $border;
			border-radius:$article-border-radius;
			overflow:hidden;
			width:100%;
			box-shadow: none;
			transition: box-shadow .15s ease;

			&:hover {
				box-shadow: 0 0 8px #888;
				a { color: inherit }
				.image { background-size: 110% }
			}

			a {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				color: $article-color;
			}

			.image {
				position: relative;
				width: 100%;
				background-size: 100%;
				background-position: center;
				transition: background-size .15s ease;
			}
			.image:before {
				content: "";
				float: left;
				padding-top: 100%;
			}

			.title {
				margin: 1em .8em .5em .8em;
				text-align: center;
				font-size: 1.1em;
				font-weight: bold;
			}

			.date {
				align-self: flex-end;
				margin: .8rem;
				margin-top: auto;
				color: $article-date-color;
				font-size: .8em;
			}

			&.chilli a::after {
				content: "";
				position: absolute;
				right: .8em;
				top: .8em;
				width: 3em;
				height: 3em;
				background: url(chilli.svg) top center no-repeat;
				background-size: contain;
			}
		}
	}
}

@media screen and (max-width: 950px){
	main {
		margin:0;

		&.recipe {
			padding:1em;
			border:none;
			border-radius:0;
			margin:0;
			max-width: 100%;

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

		h2 { margin-top:0.85em; }

		section.list {
			grid-template-columns: 1fr 1fr 1fr;
		}

		.filters input:first-child { grid-column: span 4; }
	}

}

@media screen and (max-width: 640px){
	main section.list {
		grid-template-columns: 1fr 1fr;
	}
	.meta { justify-content: center }
	.meta .tag { margin-top: .5em }
	.meta .edit { display: none }
}