Updating TheThemeMachine's layout with zone awesomeness

--HG--
branch : dev

src/Orchard.Web/Themes/TheThemeMachine/Styles/Site.css

@@ -222,7 +222,12 @@ nav ul
     }
 
 /* Zones */
-/* .zone { background-color: yellow; }   Used for visualizing zones */
+.zone {
+    background-color: yellow;
+    box-shadow:inset 0 0 1px red;
+    -moz-box-shadow:inset 0 0 1px red;
+    -webkit-box-shadow:inset 0 0 1px red;
+}  /*  Used for visualizing zones */
 .zone-header { }
 .zone-footer { padding: 24px 0 12px 0px; float: left; font-size: 1.3em; color: #999999; }
 .zone-content { padding: 12px 0 12px 0px; }

src/Orchard.Web/Themes/TheThemeMachine/Views/Layout.cshtml

@@ -25,38 +25,56 @@
     Model.Id = "layout-wrapper";
     var tag = Tag (Model, "div");
 
+    // needs to be the page title, not page (head) title... 
+    // Adds text and html to the header zone 
+    using(Capture(branding => WorkContext.Layout.Header.Add(branding) )) {
+     <h1 id="branding"><a href="@homeUrl">@WorkContext.CurrentSite.SiteName</a></h1>
+    }
+    using(Capture(pbo => WorkContext.Layout.Footer.Add(pbo) )) {
+        <span class="poweredby">Powered by Orchard</span> <span class="copyright">&#169; The Theme Machine 2010.</span>
+    }
+    WorkContext.Layout.Footer.Add(New.User());
 }
 
 @tag.StartElement
-
-@* needs to be the page title, not page (head) title... *@
-@* Adds text and html to the header zone *@
-
-@using(Capture(branding => WorkContext.Layout.Header.Add(branding) )) {
- <h1 id="branding"><a href="@homeUrl">@WorkContext.CurrentSite.SiteName</a></h1>
-}
 @if (Model.Header != null) {
-<header id="layout-header">
+<header id="layout-header" class="group">
     <div id="header">
         @Zone(Model.Header)
     </div>
 </header>
 }
 @if (Model.Navigation != null) {
-<div id="navigation" class="group">
+<div id="layout-navigation" class="group">
     @Zone(Model.Navigation)
 </div>
 }
+@if (Model.Featered != null) {
+<div id="layout-featured" class="group">
+    @Zone(Model.Featured)
+</div>
+}
+@if (Model.BeforeMain != null) {
+<div id="layout-before-main" class="group">
+    @Zone(Model.BeforeMain)
+</div>
+}
+<div id="layout-main" class="group">
+    @if (Model.AsideFirst != null) {
+    <aside  id="aside-first" class="aside first">
+        @Zone(Model.AsideFirst)
+    </aside>
+    }
     <div id="layout-content" class="group">
         @if (Model.Messages != null) {
         <div id="messages">
             @Zone(Model.Messages)
         </div>
         }
-    @if(Model.AsideSecond != null) {
+        @if (Model.BeforeContent != null) {
-    <aside class="aside second">
+        <div id="before-content">
-        @Zone(Model.AsideSecond)
+            @Zone(Model.BeforeContent)
-    </aside>
+        </div>
         }
         @* the model content for the page is in the Content zone @ the default position (nothing, zero, zilch) *@
         @if (Model.Content != null) {
@@ -64,28 +82,71 @@
             @Zone(Model.Content)
         </div>
         }
-    @if(Model.AsideFirst != null) {
+        @if (Model.AfterContent != null) {
-    <aside class="aside first">
+        <div id="after-content">
-        @Zone(Model.AsideFirst)
+            @Zone(Model.AfterContent)
-    </aside>
+        </div>
         }
-    @if(Model.AsideThird != null) {
+    </div>
-    <aside class="aside third group">
+    @if (Model.AsideSecond != null) {
-        @Zone(Model.AsideThird)
+    <aside id="aside-second" class="aside second">
+        @Zone(Model.AsideSecond)
     </aside>
     }
 </div>
-
+@if (Model.AfterMain != null) {
-@* span -> p (?) *@
+<div id="layout-after-main" class="group">
-@using(Capture(pbo => WorkContext.Layout.Footer.Add(pbo) )) {
+    @Zone(Model.AfterMain)
-    <span class="poweredby">Powered by Orchard</span> <span class="copyright">&#169; The Theme Machine 2010.</span>
+</div>
 }
-
+@if (Model.TripelFirst != null || Model.TripelSecond != null || Model.TripelThird != null) {
+<div id="layout-tripel" class="group">@* as in beer *@
+    @if (Model.TripelFirst != null) {
+    <div id="tripel-first">
+        @Zone(Model.TripelFirst)
+    </div>
+    }
+    @if (Model.TripelSecond != null) {
+    <div id="tripel-second">
+        @Zone(Model.TripelSecond)
+    </div>
+    }
+    @if (Model.TripelThird != null) {
+    <div id="tripel-third">
+        @Zone(Model.TripelThird)
+    </div>
+    }
+</div>
+}
+<div id="layout-footer" class="group">
+    <footer id="footer">
+        <div id="footer-quad">
+            @if (Model.FooterQuadFirst != null) {
+            <div id="footer-quad-first">
+                @Zone(Model.FooterQuadFirst)
+            </div>
+            }
+            @if (Model.FooterQuadSecond != null) {
+            <div id="footer-quad-second">
+                @Zone(Model.FooterQuadSecond)
+            </div>
+            }
+            @if (Model.FooterQuadThird != null) {
+            <div id="footer-quad-second">
+                @Zone(Model.FooterQuadThird)
+            </div>
+            }
+            @if (Model.FooterQuadFourth != null) {
+            <div id="footer-quad-second">
+                @Zone(Model.FooterQuadFourth)
+            </div>
+            }
+        </div>
         @if(Model.Footer != null) {
-<footer id="layout-footer" class="group">
+        <div id="footer-sig" class="group">
             @Zone(Model.Footer)
- @Display.User()
+        </div>
-</footer>
         }
-
+    </footer>
+</div>
 @tag.EndElement