X-Git-Url: http://git.ithinksw.org/philo.git/blobdiff_plain/ce054678a797099c79b6fd0d9d39b98cab6ad0c0..07358a0e08bfaa601cd385d0b0854e5b78eea543:/static/scss/screen.scss

diff --git a/static/scss/screen.scss b/static/scss/screen.scss
index 3cca3b0..f758abd 100644
--- a/static/scss/screen.scss
+++ b/static/scss/screen.scss
@@ -25,6 +25,32 @@
 	}
 }
 
+@-webkit-keyframes pulse{
+	0%{
+		-webkit-transform: scale(1);
+	}
+	100%{
+		-webkit-transform: scale(1.05);
+	}
+}
+
+.lite{
+	-webkit-animation-name: pulse;
+	-webkit-animation-duration: .25s;
+	-webkit-animation-iteration-count: infinite;
+	-webkit-animation-direction: alternate;
+	-webkit-animation-timing-function: linear;
+	margin: -10px;
+	padding: 9px;
+	border:1px solid darken($page-background, 5%);
+	background:lighten($page-background, 10%);
+	@include border-radius(5px);
+}
+
+section{
+	@include transition(background, .15s, linear);
+}
+
 body{
 	background:$page-background;
 	@include background(
@@ -44,13 +70,14 @@ body{
 	@include adjust-font-size-to(60px);
 	font-family:$headingfonts;
 	position:relative;
-}
+}	
 
-.installButton{
+$buttoncolor:#EEE;
+$buttonbottom:darken($buttoncolor, 10%);
+$buttonfore:darken($buttoncolor, 80%);
+
+.installButton, .docsButton{
 	height:30px;
-	$buttoncolor:#EEE;
-	$buttonbottom:darken($buttoncolor, 10%);
-	$buttonfore:darken($buttoncolor, 80%);
 	color:$buttonfore;
 	text-decoration:none;
 	font-size:25px;
@@ -70,10 +97,8 @@ body{
 	top:10px;
 	right:0;
 	&::after{
-		content: '\2b07';
 		font-size:20px;
 		line-height:20px;
-		padding:7px 1px 3px 4px;
 		width:25px;
 		@include border-radius(15px);
 		@include box-shadow(0 1px 0 0 #FFF, 0 1px 2px 0 rgba(0,0,0,.15) inset);
@@ -95,8 +120,25 @@ body{
 		}
 	}
 }
+.docsButton{
+	right: 200px;
+	width:100px;
+	text-align:center;
+}
+.installButton{
+	&::after{
+		content: '\2b07';
+		padding:7px 1px 3px 4px;
+	}
+}
 
 #content{
+	em{
+		font-style:italic;
+	}
+	strong{
+		font-weight:bold;
+	}
 	a{
 		color: darken($page-background, 60%);;
 		border-bottom:1px solid darken($page-background, 20%);
@@ -148,6 +190,37 @@ body{
 	.pname{
 		color:darken($page-background, 60%);
 	}
+	
+	
+
+	.tucol{
+		@include pie-clearfix;
+		section{
+			width:$page-width/2 - 20px;
+			float:right;
+		}
+
+		section:first-child{
+			float:left;
+		}
+		section:nth-child(2){
+			width:$page-width/2 - 40px;
+			padding:15px 15px;
+			background:rgba(255,255,255,.5);
+			@include border-radius(5px);
+			border:1px solid darken($page-background, 5%);
+			@include box-shadow(0 1px 0 0 #FFF, 0 1px 0 0 #FFF inset);
+		}
+
+		section :last-child{
+			margin-bottom:0;
+		}
+		
+		@include margin-leader(2);
+		@include margin-trailer(2);
+	}
+
+	
 }
 
 .three-up{
@@ -158,6 +231,7 @@ body{
 	padding:$pad;
 	@include border-radius(5px);
 	@include box-shadow(0 1px 0 0 #FFF, 0 2px 4px rgba(0,0,0,.35) inset);
+	height:300px;
 
 	figure{
 		$border: 1px;
@@ -172,7 +246,7 @@ body{
 		@include border-radius(3px);
 		
 		&.shrunk{
-			width: ($width - 610px) / 2 - $pad - 3 * $border;
+			width: ($width - 610px) / 2 - $pad - 3 * $border - 2px;
 		}
 		&.expanded{
 			width:600px;
@@ -206,7 +280,8 @@ body{
 
 #whatIs{
 	padding:10px;
-	background:$foreground;
+	background: $foreground;
+	@include background(linear-gradient(bottom, lighten($foreground, 10%), $foreground));
 	margin-bottom:20px;
 	line-height:30px;
 	font-size:20px;
@@ -234,7 +309,8 @@ body{
 		@include box-shadow(none);
 		&:hover{
 			background:transparent;
-			color:lighten($accent, 20%);
+			color:desaturate(lighten($accent, 60%), 10%);
+			border:none;
 		}
 	}
 }
@@ -302,9 +378,18 @@ body{
 	a{
 		color:#CCC;
 		border:none;
+		@include box-shadow(none);
+		&:hover{
+			color:#FFF;
+			border:none;
+		}
 	}
 }
 
+.getInvolved{
+	margin:-16px 0;
+}
+
 footer{
 	margin-top: 25px;
 	padding-top: 20px;