[snowy] Make a few style tweaks.



commit 0b0b86ba8d6b664ee50875417238e24d28c9dd22
Author: Brad Taylor <brad getcoded net>
Date:   Fri Apr 24 09:49:54 2009 -0400

    Make a few style tweaks.
    
    Use a table for the main layout to avoid float quirks and theme the input entry
    rather than doing div hackery.
---
 notes/templates/notes/base.html        |    4 ++
 notes/templates/notes/note_detail.html |    8 +++--
 site_media/css/screen.css              |   62 +++++++++++++++++++++----------
 templates/base.html                    |   23 +++++++-----
 4 files changed, 64 insertions(+), 33 deletions(-)

diff --git a/notes/templates/notes/base.html b/notes/templates/notes/base.html
index c801515..d9047f6 100644
--- a/notes/templates/notes/base.html
+++ b/notes/templates/notes/base.html
@@ -1 +1,5 @@
 {% extends "site_base.html" %}
+
+{% block sidebar %}
+<input type="text" id="search" name="search" accesskey="s">
+{% endblock %}
diff --git a/notes/templates/notes/note_detail.html b/notes/templates/notes/note_detail.html
index 35b1833..f79296b 100644
--- a/notes/templates/notes/note_detail.html
+++ b/notes/templates/notes/note_detail.html
@@ -2,9 +2,11 @@
 
 {% block title %}{{ object.title }} | Notes | {{ block.super }}{% endblock %}
 
-{% block body %}
+{% block sidebar %}
+{{ block.super }}
+{% endblock %}
 
-<h3>{{ object.title }}</h3>
+{% block content %}
+<h2>{{ object.title }}</h2>
 <p>{{ object.body }}</p>
-
 {% endblock %}
diff --git a/site_media/css/screen.css b/site_media/css/screen.css
index a6aa4b4..1c708fb 100644
--- a/site_media/css/screen.css
+++ b/site_media/css/screen.css
@@ -13,6 +13,11 @@ a, a:link, a:hover, a:active, a:visited {
     text-decoration: underline;
 }
 
+h2 {
+    color: #d3643b;
+    font-family: Trebuchet MS, Calibri, Verdana, Arial, sans-serif;
+}
+
 .clear {
     clear: both;
 }
@@ -27,9 +32,17 @@ a, a:link, a:hover, a:active, a:visited {
 
 #header-auth {
     float: right;
-    margin: 1em 1em 0 0;
+    margin: 0.5em 1em 0 0;
     text-align: right;
     vertical-align: middle;
+
+    font-family: Trebuchet MS, Calibri, Verdana, Arial, sans-serif;
+    whitespace: nowrap;
+}
+
+#header-auth p, #header-auth h3 {
+    margin: 0;
+    padding: 0;
 }
 
 #header-avatar {
@@ -41,30 +54,23 @@ a, a:link, a:hover, a:active, a:visited {
     border: 2px solid #FFFFFF;
 }
 
-#header-auth p, #header-auth h3 {
-    margin: 0;
-    padding: 0;
-}
-
-#header-auth p {
-    padding-top: .25em;
-}
-
-#content-container {
-    margin: 20px;
+table#container {
+    padding: 20px;
+    width: 100%;
+    border: 0;
 }
 
-#sidebar {
+#sidebar-container {
     width: 20%;
     min-width: 250px;
     max-width: 500px;
+    
+    margin: 0;
+}
 
+#sidebar {
     margin-top: 20px;
-
-    float: left;
-
     background-color: #403b33;
-    
     font-family: Trebuchet MS, Calibri, Verdana, Arial, sans-serif;
 }
 
@@ -73,6 +79,17 @@ a, a:link, a:hover, a:active, a:visited {
     text-transform: uppercase;
 }
 
+#sidebar input#search {
+    width: 250px;
+    margin: 4px;
+    padding: 4px 4px 4px 35px;
+    
+    border: 1px solid #bababa;
+    background: #73685d url('/site_media/img/search.png') center left no-repeat;
+    
+    color: #FFFFFF;
+}
+
 #sidebar .selected {
     background-color: #d6e1c7;
     color: #545247
@@ -95,12 +112,17 @@ a, a:link, a:hover, a:active, a:visited {
     color: #b8dee3;
 }
 
-#content {
+#content-container {
     width: 80%;
+    margin: 0;
+}
 
-    float: left;
+#content {
     background-color: #edece6;
-    
+}
+
+#content h2, #content p {
+    padding-left: 6px;
 }
 
 #footer {
diff --git a/templates/base.html b/templates/base.html
index 84a340b..ba8dc55 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -16,7 +16,7 @@
         </div>
         <div id="header-avatar">
 {% if user.is_authenticated %}
-            <img src="{{ MEDIA_URL }}img/blank-avatar.png" width="73" height="73" alt="Your Avatar"/>
+            <img src="{{ MEDIA_URL }}img/blank-avatar.png" width="48" height="48" alt="Your Avatar"/>
 {% endif %}
         </div>
         <div id="header-auth">
@@ -31,19 +31,22 @@
         <div class="clear"></div>
         </div>
     </div>
-    <div id="content-container">
-        <div id="sidebar">
-<br><br>
+    <table id="container">
+        <tr>
+            <td id="sidebar-container">
+                <div id="sidebar">
 {% block sidebar %}
 {% endblock %}
-        </div>
-        <div id="content">
-<br><br>
-<br><br>
+                </div>
+            </td>
+            <td id="content-container">
+                <div id="content">
 {% block content %}
 {% endblock %}
-        </div>
-        <div class="clear"></div>
+                </div>
+            </td>
+        </tr>
+    </table>
     </div>
 
     <div id="footer">



[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]