Textual and style updates.
authorHarris Lapiroff <harris@chromamine.com>
Thu, 12 May 2011 18:44:37 +0000 (14:44 -0400)
committerHarris Lapiroff <harris@chromamine.com>
Thu, 12 May 2011 18:44:37 +0000 (14:44 -0400)
index.html
static/css/screen.css
static/scss/_var.scss
static/scss/screen.scss

index 1970cdf..c15bbe0 100644 (file)
@@ -8,7 +8,8 @@
                <script src="static/js/init.js"></script>
        </head>
        <body>
-               <div id="container">
+               <div id="fork">
+<a href="http://github.com/you"><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">
                        <header id="nameplate">
                                <h1>Philo</h1>
                        </header><!-- /#nameplate -->
                        
                                <p>Philo allows the creation of complex site structures from Django&#8217;s web-based admin interface (or any other database-editing interface). For a simple site, you will use the following three objects, included in the Philo core.</p>
                        
-                               <ul>
-                               <li><strong>Nodes</strong> are the basic building blocks of a website using Philo. They define the URL hierarchy and connect each URL to a View subclass instance which is used to generate an HttpResponse.</li>
-                               <li><strong>Templates</strong> are Django templates, stored in the database and editable from the Django admin (or similar).</li>
-                               <li><strong>Pages</strong> 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 {% container %} tags used in the template.</li>
+                               <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 which is used to generate an HttpResponse.</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>
                        
-                               <p>Philo also provides a number of useful template tags, in particular <code>{% container &lt;name&gt; %}</code>, which generates a relationship (and a field in the admin interface) on any pages which use that template.</p>
+                               <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>
                        
                                <h2>A Simple Example</h2>
                        
@@ -49,7 +50,7 @@
                        
                                <h2 id="batteries_included">Batteries Included</h2>
                        
-                               <p>Following Python and Django&#8217;s <a href="http://docs.python.org/tutorial/stdlib.html#batteries-included">&ldquo;batteries included&rdquo; philosophy</a>, Philo includes a number of optional packages that simplify common website structures. These are stored in philo.contrib and include:</p>
+                               <p>Following Python and Django&#8217;s <a href="http://docs.python.org/tutorial/stdlib.html#batteries-included">&ldquo;batteries included&rdquo; philosophy</a>, Philo includes a number of optional packages that simplify common website structures. These are stored in philo.contrib and include the following:</p>
                        
                                <ul id="contribList">
                                        <li>
index e22f95d..9b61ed9 100644 (file)
@@ -1,3 +1,4 @@
+@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,
@@ -67,11 +68,7 @@ html > body {
   font-size: 16px; }
 
 body {
-  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e0e5ef), color-stop(100%, #bec9de)) no-repeat fixed;
-  background: -webkit-linear-gradient(top, #e0e5ef, #bec9de) no-repeat fixed;
-  background: -moz-linear-gradient(top, #e0e5ef, #bec9de) no-repeat fixed;
-  background: -o-linear-gradient(top, #e0e5ef, #bec9de) no-repeat fixed;
-  background: linear-gradient(top, #e0e5ef, #bec9de) no-repeat fixed;
+  background: #e0e5ef;
   color: #333333;
   text-shadow: 0 1px 0 #FFF;
   font-family: Helvetica, Arial, serif; }
@@ -98,20 +95,38 @@ a {
   color: #333333; }
 
 #nameplate {
-  font-size: 2.5em;
+  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;
-  margin-bottom: 15px; }
+  font-family: "Expletus Sans", Helvetica, Arial, serif; }
 
 #content p, #content ul, #content ol, #content header {
   margin-bottom: 1.563em; }
 #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
   font-weight: bold;
   margin-bottom: 0.781em; }
+#content h2 {
+  font-size: 1.25em;
+  line-height: 1.25em; }
+#content code {
+  background: #bec9de;
+  padding: 3px;
+  margin: -4px 0;
+  border: 1px solid #aebbd5;
+  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;
+  -o-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 white;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 white;
+  font-family: Menlo, monospace;
+  font-size: 0.813em;
+  line-height: 1.923em; }
 
 .three-up {
   background: #333333;
@@ -130,7 +145,7 @@ a {
   overflow: hidden;
   *zoom: 1; }
   .three-up figure {
-    border: 1px solid #4d4d4d;
+    border: 1px solid #1a1a1a;
     float: left;
     width: 241.333px;
     margin-right: 10px;
@@ -147,7 +162,17 @@ a {
     -moz-transition-timing-function: linear;
     -webkit-transition-timing-function: linear;
     -o-transition-timing-function: linear;
-    transition-timing-function: linear; }
+    transition-timing-function: linear;
+    -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 rgba(255, 255, 255, 0.35);
+    -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 rgba(255, 255, 255, 0.35);
+    -o-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 rgba(255, 255, 255, 0.35);
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 0 0 rgba(255, 255, 255, 0.35);
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    -o-border-radius: 3px;
+    -ms-border-radius: 3px;
+    -khtml-border-radius: 3px;
+    border-radius: 3px; }
     .three-up figure.shrunk {
       width: 62px; }
     .three-up figure.expanded {
@@ -171,6 +196,14 @@ a {
     font-size: 0.813em;
     line-height: 1.923em; }
 
+#modelList {
+  margin-left: 1.5em; }
+  #modelList li {
+    margin-bottom: 0.781em;
+    list-style-type: disc; }
+  #modelList .name {
+    font-weight: bold; }
+
 #contribList {
   background: #333333;
   margin: 25px -10px;
@@ -191,10 +224,24 @@ a {
   color: white;
   -webkit-font-smoothing: antialiased; }
   #contribList li {
-    width: 355px;
+    width: 343px;
     float: left;
-    padding: 0 10px;
-    margin-bottom: 1.563em; }
+    margin: 0 5px 10px 5px;
+    padding: 10px;
+    background: #262626;
+    border: 1px solid #1a1a1a;
+    -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35) inset, 0 1px 0 0 rgba(255, 255, 255, 0.15);
+    -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35) inset, 0 1px 0 0 rgba(255, 255, 255, 0.15);
+    -o-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35) inset, 0 1px 0 0 rgba(255, 255, 255, 0.15);
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35) inset, 0 1px 0 0 rgba(255, 255, 255, 0.15);
+    overflow: hidden;
+    *zoom: 1;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    -o-border-radius: 3px;
+    -ms-border-radius: 3px;
+    -khtml-border-radius: 3px;
+    border-radius: 3px; }
   #contribList .name, #contribList .description, #contribList .status {
     display: block; }
   #contribList .name {
@@ -204,4 +251,5 @@ a {
   #contribList .status {
     font-style: italic;
     font-size: 0.813em;
-    line-height: 1.923em; }
+    line-height: 1.923em;
+    float: right; }
index f54d914..6e4c9e6 100644 (file)
@@ -11,6 +11,7 @@ $content-background: transparent;
 $foreground: #333;
 
 $textfonts: Helvetica, Arial, serif;
+$headingfonts: "Expletus Sans", $textfonts;
 
 /* custom mixins */
 
@@ -18,4 +19,8 @@ $textfonts: Helvetica, Arial, serif;
        color:$foreground;
        text-shadow:0 1px 0 #FFF;
        font-family: $textfonts;
+}
+
+@mixin box-inset($inset: rgba(0,0,0,.15), $outset: #FFF){
+       @include box-shadow(0 1px 2px 0  $inset inset, 0 1px 0 0 $outset);
 }
\ No newline at end of file
index 18caecd..8d2a415 100644 (file)
@@ -1,4 +1,5 @@
-@import "reset",
+@import "http://fonts.googleapis.com/css?family=Expletus+Sans",
+               "reset",
                "var",
                "compass/typography/vertical_rhythm",
                "compass/css3/images",
@@ -10,9 +11,7 @@
 @include establish-baseline;
                
 body{
-       @include background(
-               linear-gradient(top, $page-background, darken($page-background, 10%)) no-repeat fixed
-       );
+       background:$page-background;
        @include body-text;
 }
 
@@ -36,10 +35,12 @@ a{
 }
 
 #nameplate{
-       @include adjust-font-size-to(40px);
+       @include adjust-font-size-to(60px);
+       margin-bottom:25px;
+       padding-bottom:5px;
        border-bottom:5px solid $foreground;
        @include box-shadow(0 1px 0 #FFF);
-       margin-bottom:15px;
+       font-family:$headingfonts;
 }
 
 #content{
@@ -50,6 +51,19 @@ a{
                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%);
+               border-radius:3px;
+               @include box-inset;
+               font-family:Menlo, monospace;
+               @include adjust-font-size-to(13px);
+       }
 }
 
 .three-up{
@@ -63,14 +77,16 @@ a{
 
        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);
-
+               @include box-inset($outset:rgba(255,255,255,.35));
+               @include border-radius(3px);
+               
                &.shrunk{
                        width: ($width - 610px) / 2 - $pad - 3 * $border;
                }
@@ -104,6 +120,17 @@ a{
        @include clearfix;
 }
 
+#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;
@@ -118,10 +145,16 @@ a{
        -webkit-font-smoothing: antialiased;
        
        li{
-               width: $page-width/2 - $pad * 2;
+               $border: 1px;
+               width: $page-width/2 - $pad * 3 - $border * 2;
                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;
@@ -135,5 +168,6 @@ a{
        .status{
                font-style:italic;
                @include adjust-font-size-to(13px);
+               float:right;
        }
 }
\ No newline at end of file