A Pen by Jonathan Hudak.

A-Pen-by-Jonathan-Hudak.markdown

A Pen by Jonathan Hudak

A Pen by Jonathan Hudak on CodePen.

License.

index.slim

p: i work in progress
.container
  - for i in (1..100)
    .content#content
      i #{i}
.container
  - for i in (1..100)
    .gold#content#{i}

script.js

// 
// @include responsive-grid(100, 15);
// 
// 
// 
// 
// 
// 
// 
// 
// 

style.scss

@import "compass";
$black : #555;
$gold : gold;
@mixin responsive-grid($count: 2, $height: 'auto', $background: $black) {
    position: relative;
	  width: 100%;
  	height: auto;
  	float: left;
  	cursor: pointer;
  	padding: .5em;
    display: block;
    height: #{$height}em;
  
    i {
      opacity: .1111111;
    }
  
  
  	@for $i from 0 to $count {
      
      &:nth-child(#{$i}) {
        background: rgba($background, $i / 100 );
        
      }
      
  	  @media screen and (min-width: $i*10em) {
  	    width: percentage(.75/$i);
        
        
  	  }
 	}
}

*,*:before,*:after{
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

.container {
    text-align: center;
}

@mixin content {

  position: relative;
  display: inline;
  border: em(1) solid white;
  color: $black;
  border-collapse: collapse;
  display: flex;
  justify-content: center;
  align-items: center;
  
}
  

.content {
  @include responsive-grid(101, 5);
  @include content;
}
.gold {
  @include responsive-grid(101, 5,$gold);
    @include content;
}
  

p {
  
  color: $black;
}