changeset 100:e221c38edf40

First steps with new Bootstrap 3.0 theme.
author Brian Neal <bgneal@gmail.com>
date Tue, 15 Oct 2013 21:35:48 -0500
parents 55ceb9824443
children 0a8942306b04
files madeira/templates/base.html
diffstat 1 files changed, 76 insertions(+), 37 deletions(-) [+]
line wrap: on
line diff
--- a/madeira/templates/base.html	Sun Oct 06 13:42:41 2013 -0500
+++ b/madeira/templates/base.html	Tue Oct 15 21:35:48 2013 -0500
@@ -2,58 +2,97 @@
 <html lang="en">
 <head><title>{% block title %}{% endblock %}</title>
 <meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="robots" content="all" />
 <meta name="Author" content="Brian Neal" />
 <meta name="keywords" lang="en-us" content="instrumental surf, surf, guitar, musician, instro, surf music, Dick Dale, Atlantics, Surf Coasters, Fender, Strat, Stratocaster, Destination Earth, Destination: Earth!,Space Cossacks, Troubadours, reverb" />
 <meta name="description" lang="en-us" content="Home page for the instrumental surf band The Madeira. The Madeira combine high energy performances reminiscent of The Atlantics and Dick Dale with exotic melodies and an unusually high level of musicianship. This page contains show dates, photos, videos, and news about the band." />
-<link rel="stylesheet" href="{{ STATIC_URL }}css/blueprint/screen.css" media="screen, projection" />
-<link rel="stylesheet" href="{{ STATIC_URL }}css/blueprint/print.css" media="print" />
-<!--[if lt IE 8]>
-<link rel="stylesheet" href="{{ STATIC_URL }}css/blueprint/ie.css" media="screen, projection" />
-<![endif]-->
-<link rel="stylesheet" href="{{ STATIC_URL }}css/theme.css" />
-{% block custom_css %}{% endblock %}
-{% block custom_js %}{% endblock %}
+
+<link href="{{ STATIC_URL }}bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
+<link href="{{ STATIC_URL }}bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
+{# block custom_css %}{% endblock #}
 <link rel="shortcut icon" href="{{ STATIC_URL }}images/favicon.ico" />
 </head>
 <body>
-<div class="container">
 
-<div id="header" class="span-24 last">
-   <img src="{{ STATIC_URL }}images/header-logo.jpg" alt="Madeira Logo" />
+<div class="navbar navbar-inverse navbar-fixed-top">
+   <div class="container">
+      <div class="navbar-header">
+         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+         </button>
+         <a class="navbar-brand" href="{% url 'home' %}">The Madeira</a>
+      </div>
+      <div class="navbar-collapse collapse">
+         <ul class="nav navbar-nav">
+            <li class="dropdown">
+               <a href="#" class="dropdown-toggle" data-toggle="dropdown">Updates <b class="caret"></b></a>
+               <ul class="dropdown-menu">
+                  <li><a href="{% url 'news-index' %}">News</a></li>
+                  <li><a href="{% url 'articles-index' %}">Press</a></li>
+               </ul>
+            </li>
+            <li class="dropdown">
+               <a href="#" class="dropdown-toggle" data-toggle="dropdown">Shows <b class="caret"></b></a>
+               <ul class="dropdown-menu">
+                  <li><a href="{% url 'gigs-index' %}">Shows</a></li>
+                  <li><a href="{% url 'gigs-flyers' %}">Flyers</a></li>
+               </ul>
+            </li>
+            <li><a href="{% url 'band-bio' %}">Bio</a></li>
+            <li class="dropdown">
+               <a href="#" class="dropdown-toggle" data-toggle="dropdown">Media <b class="caret"></b></a>
+               <ul class="dropdown-menu">
+                  <li><a href="{% url 'band-photo_index' %}">Photos</a></li>
+                  <li><a href="{% url 'mp3-index' %}">Songs</a></li>
+                  <li><a href="{% url 'videos-index' %}">Videos</a></li>
+               </ul>
+            </li>
+            <li><a href="{% url 'band-buy' %}">Buy</a></li>
+            <li class="dropdown">
+               <a href="#" class="dropdown-toggle" data-toggle="dropdown">Contact <b class="caret"></b></a>
+               <ul class="dropdown-menu">
+                  <li><a href="{% url 'band-contact' %}">Email</a></li>
+                  <li><a href="{% url 'email_list-main' %}">Mailing List</a></li>
+               </ul>
+            </li>
+            <li class="dropdown">
+               <a href="#" class="dropdown-toggle" data-toggle="dropdown">Social <b class="caret"></b></a>
+               <ul class="dropdown-menu">
+                  <li><a href="http://facebook.com/themadeira">Facebook</a></li>
+                  <li><a href="http://www.youtube.com/user/TheMadeiraSurf">YouTube</a></li>
+               </ul>
+            </li>
+         </ul>
+      </div>
+   </div>
 </div>
 
-<div id="navleft" class="span-4 append-1">
-   <ul>
-      <li><a href="{% url 'home' %}">Home</a></li>
-      <li><a href="{% url 'news-index' %}">News</a></li>
-      <li><a href="{% url 'band.views.bio' %}">Biography</a></li>
-      <li><a href="{% url 'gigs-index' %}">Shows</a></li>
-      <li><a href="{% url 'articles-index' %}">Press</a></li>
-      <li><a href="{% url 'mp3-index' %}">Songs</a></li>
-      <li><a href="{% url 'band.views.photos_index' %}">Photos</a></li>
-      <li><a href="{% url 'videos-index' %}">Videos</a></li>
-      <li><a href="{% url 'gigs-flyers' %}">Flyers</a></li>
-      <li><a href="{% url 'band.views.buy' %}">Buy</a></li>
-      <li><a href="{% url 'band.views.contact' %}">Contact</a></li>
-      <li><a href="{% url 'email_list-main' %}">Mailing List</a></li>
-      <li><a href="http://facebook.com/themadeira">Facebook</a></li>
-      <li><a href="http://www.youtube.com/user/TheMadeiraSurf">YouTube</a></li>
-   </ul>
+<div class="jumbotron">
+   <div class="container">
+      <img src="{{ STATIC_URL }}images/header-logo.jpg" class="img-responsive" alt="Madeira Logo" />
+   </div>
 </div>
 
-<div id="xxx-content" class="span-19 last">
+<div class="container">
    {% block content %}
    {% endblock %}
+
+   <hr>
+   <footer class="well well-lg">
+   <p class="text-right">
+      <small>© 2008 - 2013 by The Madeira <br />
+      Visit The Madeira on
+      <a href="http://facebook.com/themadeira">Facebook</a> and
+      <a href="http://www.youtube.com/user/TheMadeiraSurf">YouTube</a></small>
+   </p>
+   </footer>
 </div>
 
-<div id="footer" class="span-24 last">
-Website &copy; 2008 - 2013 by The Madeira <br />
-Visit The Madeira on
-<a href="http://facebook.com/themadeira">Facebook</a> and
-<a href="http://www.youtube.com/user/TheMadeiraSurf">YouTube</a>
-</div>
-
-</div>
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+<script src="{{ STATIC_URL }}bootstrap/js/bootstrap.min.js"></script>
+{# block custom_js %}{% endblock #}
 </body>
 </html>