Added a pleasant gradient.

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

diff --git a/static/css/screen.css b/static/css/screen.css
index 9b61ed9..1877405 100644 (file)
--- a/static/css/screen.css
+++ b/static/css/screen.css
@@ -1,7 +1,7 @@
 @import "http://fonts.googleapis.com/css?family=Expletus+Sans";
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 @import "http://fonts.googleapis.com/css?family=Expletus+Sans";
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,

-a, abbr, acronym, address, big, cite, code,
+a, abbr, acronym, address, big, cite, code, #content .codeblock,

 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,


@@ -67,27 +67,22 @@ body {
 html > body {
   font-size: 16px; }
 
 html > body {
   font-size: 16px; }
 

+::selection {
+  background: #ff6ae6;
+  text-shadow: none !important;
+  color: #FFF !important; }
+

 body {
   background: #e0e5ef;
 body {
   background: #e0e5ef;

+  background: -webkit-gradient(linear, 50% 0%, 50% 250, color-stop(0%, #b4bdcf), color-stop(100%, #e0e5ef));
+  background: -webkit-linear-gradient(top, #b4bdcf 0%, #e0e5ef 250px);
+  background: -moz-linear-gradient(top, #b4bdcf 0%, #e0e5ef 250px);
+  background: -o-linear-gradient(top, #b4bdcf 0%, #e0e5ef 250px);
+  background: linear-gradient(top, #b4bdcf 0%, #e0e5ef 250px);

   color: #333333;
   text-shadow: 0 1px 0 #FFF;
   font-family: Helvetica, Arial, serif; }
 
   color: #333333;
   text-shadow: 0 1px 0 #FFF;
   font-family: Helvetica, Arial, serif; }
 

-a {
-  color: black;
-  text-decoration: none;
-  background: #aebbd5;
-  padding: 3px;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  -o-border-radius: 3px;
-  -ms-border-radius: 3px;
-  -khtml-border-radius: 3px;
-  border-radius: 3px; }
-  a:hover {
-    background: #95a1bb;
-    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65); }
-

 #container {
   width: 750px;
   margin: 20px auto;
 #container {
   width: 750px;
   margin: 20px auto;


@@ -106,6 +101,20 @@ a {
   box-shadow: 0 1px 0 white;
   font-family: "Expletus Sans", Helvetica, Arial, serif; }
 
   box-shadow: 0 1px 0 white;
   font-family: "Expletus Sans", Helvetica, Arial, serif; }
 

+#content a {
+  color: black;
+  text-decoration: none;
+  background: #aebbd5;
+  padding: 3px;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  -o-border-radius: 3px;
+  -ms-border-radius: 3px;
+  -khtml-border-radius: 3px;
+  border-radius: 3px; }
+  #content a:hover {
+    background: #95a1bb;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65); }

 #content p, #content ul, #content ol, #content header {
   margin-bottom: 1.563em; }
 #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
 #content p, #content ul, #content ol, #content header {
   margin-bottom: 1.563em; }
 #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {


@@ -114,11 +123,16 @@ a {
 #content h2 {
   font-size: 1.25em;
   line-height: 1.25em; }
 #content h2 {
   font-size: 1.25em;
   line-height: 1.25em; }

-#content code {
+#content code, #content .codeblock {

   background: #bec9de;
   padding: 3px;
   margin: -4px 0;
   border: 1px solid #aebbd5;
   background: #bec9de;
   padding: 3px;
   margin: -4px 0;
   border: 1px solid #aebbd5;

+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  -o-border-radius: 3px;
+  -ms-border-radius: 3px;
+  -khtml-border-radius: 3px;

   border-radius: 3px;
   -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 white;
   -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 white;
   border-radius: 3px;
   -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 white;
   -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 white;


@@ -127,6 +141,27 @@ a {
   font-family: Menlo, monospace;
   font-size: 0.813em;
   line-height: 1.923em; }
   font-family: Menlo, monospace;
   font-size: 0.813em;
   line-height: 1.923em; }

+#content .codeblock {
+  padding: 10px;
+  display: block; }
+  #content .codeblock code, #content .codeblock .codeblock {
+    margin: 0;
+    padding: 0;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    -o-box-shadow: none;
+    box-shadow: none;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    -o-border-radius: 0;
+    -ms-border-radius: 0;
+    -khtml-border-radius: 0;
+    border-radius: 0;
+    border: none;
+    display: block; }
+  #content .codeblock.shell code::before, #content .codeblock.shell .codeblock::before {
+    content: "$ ";
+    color: #4d4d4d; }

 
 .three-up {
   background: #333333;
 
 .three-up {
   background: #333333;


@@ -253,3 +288,20 @@ a {
     font-size: 0.813em;
     line-height: 1.923em;
     float: right; }
     font-size: 0.813em;
     line-height: 1.923em;
     float: right; }

+
+footer {
+  margin-top: 25px;
+  padding-top: 20px;
+  border-top: 5px solid #333333;
+  -moz-box-shadow: 0 1px 0 0 white inset;
+  -webkit-box-shadow: 0 1px 0 0 white inset;
+  -o-box-shadow: 0 1px 0 0 white inset;
+  box-shadow: 0 1px 0 0 white inset;
+  font-size: 0.813em;
+  line-height: 1.923em;
+  color: #666666; }
+  footer a {
+    text-decoration: none;
+    color: #5974aa; }
+    footer a:hover {
+      color: #131924; }