Skip to content

Instantly share code, notes, and snippets.

@austinpray
Created October 25, 2013 07:50
Show Gist options
  • Save austinpray/7150948 to your computer and use it in GitHub Desktop.
Save austinpray/7150948 to your computer and use it in GitHub Desktop.
A Pen by Austin Pray.
<section class="row" data-uheight data-uheight-breakpoint="768px">
<div class="column--right" data-uheight-target>
<img src="http://i.imgur.com/BAg6YPp.jpg">
</div>
<div class="column--left">
<div class="column__text">
<h1>JS Based</h1>
<blockquote>
The creative challenge and high production standards required to realize Sappi The Standard 5: Special Effects demanded a level of quality that few printers could match. Classic came through with style and aplomb. My compliments to everyone involved.”
-KIT HINRICHS
</blockquote>
</div>
</div>
</section>
<section class="row" data-uheight data-uheight-breakpoint="768px">
<div class="column--left" data-uheight-target>
<img src="http://i.imgur.com/Aq28t6m.jpg">
</div>
<div class="column--right" >
<div class="column__text">
<h1>Check My Scripts</h1>
<blockquote>The creative challenge and high production standards required to realize Sappi The Standard 5: Special Effects demanded a level of quality that few printers could match. Classic came through with style and aplomb. My compliments to everyone involved.”
-KIT HINRICHS</blockquote>
</div>
</div>
</section>
//compare to http://pastebin.com/BsmEYsTr and prepare to lol
//mit license http://opensource.org/licenses/MIT
;(function ( $, window, document, undefined ) {
$.fn.uHeight = function( options ) {
var settings = {
'target' : 'uheight-target',
'breakpoint' : 'uheight-breakpoint'
};
if ( options ) {
$.extend( settings, options );
}
return this.each(function() {
var $this = $(this);
if($(window).width() >= settings.breakpoint) {
$this.height($this.children('[data-' + settings.target + ']').height());
} else {
$this.css("height", "auto");
}
});
};
})( jQuery, window, document );
function theLayout() {
$('[data-uheight]').uHeight();
}
var lazyLayout = _.debounce(theLayout, 300);
$(window).resize(lazyLayout);
$(function(){
theLayout();
});
@import "compass";
$small-screen: 768px;
$small: "only screen and (min-width: #{$small-screen})";
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
*,
*:before,
*:after {
box-sizing:border-box;
}
.row {
@extend .cf;
background: #BADA55;
position:relative;
}
.column {
@media #{$small} {
float:left;
width:50%;
}
}
.column--left {
@extend .column;
}
.column--right {
@extend .column;
@media #{$small} {
float:right;
.column__text {
right:2.5%;
left:auto;
}
}
}
.column__text {
color:#fff;
@media #{$small} {
display:table;
height:auto;
margin:auto;
position:absolute;
top:0;
bottom:0;
left:2.5%;
width:45%;
}
}
img {
display:block;
width:100%;
}
h1,blockquote {
margin:0;
padding:0;
line-height:1.45;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment