You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

388 lines
11 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Chowdown Beta</title>
<link href="https://unpkg.com/basscss@8.0.2/css/basscss.min.css" rel="stylesheet">
<style>
@import url('https://rsms.me/inter/inter-ui.css');
:root {
--white: #FFFFFF;
--black: #000000;
--light: #EEEEEE;
--blue: #007FFF;
--red: #CC0000;
--primary: var(--red);
}
*{
box-sizing: border-box;
}
.white, a.white{
color: var(--white);
}
.black, a.black{
color: var(--black);
}
.light, a.light{
color: var(--light);
}
.blue, a.blue{
color: var(--primary);
}
.bg-primary{
background-color:var(--primary);
color:var(--white);
}
body{
margin:0;
padding:0;
font-family: 'Inter UI', sans-serif;
font-size:1rem;
line-height: 1.25;
}
a{
color:var(--primary);
}
a.black:hover{
color:var(--primary);
}
nav{
position: fixed;
z-index: 10;
bottom:0;
left:0;
right:0;
background:rgba(255,255,255,0.95);
border-top:2px solid var(--white);
justify-content: space-around;
}
nav .item{
text-align: center;
text-decoration: none;
color:var(--primary);
font-size:.8rem;
padding:.5rem 0;
font-weight: 500;
transition: .2s ease all;
}
nav .item.active{
color:var(--primary);
}
nav .item.active svg{
animation: zap .2s ease forwards;
}
nav .item path, nav .item g{
transition: .2s ease all;
}
nav .item.active path, nav .item.active g{
fill:#CC0000;
}
nav .item:not(.active){
opacity: .4;
}
nav .label{
margin:0;
}
.recipe .image{
}
.recipe:hover .image{
}
.title{
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ratio{
padding-top:50%;
}
.bg-cover{
background-size:cover;
background-position:50% 50%;
}
.slider-outer{
width:100%;
overflow: hidden;
}
@media (orientation: landscape) {
body{
padding-left:20%;
}
nav{
position: fixed;
flex-direction: column;
justify-content: start;
width:20%;
top:0;
bottom:0;
left:0;
right:auto;
padding:1rem 0 0 2rem;
}
nav .item{
text-align: left;
font-size:1.25rem;
padding:.5rem 0 0 2rem;
margin-bottom:1rem;
position: relative;
}
nav .item svg{
position: absolute;
left:-1rem;
top:.25rem;
}
}
#slider{
width:400%;
transition: .3s ease all;
display: flex;
}
#slider.recipes{
transform: translateX(0);
}
#slider.search{
transform: translateX(-25%);
}
#slider.books{
transform: translateX(-50%);
}
#slider.blog{
transform: translateX(-75%);
}
input{
width:100%;
padding:.75rem;
box-sizing: border-box;
font-size:1rem;
font-family: 'Inter UI', sans-serif;
}
input:focus{
outline:2px solid var(--primary);
box-shadow: none;
}
.blog{
height: 100%;
background: var(--light);
}
.card{
background:var(--white);
padding:1rem;
text-decoration: none;
}
.card .action{
text-transform: uppercase;
font-size: 75%;
font-weight: bold;
margin-bottom:0;
}
@keyframes zap {
0% {
transform: scale(1.0);
}
50% {
transform: scale(1.2) rotate(8deg);
}
100%{
transform: scale(1.0);
}
}
</style>
</head>
<body>
<div class="slider-outer">
<div id="slider">
<div class="recipes mb4 col col-3">
<div class="clearfix p1">
{% assign sorted = site.recipes | sort:"date" %}
{% for post in sorted %}
<div class="recipe sm-col sm-col-6 lg-col-4 py1 pb2">
<a class="block relative mx1 text-decoration-none black" href="{{ post.url | prepend: site.baseurl }}">
<div class="image ratio bg-primary bg-cover" {% for image in post.image %} style="background-image:url({{site.baseurl}}/images/{{ image }});"{% endfor %}></div>
<h3 class="title pt1 m0 bold">{{ post.title }}</h3>
</a>
</div>
{% endfor %}
</div>
</div>
<div class="search col col-3">
<div class="search container p2">
<div id="search-container">
<input type="text" id="search-input" placeholder="Search titles, ingredients, or tags...">
</div>
</div>
<div class="clearfix">
<div class="recipes p1" id="results-container">
</div>
</div>
</div>
<div class="books col col-3">
<div class="px2"><h2 class="mt4 pt4 center">Coming Soon!</h2><p class="px3 center">Collections like brunch, grilling, and quick dinners.</p></div>
</div>
<div class="blog col col-3">
<div class="posts container max-width-2 mx-auto p2">
{% for post in site.posts %}
<a class="post card mb2 block" href="{{ post.url }}">
<h3 class="my1">{{ post.title }}</h3>
<p class="mt1">{{ post.content | strip_html | truncatewords:20 }}</p>
<p class="action">View Post</p>
</a>
{% endfor %}
</div>
</div>
</div>
</div>
<nav class="flex">
<a href="#" class="item recipes active">
<svg width="33" height="32" xmlns="http://www.w3.org/2000/svg">
<g fill="#CC0000" fill-rule="nonzero">
<path d="M17 27.533c6.37 0 11.533-5.163 11.533-11.533C28.533 9.63 23.37 4.467 17 4.467 10.63 4.467 5.467 9.63 5.467 16c0 6.37 5.163 11.533 11.533 11.533zM17 30C9.268 30 3 23.732 3 16S9.268 2 17 2s14 6.268 14 14-6.268 14-14 14z"/>
<g transform="rotate(45 -3.503 17.164)">
<path d="M11.634 3.153V2.24h4.835c.24 0 .438.202.438.456a.447.447 0 0 1-.438.456h-4.835zm4.835 1.322c.974 0 1.76-.799 1.76-1.778 0-.98-.786-1.778-1.76-1.778h-6.157v3.555h6.157z"/>
<path d="M6.088 4.604c-.745-.168-1.626-.862-2.598-1.971-.37-.422.217.325-.335-.392h7.089v2.4H6.413c-.104 0-.212-.012-.325-.037zm4.816 1.36h.661V.92H.45l.818 1.063c.57.74.833 1.07 1.228 1.521C3.64 4.808 4.703 5.646 5.797 5.893c.206.046.412.07.616.07h4.491z"/>
</g>
<g transform="rotate(45 2.18 30.663)">
<path d="M2.354 7.178v11.18a.66.66 0 1 0 1.321 0V7.178a.66.66 0 0 0-1.321 0z"/>
<path d="M5.525 5.227a2.511 2.511 0 1 1-5.022 0h5.022zM.503.921h.977v4.306H.503V.921zm4.046 0h.976v4.306H4.55V.921zm-2.023 0h.977v4.306h-.977V.921z"/>
</g>
</g>
</svg>
<p class="label">Recipes</p>
</a>
<a href="#" class="item search">
<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
<path d="M19.087 18.205a4.882 4.882 0 1 0 .002-9.764 4.882 4.882 0 0 0-.002 9.764zm5.706-.292l5.726 5.726a1.216 1.216 0 0 1-.002 1.723 1.22 1.22 0 0 1-1.724.002l-5.828-5.827a7.324 7.324 0 1 1 1.829-1.624zM2 10.272c0-.674.414-1.221.913-1.221H8.41c.505 0 .913.542.913 1.22 0 .675-.414 1.222-.913 1.222H2.913c-.505 0-.913-.543-.913-1.221zm0 7.323c0-.674.414-1.221.913-1.221H8.41c.505 0 .913.542.913 1.22 0 .675-.414 1.222-.913 1.222H2.913c-.505 0-.913-.543-.913-1.221zm0 7.323c0-.674.402-1.22.914-1.22H20.31c.505 0 .915.542.915 1.22 0 .674-.402 1.221-.915 1.221H2.914c-.504 0-.914-.542-.914-1.221z" fill="#CC0000" fill-rule="nonzero"/>
</svg>
<p class="label">Search</p>
</a>
<a href="#" class="item books">
<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
<path d="M25.568 2.5H6.43C4.814 2.5 3.5 3.86 3.5 5.476v20.877a2.934 2.934 0 0 0 2.93 2.932h19.138a2.936 2.936 0 0 0 2.932-2.932V5.476c0-1.616-1.316-2.976-2.932-2.976zM18.38 4.88h3.571v7.049l-1.041-.833a1.189 1.189 0 0 0-1.488 0l-1.042.833V4.88zM5.88 26.354V5.433a.55.55 0 0 1 .549-.552h1.832v22.024H6.43a.55.55 0 0 1-.549-.551zm20.238 0a.55.55 0 0 1-.551.552H10.643V4.88H16v9.524a1.189 1.189 0 1 0 1.935.93l2.232-1.786 2.232 1.786a1.189 1.189 0 0 0 1.258.144c.414-.2.676-.616.676-1.074V4.88h1.235a.55.55 0 0 1 .551.55v20.922z" fill="#CC0000" fill-rule="nonzero"/>
</svg>
<p class="label">Books</p>
</a>
<a href="#" class="item updates">
<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
<g fill="#CC0000" fill-rule="nonzero">
<path d="M20.12 4.92a.715.715 0 0 0-.269-.05c-.319 0-.604.21-.708.522a.814.814 0 0 0 .478 1 9.651 9.651 0 0 1 4.96 4.622 9.65 9.65 0 0 1 .718 6.742.814.814 0 0 0 .512.982c.08.026.163.04.246.04a.74.74 0 0 0 .717-.54 11.19 11.19 0 0 0-.807-7.916 11.202 11.202 0 0 0-5.846-5.401z"/>
<path d="M30.294 8.156A15.983 15.983 0 0 0 21.653.32a.739.739 0 0 0-.263-.049.759.759 0 0 0-.717.525.8.8 0 0 0 .482.994 14.448 14.448 0 0 1 7.752 7.06 14.437 14.437 0 0 1 .99 10.436.799.799 0 0 0 .506.982c.08.027.162.04.244.04.34 0 .63-.215.722-.538 1.12-3.88.737-8.003-1.075-11.616zM14.052 6.796c-.767 0-1.492.168-2.153.497-1.46.73-2.403 2.18-2.77 3.967-2.972 2.963-6.818 5.581-6.858 5.608-2.111 1.43-2.86 4.035-1.78 6.191.818 1.638 2.473 2.586 4.277 2.586.574 0 1.163-.095 1.745-.295.045-.017 4.427-1.517 8.579-2.118.891.425 1.81.658 2.704.658.768 0 1.492-.168 2.153-.497 1.572-.786 2.596-2.39 2.88-4.513.271-2.014-.16-4.282-1.21-6.384-1.706-3.409-4.747-5.7-7.567-5.7zm7.252 11.879c-.215 1.604-.941 2.79-2.044 3.341a3.243 3.243 0 0 1-1.464.335c-2.253 0-4.74-1.948-6.19-4.85-1.84-3.68-1.4-7.643.982-8.835a3.248 3.248 0 0 1 1.463-.334c2.253 0 4.74 1.948 6.19 4.85.916 1.832 1.294 3.782 1.063 5.493z"/>
<path d="M16.043 13.151a.776.776 0 0 0-.35.08c-.607.302-.701 1.35-.21 2.331.386.773 1.061 1.312 1.642 1.312a.759.759 0 0 0 .35-.081c.586-.293.685-1.383.21-2.333-.386-.77-1.06-1.309-1.642-1.309z"/>
<path d="M14.796 15.907c-.484-.968-.51-1.98-.14-2.672l-3.312.984c.149.957.461 1.963.95 2.94a10.03 10.03 0 0 0 1.784 2.523l2.78-2.063c-.794-.125-1.596-.78-2.062-1.712zM12.014 24.6a59.376 59.376 0 0 0-4.988 1.388L8.89 29.71c.28.561.765.982 1.365 1.18a2.34 2.34 0 0 0 1.8-.124l.324-.161a2.364 2.364 0 0 0 1.055-3.167l-1.42-2.839z"/>
</g>
</svg>
<p class="label">Updates</p>
</a>
</nav>
<script type="text/javascript" src='https://code.jquery.com/jquery-3.3.1.min.js'></script>
<script src="/plugins/simple-jekyll-search.min.js" type="text/javascript"></script>
<script>
SimpleJekyllSearch({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('results-container'),
json: '/search.json',
searchResultTemplate: '<div class="recipe sm-col sm-col-6 lg-col-4 py1 pb2"><a class="block black relative mx1 text-decoration-none" href="{url}"><div class="image ratio bg-primary bg-cover" style="background-image:url({image});"></div><h3 class="title pt1 m0 bold">{title}</h3></a></div>'
})
</script>
<script>
$( document ).ready(function() {
$(".item.recipes").click(function() {
$('#slider').removeClass().addClass('recipes');
$('.item').removeClass('active');
$(this).addClass('active');
});
$(".item.search").click(function() {
$('#slider').removeClass().addClass('search');
$('.item').removeClass('active');
$(this).addClass('active');
});
$(".item.books").click(function() {
$('#slider').removeClass().addClass('books');
$('.item').removeClass('active');
$(this).addClass('active');
});
$(".item.updates").click(function() {
$('#slider').removeClass().addClass('blog');
$('.item').removeClass('active');
$(this).addClass('active');
});
});
</script>
</body>
</html>