<!DOCTYPE html>
<html>
  <head>
    <title>visual cocktail recipes</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8;"/>
	{{#ogdata}}
	  <meta property="og:title" content="{{name}}" />
	  <meta property="og:type" content="website" />
	  <meta property="og:image" content="http://cocktail.graphics/imgs/{{image}}" />
	  <meta property="og:url" content="http://cocktail.graphics/cocktail/{{slug}}" />
	  <meta property="og:description" content="{{name}} recipe graph" />
	  <meta name="twitter:card" content="summary_large_image" />
	  <meta name="twitter:creator" content="@aisamanra" />
	  <meta name="twitter:title" content="{{name}}" />
	  <meta name="twitter:image" content="http://cocktail.graphics/imgs/{{image}}" />
	  <meta name="twitter:description" content="{{name}} recipe graph" />
	{{/ogdata}}
    <style type="text/css">
     body {
       font-family: "Fira Sans", "Arial", sans-serif;
       margin-left: 0px;
       margin-right: 0px;
     }
     .header {
       text-align: center;
       color: #fff;
       background-color: #3a73af;
       margin: 0 auto;
       marign-top: 20px;
       height: 80px;
     }
     .footer {
       color: #fff;
       background-color: #3a73af;
       margin-left: 0;
       margin-right: 0;
       margin-top: 40px;
       margin-bottom: 10px;
       padding-top: 5px;
       padding-bottom: 3px;
       text-align: center;
     }
     .cocktail {
       width: 50%;
       margin-left: auto;
       margin-right: auto;
       margin-top: 40px;
     }
     h1 { margin-bottom: 0px; }
     a { color: #3a73af; }
     .tags { margin-left: 40px; }
     .tag { margin-right: 10px; }
    </style>
  </head>
  <body>
    <div class="header"><a href="/"><img src="/static/header-logo.png"></a></div>
    <div class="content">{{{content}}}</div>
    <div class="footer">©2017 Getty Ritter</div>
  </body>
</html>
