Skip to content

Instantly share code, notes, and snippets.

@kimiko88

kimiko88/GoldenRatioTest.markdown

Created April 9, 2015 10:10
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save kimiko88/ecfa022cb7424ee04e1e to your computer and use it in GitHub Desktop.
Download ZIP
GoldenRatioTest
Raw
index.html
<div class='red prova1'>abc</div>
<div class='prova1 center c1'>abc</div>
<div class=' reverse prova1 rev1'>abc</div>
<div class='red prova2'>bcd</div>
<div class='red prova2 center c2'>bcd</div>
<div class=' reverse prova2 rev2'>bcd</div>
<div class='red prova3'>cde</div>
<div class='red prova3 center c3'>cde</div>
<div class=' reverse prova3 rev3'>cde</div>
<div class='red prova4'>def</div>
<div class='red prova4 center c4'>def</div>
<div class=' reverse prova4 rev4'>def</div>
<div class='red prova5'>efg</div>
<div class='red prova5 center c5'>efg</div>
<div class=' reverse prova5 rev5'>efg</div>
<div class='red prova6'>fgh</div>
<div class='red prova6 center c6'>fgh</div>
<div class=' reverse prova6 rev6'>fgh</div>
Raw
script.js
var Phi= 1.618033988749894848204586834365638
function SetHeight(classElement,newHeight){
$('.'+ classElement).height(newHeight);
}
function SetWidth(classElement,newWidth){
$('.'+ classElement).width(newWidth);
}
SetHeight('prova2',$('.prova1').height() * Phi);
SetHeight('prova3',$('.prova2').height() * Phi);
SetHeight('prova4',$('.prova3').height() * Phi);
SetHeight('prova5',$('.prova4').height() * Phi);
SetHeight('prova6',$('.prova5').height() * Phi);
SetWidth('prova2',$('.prova1').width() * Phi);
SetWidth('prova3',$('.prova2').width() * Phi);
SetWidth('prova4',$('.prova3').width() * Phi);
SetWidth('prova5',$('.prova4').width() * Phi);
SetWidth('prova6',$('.prova5').width() * Phi);
function SetFontSize(classElement,newSize)
{
$('.'+ classElement).css({ 'font-size': newSize });
}
function SetBorderRadius(classElement,newSize)
{
$('.'+ classElement).css({ 'border-radius': newSize });
}
var newDim =(parseInt($(".prova1").css('fontSize').replace(/px/,""))*Phi)+"px";
SetFontSize('prova2',newDim);
var newDim1 =(parseInt($(".prova2").css('fontSize').replace(/px/,""))*Phi)+"px";
SetFontSize('prova3',newDim1);
var newDim2 =(parseInt($(".prova3").css('fontSize').replace(/px/,""))*Phi)+"px";
SetFontSize('prova4',newDim2);
var newDim3 =(parseInt($(".prova4").css('fontSize').replace(/px/,""))*Phi)+"px";
SetFontSize('prova5',newDim3);
var newDim4 =(parseInt($(".prova5").css('fontSize').replace(/px/,""))*Phi)+"px";
SetFontSize('prova6',newDim4);
var height1 = $(".prova1").height();
$(".rev1").css('margin-top','-'+height1+'px')
var height2 = $(".prova2").height();
$(".rev2").css('margin-top','-'+height2+'px')
var height3 = $(".prova3").height();
$(".rev3").css('margin-top','-'+height3+'px')
var height4 = $(".prova4").height();
$(".rev4").css('margin-top','-'+height4+'px')
var height5 = $(".prova5").height();
$(".rev5").css('margin-top','-'+height5+'px')
var height6 = $(".prova6").height();
$(".rev6").css('margin-top','-'+height6+'px')
var height1 = $(".prova1").height();
$(".c1").css('margin-top','-'+height1+'px')
var height2 = $(".prova2").height();
$(".c2").css('margin-top','-'+height2+'px')
var height3 = $(".prova3").height();
$(".c3").css('margin-top','-'+height3+'px')
var height4 = $(".prova4").height();
$(".c4").css('margin-top','-'+height4+'px')
var height5 = $(".prova5").height();
$(".c5").css('margin-top','-'+height5+'px')
var height6 = $(".prova6").height();
$(".c6").css('margin-top','-'+height6+'px')
var newBord =(parseInt($(".prova1").css('border-radius').replace(/px/,""))*Phi)+"px";
SetBorderRadius('prova2',newBord);
var newBord1 =(parseInt($(".prova2").css('border-radius').replace(/px/,""))*Phi)+"px";
SetBorderRadius('prova3',newBord1);
var newBord2 =(parseInt($(".prova3").css('border-radius').replace(/px/,""))*Phi)+"px";
SetBorderRadius('prova4',newBord2);
var newBord3 =(parseInt($(".prova4").css('border-radius').replace(/px/,""))*Phi)+"px";
SetBorderRadius('prova5',newBord3);
var newBord4 =(parseInt($(".prova5").css('border-radius').replace(/px/,""))*Phi)+"px";
SetBorderRadius('prova6',newBord4);
Raw
style.css
.red{
background: red;
width: 40px;
font-size:5;
border-radius:8px;
}
.reverse{
background: blue;
border-radius:8px;
width: 40px;
float:right;
color:black;
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.center{
background: green;
border-radius:8px;
width: 40px;
margin-left: auto;
margin-right: auto;
color:black;
text-align: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment