git.ithinksw.org / philo.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
Lots of updates, textual and stylistic.
[philo.git] / static / scss / screen.scss
diff --git a/static/scss/screen.scss b/static/scss/screen.scss
index 18caecd..b531c1a 100644 (file)
--- a/static/scss/screen.scss
+++ b/static/scss/screen.scss
@@ -1,4 +1,5 @@
-@import "reset",
+@import "http://fonts.googleapis.com/css?family=Expletus+Sans",
+               "reset",
                "var",
                "compass/typography/vertical_rhythm",
                "compass/css3/images",
                "var",
                "compass/typography/vertical_rhythm",
                "compass/css3/images",
@@ -8,26 +9,56 @@
                "compass/utilities/general/clearfix";
                
 @include establish-baseline;
                "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(all, .15s, linear);
+}
+
 body{
 body{
+       background:$page-background;
        @include background(
        @include background(
-               linear-gradient(top, $page-background, darken($page-background, 10%)) no-repeat fixed
+               linear-gradient(top, desaturate(darken($page-background, 15%), 10%) 0, $page-background 250px)
        );
        @include body-text;
 }
 
        );
        @include body-text;
 }
 
-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);
-       };
-}
-
 #container{
        width: $page-width;
        margin:20px auto;
 #container{
        width: $page-width;
        margin:20px auto;
@@ -36,13 +67,72 @@ a{
 }
 
 #nameplate{
 }
 
 #nameplate{
-       @include adjust-font-size-to(40px);
-       border-bottom:5px solid $foreground;
-       @include box-shadow(0 1px 0 #FFF);
-       margin-bottom:15px;
+       @include adjust-font-size-to(60px);
+       font-family:$headingfonts;
+       position:relative;
+}
+
+.installButton{
+       height:30px;
+       $buttoncolor:#EEE;
+       $buttonbottom:darken($buttoncolor, 10%);
+       $buttonfore:darken($buttoncolor, 80%);
+       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{
+               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);
+               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%);
+               }
+       }
 }
 
 #content{
 }
 
 #content{
+       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;
        }
        p, ul, ol, header{
                @include margin-trailer;
        }
@@ -50,6 +140,70 @@ a{
                font-weight:bold;
                @include margin-trailer(.5);
        }
                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%);
+               }
+
+               section :last-child{
+                       margin-bottom:0;
+               }
+               
+               @include margin-leader(2);
+               @include margin-trailer(2);
+       }
+
+       
 }
 
 .three-up{
 }
 
 .three-up{
@@ -60,19 +214,22 @@ a{
        padding:$pad;
        @include border-radius(5px);
        @include box-shadow(0 1px 0 0 #FFF, 0 2px 4px rgba(0,0,0,.35) inset);
        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;
 
        figure{
                $border: 1px;
-               border:$border solid lighten($foreground, 10%);
+               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);
                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{
                &.shrunk{
-                       width: ($width - 610px) / 2 - $pad - 3 * $border;
+                       width: ($width - 610px) / 2 - $pad - 3 * $border - 2px;
                }
                &.expanded{
                        width:600px;
                }
                &.expanded{
                        width:600px;
@@ -104,12 +261,59 @@ a{
        @include clearfix;
 }
 
        @include clearfix;
 }
 
+#whatIs{
+       padding:10px;
+       background:$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};
 #contribList{
        $pad: 10px;
        $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;
        @include border-radius(5px);
        @include box-shadow(0 1px 0 0 #FFF, 0 2px 4px rgba(0,0,0,.35) inset);
        @include clearfix;
@@ -118,10 +322,16 @@ a{
        -webkit-font-smoothing: antialiased;
        
        li{
        -webkit-font-smoothing: antialiased;
        
        li{
-               width: $page-width/2 - $pad * 2;
+               $border: 1px;
+               width: $page-width/2 - $pad * 3 - $border * 2;
                float:left;
                float:left;
-               padding: 0 $pad;
-               @include margin-trailer;
+               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, .description, .status{
                display:block;
@@ -135,5 +345,45 @@ a{
        .status{
                font-style:italic;
                @include adjust-font-size-to(13px);
        .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
        }
 }
\ No newline at end of file
Foundation for web content management systems using Django.