Commits

Owen Nelson committed 3559cdc

messing with blueprint

Comments (0)

Files changed (5)

trawler/sass/partials/_base.scss

 // Use this to calculate the width based on the total width.
 // Or you can set $blueprint-grid-width to a fixed value and unset $blueprint-container-size -- it will be calculated for you.
 $blueprint-grid-width: ($blueprint-container-size + $blueprint-grid-margin) / $blueprint-grid-columns - $blueprint-grid-margin;
+
+$font-color: #cdc;
+$blueprint-background-color: #232323;

trawler/sass/partials/_two_col.scss

 // The markup would look like:
 //    <div id="container">
 //      <div id="header"></div>
+//      <div id="content"></div>
 //      <div id="sidebar"></div>
-//      <div id="content"></div>
 //      <div id="footer"></div>
 //    </div>
-//
-// and the layout would look like:
-//    +------------------------+
-//    |        #header         |
-//    +--------+---------------+
-//    |        |               |
-//    |#sidebar|    #content   |
-//    |        |               |
-//    +------------------------+
-//    |        #footer         |
-//    +--------+---------------+
 
 body.two-col {
   #container {
     @include container; }
-  #header, #footer {
+  
+  header, footer {
     @include column($blueprint-grid-columns); }
-  #sidebar {
-    // One third of the grid columns, rounding down. With 24 cols, this is 8.
-    $sidebar-columns: floor($blueprint-grid-columns / 3);
-    @include column($sidebar-columns); }
+
   #content {
     // Two thirds of the grid columns, rounding up.
     // With 24 cols, this is 16.
     $content-columns: ceil(2 * $blueprint-grid-columns / 3);
     // true means it's the last column in the row
-    @include column($content-columns, true); } }
+    @include column($content-columns); }
+
+  #sidebar {
+    // One third of the grid columns, rounding down. With 24 cols, this is 8.
+    $sidebar-columns: floor($blueprint-grid-columns / 3);
+    @include column($sidebar-columns, true); }
+}

trawler/sass/screen.scss

 @import "partials/page";
 @import "partials/form";
 @import "partials/two_col";
+
+body.bp {
+    background-color: $blueprint-background-color;
+}

trawler/static/trawler/css/screen.css

 body.bp {
   line-height: 1.5;
   font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
-  color: #333333;
+  color: #ccddcc;
   font-size: 75%;
 }
 /* line 51, ../../../../../../.virtualenvs/trawl/gems/gems/compass-0.11.4/frameworks/blueprint/stylesheets/blueprint/_typography.scss */
 body.bp h1, body.bp h2, body.bp h3, body.bp h4, body.bp h5, body.bp h6 {
   font-weight: normal;
-  color: #222222;
+  color: #b8cfb8;
 }
 /* line 52, ../../../../../../.virtualenvs/trawl/gems/gems/compass-0.11.4/frameworks/blueprint/stylesheets/blueprint/_typography.scss */
 body.bp h1 img, body.bp h2 img, body.bp h3 img, body.bp h4 img, body.bp h5 img, body.bp h6 img {
 }
 /* line 87, ../../../../../../.virtualenvs/trawl/gems/gems/compass-0.11.4/frameworks/blueprint/stylesheets/blueprint/_typography.scss */
 body.bp caption {
-  background: #eeeeee;
+  background: #232323;
 }
 /* line 88, ../../../../../../.virtualenvs/trawl/gems/gems/compass-0.11.4/frameworks/blueprint/stylesheets/blueprint/_typography.scss */
 body.bp .quiet {
-  color: #666666;
+  color: white;
 }
 /* line 89, ../../../../../../.virtualenvs/trawl/gems/gems/compass-0.11.4/frameworks/blueprint/stylesheets/blueprint/_typography.scss */
 body.bp .loud {
-  color: #111111;
+  color: #a3c2a3;
 }
 /* line 9, ../../../../../../.virtualenvs/trawl/gems/gems/compass-0.11.4/frameworks/blueprint/stylesheets/blueprint/_utilities.scss */
 body.bp .clear {
   height: 250px;
 }
 
-/* line 25, ../../../sass/partials/_two_col.scss */
+/* line 14, ../../../sass/partials/_two_col.scss */
 body.two-col #container {
   width: 950px;
   margin: 0 auto;
   overflow: hidden;
   *zoom: 1;
 }
-/* line 27, ../../../sass/partials/_two_col.scss */
-body.two-col #header, body.two-col #footer {
+/* line 17, ../../../sass/partials/_two_col.scss */
+body.two-col header, body.two-col footer {
   display: inline;
   float: left;
   margin-right: 10px;
   width: 950px;
 }
 /* line 147, ../../../../../../.virtualenvs/trawl/gems/gems/compass-0.11.4/frameworks/blueprint/stylesheets/blueprint/_grid.scss */
-* html body.two-col #header, * html body.two-col #footer {
+* html body.two-col header, * html body.two-col footer {
   overflow-x: hidden;
 }
-/* line 29, ../../../sass/partials/_two_col.scss */
+/* line 20, ../../../sass/partials/_two_col.scss */
+body.two-col #content {
+  display: inline;
+  float: left;
+  margin-right: 10px;
+  width: 630px;
+}
+/* line 147, ../../../../../../.virtualenvs/trawl/gems/gems/compass-0.11.4/frameworks/blueprint/stylesheets/blueprint/_grid.scss */
+* html body.two-col #content {
+  overflow-x: hidden;
+}
+/* line 27, ../../../sass/partials/_two_col.scss */
 body.two-col #sidebar {
   display: inline;
   float: left;
-  margin-right: 10px;
+  margin-right: 0;
   width: 310px;
 }
 /* line 147, ../../../../../../.virtualenvs/trawl/gems/gems/compass-0.11.4/frameworks/blueprint/stylesheets/blueprint/_grid.scss */
 * html body.two-col #sidebar {
   overflow-x: hidden;
 }
-/* line 33, ../../../sass/partials/_two_col.scss */
-body.two-col #content {
-  display: inline;
-  float: left;
-  margin-right: 0;
-  width: 630px;
+
+/* line 15, ../../../sass/screen.scss */
+body.bp {
+  background-color: #232323;
 }
-/* line 147, ../../../../../../.virtualenvs/trawl/gems/gems/compass-0.11.4/frameworks/blueprint/stylesheets/blueprint/_grid.scss */
-* html body.two-col #content {
-  overflow-x: hidden;
-}

trawler/templates/base.html

 <html>
 
 <head>
-  <title>{% block title %}{% endblock title %}</title>
+  <title>{% block title %}{{ title }}{% endblock title %}</title>
 
   <link href="{{ STATIC_URL }}trawler/css/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
   <!--
   <!-- Adding "maximum-scale=1" fixes the Mobile Safari auto-zoom bug: http://filamentgroup.com/examples/iosScaleBug/ -->
 </head>
 
-<body class="bp">
-  <div class="wrap">
-  {%  block content %}
-  {% endblock content %}
-  </div>
+<body class="bp two-col">
+    <div id="container">
+        <header>
+            <h1>Trawler</h1>
+        </header>
+        <article id="content">
+        {%  block content %}
+        {% endblock content %}
+        </article>
+        <aside id="sidebar">
+            <ul>
+                <li>asdasfas</li>
+                <li>asdasfas</li>
+                <li>asdasfas</li>
+                <li>asdasfas</li>
+            </ul>
+        </aside>
+        <footer>
+            <h4>footer</h4>
+        </footer>
+
+    </div>
 </body>
 
 </html>