Merge branch 'gh-pages' of git://github.com/lapilofu/philo into gh-pages

[philo.git] / static / scss / screen.scss

diff --git a/static/scss/screen.scss b/static/scss/screen.scss
index b115015..f758abd 100644 (file)
--- 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(
 body{
        background:$page-background;
        @include background(


@@ -44,13 +70,14 @@ body{
        @include adjust-font-size-to(60px);
        font-family:$headingfonts;
        position:relative;
        @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;
        height:30px;

-       $buttoncolor:#EEE;
-       $buttonbottom:darken($buttoncolor, 10%);
-       $buttonfore:darken($buttoncolor, 80%);

        color:$buttonfore;
        text-decoration:none;
        font-size:25px;
        color:$buttonfore;
        text-decoration:none;
        font-size:25px;


@@ -70,10 +97,8 @@ body{
        top:10px;
        right:0;
        &::after{
        top:10px;
        right:0;
        &::after{

-               content: '\2b07';

                font-size:20px;
                line-height:20px;
                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);
                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{
 
 #content{

+       em{
+               font-style:italic;
+       }
+       strong{
+               font-weight:bold;
+       }

        a{
                color: darken($page-background, 60%);;
                border-bottom:1px solid darken($page-background, 20%);
        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%);
        }
        .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{
 }
 
 .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);
        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;


@@ -172,7 +246,7 @@ body{
                @include border-radius(3px);
                
                &.shrunk{
                @include border-radius(3px);
                
                &.shrunk{

-                       width: ($width - 610px) / 2 - $pad - 3 * $border;
+                       width: ($width - 610px) / 2 - $pad - 3 * $border - 2px;

                }
                &.expanded{
                        width:600px;
                }
                &.expanded{
                        width:600px;


@@ -206,7 +280,8 @@ body{
 
 #whatIs{
        padding:10px;
 
 #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;
        margin-bottom:20px;
        line-height:30px;
        font-size:20px;


@@ -234,7 +309,8 @@ body{
                @include box-shadow(none);
                &:hover{
                        background:transparent;
                @include box-shadow(none);
                &:hover{
                        background:transparent;

-                       color:lighten($accent, 20%);
+                       color:desaturate(lighten($accent, 60%), 10%);
+                       border:none;

                }
        }
 }
                }
        }
 }


@@ -299,6 +375,19 @@ body{
                        opacity:.5;
                }
        }
                        opacity:.5;
                }
        }

+       a{
+               color:#CCC;
+               border:none;
+               @include box-shadow(none);
+               &:hover{
+                       color:#FFF;
+                       border:none;
+               }
+       }
+}
+
+.getInvolved{
+       margin:-16px 0;

 }
 
 footer{
 }
 
 footer{