git.ithinksw.org / philo.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (from parent 1: 78e6805)
We have a page and a design!
authorHarris Lapiroff <hlapirof@oberlin.edu>
Thu, 12 May 2011 16:13:54 +0000 (12:13 -0400)
committerHarris Lapiroff <hlapirof@oberlin.edu>
Thu, 12 May 2011 16:13:54 +0000 (12:13 -0400)
index.html patch | blob | history
static/css/screen.css patch | blob | history
static/img/container1.png [new file with mode: 0644] patch | blob
static/img/container2.png [new file with mode: 0644] patch | blob
static/img/container3.png [new file with mode: 0644] patch | blob
static/js/init.js [new file with mode: 0644] patch | blob
static/scss/_var.scss patch | blob | history
static/scss/screen.scss patch | blob | history

diff --git a/index.html b/index.html
index 6997540..1970cdf 100644 (file)
--- a/index.html
+++ b/index.html
@@ -4,6 +4,8 @@
        <head>
                <title>Philo</title>
                <link rel="stylesheet" type="text/css" href="static/css/screen.css" media="screen" />
        <head>
                <title>Philo</title>
                <link rel="stylesheet" type="text/css" href="static/css/screen.css" media="screen" />
+               <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
+               <script src="static/js/init.js"></script>
        </head>
        <body>
                <div id="container">
        </head>
        <body>
                <div id="container">
@@ -12,14 +14,82 @@
                        </header><!-- /#nameplate -->
                        
                        <div id="content">
                        </header><!-- /#nameplate -->
                        
                        <div id="content">
-                               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                               <p>Philo is a powerful content-management system built with Django.</p>
+                       
+                               <h2 id="features">Features</h2>
+                       
+                               <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>
+                       
+                               <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>
+                       
+                               <h2>A Simple Example</h2>
+                       
+                               <div class="three-up">
+                                       <figure>
+                                               <img src="static/img/container1.png" />
+                                               <figcaption>Put container tags in your template.</figcaption>
+                                       </figure>
+                                       <figure>
+                                               <img src="static/img/container2.png" />
+                                               <figcaption>Edit the contentlets on the page.</figcaption>
+                                       </figure>
+                                       <figure>
+                                               <img src="static/img/container3.png" />
+                                               <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>
+                       
+                               <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>
+                       
+                               <ul id="contribList">
+                                       <li>
+                                               <span class="name">Penfield</span>
+                                               <span class="description">Blog and newsletter management.</span>
+                                       </li>
+                                       <li>
+                                               <span class="name">Shipherd</span>
+                                               <span class="description">Powerful site-navigation.</span>
+                                       </li>
+                                       <li>
+                                               <span class="name">Sobol</span>
+                                               <span class="description">Custom search-engines.</span>
+                                       </li>
+                                       <li>
+                                               <span class="name">Waldo</span>
+                                               <span class="description">Custom authentication systems.</span>
+                                       </li>
+                                       <li>
+                                               <span class="status">(in development)</span>
+                                               <span class="name">Gilbert</span>
+                                               <span class="description">Alternative web-based admin.</span>
+                                       </li>
+                                       <li>
+                                               <span class="status">(in development)</span>
+                                               <span class="name">Julian</span>
+                                               <span class="description">Calendar and events system.</span>
+                                       </li>
+                                       <li>
+                                               <span class="status">(planned)</span>
+                                               <span class="description">Forums.</span>
+                                       </li>
+                                       <li>
+                                               <span class="status">(planned)</span>
+                                               <span class="description">Wikis.</span>
+                                       </li>
+                               </ul>
+                               
                        </div><!-- /#content -->
                        
                        </div><!-- /#content -->
                        
-                       <footer id="pagefooter">
-                               <p>Copyright &copy; 2009-2010, iThink Software.</p>
-                               <p>Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.</p>
-                               <p>THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.</p>
-                       </footer><!-- /#pagefooter -->
                </div>
        </body>
 </html>
\ No newline at end of file
                </div>
        </body>
 </html>
\ No newline at end of file
diff --git a/static/css/screen.css b/static/css/screen.css
index 6eb28d0..e22f95d 100644 (file)
--- a/static/css/screen.css
+++ b/static/css/screen.css
@@ -56,55 +56,152 @@ blockquote, q {
     content: "";
     content: none; }
 
     content: "";
     content: none; }
 
-html {
-  background: #2a486d;
-  height: 100%; }
+/* Compass Vars */
+/* Custom Vars */
+/* custom mixins */
+body {
+  font-size: 100%;
+  line-height: 1.563em; }
+
+html > body {
+  font-size: 16px; }
 
 body {
 
 body {
-  background: url('../img/bg.png?1303763277'), -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 900, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(88.889%, rgba(0, 0, 0, 0.5)), color-stop(100%, rgba(0, 0, 0, 0.9)));
-  background: url('../img/bg.png?1303763277'), -webkit-radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 800px, rgba(0, 0, 0, 0.9) 900px);
-  background: url('../img/bg.png?1303763277'), -moz-radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 800px, rgba(0, 0, 0, 0.9) 900px);
-  background: url('../img/bg.png?1303763277'), -o-radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 800px, rgba(0, 0, 0, 0.9) 900px);
-  background: url('../img/bg.png?1303763277'), radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 800px, rgba(0, 0, 0, 0.9) 900px);
-  padding: 1px;
-  margin: -1px;
-  min-height: 100%;
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 13px;
-  line-height: 15px; }
+  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;
+  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 {
 
 #container {
-  width: 920px;
-  margin: 40px auto; }
+  width: 750px;
+  margin: 20px auto;
+  background: transparent;
+  color: #333333; }
 
 #nameplate {
 
 #nameplate {
-  color: #FFF;
-  font-size: 80px;
-  line-height: 80px;
-  text-align: center;
-  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6); }
-
-#content {
-  background: white;
-  -moz-border-radius: 4px;
-  -webkit-border-radius: 4px;
-  -o-border-radius: 4px;
-  -ms-border-radius: 4px;
-  -khtml-border-radius: 4px;
-  border-radius: 4px;
-  -moz-box-shadow: rgba(0, 0, 0, 0.35) 0 0 36px, rgba(0, 0, 0, 0.1) 0 10px 10px inset;
-  -webkit-box-shadow: rgba(0, 0, 0, 0.35) 0 0 36px, rgba(0, 0, 0, 0.1) 0 10px 10px inset;
-  -o-box-shadow: rgba(0, 0, 0, 0.35) 0 0 36px, rgba(0, 0, 0, 0.1) 0 10px 10px inset;
-  box-shadow: rgba(0, 0, 0, 0.35) 0 0 36px, rgba(0, 0, 0, 0.1) 0 10px 10px inset;
-  border: 1px solid white;
-  padding: 19px;
-  margin-top: 20px; }
-
-#pagefooter {
-  font-size: 12px;
-  color: #8faed4;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
-  width: 600px;
-  margin: 20px auto; }
-  #pagefooter p {
-    margin-bottom: 15px; }
+  font-size: 2.5em;
+  line-height: 1.25em;
+  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; }
+
+#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; }
+
+.three-up {
+  background: #333333;
+  margin: 25px -10px;
+  padding: 10px;
+  -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 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
+  -webkit-box-shadow: 0 1px 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
+  -o-box-shadow: 0 1px 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
+  box-shadow: 0 1px 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
+  overflow: hidden;
+  *zoom: 1; }
+  .three-up figure {
+    border: 1px solid #4d4d4d;
+    float: left;
+    width: 241.333px;
+    margin-right: 10px;
+    overflow: hidden;
+    position: relative;
+    -moz-transition-property: width;
+    -webkit-transition-property: width;
+    -o-transition-property: width;
+    transition-property: width;
+    -moz-transition-duration: 0.25s;
+    -webkit-transition-duration: 0.25s;
+    -o-transition-duration: 0.25s;
+    transition-duration: 0.25s;
+    -moz-transition-timing-function: linear;
+    -webkit-transition-timing-function: linear;
+    -o-transition-timing-function: linear;
+    transition-timing-function: linear; }
+    .three-up figure.shrunk {
+      width: 62px; }
+    .three-up figure.expanded {
+      width: 600px; }
+    .three-up figure:last-child {
+      margin-right: 0;
+      float: right;
+      /* keeps the right margin from wiggling */ }
+    .three-up figure img {
+      display: block; }
+  .three-up figcaption {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(0, 0, 0, 0.75);
+    text-shadow: 1px 1px 0 #000;
+    padding: 0 5px;
+    color: #FFF;
+    width: 600px;
+    font-size: 0.813em;
+    line-height: 1.923em; }
+
+#contribList {
+  background: #333333;
+  margin: 25px -10px;
+  padding: 20px 10px;
+  -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 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
+  -webkit-box-shadow: 0 1px 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
+  -o-box-shadow: 0 1px 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
+  box-shadow: 0 1px 0 0 white, 0 2px 4px rgba(0, 0, 0, 0.35) inset;
+  overflow: hidden;
+  *zoom: 1;
+  text-shadow: none;
+  color: white;
+  -webkit-font-smoothing: antialiased; }
+  #contribList li {
+    width: 355px;
+    float: left;
+    padding: 0 10px;
+    margin-bottom: 1.563em; }
+  #contribList .name, #contribList .description, #contribList .status {
+    display: block; }
+  #contribList .name {
+    font-weight: bold; }
+  #contribList .description {
+    color: #999999; }
+  #contribList .status {
+    font-style: italic;
+    font-size: 0.813em;
+    line-height: 1.923em; }
diff --git a/static/img/container1.png b/static/img/container1.png
new file mode 100644 (file)
index 0000000..163f9ca
Binary files /dev/null and b/static/img/container1.png differ
diff --git a/static/img/container2.png b/static/img/container2.png
new file mode 100644 (file)
index 0000000..a9fc218
Binary files /dev/null and b/static/img/container2.png differ
diff --git a/static/img/container3.png b/static/img/container3.png
new file mode 100644 (file)
index 0000000..7ea2fc9
Binary files /dev/null and b/static/img/container3.png differ
diff --git a/static/js/init.js b/static/js/init.js
new file mode 100644 (file)
index 0000000..29ccd41
--- /dev/null
+++ b/static/js/init.js
@@ -0,0 +1,18 @@
+var philo_site = {
+       three_up: {
+               init: function(){
+                       $('.three-up figure').hover(philo_site.three_up.activate, philo_site.three_up.deactivate);
+               },
+               activate: function(){
+                       var $this = $(this);
+                       $this.addClass('expanded');
+                       $this.parent().children().not($this).addClass('shrunk');
+               },
+               deactivate: function(){
+                       var $this = $(this);
+                       $this.parent().children().removeClass('expanded').removeClass('shrunk');
+               }
+       }
+}
+
+$(philo_site.three_up.init);
\ No newline at end of file
diff --git a/static/scss/_var.scss b/static/scss/_var.scss
index c12069c..f54d914 100644 (file)
--- a/static/scss/_var.scss
+++ b/static/scss/_var.scss
@@ -1,8 +1,21 @@
-$bgcolor: #2A486D;
-$bgcolor1: adjust-hue(lighten($bgcolor, 20%), 20deg);
-$bgcolor2: darken($bgcolor, 20%);
-$contentwidth: 900px;
-$contentpadding: 19px;
-$contentborderwidth: 1px;
-$containerwidth: $contentwidth+$contentpadding+$contentborderwidth;
-$contentbg: #FFF;
\ No newline at end of file
+/* Compass Vars */
+
+$base-font-size: 16px;
+$base-line-height: 25px;
+
+
+/* Custom Vars */
+$page-width: 750px;
+$page-background: #E0E5EF;
+$content-background: transparent;
+$foreground: #333;
+
+$textfonts: Helvetica, Arial, serif;
+
+/* custom mixins */
+
+@mixin body-text{
+       color:$foreground;
+       text-shadow:0 1px 0 #FFF;
+       font-family: $textfonts;
+}
\ No newline at end of file
diff --git a/static/scss/screen.scss b/static/scss/screen.scss
index bfabe3d..18caecd 100644 (file)
--- a/static/scss/screen.scss
+++ b/static/scss/screen.scss
@@ -1,56 +1,139 @@
 @import "reset",
                "var",
 @import "reset",
                "var",
+               "compass/typography/vertical_rhythm",
                "compass/css3/images",
                "compass/css3/border-radius",
                "compass/css3/images",
                "compass/css3/border-radius",
-               "compass/css3/box-shadow";
+               "compass/css3/box-shadow",
+               "compass/css3/transition",
+               "compass/utilities/general/clearfix";
+               
+@include establish-baseline;
                
                
-html{
-       background: $bgcolor;
-       height:100%;
-}
-
 body{
        @include background(
 body{
        @include background(
-               image-url("bg.png"),
-               radial-gradient(rgba(0,0,0,0), rgba(0,0,0,.5) 800px, rgba(0,0,0,.9) 900px)
+               linear-gradient(top, $page-background, darken($page-background, 10%)) no-repeat fixed
        );
        );
-       padding:1px;
-       margin:-1px;
-       min-height:100%;
-       font-family:Helvetica, Arial, sans-serif;
-       font-size:13px;
-       line-height:15px;
+       @include body-text;
+}
+
+a{
+       color: darken($foreground, 20%);
+       text-decoration:none;
+       background: darken($page-background, 15%);
+       padding:3px;
+       @include border-radius(3px);
+       &:hover{
+               background: desaturate(darken($page-background, 25%), 10%);
+               text-shadow: 0 1px 0 rgba(255,255,255,.65);
+       };
 }
 
 #container{
 }
 
 #container{
-       width: $containerwidth;
-       margin:40px auto;
+       width: $page-width;
+       margin:20px auto;
+       background: $content-background;
+       color: $foreground;
 }
 
 #nameplate{
 }
 
 #nameplate{
-       color:#FFF;
-       font-size:80px;
-       line-height:80px;
-       text-align:center;
-       text-shadow:1px 1px 0 rgba(0,0,0,.6);
+       @include adjust-font-size-to(40px);
+       border-bottom:5px solid $foreground;
+       @include box-shadow(0 1px 0 #FFF);
+       margin-bottom:15px;
 }
 
 #content{
 }
 
 #content{
-       background:$contentbg;
-       @include border-radius(4px);
-       @include box-shadow(rgba(0,0,0,.35) 0 0 36px, rgba(0,0,0,.1) 0 10px 10px inset);
-       border:$contentborderwidth solid $contentbg;
-       padding:$contentpadding;
-       margin-top:20px;
+       p, ul, ol, header{
+               @include margin-trailer;
+       }
+       h1, h2, h3, h4, h5, h6{
+               font-weight:bold;
+               @include margin-trailer(.5);
+       }
 }
 
 }
 
-#pagefooter{
-       font-size:12px;
-       color: lighten($bgcolor, 40%);
-       text-shadow:0 -1px 0 rgba(0,0,0,.5);
-       width:600px;
-       margin:20px auto;
-       p{
-               margin-bottom:15px;
+.three-up{
+       $pad: 10px;
+       $width: $page-width + $pad;
+       background: $foreground;
+       margin:$base-line-height #{-$pad};
+       padding:$pad;
+       @include border-radius(5px);
+       @include box-shadow(0 1px 0 0 #FFF, 0 2px 4px rgba(0,0,0,.35) inset);
+
+       figure{
+               $border: 1px;
+               border:$border solid lighten($foreground, 10%);
+               float:left;
+               width: ($width / 3) - $pad - 2 * $border;
+               margin-right: $pad;
+               overflow:hidden;
+               position:relative;
+               @include transition(width, .25s, linear);
+
+               &.shrunk{
+                       width: ($width - 610px) / 2 - $pad - 3 * $border;
+               }
+               &.expanded{
+                       width:600px;
+               }
+               
+               &:last-child{
+                       margin-right: 0;
+                       float:right; /* keeps the right margin from wiggling */
+               }
+
+               img{
+                       display:block;
+               }
+       }
+       
+       figcaption{
+               position:absolute;
+               bottom:0;
+               left:0;
+               right:0;
+               background: rgba(0,0,0,.75);
+               text-shadow:1px 1px 0 #000;
+               padding:0 5px;
+               color:#FFF;
+               width:600px;
+               @include adjust-font-size-to(13px);
+       }
+       
+       @include clearfix;
+}
+
+#contribList{
+       $pad: 10px;
+       $width: $page-width + $pad;
+       background: $foreground;
+       margin:$base-line-height #{-$pad};
+       padding:#{2*$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;
+       text-shadow:none;
+       color:lighten($foreground, 80%);
+       -webkit-font-smoothing: antialiased;
+       
+       li{
+               width: $page-width/2 - $pad * 2;
+               float:left;
+               padding: 0 $pad;
+               @include margin-trailer;
+       }
+       .name, .description, .status{
+               display:block;
+       }
+       .name{
+               font-weight:bold;
+       }
+       .description{
+               color:lighten($foreground, 40%);
+       }
+       .status{
+               font-style:italic;
+               @include adjust-font-size-to(13px);
        }
 }
\ No newline at end of file
        }
 }
\ No newline at end of file
Foundation for web content management systems using Django.