git.ithinksw.org / philo.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 24aa60e)
Lots of updates. Pretty much early-release ready--just needs documentation links.
authorHarris Lapiroff <hlapirof@oberlin.edu>
Wed, 25 May 2011 21:46:44 +0000 (17:46 -0400)
committerHarris Lapiroff <hlapirof@oberlin.edu>
Wed, 25 May 2011 21:46:44 +0000 (17:46 -0400)
index.html patch | blob | history
static/css/screen.css patch | blob | history
static/scss/_var.scss patch | blob | history
static/scss/screen.scss patch | blob | history

diff --git a/index.html b/index.html
index 1a280ce..934f8e0 100644 (file)
--- a/index.html
+++ b/index.html
@@ -9,29 +9,36 @@
        </head>
        <body>
                <div id="fork">
        </head>
        <body>
                <div id="fork">
-<a href="http://github.com/ithinksw/philo"><img style="position: fixed; top: 0; right: 0; border: 0;" src="https://d3nwyuy0nl342s.cloudfront.net/img/e6bef7a091f5f3138b8cd40bc3e114258dd68ddf/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub"></a>               <div id="container">
+                       <a href="http://github.com/ithinksw/philo"><img style="position: fixed; top: 0; right: 0; border: 0;" src="https://d3nwyuy0nl342s.cloudfront.net/img/e6bef7a091f5f3138b8cd40bc3e114258dd68ddf/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub"></a>
+               </div>
+
+               <div id="container">
+                       
                        <header id="nameplate">
                                <h1>Philo</h1>
                        <header id="nameplate">
                                <h1>Philo</h1>
+                               <a class="installButton" href="#install">Install</a>
                        </header><!-- /#nameplate -->
                        
                        <article id="content">
                                
                        </header><!-- /#nameplate -->
                        
                        <article id="content">
                                
-                               <p>Philo is a powerful content-management system built with Django.</p>
+                               <section id="whatIs">
+                                       <p><span class="s1"><span class="w1">Philo</span> is a powerful content-management system built with <a href="https://djangoproject.com/">Django</a>.</span> It manages websites, simple and complex.</p>
+                               </section>
                        
                                <section id="featuresSection">
                                        <header>
                                                <h2 id="features">Features</h2>
                                        </header>
                        
                        
                                <section id="featuresSection">
                                        <header>
                                                <h2 id="features">Features</h2>
                                        </header>
                        
-                                       <p>Philo allows the creation of complex site structures from Django&#8217;s web-based admin interface (or similar database-editing interface). For a simple site, you will use the following three objects, included in the Philo core.</p>
+                                       <p>Philo allows the creation of complex site structures from Django&#8217;s own <a href="https://docs.djangoproject.com/en/1.3/ref/contrib/admin/">admin interface</a> (or similar database interface). For a simple site, you will use the following three objects, included in the <span class="pname">Philo</span> core.</p>
                        
                                        <ul id="modelList">
                        
                                        <ul id="modelList">
-                                               <li><span class="name">Nodes</span> are the basic building blocks of a website using Philo. They define the URL hierarchy and connect each URL to a View subclass instance, such as a Page.</li>
+                                               <li><span class="name">Nodes</span> are the basic building blocks of a website using <span class="pname">Philo</span>. They define the URL hierarchy and connect each URL to a View subclass instance, such as a Page.</li>
                                                <li><span class="name">Templates</span> are Django templates, stored in the database and editable from the Django admin (or similar).</li>
                                                <li><span class="name">Pages</span> are a simple view subclass which return a basic HTML page according to a template. They have related, editable Contentlets and Content References based on <code>{% container %}</code> tags used in the template.</li>
                                        </ul>
                        
                                                <li><span class="name">Templates</span> are Django templates, stored in the database and editable from the Django admin (or similar).</li>
                                                <li><span class="name">Pages</span> are a simple view subclass which return a basic HTML page according to a template. They have related, editable Contentlets and Content References based on <code>{% container %}</code> tags used in the template.</li>
                                        </ul>
                        
-                                       <p>Philo also provides a number of useful template tags, in particular <code>{% container %}</code>, which generates a relationship (and a field in the admin interface) on any pages which use that template.</p>
+                                       <p><span class="pname">Philo</span> also provides a number of useful template tags, in particular <code>{% container %}</code>, which generates a relationship (and a field in the admin interface) on any pages which use that template. For more about <span class="pname">Philo</span> and its features, <a href="#documentation">read the documentation</a>.</p>
                                </section>
                                
                                <section id="exampleSection">
                                </section>
                                
                                <section id="exampleSection">
@@ -39,20 +46,20 @@
                        
                                        <div class="three-up">
                                                <figure>
                        
                                        <div class="three-up">
                                                <figure>
-                                                       <img src="static/img/container1.png" />
+                                                       <img src="static/img/container1.png" width="600" height="300" />
                                                        <figcaption>Put container tags in your template.</figcaption>
                                                </figure>
                                                <figure>
                                                        <figcaption>Put container tags in your template.</figcaption>
                                                </figure>
                                                <figure>
-                                                       <img src="static/img/container2.png" />
+                                                       <img src="static/img/container2.png" width="600" height="300" />
                                                        <figcaption>Edit the contentlets on the page.</figcaption>
                                                </figure>
                                                <figure>
                                                        <figcaption>Edit the contentlets on the page.</figcaption>
                                                </figure>
                                                <figure>
-                                                       <img src="static/img/container3.png" />
+                                                       <img src="static/img/container3.png" width="600" height="300" />
                                                        <figcaption>See the results on your site!</figcaption>
                                                </figure>
                                        </div>
                        
                                                        <figcaption>See the results on your site!</figcaption>
                                                </figure>
                                        </div>
                        
-                                       <p>You can use also collections, redirects, files, content references (all included in the Philo core), as well as the Philo contrib apps and your own code to create and manage more powerful, complex websites.</p>
+                                       <p>You can use also collections, redirects, files, content references (all included in the <span class="pname">Philo</span> core), as well as the <span class="pname">Philo</span> contrib apps and your own code to create and manage more powerful, complex websites.</p>
                                </section>
                                
                                <section id="contribSection">
                                </section>
                                
                                <section id="contribSection">
@@ -78,49 +85,54 @@
                                                        <span class="description">Custom authentication systems.</span>
                                                </li>
                                                <li>
                                                        <span class="description">Custom authentication systems.</span>
                                                </li>
                                                <li>
-                                                       <span class="status">(in development)</span>
+                                                       <span class="status dev">(in development)</span>
                                                        <span class="name">Gilbert</span>
                                                        <span class="description">Alternative web-based admin.</span>
                                                </li>
                                                <li>
                                                        <span class="name">Gilbert</span>
                                                        <span class="description">Alternative web-based admin.</span>
                                                </li>
                                                <li>
-                                                       <span class="status">(in development)</span>
+                                                       <span class="status dev">(in development)</span>
                                                        <span class="name">Julian</span>
                                                        <span class="description">Calendar and events system.</span>
                                                </li>
                                                <li>
                                                        <span class="name">Julian</span>
                                                        <span class="description">Calendar and events system.</span>
                                                </li>
                                                <li>
-                                                       <span class="status">(in development)</span>
+                                                       <span class="status dev">(in development)</span>
                                                        <span class="name">Edmonia</span>
                                                        <span class="description">Asset management.</span>
                                                </li>
                                                <li>
                                                        <span class="name">Edmonia</span>
                                                        <span class="description">Asset management.</span>
                                                </li>
                                                <li>
-                                                       <span class="status">(in development)</span>
+                                                       <span class="status dev">(in development)</span>
                                                        <span class="name">Bartleby</span>
                                                        <span class="description">Form generation and handling.</span>
                                                </li>
                                                <li>
                                                        <span class="name">Bartleby</span>
                                                        <span class="description">Form generation and handling.</span>
                                                </li>
                                                <li>
-                                                       <span class="status">(planned)</span>
+                                                       <span class="status pla">(planned)</span>
                                                        <span class="description">Forums.</span>
                                                </li>
                                                <li>
                                                        <span class="description">Forums.</span>
                                                </li>
                                                <li>
-                                                       <span class="status">(planned)</span>
+                                                       <span class="status pla">(planned)</span>
                                                        <span class="description">Wikis.</span>
                                                </li>
                                        </ul>
                                </section>
                                
                                <section class="installSection">
                                                        <span class="description">Wikis.</span>
                                                </li>
                                        </ul>
                                </section>
                                
                                <section class="installSection">
-                                       <h2>Install Philo</h2>
+                                       <h2 id="install">Install Philo</h2>
                                        <div class="codeblock shell">
                                        <div class="codeblock shell">
-                                               <code>git clone https://github.com/ithinksw/philo.git</code>
+                                               <code>git clone git://git.ithinksw.org/philo.git</code>
                                                <code>python philo/setup.py install</code>
                                                <code>rm -rf philo</code>
                                        </div>
                                </section>
                                
                                                <code>python philo/setup.py install</code>
                                                <code>rm -rf philo</code>
                                        </div>
                                </section>
                                
+                               <section class="getInvolved">
+                                       <h2 id="get_involved">Get Involved</h2>
+                                       <p><span class="pname">Philo</span> is still under heavy-development. If you&#8217;re a Python/Django developer, help out by forking <a href="http://github.com/ithinksw/philo"><span class="pname">Philo</span> on GitHub</a> to add features or fix bugs.</p>
+                               <section>
+                               
                        </article><!-- /#content -->
                        
                        <footer>
                        </article><!-- /#content -->
                        
                        <footer>
-                               <p>Philo is developed by iThink Software. Read the <a href="https://github.com/ithinksw/philo/blob/master/LICENSE">license</a>.</p>
+                               <p>Philo is developed by iThink Software. Read the <a href="https://github.com/ithinksw/philo/blob/master/LICENSE">license</a>. Read the <a href="#documentation">documentation</a>.</p>
                        </footer>
                        
                </div>
                        </footer>
                        
                </div>
diff --git a/static/css/screen.css b/static/css/screen.css
index 1877405..d52c659 100644 (file)
--- a/static/css/screen.css
+++ b/static/css/screen.css
@@ -70,7 +70,14 @@ html > body {
 ::selection {
   background: #ff6ae6;
   text-shadow: none !important;
 ::selection {
   background: #ff6ae6;
   text-shadow: none !important;
-  color: #FFF !important; }
+  color: white !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, 0.5); } }
 
 body {
   background: #e0e5ef;
 
 body {
   background: #e0e5ef;
@@ -92,29 +99,93 @@ body {
 #nameplate {
   font-size: 3.75em;
   line-height: 1.25em;
 #nameplate {
   font-size: 3.75em;
   line-height: 1.25em;
-  margin-bottom: 25px;
-  padding-bottom: 5px;
-  border-bottom: 5px solid #333333;
-  -moz-box-shadow: 0 1px 0 white;
-  -webkit-box-shadow: 0 1px 0 white;
-  -o-box-shadow: 0 1px 0 white;
-  box-shadow: 0 1px 0 white;
-  font-family: "Expletus Sans", Helvetica, Arial, serif; }
+  font-family: "Expletus Sans", Helvetica, Arial, serif;
+  position: relative; }
 
 
-#content a {
-  color: black;
+.installButton {
+  height: 30px;
+  color: #222222;
   text-decoration: none;
   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; }
+  font-size: 25px;
+  line-height: 36px;
+  font-family: "Expletus Sans", Helvetica, Arial, serif;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  float: right;
+  width: 160px;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  -o-border-radius: 5px;
+  -ms-border-radius: 5px;
+  -khtml-border-radius: 5px;
+  border-radius: 5px;
+  -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
+  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
+  -o-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
+  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeeee), color-stop(100%, #d4d4d4));
+  background: -webkit-linear-gradient(#eeeeee, #d4d4d4);
+  background: -moz-linear-gradient(#eeeeee, #d4d4d4);
+  background: -o-linear-gradient(#eeeeee, #d4d4d4);
+  background: linear-gradient(#eeeeee, #d4d4d4);
+  text-shadow: #FFF 0 1px 0;
+  border: 1px solid #eeeeee;
+  padding: 5px 10px;
+  position: absolute;
+  top: 10px;
+  right: 0; }
+  .installButton::after {
+    content: '\2b07';
+    font-size: 20px;
+    line-height: 20px;
+    padding: 7px 1px 3px 4px;
+    width: 25px;
+    -moz-border-radius: 15px;
+    -webkit-border-radius: 15px;
+    -o-border-radius: 15px;
+    -ms-border-radius: 15px;
+    -khtml-border-radius: 15px;
+    border-radius: 15px;
+    -moz-box-shadow: 0 1px 0 0 white, 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset;
+    -webkit-box-shadow: 0 1px 0 0 white, 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset;
+    -o-box-shadow: 0 1px 0 0 white, 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset;
+    box-shadow: 0 1px 0 0 white, 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset;
+    background: #bbbbbb;
+    float: left;
+    text-align: center;
+    margin-right: 10px;
+    font-family: Helvetica, Arial, sans-serif; }
+  .installButton:hover {
+    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeeee), color-stop(100%, #c8c8c8));
+    background: -webkit-linear-gradient(#eeeeee, #c8c8c8);
+    background: -moz-linear-gradient(#eeeeee, #c8c8c8);
+    background: -o-linear-gradient(#eeeeee, #c8c8c8);
+    background: linear-gradient(#eeeeee, #c8c8c8); }
+  .installButton:active {
+    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c8c8c8), color-stop(100%, #eeeeee));
+    background: -webkit-linear-gradient(#c8c8c8, #eeeeee);
+    background: -moz-linear-gradient(#c8c8c8, #eeeeee);
+    background: -o-linear-gradient(#c8c8c8, #eeeeee);
+    background: linear-gradient(#c8c8c8, #eeeeee);
+    -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15), 0 0 16px 0 rgba(0, 0, 0, 0.15) inset;
+    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15), 0 0 16px 0 rgba(0, 0, 0, 0.15) inset;
+    -o-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15), 0 0 16px 0 rgba(0, 0, 0, 0.15) inset;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15), 0 0 16px 0 rgba(0, 0, 0, 0.15) inset;
+    color: #080808; }
+    .installButton:active::after {
+      background: #a2a2a2; }
+
+#content a {
+  color: #354668;
+  border-bottom: 1px solid #9dadcc;
+  -moz-box-shadow: 0 1px 0 0 white;
+  -webkit-box-shadow: 0 1px 0 0 white;
+  -o-box-shadow: 0 1px 0 0 white;
+  box-shadow: 0 1px 0 0 white;
+  text-decoration: none; }
   #content a:hover {
   #content a:hover {
-    background: #95a1bb;
-    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65); }
+    color: #354668;
+    border-bottom: 1px solid #354668; }
 #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 {
@@ -142,6 +213,7 @@ body {
   font-size: 0.813em;
   line-height: 1.923em; }
 #content .codeblock {
   font-size: 0.813em;
   line-height: 1.923em; }
 #content .codeblock {
+  margin-bottom: 1.563em;
   padding: 10px;
   display: block; }
   #content .codeblock code, #content .codeblock .codeblock {
   padding: 10px;
   display: block; }
   #content .codeblock code, #content .codeblock .codeblock {
@@ -162,6 +234,8 @@ body {
   #content .codeblock.shell code::before, #content .codeblock.shell .codeblock::before {
     content: "$ ";
     color: #4d4d4d; }
   #content .codeblock.shell code::before, #content .codeblock.shell .codeblock::before {
     content: "$ ";
     color: #4d4d4d; }
+#content .pname {
+  color: #354668; }
 
 .three-up {
   background: #333333;
 
 .three-up {
   background: #333333;
@@ -231,6 +305,46 @@ body {
     font-size: 0.813em;
     line-height: 1.923em; }
 
     font-size: 0.813em;
     line-height: 1.923em; }
 
+#whatIs {
+  padding: 10px;
+  background: #333333;
+  margin-bottom: 20px;
+  line-height: 30px;
+  font-size: 20px;
+  -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35) inset, 0 1px 0 0 white;
+  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35) inset, 0 1px 0 0 white;
+  -o-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35) inset, 0 1px 0 0 white;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35) inset, 0 1px 0 0 white;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  -o-border-radius: 5px;
+  -ms-border-radius: 5px;
+  -khtml-border-radius: 5px;
+  border-radius: 5px;
+  text-shadow: 0 -1px 0 black;
+  text-align: center;
+  -webkit-font-smoothing: antialiased;
+  color: #cccccc; }
+  #whatIs :last-child {
+    margin-bottom: 0; }
+  #whatIs .w1 {
+    font-weight: bold; }
+  #whatIs .s1 {
+    color: white;
+    display: block; }
+  #whatIs a {
+    background: transparent;
+    padding: 0;
+    color: #73e600;
+    border-width: 0;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    -o-box-shadow: none;
+    box-shadow: none; }
+    #whatIs a:hover {
+      background: transparent;
+      color: #73e600; }
+
 #modelList {
   margin-left: 1.5em; }
   #modelList li {
 #modelList {
   margin-left: 1.5em; }
   #modelList li {
@@ -242,7 +356,7 @@ body {
 #contribList {
   background: #333333;
   margin: 25px -10px;
 #contribList {
   background: #333333;
   margin: 25px -10px;
-  padding: 20px 10px;
+  padding: 20px 10px 10px 10px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   -o-border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   -o-border-radius: 5px;
@@ -288,6 +402,14 @@ body {
     font-size: 0.813em;
     line-height: 1.923em;
     float: right; }
     font-size: 0.813em;
     line-height: 1.923em;
     float: right; }
+    #contribList .status.dev {
+      -webkit-animation-name: glow;
+      -webkit-animation-duration: 1s;
+      -webkit-animation-timing-function: ease;
+      -webkit-animation-iteration-count: infinite;
+      -webkit-animation-direction: alternate; }
+    #contribList .status.pla {
+      opacity: .5; }
 
 footer {
   margin-top: 25px;
 
 footer {
   margin-top: 25px;
diff --git a/static/scss/_var.scss b/static/scss/_var.scss
index 6e4c9e6..d90b1ce 100644 (file)
--- a/static/scss/_var.scss
+++ b/static/scss/_var.scss
@@ -9,6 +9,8 @@ $page-width: 750px;
 $page-background: #E0E5EF;
 $content-background: transparent;
 $foreground: #333;
 $page-background: #E0E5EF;
 $content-background: transparent;
 $foreground: #333;
+$accent: #408000;
+$accent2: #004080;
 
 $textfonts: Helvetica, Arial, serif;
 $headingfonts: "Expletus Sans", $textfonts;
 
 $textfonts: Helvetica, Arial, serif;
 $headingfonts: "Expletus Sans", $textfonts;
diff --git a/static/scss/screen.scss b/static/scss/screen.scss
index d6a043c..b115015 100644 (file)
--- a/static/scss/screen.scss
+++ b/static/scss/screen.scss
@@ -16,6 +16,15 @@
        color:#FFF !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);
+       }
+}
+
 body{
        background:$page-background;
        @include background(
 body{
        background:$page-background;
        @include background(
@@ -33,24 +42,70 @@ body{
 
 #nameplate{
        @include adjust-font-size-to(60px);
 
 #nameplate{
        @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;
        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{
        a{
 }
 
 #content{
        a{
-               color: darken($foreground, 20%);
+               color: darken($page-background, 60%);;
+               border-bottom:1px solid darken($page-background, 20%);
+               @include box-shadow(0 1px 0 0 #FFF);
                text-decoration:none;
                text-decoration:none;
-               background: darken($page-background, 15%);
-               padding:3px;
-               @include border-radius(3px);
                &:hover{
                &:hover{
-                       background: desaturate(darken($page-background, 25%), 10%);
-                       text-shadow: 0 1px 0 rgba(255,255,255,.65);
-               };
+                       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;
@@ -74,6 +129,7 @@ body{
        }
        .codeblock{
                @extend code;
        }
        .codeblock{
                @extend code;
+               @include margin-trailer;
                padding: 10px;
                display:block;
                code{
                padding: 10px;
                display:block;
                code{
@@ -89,6 +145,9 @@ body{
                        color:lighten($foreground, 10%);
                }
        }
                        color:lighten($foreground, 10%);
                }
        }
+       .pname{
+               color:darken($page-background, 60%);
+       }
 }
 
 .three-up{
 }
 
 .three-up{
@@ -145,6 +204,41 @@ body{
        @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:lighten($accent, 20%);
+               }
+       }
+}
+
 #modelList{
        margin-left: 1.5em;
        li{
 #modelList{
        margin-left: 1.5em;
        li{
@@ -161,7 +255,7 @@ body{
        $width: $page-width + $pad;
        background: $foreground;
        margin:$base-line-height #{-$pad};
        $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;
@@ -194,6 +288,16 @@ body{
                font-style:italic;
                @include adjust-font-size-to(13px);
                float:right;
                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;
+               }
        }
 }
 
        }
 }
 
Foundation for web content management systems using Django.