Merge remote-tracking branch 'upstream/gh-pages' into gh-pages

_layouts/beta.html

@@ -11,9 +11,14 @@
 :root {
   --white: #FFFFFF;
   --black: #000000;
-  --dark: #1F0F66;
   --light: #EEEEEE;
   --blue: #007FFF;
+  --red: #CC0000;
+  --primary: var(--red);
+}
+
+*{
+	box-sizing: border-box;
 }
 
 .white, a.white{
@@ -24,20 +29,16 @@
 	color: var(--black);
 }
 
-.dark, a.dark{
-	color: var(--dark);
-}
-
 .light, a.light{
 	color: var(--light);
 }
 
 .blue, a.blue{
-	color: var(--blue);
+	color: var(--primary);
 }
 
-.bg-blue{
-	background:var(--blue);
+.bg-primary{
+	background-color:var(--primary);
 	color:var(--white);
 }
 
@@ -50,7 +51,11 @@ body{
 }
 
 a{
-	color:var(--blue);
+	color:var(--primary);
+}
+
+a.black:hover{
+	color:var(--primary);
 }
 
 nav{
@@ -61,12 +66,13 @@ nav{
 	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(--dark);
+	color:var(--primary);
 	font-size:.8rem;
 	padding:.5rem 0;
 	font-weight: 500;
@@ -74,7 +80,7 @@ nav .item{
 }
 
 nav .item.active{
-	color:var(--blue;);
+	color:var(--primary);
 }
 
 nav .item.active svg{
@@ -86,7 +92,7 @@ nav .item path, nav .item g{
 }
 
 nav .item.active path, nav .item.active g{
-	fill:#007fff;
+	fill:#CC0000;
 }
 
 nav .item:not(.active){
@@ -98,11 +104,18 @@ nav .label{
 }
 
 .recipe .image{
-	transition: .2s ease opacity;
+	
 }
 
 .recipe:hover .image{
-	opacity:.6;
+	
+}
+
+.title{
+	display: -webkit-box;
+	-webkit-line-clamp: 1;
+	-webkit-box-orient: vertical;
+	overflow: hidden; 
 }
 
 .ratio{
@@ -119,6 +132,40 @@ nav .label{
 	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;
@@ -146,6 +193,10 @@ input{
 	font-size:1rem;
 	font-family: 'Inter UI', sans-serif;
 }
+input:focus{
+	outline:2px solid var(--primary);
+	box-shadow: none;
+}
 
 .blog{
 	height: 100%;
@@ -190,10 +241,10 @@ input{
     
     {% assign sorted = site.recipes | sort:"date" %}
     {% for post in sorted %}
-      <div class="recipe sm-col sm-col-6 md-col-4 py1">
-          <a class="block relative bg-blue mx1" href="{{ post.url | prepend: site.baseurl }}">
-            <div class="image ratio bg-cover" {% for image in post.image %} style="background-image:url({{site.baseurl}}/images/{{ image }});"{% endfor %}></div>
-            <h1 class="title p2 m0 absolute bold white bottom-0 left-0">{{ post.title }}</h1>
+      <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 %}
@@ -203,9 +254,9 @@ input{
 
 <div class="search col col-3">
 	
-	<div class="search container max-width-2 p2">
+	<div class="search container p2">
 			<div id="search-container">
-			<input type="text" id="search-input" placeholder="Search titles or ingredients...">
+			<input type="text" id="search-input" placeholder="Search titles, ingredients, or tags...">
 			</div>
 	</div>
 
@@ -230,7 +281,7 @@ input{
 	  {% for post in site.posts %}
 	  <a class="post card mb2 block" href="{{ post.url }}">
 	    <h3 class="my1">{{ post.title }}</h3>
-	    <p class="mt1 dark">{{ post.content | strip_html | truncatewords:20 }}</p>
+	    <p class="mt1">{{ post.content | strip_html | truncatewords:20 }}</p>
 	    <p class="action">View Post</p>
 	  </a>
 	  {% endfor %}
@@ -243,10 +294,10 @@ input{
 </div>
 </div>
 
-<nav class="flex justify-around">
+<nav class="flex">
 	<a href="#" class="item recipes active">
 		<svg width="33" height="32" xmlns="http://www.w3.org/2000/svg">
-		  <g fill="#1F0F66" fill-rule="nonzero">
+		  <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"/>
@@ -262,19 +313,19 @@ input{
 	</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="#000" fill-rule="nonzero"/>
+		  <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="#1F0F66" fill-rule="nonzero"/>
+		  <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="#1F0F66" fill-rule="nonzero">
+		  <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"/>
@@ -293,7 +344,7 @@ SimpleJekyllSearch({
   searchInput: document.getElementById('search-input'),
   resultsContainer: document.getElementById('results-container'),
   json: '/search.json',
-  searchResultTemplate: '<div class="recipe sm-col sm-col-6 md-col-4 py1"><a class="block relative bg-blue mx1" href="{url}"><div class="image ratio bg-cover" {% for image in post.image %} style="background-image:url({{site.baseurl}}/images/{image});"{% endfor %}></div><h1 class="title p2 m0 absolute bold white bottom-0 left-0">{title}</h1></a></div>'
+  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>
 

_recipes/crispy-carrots.md

@@ -0,0 +1,29 @@
+---
+
+layout: recipe
+title:  "Crispy Carrots"
+image: crispy-carrots.jpg
+tags: veg, party
+
+ingredients:
+- 1 lb carrot sticks (or baby carrots)
+- 2 oranges (or any citrus)
+- 2 tbsp butter
+- 1 package phyllo dough
+- 1/2 cup honey
+- sesame seeds to top
+- vegetable oil
+
+directions:
+- Start by parboiling your carrots in 2 cups of water (means party boil).
+- Zest and juice the oranges.
+- When the carrots are jussst soft, drain the water. Add the butter, the zest, and the orange juice. Simmer until thick and declious. It's fine (and good) if the carrots are still a bit undercooked (we're going to bake them next).
+- Unroll the phyllo dough and cut it into three equal sections. With a brush, oil the top of each sheet.
+- Roll a carrot with a single section of phyllow dough, place on a baking sheet. Repeat and repeat and repeat.
+- When a full baking sheet is ready, brush the top of each roll with a little oil. Don't worry about placing them too far about, they won't raise much (at all).
+- Bake according to your phyllo dough box.
+- With 5 minutes left, brush the top of each roll with honey, then sprinkle with sesame seeds.
+
+---
+
+This is another recipe we saw on Jamie Oliver's TV show, and we can't stop making it. It's perfect for parties, and pairs well with any rich dip (we've been doing greek yogurt topped with hot sauce and tahini). We've also rolled things other than carrots, changed the flavors, made news dips— go wild!

search.html

@@ -28,7 +28,7 @@ SimpleJekyllSearch({
   searchInput: document.getElementById('search-input'),
   resultsContainer: document.getElementById('results-container'),
   json: '{{site.baseurl}}/search.json',
-  searchResultTemplate: '<div class="sm-col sm-col-6 md-col-6 lg-col-4 xs-px1 xs-mb2 left-align"><a class="block relative bg-blue" href="{url}"><div class="image ratio bg-cover" style="background-image:url({{site.baseurl}}/images/{image});"></div><h1 class="title p2 m0 absolute bold white bottom-0 left-0">{title}</h1></a></div>'
+  searchResultTemplate: '<div class="sm-col sm-col-6 md-col-6 lg-col-4 xs-px1 xs-mb2 left-align"><a class="block relative bg-blue" href="{url}"><div class="image ratio bg-cover" style="background-image:url({image});"></div><h1 class="title p2 m0 absolute bold white bottom-0 left-0">{title}</h1></a></div>'
 })
 </script>
 

search.json

@@ -5,8 +5,9 @@
     {
     
 	    "title"    : "{{ post.title | escape }}",
-		{% if post.ingredients %}"ingredients"    : "{% for ingredient in post.ingredients %}{{ ingredient | escape }}, {% endfor %}",{% endif %}
-		"image"	   : "{{ site.baseurl }}/images/{{ post.image }}",
+      {% if post.ingredients %}"ingredients"    : "{% for ingredient in post.ingredients %}{{ ingredient | escape }}, {% endfor %}",{% endif %}
+      {% if post.tags %}"tags"    : "{% for tag in post.tags %}{{ tag | escape }} {% endfor %}",{% endif %}
+      "image"	   : "{{ site.baseurl }}/images/{{ post.image }}",
 	    "url"      : "{{ site.baseurl }}{{ post.url }}"
       
     } {% unless forloop.last %},{% endunless %}