X-Git-Url: http://git.ithinksw.org/philo.git/blobdiff_plain/7e24f8f625f8772c228442c98ae6484d646c8bfd..07588898df5bd7c9d03044744590e43b1919b7bf:/static/scss/screen.scss?ds=sidebyside

diff --git a/static/scss/screen.scss b/static/scss/screen.scss
index ab4b7bf..f758abd 100644
--- a/static/scss/screen.scss
+++ b/static/scss/screen.scss
@@ -9,9 +9,53 @@
 		"compass/utilities/general/clearfix";
 		
 @include establish-baseline;
-		
+
+::selection{
+	background: darken(saturate(adjust-hue($page-background, 90deg), 100%), 20%);
+	text-shadow: none !important;
+	color:#FFF !important;
+}
+
+@-webkit-keyframes glow{
+	0% {
+		text-shadow: 0 0 3px rgba(255,255,255,0);
+	}
+	100% {
+		text-shadow: 0 0 3px rgba(255,255,255,.5);
+	}
+}
+
+@-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(
+		linear-gradient(top, desaturate(darken($page-background, 15%), 10%) 0, $page-background 250px)
+	);
 	@include body-text;
 }
 
@@ -24,24 +68,86 @@ body{
 
 #nameplate{
 	@include adjust-font-size-to(60px);
-	margin-bottom:25px;
-	padding-bottom:5px;
-	border-bottom:5px solid $foreground;
-	@include box-shadow(0 1px 0 #FFF);
 	font-family:$headingfonts;
+	position:relative;
+}	
+
+$buttoncolor:#EEE;
+$buttonbottom:darken($buttoncolor, 10%);
+$buttonfore:darken($buttoncolor, 80%);
+
+.installButton, .docsButton{
+	height:30px;
+	color:$buttonfore;
+	text-decoration:none;
+	font-size:25px;
+	line-height:36px;
+	font-family:$headingfonts;
+	text-transform:uppercase;
+	letter-spacing:2px;
+	float:right;
+	width:160px;
+	@include border-radius(5px);
+	@include box-shadow(0 1px 3px 0 rgba(0,0,0,.15));
+	@include background(linear-gradient($buttoncolor, $buttonbottom));
+	text-shadow: #FFF 0 1px 0;
+	border:1px solid $buttoncolor;
+	padding:5px 10px;
+	position:absolute;
+	top:10px;
+	right:0;
+	&::after{
+		font-size:20px;
+		line-height:20px;
+		width:25px;
+		@include border-radius(15px);
+		@include box-shadow(0 1px 0 0 #FFF, 0 1px 2px 0 rgba(0,0,0,.15) inset);
+		background:darken($buttoncolor,20%);
+		float:left;
+		text-align:center;
+		margin-right:10px;
+		font-family:Helvetica, Arial, sans-serif;
+	}
+	&:hover{
+		@include background(linear-gradient($buttoncolor, darken($buttonbottom, 5%)));
+	}
+	&:active{
+		@include background(linear-gradient(darken($buttonbottom, 5%), $buttoncolor));
+		@include box-shadow(0 1px 3px 0 rgba(0,0,0,.15), 0 0 16px 0 rgba(0,0,0,.15) inset);
+		color:darken($buttonfore, 10%);
+		&::after{
+			background:darken($buttoncolor, 30%);
+		}
+	}
+}
+.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($foreground, 20%);
+		color: darken($page-background, 60%);;
+		border-bottom:1px solid darken($page-background, 20%);
+		@include box-shadow(0 1px 0 0 #FFF);
 		text-decoration:none;
-		background: darken($page-background, 15%);
-		padding:3px;
-		@include border-radius(3px);
 		&:hover{
-			background: desaturate(darken($page-background, 25%), 10%);
-			text-shadow: 0 1px 0 rgba(255,255,255,.65);
-		};
+			color: darken($page-background, 60%);
+			border-bottom:1px solid darken($page-background, 60%);
+		}
 	}
 	p, ul, ol, header{
 		@include margin-trailer;
@@ -63,6 +169,58 @@ body{
 		font-family:Menlo, monospace;
 		@include adjust-font-size-to(13px);
 	}
+	.codeblock{
+		@extend code;
+		@include margin-trailer;
+		padding: 10px;
+		display:block;
+		code{
+			margin:0;
+			padding:0;
+			@include box-shadow(none);
+			@include border-radius(0);
+			border:none;
+			display:block;
+		}
+		&.shell code::before{
+			content: "$ ";
+			color:lighten($foreground, 10%);
+		}
+	}
+	.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{
@@ -73,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;
@@ -87,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;
@@ -119,6 +278,43 @@ body{
 	@include clearfix;
 }
 
+#whatIs{
+	padding:10px;
+	background: $foreground;
+	@include background(linear-gradient(bottom, lighten($foreground, 10%), $foreground));
+	margin-bottom:20px;
+	line-height:30px;
+	font-size:20px;
+	@include box-inset(rgba(0,0,0,.35), #FFF);
+	@include border-radius(5px);
+	text-shadow: 0 -1px 0 #000;
+	text-align:center;
+	-webkit-font-smoothing: antialiased;
+	color:lighten($foreground, 60%);
+	:last-child{
+		margin-bottom:0;
+	}
+	.w1{
+		font-weight:bold;
+	}
+	.s1{
+		color:lighten($foreground, 80%);
+		display:block;
+	}
+	a{
+		background:transparent;
+		padding:0;
+		color:lighten($accent, 20%);
+		border-width:0;
+		@include box-shadow(none);
+		&:hover{
+			background:transparent;
+			color:desaturate(lighten($accent, 60%), 10%);
+			border:none;
+		}
+	}
+}
+
 #modelList{
 	margin-left: 1.5em;
 	li{
@@ -135,7 +331,7 @@ body{
 	$width: $page-width + $pad;
 	background: $foreground;
 	margin:$base-line-height #{-$pad};
-	padding:#{2*$pad} $pad;
+	padding:#{2*$pad} $pad $pad $pad;
 	@include border-radius(5px);
 	@include box-shadow(0 1px 0 0 #FFF, 0 2px 4px rgba(0,0,0,.35) inset);
 	@include clearfix;
@@ -168,5 +364,44 @@ body{
 		font-style:italic;
 		@include adjust-font-size-to(13px);
 		float:right;
+		&.dev{
+			-webkit-animation-name: glow;
+			-webkit-animation-duration: 1s;
+			-webkit-animation-timing-function: ease;
+			-webkit-animation-iteration-count: infinite;
+			-webkit-animation-direction: alternate;
+		}
+		&.pla{
+			opacity:.5;
+		}
+	}
+	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;
+	border-top:5px solid $foreground;
+	@include box-shadow(0 1px 0 0 #FFF inset);
+	@include adjust-font-size-to(13px);
+	color:lighten($foreground, 20%);
+	a{
+		text-decoration:none;
+		color:darken($page-background, 40%);
+		&:hover{
+			color:darken($page-background, 80%);
+		}
 	}
 }
\ No newline at end of file