Skip to content

Instantly share code, notes, and snippets.

@MuseMetrics
Created February 10, 2016 00:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save MuseMetrics/3a79712b8e921da0db2a to your computer and use it in GitHub Desktop.
Save MuseMetrics/3a79712b8e921da0db2a to your computer and use it in GitHub Desktop.
(Genesis WordPress) Custom Recipe Cards
<!--
These custom recipe cards are meant to be
used mainly in posts about food recipes.
They would typically follow the other content
of the post. In order to use this recipe card,
you must copy and past the HTML into the text
editor of the WordPress post. It will not
display properly if this is pasted in the
visual editor. The CSS can be pasted directly
in the style.css at the end of the page.
-->
<div class="recipe">
<h3>Tomato Basil Fusilli Salad | <span class="serve">Serves: 4</span></h3>
<div class="time-slots">
<div class="recipe-time">
<div class="recipe-heading">Prep Time</div>
<div class="recipe-count">20 Mins</div>
</div>
<div class="recipe-time">
<div class="recipe-heading">Cook Time</div>
<div class="recipe-count">30 Mins</div>
</div>
<div class="recipe-time">
<div class="recipe-heading">Total Time</div>
<div class="recipe-count">50 Mins</div>
</div>
</div>
<h4>Ingredients</h4>
<ul>
<li>3 Sliced Tomatoes</li>
<li>2 Tbsp Olive Oil</li>
<li>1 Sprig Basil</li>
<li>2 Tsp Vinaigrette</li>
<li>2 Cups Fusilli</li>
</ul>
<h4>Instructions</h4>
<ol>
<li>Curabitur rhoncus nisi vehicula, suscipit purus vel, pulvinar tellus.</li>
<li>Nunc orci magna, aliquet eget sodales in, suscipit eu tellus.</li>
<li>Proin vitae dui vitae massa laoreet rutrum ut lobortis libero.</li>
<li>Mauris ornare odio sit amet leo semper, rhoncus tincidunt lacus tristique.</li>
<li>Pellentesque urna risus, feugiat et malesuada a, eleifend vel mauris.</li>
</ol>
</div>
/*
These custom recipe cards are meant to be
used mainly in posts about food recipes.
They would typically follow the other content
of the post. In order to use this recipe card,
you must copy and past the HTML into the text
editor of the WordPress post. It will not
display properly if this is pasted in the
visual editor. The CSS can be pasted directly
in the style.css at the end of the page.
*/
/* ## Recipe Cards
--------------------------------------------- */
/*Wrapper Div Class for Entire Recipe Card*/
.recipe {
padding: 5px;
padding-bottom: 5px;
margin-bottom: 10px;
background: #FFCDD2;
}
/*Wrapper Div Class for 3 Time Slots*/
.time-slots {
margin-bottom: 10px;
}
/*Time Slots, 3 Column Layout*/
.recipe-time {
border-top: 1px dashed #666;
width: 33%;
text-align: center;
float: left;
font-weight: bold;
}
/*Middle Time Slot Borders*/
.recipe-time:nth-of-type(2) {
border-right: 1px dashed #666;
border-left: 1px dashed #666;
}
/*Recipe Title*/
.recipe h3 {
padding: 5px;
}
/*Ingredients and Instructions*/
.recipe h4 {
padding: 5px 5px 2px;
}
/*Serve Count Span*/
.serve {
font-size: .75em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment