Skip to content

Instantly share code, notes, and snippets.

@SimoNonnis

SimoNonnis/Promos-and-Blog.markdown

Created November 2, 2013 17:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save SimoNonnis/7281344 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save SimoNonnis/7281344 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Simonpietro Nonnis.
Raw
index.html
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box promo1"></div>
<div class="box promo2"></div>
<div class="box promo3"></div>
<div class="box promo4"></div>
</div>
</body>
Raw
Promos-and-Blog.markdown

Promos and Blog

A little bit of JS to change the layout of the first blog post and insert promos or banners between the default loop

A Pen by Simonpietro Nonnis on CodePen.

License.

Raw
script.js
$('.box:first-child').css('width','32.3em');
$('.promo1').insertAfter('.box:nth-child(2)');
$('.promo2').insertAfter('.box:nth-child(4)');
$('.promo3').insertAfter('.box:nth-child(6)');
$('.promo4').insertAfter('.box:nth-child(8)');
Raw
style.scss
@import "compass";
$background: #644400;
$box-color : #DDD4C2;
$promo1 : #FF1400;
$promo2 : #B2CC33;
$promo3 : #73BCD8;
$promo4 : #FF8500;
body{background-color: $background}
.container{width:70%;margin:2em auto}
.box{ width:10em;height:10em;
float:left;background-color: $box-color;
margin-right:1em;margin-bottom:1em;
border:1px solid #525151;
border-radius:3px;
box-shadow: inset 15px 5px 27px 10px rgba(37, 37, 37, 0.25);
}
.promo1{background-color:$promo1}
.promo2{background-color:$promo2}
.promo3{background-color:$promo3}
.promo4{background-color:$promo4}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment