<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’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 <name> %}</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>
<h2 id="batteries_included">Batteries Included</h2>
- <p>Following Python and Django’s <a href="http://docs.python.org/tutorial/stdlib.html#batteries-included">“batteries included” 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’s <a href="http://docs.python.org/tutorial/stdlib.html#batteries-included">“batteries included” 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>
+@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,
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; }
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;
overflow: hidden;
*zoom: 1; }
.three-up figure {
- border: 1px solid #4d4d4d;
+ border: 1px solid #1a1a1a;
float: left;
width: 241.333px;
margin-right: 10px;
-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 {
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;
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 {
#contribList .status {
font-style: italic;
font-size: 0.813em;
- line-height: 1.923em; }
+ line-height: 1.923em;
+ float: right; }
-@import "reset",
+@import "http://fonts.googleapis.com/css?family=Expletus+Sans",
+ "reset",
"var",
"compass/typography/vertical_rhythm",
"compass/css3/images",
@include establish-baseline;
body{
- @include background(
- linear-gradient(top, $page-background, darken($page-background, 10%)) no-repeat fixed
- );
+ background:$page-background;
@include body-text;
}
}
#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{
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{
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;
}
@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;
-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;
.status{
font-style:italic;
@include adjust-font-size-to(13px);
+ float:right;
}
}
\ No newline at end of file