rustic.html

{%
setvar("layout","base.html")

-- Extend head if it was previously defined in other templates
head = [[
<style>

@import url('https://fonts.cdnfonts.com/css/playfair-display');

:root {
  --accent: #a36;
}

header{
	padding: 10px 0px;
	background-color: white;
	margin-bottom:15px;
	box-shadow:0 3px 1px 0px #333;
}
h2{
}
body{
	background-color:var(--accent);
	justify-content: space-between;
}
nav > *{
	font-family: "Playfair display", serif;
	padding: 5px 10px;
	margin: 0 10px;
	font-size: 1.3em;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	cursor: pointer;
	box-sizing: content-box;
	border-bottom: 5px solid transparent;
	transition: 300ms;
}
nav > *:hover{
	border-bottom: 5px solid #333;
}
nav > *:active{
	transform: scale(0.9);
}
h1,h2,h3,h4,h5,h6{
	margin: 5px;
	font-weight: normal;
	font-family: "Playfair display", serif;
}
section{
	width: min(max(70%, 500px), 100%);
	box-sizing: border-box;
	padding:20px;
	border-left: 6px solid #333;
	border-radius: 0 20px 20px 0;
	background-color:white;
	margin: 20px auto;
	display:flex;
	flex-direction: column;
}
.card{
	padding: 15px;
	margin: 10px;
	text-decoration:none;
	position: relative;
	border-left: 4px solid #333;
	transition: 300ms;
}
.card:hover{
	margin-left: 20px;
}
.card:active{
	transform: scale(0.95);
}
a{
	text-decoration:none;
}
p a{
	text-decoration:underline;
}
.card .title{
	cursor: pointer;
	font-weight: bold;
	display: inline-block;
	text-decoration: none;
	font-size: 1.4em;
	color: inherit;
	transition:300ms;
}
.card .title:active{
	transform: scale(0.9);
}
.card .title:hover{
	color:#333;
}
.card .time{
	color: #666;
}
footer{
	background-color: white;
	box-shadow:0 -3px 1px 0px #333;
	padding:5px 15px;
}
</style>
]]

%}

{{ body }}