receptty.org/sass/style.scss

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


html, body {
	margin:0;
}

body {
	background:$body-background-image repeat $body-background;
	color:$body-color;
	font-family: sofia, sans-serif;
	font-size:1em;
}

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:3em;
		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: center;
		margin-bottom: 3em;

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

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

	.pagination {
		text-align:center;
	}

	section {	

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

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

			&: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;
			}

			&.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;
	}
}