phisicss

phi.scss

@mixin box {
	margin: 0 auto;
	display: inline-block;
	float: left;

	p, h1, h2, h3, h4, h5 {padding: 0;padding-left: 1rem;padding-right:1rem;}
	

}
/*the typography padding will eventually be 1em, adjusted for the size of each of the elements, after it all goes into media queries.*/

body{margin: 0;overflow-x: hidden;line-height: 1.5rem;-webkit-margin-before:0em;-webkit-margin-after:0em;}

.row{width: 100%;display: inline-block;}

.tiny-1, .tiny-2, .tiny-3, .small-1, .small-2, .small-3, .small-4, .small-5, .medium-1, .medium-2, .medium-3, .medium-5, .medium-8, .large-1, .large-2, .large-3, .large-5, .large-8, .large-12, .large-13 {display: none;}

@media (min-width:240px){
.tiny-1, .tiny-2, .tiny-3, .small-1, .small-2, .small-3, .small-4, .small-5, .medium-1, .medium-2, .medium-3, .medium-5, .medium-8, .large-1, .large-2, .large-3, .large-5, .large-8, .large-12, .large-13, .tiny {display: none;}
.tiny-1{width: 33%;@include box;}
.tiny-2{width: 67%;@include box;}
.tiny-3{width: 100%;@include box;}
.tiny {display:inline;}
}

@media (min-width:450px){
.tiny-1, .tiny-2, .tiny-3, .small-1, .small-2, .small-3, .small-4, .small-5, .medium-1, .medium-2, .medium-3, .medium-5, .medium-8, .large-1, .large-2, .large-3, .large-5, .large-8, .large-12, .large-13, .tiny, .medium, .large {display: none;}
.small-1{width: 20%;@include box;}
.small-2{width: 40%;@include box;}
.small-3{width: 60%;@include box;}
/*--FOR CENTERING ONLY--*/
.small-4{width: 80%;@include box;}
/*----------------------*/
.small-5{width: 100%;@include box;}
.small {display:inline;}
}

@media (min-width:769px){
.tiny-1, .tiny-2, .tiny-3, .small-1, .small-2, .small-3, .small-4, .small-5, .medium-1, .medium-2, .medium-3, .medium-5, .medium-8, .large-1, .large-2, .large-3, .large-5, .large-8, .large-12, .large-13, .tiny, .small, .large {display: none;}
.medium-1{width: 12.5%;@include box;}
.medium-2{width: 25%;@include box;}
.medium-3{width: 37.5%;@include box;}
.medium-5{width: 62.5%;@include box;}
.medium-8{width: 100%;@include box;}
.medium {display:inline;}
}

@media (min-width:1200px){
.tiny-1, .tiny-2, .tiny-3, .small-1, .small-2, .small-3, .small-4, .small-5, .medium-1, .medium-2, .medium-3, .medium-5, .medium-8, .large-1, .large-2, .large-3, .large-5, .large-8, .large-12, .large-13, .tiny, .small, .medium{display: none;}
.large-1{width: 7.69%;@include box;}
.large-2{width: 15.38%;@include box;}
.large-3{width: 23.077%;@include box;}
.large-5{width: 38.46%;@include box;}
.large-8{width: 61.54%;@include box;}
/*--FOR CENTERING ONLY--*/
.large-12{width: 92.31%;@include box;margin: 0 10%;}
/*----------------------*/
.large-13{width: 100%;@include box;}
.large {display:inline;}
}

.text-right{
	text-align: right;
}
.text-centered{
	text-align: center;
}
.text-left{
	text-align: left;
}

/*each of these variables needs to be determined by a single incrementing value representing number of semitones*/


.a{font-size: 075%;}
.b{font-size: 087.5%;}
.c{font-size: 100%;}
.d{font-size: 112.5%;}
.e{font-size: 125%;}
.f{font-size: 1.375rem;}
.g{font-size: 150%;}



@mixin tone($ratio) {$line-height: ceil((2/$ratio) * 100) / 100;$margin: 2/$ratio/2;font-size: $ratio * 1em;line-height:$line-height * 1em;margin: $margin * 1em 0;}

@mixin root {@include tone(1.0);font-weight: normal;}
@mixin note-b2 {@include tone(1.067);font-weight: normal;}
@mixin note-2 {@include tone(1.125);font-weight: bold;}
@mixin note-s2 {@include tone(1.2);font-weight: bold;font-style: italic;}
@mixin note-b3 {@include tone(1.2);font-weight: normal;}
@mixin note-3 {@include tone(1.25);font-weight: bold;}
@mixin note-4 {@include tone(1.33);font-weight: bold;text-transform: uppercase;}
@mixin note-s4 {@include tone(1.414);font-weight: bold;font-style: italic;}
@mixin note-b5 {@include tone(1.414);font-weight: bold;text-transform: lowercase;}
@mixin note-5 {@include tone(1.5);font-weight: bold;text-transform: uppercase;}
@mixin note-s5 {@include tone(1.6);font-weight: bold;font-style: italic;}
@mixin note-b6 {@include tone(1.6);font-weight: normal;}
@mixin note-6 {@include tone(1.667);font-weight: bold;}
@mixin note-s6 {@include tone(1.778);font-weight: bold;font-style: italic;}
@mixin note-b7 {@include tone(1.778);font-weight: normal;}
@mixin note-7 {@include tone(1.875);font-weight: bold;}
@mixin note-8 {@include tone(2);font-weight: bold;text-transform: uppercase;}
@mixin note-s8 {@include tone(2.134);font-weight:bold;font-style: italic;}
@mixin note-b9 {@include tone(2.134);font-weight: normal;}
@mixin note-9 {@include tone(2.25);font-weight: bold;}
@mixin note-s9 {@include tone(2.4);font-weight: bold;font-style: italic;}
@mixin note-b10 {@include tone(2.5);font-weight: normal;}
@mixin note-10 {@include tone(2.5);font-weight: bold;}
@mixin note-11 {@include tone(2.66);font-weight: bold;text-transform: uppercase;}
@mixin note-s11 {@include tone(2.818);font-weight: bold;font-style: italic;}
@mixin note-b12 {@include tone(2.818);font-weight: normal;text-transform: lowercase;}
@mixin note-12 {@include tone(3);font-weight: bold;text-transform: uppercase;}
@mixin note-s12 {@include tone(3.201);font-weight: bold;font-style: italic;}
@mixin note-b13 {@include tone(3.201);font-weight: normal;}
@mixin note-13 {@include tone(3.375);font-weight: bold;}

.min{ p{@include root;padding-top: 0.62em;padding-bottom:0.38em;} h2{@include note-b3;} h1{@include note-5;} h3, h4, h5 {@include note-b3;} }
.maj{ p{@include root;padding-top: 0.62em;padding-bottom:0.38em;} h2{@include note-3;} h1{@include note-5;} h3, h4, h5 {@include note-3;}}
.dim{ p{@include root;padding-top: 0.62em;padding-bottom:0.38em;} h2{@include note-b3;} h1{@include note-b5;} h3, h4, h5 {@include note-b3;}}
.aug{ p{@include root;padding-top: 0.62em;padding-bottom:0.38em;} h2{@include note-3;} h1{@include note-s5;} h3, h4, h5 {@include note-3;}}
.augmin7{ p{@include root;padding-top: 0.62em;padding-bottom:0.38em;} h3{@include note-3;} h2{@include note-s5;} h1{@include note-b7;} h4, h5 {@include note-3;}}
.sus{ p{@include root;padding-top: 0.62em;padding-bottom:0.38em;} h2{@include note-4;} h1{@include note-5;} h3, h4, h5 {@include note-4;}}
.sus2{ p{@include root;padding-top: 0.62em;padding-bottom:0.38em;} h2{@include note-2;} h1{@include note-5;} h3, h4, h5 {@include note-2;}} 
.eleventh{ p{@include root;padding-top: 0.62em;padding-bottom:0.38em;} h5{@include note-3;} h4{@include note-5;} h3{@include note-b7;} h2{@include note-9;} h1{@include note-11;} }
.min7{ p{@include root;padding-top: 0.62em;padding-bottom:0.38em;} h3{@include note-b3;} h2{@include note-5;} h1{@include note-b7;} h4, h5 {@include note-b3;}}
.maj7{ p{@include root;padding-top: 0.62em;padding-bottom:0.38em;} h3{@include note-3;} h2{@include note-5;} h1{@include note-7;} h4, h5 {@include note-3;}}
.dom7{ p{@include root;padding-top: 0.62em;padding-bottom:0.38em;} h3{@include note-3;} h2{@include note-5;} h1{@include note-b7;} h4, h5 {@include note-3;}}
.dim7{ p{@include root;padding-top: 0.62em;padding-bottom:0.38em;} h3{@include note-b3;} h2{@include note-b5;} h1{@include note-b7;} h4, h5 {@include note-b3;}} 
.min6{ p{@include root;padding-top: 0.62em;padding-bottom:0.38em;} h3{@include note-b3;} h2{@include note-5;} h1{@include note-6;} h4, h5 {@include note-b3;}}
.maj6{ p{@include root;padding-top: 0.62em;padding-bottom:0.38em;} h3{@include note-3;} h2{@include note-5;} h1{@include note-6;} h4, h5 {@include note-3;}}
.domflat9{ p{@include root;padding-top: 0.62em;padding-bottom:0.38em;} h4{@include note-3;} h3{@include note-5;} h2{@include note-b7;} h1{@include note-b9;} h5 {@include note-3;} }
.domsharp9{ p{@include root;padding-top: 0.62em;padding-bottom:0.38em;} h4{@include note-3;} h3{@include note-5;} h2{@include note-b7;} h1{@include note-s9;} h5 {@include note-3;} }
.min9{ p{@include root;padding-top: 0.62em;padding-bottom:0.38em;} h4{@include note-b3;} h3{@include note-5;} h2{@include note-b7;} h1{@include note-9;} h5 {@include note-b3;} }
.maj9{ p{@include root;padding-top: 0.62em;padding-bottom:0.38em;} h4{@include note-3;} h3{@include note-5;} h2{@include note-7;} h1{@include note-9;} h5 {@include note-3;} }
.perfect5{ p{@include root;padding-top: 0.62em;padding-bottom:0.38em;} h1{@include note-5;} }

.centered{display: block; *zoom: 1; *display: inline; margin: 0 auto;float:none;}