Philo

@@ -20,13 +21,13 @@

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.

Nodes 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.
Templates are Django templates, stored in the database and editable from the Django admin (or similar).
Pages 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.

Nodes 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.
Templates are Django templates, stored in the database and editable from the Django admin (or similar).
Pages 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.

Philo also provides a number of useful template tags, in particular {% container <name> %}, which generates a relationship (and a field in the admin interface) on any pages which use that template.

Philo also provides a number of useful template tags, in particular {% container %}, which generates a relationship (and a field in the admin interface) on any pages which use that template.

A Simple Example

Batteries Included

Following Python and Django’s “batteries included” philosophy, Philo includes a number of optional packages that simplify common website structures. These are stored in philo.contrib and include:

diff --git a/static/css/screen.css b/static/css/screen.css index e22f95d..9b61ed9 100644 --- a/static/css/screen.css +++ b/static/css/screen.css @@ -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; } diff --git a/static/scss/_var.scss b/static/scss/_var.scss index f54d914..6e4c9e6 100644 --- a/static/scss/_var.scss +++ b/static/scss/_var.scss @@ -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 diff --git a/static/scss/screen.scss b/static/scss/screen.scss index 18caecd..8d2a415 100644 --- a/static/scss/screen.scss +++ b/static/scss/screen.scss @@ -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