Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <header role="banner" id="header" style="background-image:url(http://localhost/melissa-wp-0816/in-class/wp-content/uploads/2012/07/cropped-manhattansummer.jpg)">
  <div class="header-bar">
    <a href="http://localhost/melissa-wp-0816/in-class/" class="custom-logo-link" rel="home" itemprop="url"><img width="200" height="80" src="http://localhost/melissa-wp-0816/in-class/wp-content/uploads/2016/08/cropped-logo.png" class="custom-logo" alt="cropped-logo.png" itemprop="logo" /></a>
   
    <h2>Change this to something appropriate for your site</h2>

    <nav>
      <ul class="nav">
        <li class="page_item page-item-703"><a href="http://localhost/melissa-wp-0816/in-class/blog/">Blog</a></li>
        <li class="page_item page-item-701"><a href="http://localhost/melissa-wp-0816/in-class/">Front Page</a></li>
        <li class="page_item page-item-2"><a href="http://localhost/melissa-wp-0816/in-class/sample-page/">Sample Page</a></li>
        <li class="page_item page-item-13 page_item_has_children current_page_item"><a href="http://localhost/melissa-wp-0816/in-class/about/">About The Tests</a></li>
        <li class="page_item page-item-146"><a href="http://localhost/melissa-wp-0816/in-class/lorem-ipsum/">Lorem Ipsum</a></li>
        <li class="page_item page-item-733"><a href="http://localhost/melissa-wp-0816/in-class/page-a/">Page A</a></li>
      </ul>
    </nav>

    <form role="search" method="get" class="search-form" action="http://localhost/melissa-wp-0816/in-class/">
      <label>
					<span class="screen-reader-text">Search for:</span>
					<input type="search" class="search-field" placeholder="Search &hellip;" value="" name="s" />
				</label>
      <input type="submit" class="search-submit" value="Search" />
    </form>
  </div>
</header>

  <div class="wrapper">
    <main id="content">
      <article id="post-13" class="post-13 page type-page status-publish hentry">
        <h2 class="entry-title"> 
				<a href="http://localhost/melissa-wp-0816/in-class/about/"> 
					About The Tests				</a>
			</h2>
        <div class="entry-content">

          <p>This site is using the standard WordPress Theme Unit Test Data for content. The Theme Unit Test is a series of posts and pages that match up with a checklist on the WordPress codex. You can use the data and checklist together to test your theme.</p>
          <h2>WordPress Theme Development Resources</h2>
          <ol>
            <li>See <a href="http://codex.wordpress.org/Theme_Development">Theme Development</a> for <a href="http://codex.wordpress.org/Theme_Development#Code_Standards">code standards</a>, examples of best practices, and <a href="http://codex.wordpress.org/Theme_Development#Resources_and_References">resources for Theme development</a>.</li>
            <li>See <a href="http://codex.wordpress.org/Theme_Unit_Test">Theme Unit Test</a> for a robust test suite for your Theme and get the latest version of the test data you see here.</li>
            <li>See <a href="http://codex.wordpress.org/Theme_Review">Theme Review</a> for a guide to submitting your Theme to the <a href="http://wordpress.org/extend/themes/">Themes Directory</a>.</li>
          </ol>
        </div>

      </article>
      <!-- end post -->


    </main>
    <!-- end #content -->


    <aside id="sidebar">
      <section id="categories" class="widget">
        <h3 class="widget-title"> Categories </h3>
        <ul>
          <li class="cat-item cat-item-38"><a href="http://localhost/melissa-wp-0816/in-class/category/post-formats/" title="Posts in this category test post formats.">Post Formats</a> (16)
          </li>
          <li class="cat-item cat-item-1"><a href="http://localhost/melissa-wp-0816/in-class/category/uncategorized/">Uncategorized</a> (13)
          </li>
          <li class="cat-item cat-item-49"><a href="http://localhost/melissa-wp-0816/in-class/category/template-2/" title="Posts with template-related tests">Template</a> (10)
          </li>
          <li class="cat-item cat-item-19"><a href="http://localhost/melissa-wp-0816/in-class/category/edge-case-2/" title="Posts that have edge-case related tests">Edge Case</a> (6)
          </li>
          <li class="cat-item cat-item-29"><a href="http://localhost/melissa-wp-0816/in-class/category/markup/" title="Posts in this category test markup tags and styles.">Markup</a> (6)
          </li>
          <li class="cat-item cat-item-30"><a href="http://localhost/melissa-wp-0816/in-class/category/media-2/" title="Posts that have media-related tests">Media</a> (2)
          </li>
          <li class="cat-item cat-item-2"><a href="http://localhost/melissa-wp-0816/in-class/category/aciform/">aciform</a> (1)
          </li>
          <li class="cat-item cat-item-3"><a href="http://localhost/melissa-wp-0816/in-class/category/antiquarianism/">antiquarianism</a> (1)
          </li>
          <li class="cat-item cat-item-4"><a href="http://localhost/melissa-wp-0816/in-class/category/arrangement/">arrangement</a> (1)
          </li>
          <li class="cat-item cat-item-5"><a href="http://localhost/melissa-wp-0816/in-class/category/asmodeus/">asmodeus</a> (1)
          </li>
          <li class="cat-item cat-item-7"><a href="http://localhost/melissa-wp-0816/in-class/category/broder/">broder</a> (1)
          </li>
          <li class="cat-item cat-item-8"><a href="http://localhost/melissa-wp-0816/in-class/category/buying/">buying</a> (1)
          </li>
          <li class="cat-item cat-item-9"><a href="http://localhost/melissa-wp-0816/in-class/category/cat-a/">Cat A</a> (1)
          </li>
          <li class="cat-item cat-item-10"><a href="http://localhost/melissa-wp-0816/in-class/category/cat-b/">Cat B</a> (1)
          </li>
          <li class="cat-item cat-item-11"><a href="http://localhost/melissa-wp-0816/in-class/category/cat-c/">Cat C</a> (1)
          </li>
        </ul>
      </section>
      <section id="archives" class="widget">
        <h3 class="widget-title"> Archives </h3>
        <ul>
          <li><a href='http://localhost/melissa-wp-0816/in-class/2016/'>2016</a>&nbsp;(2)</li>
          <li><a href='http://localhost/melissa-wp-0816/in-class/2013/'>2013</a>&nbsp;(5)</li>
          <li><a href='http://localhost/melissa-wp-0816/in-class/2012/'>2012</a>&nbsp;(11)</li>
          <li><a href='http://localhost/melissa-wp-0816/in-class/2011/'>2011</a>&nbsp;(1)</li>
          <li><a href='http://localhost/melissa-wp-0816/in-class/2010/'>2010</a>&nbsp;(15)</li>
          <li><a href='http://localhost/melissa-wp-0816/in-class/2009/'>2009</a>&nbsp;(6)</li>
        </ul>
      </section>
      <section id="tags" class="widget">
        <h3 class="widget-title"> Tags </h3>
        <ul>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/8bit/' class='tag-link-66 tag-link-position-1' title='1 topic' style='font-size: 1em;'>8BIT</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/alignment-2/' class='tag-link-67 tag-link-position-2' title='3 topics' style='font-size: 1em;'>alignment</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/articles/' class='tag-link-68 tag-link-position-3' title='1 topic' style='font-size: 1em;'>Articles</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/aside/' class='tag-link-69 tag-link-position-4' title='1 topic' style='font-size: 1em;'>aside</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/audio/' class='tag-link-70 tag-link-position-5' title='1 topic' style='font-size: 1em;'>audio</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/captions-2/' class='tag-link-71 tag-link-position-6' title='2 topics' style='font-size: 1em;'>captions</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/categories/' class='tag-link-72 tag-link-position-7' title='2 topics' style='font-size: 1em;'>categories</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/chat/' class='tag-link-73 tag-link-position-8' title='2 topics' style='font-size: 1em;'>chat</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/codex/' class='tag-link-77 tag-link-position-9' title='3 topics' style='font-size: 1em;'>Codex</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/comments-2/' class='tag-link-78 tag-link-position-10' title='4 topics' style='font-size: 1em;'>comments</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/content-2/' class='tag-link-79 tag-link-position-11' title='12 topics' style='font-size: 1em;'>content</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/css/' class='tag-link-81 tag-link-position-12' title='7 topics' style='font-size: 1em;'>css</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/dowork/' class='tag-link-85 tag-link-position-13' title='1 topic' style='font-size: 1em;'>dowork</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/edge-case/' class='tag-link-86 tag-link-position-14' title='8 topics' style='font-size: 1em;'>edge case</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/embeds-2/' class='tag-link-87 tag-link-position-15' title='4 topics' style='font-size: 1em;'>embeds</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/excerpt-2/' class='tag-link-91 tag-link-position-16' title='3 topics' style='font-size: 1em;'>excerpt</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/fail/' class='tag-link-92 tag-link-position-17' title='1 topic' style='font-size: 1em;'>Fail</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/featured-image/' class='tag-link-93 tag-link-position-18' title='3 topics' style='font-size: 1em;'>featured image</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/formatting-2/' class='tag-link-96 tag-link-position-19' title='1 topic' style='font-size: 1em;'>formatting</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/ftw/' class='tag-link-97 tag-link-position-20' title='1 topic' style='font-size: 1em;'>FTW</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/fun/' class='tag-link-98 tag-link-position-21' title='1 topic' style='font-size: 1em;'>Fun</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/gallery/' class='tag-link-99 tag-link-position-22' title='3 topics' style='font-size: 1em;'>gallery</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/html/' class='tag-link-105 tag-link-position-23' title='5 topics' style='font-size: 1em;'>html</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/image/' class='tag-link-106 tag-link-position-24' title='7 topics' style='font-size: 1em;'>image</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/jetpack-2/' class='tag-link-109 tag-link-position-25' title='3 topics' style='font-size: 1em;'>jetpack</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/layout/' class='tag-link-111 tag-link-position-26' title='4 topics' style='font-size: 1em;'>layout</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/link/' class='tag-link-112 tag-link-position-27' title='2 topics' style='font-size: 1em;'>link</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/lists-2/' class='tag-link-113 tag-link-position-28' title='1 topic' style='font-size: 1em;'>lists</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/love/' class='tag-link-115 tag-link-position-29' title='1 topic' style='font-size: 1em;'>Love</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/markup-2/' class='tag-link-116 tag-link-position-30' title='6 topics' style='font-size: 1em;'>markup</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/media/' class='tag-link-117 tag-link-position-31' title='1 topic' style='font-size: 1em;'>media</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/mothership/' class='tag-link-122 tag-link-position-32' title='1 topic' style='font-size: 1em;'>Mothership</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/mustread/' class='tag-link-123 tag-link-position-33' title='1 topic' style='font-size: 1em;'>Must Read</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/nailedit/' class='tag-link-124 tag-link-position-34' title='1 topic' style='font-size: 1em;'>Nailed It</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/pagination/' class='tag-link-126 tag-link-position-35' title='1 topic' style='font-size: 1em;'>pagination</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/post-formats/' class='tag-link-134 tag-link-position-36' title='16 topics' style='font-size: 1em;'>Post Formats</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/quote/' class='tag-link-140 tag-link-position-37' title='2 topics' style='font-size: 1em;'>quote</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/shortcode/' class='tag-link-146 tag-link-position-38' title='6 topics' style='font-size: 1em;'>shortcode</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/standard-2/' class='tag-link-148 tag-link-position-39' title='2 topics' style='font-size: 1em;'>standard</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/template/' class='tag-link-160 tag-link-position-40' title='12 topics' style='font-size: 1em;'>template</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/title/' class='tag-link-165 tag-link-position-41' title='5 topics' style='font-size: 1em;'>title</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/twitter-2/' class='tag-link-167 tag-link-position-42' title='2 topics' style='font-size: 1em;'>twitter</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/video/' class='tag-link-170 tag-link-position-43' title='3 topics' style='font-size: 1em;'>video</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/videopress/' class='tag-link-171 tag-link-position-44' title='2 topics' style='font-size: 1em;'>videopress</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/wordpress-tv/' class='tag-link-174 tag-link-position-45' title='2 topics' style='font-size: 1em;'>wordpress.tv</a> </ul>
      </section>
      <section id="meta" class="widget">
        <h3 class="widget-title"> Meta </h3>
        <ul>
          <li><a href="http://localhost/melissa-wp-0816/in-class/wp-admin/">Site Admin</a></li>

          <li><a href="http://localhost/melissa-wp-0816/in-class/wp-login.php?action=logout&#038;redirect_to=http%3A%2F%2Flocalhost%2Fmelissa-wp-0816%2Fin-class&#038;_wpnonce=7436bb67d0">Log out</a> </li>
        </ul>

      </section>
    </aside>
    <!-- end #sidebar -->
  </div>
  <!-- end wrapper -->



<footer id="footer" role="contentinfo">
  &copy; 2015 by My Incredible Website. All Rights Reserved.
</footer>
            
          
!
            
              /* todo: remove this later */
@import 'https://fonts.googleapis.com/css?family=Lato:400,400i,700|Playfair+Display:400,900';
/* Source SCSS is at https://codepen.io/melissacabral/pen/xOaYgq */
$text-color:    black;
$link-color:    darkslategray;
$accent-color:  dodgerblue;
$secondary-color:rgba(black, .1);

$tablet-width:  700px;
$desktop-width: 1000px;

$max-width:75em;

@mixin tablet {
	@media (min-width: #{$tablet-width}) {
		@content;
	}
}

@mixin desktop {
	@media (min-width: #{$desktop-width}) {
		@content;
	}
}

@mixin clearfix() {
	&:after {
		display: block;
		content: '';
		clear: both;
	}
}

@mixin admin-sticky-fix( $offset: 0 ) {
	$narrow-offset: 46px;
	$wide-offset: 32px;
	@if $offset != 0 and type-of($offset) == 'number' {
		$narrow-offset: $narrow-offset + $offset;
		$wide-offset: $wide-offset + $offset;
	}
	.admin-bar & {
		top: $narrow-offset;
		@media screen and (min-width: 783px) {
			top: $wide-offset;
		}
	}
}
@mixin stretchy-grid($item, $caption, $width:200px){
	&{
		padding: .5vw;
		font-size: 0;
		display: -ms-flexbox;
		-ms-flex-wrap: wrap;
		-ms-flex-direction: column;
		-webkit-flex-flow: row wrap; 
		flex-flow: row wrap; 
		display: -webkit-box;
		display: flex;

		#{$item}{
			position: relative;
			-webkit-box-flex: auto;
			-ms-flex: auto;
			flex: auto; 
			width: $width; 
			margin: .5vw; 
			img { 
				width: 100%; 
				height: auto; 
			}
		}
		#{$caption}{
			font-size:16px;
			font-size: 1rem;
			padding:.5em;
			background: rgba(black, .1);
			z-index: 1000;
			width:100%;
			display:block;
			h1, h2, h3, p{
				margin:0 0 .5em 0;
			}
		}
	}
}
@mixin hovering-box($padding:2%){
	padding: $padding;
	background: white;
	@include tablet {
		box-shadow: 4px 4px 15px rgba(black, .2);
	}
}
body {
	margin: 0;
	font-family: sans-serif;
	font-family: Lato, arial, sans-serif;
	color: $text-color;
	background: #eee;
}

.wrapper {
	max-width: $max-width;
	margin: 0 auto;
	@include tablet{
		padding:2%;
	}
}

* {
	box-sizing: border-box;
}
img{
	max-width:100%;
	height: auto;
}

#header {
	text-align: center;
	color: white;
	background-image: url('http://lorempixel.com/output/abstract-q-c-1200-400-9.jpg');
	background-size: cover;
	@include tablet {
		min-height: 40vh;
		text-align: left;
		border-bottom: solid 3px $accent-color;
	}
	h2 {
		display: none;
		@include tablet {
			display: block;
		}
	}
	a {
		color: white;
	}
	.custom-logo-link {
		display: block;
		background-color:$accent-color;
		overflow:hidden;
		@include tablet {

			width:180px;
			height:50px;

		}
		img{
			max-width:100%;
			height:auto;
		}
	}
	h1 {
		background: #000;
		margin: 0;
		line-height: 50px;
		font-size: 16px;
		@include clearfix();
	}
	.search-form{
		input{
			color:$text-color;
		}
		@include tablet{
			z-index:50;
			position:absolute;
			top:60px;
			right:1em;
		}
	}

	/* == menu */
	.header-bar {
		background: rgba(0, 0, 0, .6);
		@include clearfix;
		@include tablet {
			background: black;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 100;
			@include admin-sticky-fix;
		}
		nav{
			@include tablet {
				position: absolute;
				top: 0;
				right: 0;
				background: #000;
				margin-left:180px; /* space for logo */
			}
		}
		ul {
			margin: 0;
			padding: 0;
			list-style-type: none;      
		}
		li {
			width: 100%;
// float: left;
border-bottom: solid 1px gray;
border-right: solid 1px gray;
position: relative;
&.current{

}
&:hover > a{
	background: $accent-color;
}

@include tablet {
	display: inline-block;
	float: none;
	width: auto;
	border: none;
}
a {
	padding: 2.5%;
	display: block;
	&:hover,
	&:focus {
		background: $accent-color;
	}
	@include tablet {
		padding: 0 1em;
		line-height: 50px;
	}
}
//TODO: submenus
ul{
	display: none;
	background: rgba($accent-color, .6);
	@include tablet{
		position:absolute;
		top:100%;
		left:0;
		z-index: 100;
	}        
	min-width:320px;

	li{
		display: block;
		float:none;
	}
}
&:hover ul{
	display: block;
}
}
}
}

#content {
	@include hovering-box;
	@include tablet {
		width: 68%;
		float: left;
		position: relative;
		top: -6em;   

	}
	.hentry {
		margin: 2em 0;
		line-height: 1.5;
		font-size: 1.1em;
		.postmeta {
			background: $secondary-color;
			padding: 2%;
			font-size: .8em;
			clear: both;
			span {
				padding-right: 1.4em;
				opacity: .7;
			}
		}
	}
	.hentry .wp-post-image.size-thumbnail{
		float:right;
		margin-left:1em;
	}
	/* full width main content*/
	.page-template-template-no-sidebar &,
	.home.page &{
		width:98%;
		float:none; 
		left:0;
	}
}


#sidebar {
	@include tablet {
		width: 30%;
		float: right;
	}
	ul li{
		padding-left:1rem;
	}
	.home &{
		width:100%;
		float: none;
	}
}

#footer {

	clear: both;
	padding: 2%;
	border-top:solid 1px rgba(black, .15)
}


/* ==typography */

h1,
h2,
h3,
h4 {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 900;
}

ul,
li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

a {
	text-decoration: none;
	color: $link-color;
}

/* ==pagination */
.pagination{
	text-align: center;
	clear:both;
	a, span{
		background: $secondary-color;
		padding:.5em 3%;
		display: inline-block;
		margin:.1em;
	}
	.current{
		background: $accent-color;
		color:white;
	}
	.dots{
		background: transparent;
	}
}

/* ==galleries */
.gallery{
	@include stretchy-grid('.gallery-item', '.gallery-caption');
}

/*  ==widgets */

.widget {
	padding: 1em;

	&.widget_calendar table{
		table-layout: fixed;
		width:100%;

		td, th{
			background: white;
			padding:4% 3%;
			text-align: center;
			vertical-align: center;
		}
		th{
			background-color:$accent-color;   
		}

		#today{
			background: rgba($accent-color, .2);
		}
	}
	#footer &{
		font-size:.8em;
		width:50%;
		float:left;

		&:nth-child(2n+1){
			clear:both;
		}
		@include tablet{
			width:33%;
			float:left;
			&:nth-child(2n+1){
				clear:none;
			}
			&:nth-child(3n+1){
				clear:both;
			}
		}
		@include desktop{
			width:25%;
			&:nth-child(3n+1){
				clear:none;
			}
			&:nth-child(4n+1){
				clear:both;
			}
		}
	}
	.home #sidebar &{
		width:48%;
		margin-right:2%;
		margin-bottom:10%;
		float:left;
		@include hovering-box();    
		&:nth-child(2n+1){
			clear:both;
		}
		@include tablet{
			width:31.333%;
			float:left;
			&:nth-child(2n+1){
				clear:none;
			}
			&:nth-child(3n+1){
				clear:both;
			}
		}

	}
}

/* == products */
.home{
	.featured-products ul{
		@include stretchy-grid(li, '.caption');
	}
}
.post-type-archive-product .product-grid{
	@include stretchy-grid(article, '.caption', 300px);

}
.price{
	color:$accent-color;
	;}

	/* ==wordpress core */

	.alignnone {
		margin: 5px 20px 20px 0;
	}

	.aligncenter,
	div.aligncenter {
		display: block;
		margin: 5px auto 5px auto;
	}

	.alignright {
		float: right;
		margin: 5px 0 20px 20px;
	}

	.alignleft {
		float: left;
		margin: 5px 20px 20px 0;
	}

	a img.alignright {
		float: right;
		margin: 5px 0 20px 20px;
	}

	a img.alignnone {
		margin: 5px 20px 20px 0;
	}

	a img.alignleft {
		float: left;
		margin: 5px 20px 20px 0;
	}

	a img.aligncenter {
		display: block;
		margin-left: auto;
		margin-right: auto
	}

	.wp-caption {
		background: #fff;
		border: 1px solid #f0f0f0;
		max-width: 96%;
		/* Image does not overflow the content area */
		padding: 5px 3px 10px;
		text-align: center;
	}

	.wp-caption.alignnone {
		margin: 5px 20px 20px 0;
	}

	.wp-caption.alignleft {
		margin: 5px 20px 20px 0;
	}

	.wp-caption.alignright {
		margin: 5px 0 20px 20px;
	}

	.wp-caption img {
		border: 0 none;
		height: auto;
		margin: 0;
		max-width: 98.5%;
		padding: 0;
		width: auto;
	}

	.wp-caption p.wp-caption-text {
		font-size: 11px;
		line-height: 17px;
		margin: 0;
		padding: 0 4px 5px;
	}


	/* Text meant only for screen readers. */

	.screen-reader-text,
	header h2 {
		clip: rect(1px, 1px, 1px, 1px);
		position: absolute !important;
		height: 1px;
		width: 1px;
		overflow: hidden;
	}

	.screen-reader-text:focus {
		background-color: #f1f1f1;
		border-radius: 3px;
		box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
		clip: auto !important;
		color: #21759b;
		display: block;
		font-size: 14px;
		font-size: 0.875rem;
		font-weight: bold;
		height: auto;
		left: 5px;
		line-height: normal;
		padding: 15px 23px 14px;
		text-decoration: none;
		top: 5px;
		width: auto;
		z-index: 100000;
		/* Above WP toolbar. */
	}

	.commentlist li{
		padding-left:1em;
	}

	.sticky, .gallery-caption,  .bypostauthor{
		text-decoration: none;
	}




            
          
!
            
              /*
__          _______  
\ \        / /  __ \ 
 \ \  /\  / /| |__) |
  \ \/  \/ / |  ___/ 
   \  /\  /  | |     
    \/  \/   |_|   
*/
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console