X-Git-Url: http://git.ithinksw.org/philo.git/blobdiff_plain/78e68053e3f159e7e9882bc178b7392f1c3a8222..24aa60ec77e9f084f9eb9e31aaead04dfe8e7321:/static/scss/screen.scss?ds=inline

diff --git a/static/scss/screen.scss b/static/scss/screen.scss
index bfabe3d..d6a043c 100644
--- a/static/scss/screen.scss
+++ b/static/scss/screen.scss
@@ -1,56 +1,214 @@
-@import "reset",
+@import "http://fonts.googleapis.com/css?family=Expletus+Sans",
+		"reset",
 		"var",
+		"compass/typography/vertical_rhythm",
 		"compass/css3/images",
 		"compass/css3/border-radius",
-		"compass/css3/box-shadow";
+		"compass/css3/box-shadow",
+		"compass/css3/transition",
+		"compass/utilities/general/clearfix";
 		
-html{
-	background: $bgcolor;
-	height:100%;
+@include establish-baseline;
+
+::selection{
+	background: darken(saturate(adjust-hue($page-background, 90deg), 100%), 20%);
+	text-shadow: none !important;
+	color:#FFF !important;
 }
 
 body{
+	background:$page-background;
 	@include background(
-		image-url("bg.png"),
-		radial-gradient(rgba(0,0,0,0), rgba(0,0,0,.5) 800px, rgba(0,0,0,.9) 900px)
+		linear-gradient(top, desaturate(darken($page-background, 15%), 10%) 0, $page-background 250px)
 	);
-	padding:1px;
-	margin:-1px;
-	min-height:100%;
-	font-family:Helvetica, Arial, sans-serif;
-	font-size:13px;
-	line-height:15px;
+	@include body-text;
 }
 
 #container{
-	width: $containerwidth;
-	margin:40px auto;
+	width: $page-width;
+	margin:20px auto;
+	background: $content-background;
+	color: $foreground;
 }
 
 #nameplate{
-	color:#FFF;
-	font-size:80px;
-	line-height:80px;
-	text-align:center;
-	text-shadow:1px 1px 0 rgba(0,0,0,.6);
+	@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;
 }
 
 #content{
-	background:$contentbg;
-	@include border-radius(4px);
-	@include box-shadow(rgba(0,0,0,.35) 0 0 36px, rgba(0,0,0,.1) 0 10px 10px inset);
-	border:$contentborderwidth solid $contentbg;
-	padding:$contentpadding;
-	margin-top:20px;
-}
-
-#pagefooter{
-	font-size:12px;
-	color: lighten($bgcolor, 40%);
-	text-shadow:0 -1px 0 rgba(0,0,0,.5);
-	width:600px;
-	margin:20px auto;
-	p{
-		margin-bottom:15px;
+	a{
+		color: darken($foreground, 20%);
+		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);
+		};
+	}
+	p, ul, ol, header{
+		@include margin-trailer;
+	}
+	h1, h2, h3, h4, h5, h6{
+		font-weight:bold;
+		@include margin-trailer(.5);
+	}
+	h2{
+		@include adjust-font-size-to(20px);
+	}
+	code{
+		background: darken($page-background, 10%);
+		padding:3px;
+		margin:-4px 0;
+		border: 1px solid darken($page-background, 15%);
+		@include border-radius(3px);
+		@include box-inset;
+		font-family:Menlo, monospace;
+		@include adjust-font-size-to(13px);
+	}
+	.codeblock{
+		@extend code;
+		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%);
+		}
+	}
+}
+
+.three-up{
+	$pad: 10px;
+	$width: $page-width + $pad;
+	background: $foreground;
+	margin:$base-line-height #{-$pad};
+	padding:$pad;
+	@include border-radius(5px);
+	@include box-shadow(0 1px 0 0 #FFF, 0 2px 4px rgba(0,0,0,.35) inset);
+
+	figure{
+		$border: 1px;
+		border:$border solid darken($foreground, 10%);
+		float:left;
+		width: ($width / 3) - $pad - 2 * $border;
+		margin-right: $pad;
+		overflow:hidden;
+		position:relative;
+		@include transition(width, .25s, linear);
+		@include box-inset($outset:rgba(255,255,255,.35));
+		@include border-radius(3px);
+		
+		&.shrunk{
+			width: ($width - 610px) / 2 - $pad - 3 * $border;
+		}
+		&.expanded{
+			width:600px;
+		}
+		
+		&:last-child{
+			margin-right: 0;
+			float:right; /* keeps the right margin from wiggling */
+		}
+
+		img{
+			display:block;
+		}
+	}
+	
+	figcaption{
+		position:absolute;
+		bottom:0;
+		left:0;
+		right:0;
+		background: rgba(0,0,0,.75);
+		text-shadow:1px 1px 0 #000;
+		padding:0 5px;
+		color:#FFF;
+		width:600px;
+		@include adjust-font-size-to(13px);
+	}
+	
+	@include clearfix;
+}
+
+#modelList{
+	margin-left: 1.5em;
+	li{
+		@include margin-trailer(.5);
+		list-style-type:disc;
+	}
+	.name{
+		font-weight:bold;
+	}
+}
+
+#contribList{
+	$pad: 10px;
+	$width: $page-width + $pad;
+	background: $foreground;
+	margin:$base-line-height #{-$pad};
+	padding:#{2*$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;
+	text-shadow:none;
+	color:lighten($foreground, 80%);
+	-webkit-font-smoothing: antialiased;
+	
+	li{
+		$border: 1px;
+		width: $page-width/2 - $pad * 3 - $border * 2;
+		float:left;
+		margin: 0 $pad/2 $pad $pad/2;
+		padding: $pad;
+		background: darken($foreground, 5%);
+		border:$border solid darken($foreground, 10%);
+		@include box-inset(rgba(0,0,0,.35), rgba(255,255,255,.15));
+		@include clearfix;
+		@include border-radius(3px);
+	}
+	.name, .description, .status{
+		display:block;
+	}
+	.name{
+		font-weight:bold;
+	}
+	.description{
+		color:lighten($foreground, 40%);
+	}
+	.status{
+		font-style:italic;
+		@include adjust-font-size-to(13px);
+		float:right;
+	}
+}
+
+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