-@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;
+}
+
+@-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(
- 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;
+ @include adjust-font-size-to(60px);
+ 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;
- text-shadow:1px 1px 0 rgba(0,0,0,.6);
+}
+.installButton{
+ &::after{
+ content: '\2b07';
+ padding:7px 1px 3px 4px;
+ }
}
#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;
+ em{
+ font-style:italic;
+ }
+ strong{
+ font-weight:bold;
+ }
+ a{
+ color: darken($page-background, 60%);;
+ border-bottom:1px solid darken($page-background, 20%);
+ @include box-shadow(0 1px 0 0 #FFF);
+ text-decoration:none;
+ &:hover{
+ color: darken($page-background, 60%);
+ border-bottom:1px solid darken($page-background, 60%);
+ }
+ }
+ 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;
+ @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{
+ $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);
+ height:300px;
+
+ 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 - 2px;
+ }
+ &.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;
+}
+
+#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{
+ @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 $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;
+ &.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
git.ithinksw.org / philo.git / blobdiff