changeset 116:24263cb45e27

Bootstrap: tweaking to use our color scheme. This is not finished yet by far. But good enough to checkpoint.
author Brian Neal <bgneal@gmail.com>
date Tue, 22 Oct 2013 21:01:55 -0500
parents 44a635748fb9
children 68f621d26aed
files madeira/templates/base.html madeira/templates/index.html static/css/theme.css
diffstat 3 files changed, 72 insertions(+), 3 deletions(-) [+]
line wrap: on
line diff
--- a/madeira/templates/base.html	Sun Oct 20 17:35:39 2013 -0500
+++ b/madeira/templates/base.html	Tue Oct 22 21:01:55 2013 -0500
@@ -18,7 +18,7 @@
 {% block navblock %}{% endblock %}
 <header>
    <div class="container">
-      <img src="{{ STATIC_URL }}images/header-logo.jpg" class="img-responsive" alt="Madeira Logo" />
+      <img src="{{ STATIC_URL }}images/header-logo.jpg" class="img-responsive img-rounded" alt="Madeira Logo" />
    </div>
 </header>
 
--- a/madeira/templates/index.html	Sun Oct 20 17:35:39 2013 -0500
+++ b/madeira/templates/index.html	Tue Oct 22 21:01:55 2013 -0500
@@ -9,7 +9,8 @@
 {% block content %}
 <h1>The Madeira</h1>
 <div class="media">
-   <img class="pull-left media-object" src="/media/photologue/photos/2008/Apr/20/band2008.jpg" 
+   <img class="pull-left media-object img-responsive img-rounded"
+      src="/media/photologue/photos/2008/Apr/20/band2008.jpg"
       alt="The Madeira 2008" title="The Madeira 2008" />
    <div class="media-body">
    <p class="lead">The Madeira plays surf music born of screaming wind over the sand dunes of the Sahara Desert, deafening echoes of waves pounding the Gibraltar Rock, joyous late-night gypsy dances in the small towns of Andalucia, and exotic cacophony of the Marrakesh town square. It is the surf music of the millennia-old Mediterranean mysteries.</p>
@@ -28,7 +29,8 @@
 <div class="row">
    <div class="col-md-3">
       <a href="/buy/">
-      <img src="/media/photologue/photos/tribal_fires_cover_200_1.jpg" alt="Tribal Fires" title="Tribal Fires" />
+         <img src="/media/photologue/photos/tribal_fires_cover_200_1.jpg" alt="Tribal Fires" title="Tribal Fires"
+            class="img-responsive img-rounded" />
       </a>
    </div>
    <div class="col-md-5">
--- a/static/css/theme.css	Sun Oct 20 17:35:39 2013 -0500
+++ b/static/css/theme.css	Tue Oct 22 21:01:55 2013 -0500
@@ -1,6 +1,10 @@
 body { 
    padding-top: 50px;
    padding-bottom: 20px;
+   /* background-color: #213442;
+   color: #EF7D21; */
+   background-color: #213442;
+   color: #EF7C21;
 }
 .img-flyer {
    margin: 0 auto;
@@ -24,3 +28,66 @@
    margin-top: 1.5em;
    margin-bottom: 1.5em;
 }
+
+blockquote {
+  border-left: 5px solid #6e2d1b;
+  border-left: 5px solid #b96a03;
+  border-left: 5px solid #8f8a6d;
+  border-left: 5px solid #41819d;
+  border-left: 3px solid #b96a03;
+}
+blockquote small {
+  color: #b96a03;
+}
+
+.thumbnail {
+  background-color: #213442;
+  border: 1px solid #41819d;
+}
+.thumbnail .caption {
+  color: #EF7C21;
+}
+a.thumbnail:hover,
+a.thumbnail:focus {
+  border-color: #EF7C21;
+}
+
+.form-control:focus {
+  border-color: #EF7C21;
+}
+
+
+/**
+296b9d
+3e819c
+41819d
+213442
+**/
+
+.navbar-inverse {
+  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#296b9d), to(#213442));
+  background-image: -webkit-linear-gradient(top, #296b9d, 0%, #213442, 100%);
+  background-image: -moz-linear-gradient(top, #296b9d 0%, #213442 100%);
+  background-image: linear-gradient(to bottom, #296b9d 0%, #213442 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff296b9d', endColorstr='#ff213442', GradientType=0);
+}
+.navbar .navbar-nav > .active > a {
+  background-color: #f8f8f8;
+  background-color: #ff0000;
+}
+.navbar-inverse .navbar-nav > .active > a {  /* bkground of selected menu */
+  background-color: #296b9d;
+}
+
+.well {
+  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#296b9d), to(#6c9a97));
+  background-image: -webkit-linear-gradient(top, #296b9d, 0%, #6c9a97, 100%);
+  background-image: -moz-linear-gradient(top, #296b9d 0%, #6c9a97 100%);
+  background-image: linear-gradient(to bottom, #296b9d 0%, #6c9a97 100%);
+  background-repeat: repeat-x;
+  border-color: #dcdcdc;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff296b9d', endColorstr='#ff6c9a97', GradientType=0);
+  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
+          box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
+}