Merge pull request #15 from clarkepaul/forms-type

FIX basic updates to enhance usability and appearance of theme

css/layout.css

@@ -62,7 +62,7 @@ body {
 	}
 
 	/* Brand */
-	.brand, .brand:hover {
+	header .brand, header .brand:hover {
 	    float: left;
 	    color: #fff;
 	    display: inline-block;
@@ -82,34 +82,30 @@ body {
 		    margin-bottom: 22px;
 		}
 
-	/* Search form */ 							/* TODO: make sure this is not double up from form.css */
+	/* Search form */
 	.search-bar {
 	    position: absolute;
-	    right: 30px;
+	    right: 28px;
-	    top: 34px;
+	    top: 32px;
 	}
-		.search-bar form fieldset {
+		.search-bar #Search {
-		    position: relative;
-		    padding: 0;
 			margin: 0;
+			padding: 0;
 		}
 		.search-bar form input.text {
 		    width: 155px;
-		    padding:6px 35px 6px 10px;
+		    padding: 5px 34px 5px 10px;
 		    color: #888;
 		    margin: 0;
 		    border: none;
-		    border-radius: 20px;
+		    border-radius: 14px;
 		    background: #fff;
-		    font-family: Arial, Helvetica, sans-serif;
-		}
-		.search-bar form input.active {
-		    color: #000
 		}
+
 		.search-bar form input.action {
-		    font-size: 15px;
+		    font-size: 14px;
 		    position: absolute;
-		    right: 3px;
+		    right: 0;
 		    top: -1px;
 		    cursor: pointer;
 		    border: none;
@@ -117,9 +113,10 @@ body {
 		    background: none;
 		    font-family: 'WebSymbolsRegular';
 		    color: #848484;
-			 border-radius:0;
+			border-radius: 0;
-			 margin-top:0;
+			margin: 0;
 		}
+		.search-bar form input.active,
 		.search-bar form input.action:hover {
 		    color: #000
 		}
@@ -127,14 +124,12 @@ body {
 		.header textarea:focus {
 		    outline: none
 		}
-		#Search {
-			padding:0;
-		}
 		.search-dropdown-icon {
 		    display: none
 		}
 
 
+
 /* NAVIGATION */
 
 	/* Primary navigation */
@@ -143,7 +138,7 @@ body {
 	}
 	.header .primary li {
 	    float: left;
-	    padding-bottom: 17px;
+	    padding-bottom: 14px;
 	    margin: 0 5px;
 	    position: relative;
 	    white-space: nowrap;
@@ -190,13 +185,11 @@ body {
 	    float: left;
 	    clear: both;
 	    position: relative;
-	    margin: 20px 0 4px -12px;
+	    margin: 20px 0 0 -13px;
 	    white-space: nowrap;
 	    right: auto;
 	}
 		.tablet-nav .header .primary ul li {
-		    margin-bottom: 10px;
-		    padding-bottom: 0;
 		    white-space: nowrap;
 		}
 			.tablet-nav .header .primary ul li a {
@@ -204,15 +197,6 @@ body {
 			    -webkit-transition: none;
 			    transition: none;
 			}
-		.tablet-nav .header .primary ul li.current a,
-		.tablet-nav .header .primary ul li.section a {
-		    background-color: #525252;
-		    border-radius: 4px;
-		}
-	.tablet-nav .header .primary li.section:after,
-	.tablet-nav .header .primary li.current:after {
-	    display: none
-	}
 	.tablet-nav .footer .right {
 	    float: left;
 	    width: 100%;
@@ -252,13 +236,12 @@ body {
 			    -webkit-transition: 0.2s;
 			    transition: 0.2s;
 			}
-		.main .secondary li:hover .arrow {
+		.main .secondary li a:hover .arrow {
 		    left: 6px
 		}
 		.main .secondary li a {
 		    padding: 10px 0;
 		    display: block;
-		    width: 100%;
 		    text-transform: uppercase;
 		    letter-spacing: 2px;
 		    font-size: 11px;
@@ -271,9 +254,12 @@ body {
 		    padding-left: 28px;
 		    display: block;
 		}
+		.main .secondary li.current a.current {
+			color: #b80000;
+		}
 		.main .secondary li.section,
 		.main .secondary li.current {
-		    background-color: #f7f7f7
+		    background-color: #f1f1f1
 		}
 			.main .secondary li.section a,
 			.main .secondary li.current a {
@@ -283,6 +269,41 @@ body {
 			color: #aaa;
 		}
 
+		/* Secondary navigation 2-5 levels deep */
+		.main .secondary ul ul {					
+			display: none;
+		}
+		.secondary ul li.current ul,
+		.secondary ul li.section ul {				/* Only show child pages from selected parent */
+			display: block;
+		}
+		.secondary li.current ul ul {				
+			display: none;
+		}
+		.main .secondary ul ul li a { padding-left: 10px; }	/* Indent all sidebar navigation levels*/
+			.main .secondary ul ul li a .arrow { left: 12px; }
+			.main .secondary ul ul li a:hover .arrow { left: 16px; }
+
+		.main .secondary ul ul ul li a { padding-left: 20px; }
+			.main .secondary ul ul ul li a .arrow { left: 22px; }
+			.main .secondary ul ul ul li a:hover .arrow { left: 26px; }
+
+		.main .secondary ul ul ul ul li a { padding-left: 30px; }
+			.main .secondary ul ul ul ul li a .arrow { left: 32px; }
+			.main .secondary ul ul ul ul li a:hover .arrow { left: 36px; }
+			
+		.main .secondary ul ul ul ul ul li a { padding-left: 40px; }
+			.main .secondary ul ul ul ul ul li a .arrow { left: 32px; }
+			.main .secondary ul ul ul ul ul li a:hover .arrow { left: 36px; }
+
+		.main .secondary li a:hover,
+		.main .secondary li.section a:hover,
+		.main .secondary li.current a:hover {
+			color: #b80000;
+		}
+
+
+
 
 /* MIXED */
 header:after,
@@ -304,6 +325,8 @@ footer:after {
     -webkit-transition: color 0.2s;
     transition: color 0.2s;
 }
+.footer a.brand { color: #333; margin-left: 0; }
+.footer a.brand:hover { color: #B80000; }
 body h1 span.amp {
     font-family: Baskerville,"Goudy Old Style","Palatino","Book Antiqua",Georgia;
     font-style: italic;
@@ -313,17 +336,21 @@ body h1 span.amp {
 /* PAGE SPECIFIC LAYOUT */
 	/* Homepage */
 
-	/* Search Results */									/* TODO: Test search results styles */
+	/* Search Results */	
-	.searchResults h1 {
+	.typography .searchResults h1 {
-	    font-size: 36px;
+		margin-bottom: 0;
-	    margin-bottom: 15px;
+		padding-bottom: 0;
-	}
+		border-bottom: none;
+	}								/* TODO: Test search results styles */
 	.searchResults p.searchQuery {
-	    color: #333;
 	    margin-bottom: 10px;
+	    font-size: 15px;
+	    font-weight: bold;
 	}
 	.searchResults ul#SearchResults {
-	    padding: 0
+	    padding: 0;
+	    margin-left: 0;
+	    border-bottom: 1px solid #e5e5e5;
 	}
 		.searchResults ul#SearchResults li {
 		    border-top: 1px solid #e5e5e5;
@@ -331,13 +358,7 @@ body h1 span.amp {
 		    list-style-type: none;
 		}
 		.searchResults ul#SearchResults p {
-		    margin-bottom: 12px
+		    margin-bottom: 10px
-		}
-		.searchResults ul#SearchResults a.searchResultHeader {
-		    font-size: 16px;
-		    font-weight: bold;
-		    margin-bottom: 6px;
-		    display: block;
 		}
 		.searchResults #PageNumbers {
 		    border-top: 1px solid #e5e5e5;
@@ -373,10 +394,10 @@ body h1 span.amp {
     line-height: 22px;
 }
 	.footer a {
-	    color: #999
+	    color: #999;
 	}
 	.footer a:hover {
-	    color: #000
+	    color: #B90000
 	}
 	.footer .left {
 	    float: left;
@@ -534,6 +555,13 @@ body h1 span.amp {
 			.header .primary ul li a:hover {
 			    color: inherit
 			}
+			.header .primary li.section:after,
+			.header .primary li.current:after {
+			    display: none;
+			}
+			.tablet-nav .header nav.primary ul li {
+				padding: 0;
+			}
 
 	/* Search Form */
 	.search-bar {
@@ -543,7 +571,7 @@ body h1 span.amp {
 	    right: 0;
 	    display: none;
 	    padding: 20px 0;
-	    margin: 0;
+	    margin: 80px 0 0;
 	    background-color: #E7E7E7;
 	}
 	.search-dropdown-icon {
@@ -693,7 +721,11 @@ body h1 span.amp {
 
     /* Simple theme custom print styles */
 	.header,
-	.footer {
+	.footer,
-	    display: none
+    .nav-open-button,
+    .search-bar,
+    .search-dropdown-icon,
+    nav.primary {
+	    display: none;
 	}
 }

css/typography.css

@@ -53,8 +53,8 @@ body {
 .typography h6 {
     font-family: "CamboRegular", Georgia, "Times New Roman", Times, serif;
     font-weight: normal;
-    color: #b80000;
     margin-bottom: 10px;
+    color: #444;
 }
 .typography h1 { font-size: 36px; 
   line-height: 45px; 
@@ -95,9 +95,11 @@ body {
 .typography a.intro {
     color: #B80000;
     text-decoration: none;
-    border-bottom: 1px dashed #B80000;
 }
-  .typography a:hover { color: #D80000; }
+  .typography a:hover { 
+    color: #D80000;
+    border-bottom: 1px dashed #B80000;
+  }
   .typography a:focus { }
 
 

templates/Includes/Footer.ss

@@ -1,6 +1,8 @@
 <footer class="footer" role="contentinfo">
 	<div class="inner copy">
-		<div class="left">$SiteConfig.Title <span class="arrow">&rarr;</span> <% include Navigation %></div>
+		<div class="left">
+			<a href="$BaseHref" class="brand" rel="home">$SiteConfig.Title</a>
+			<span class="arrow">&rarr;</span> <% include Navigation %></div>
 		<small class="right"><a href="http://simple.innovatif.com/about/">Theme</a> by <a href="http://www.saratusar.com">Sara</a> (Innovatif) / Powered by <a href="http://silverstripe.org">Silverstripe</a></small>
 	</div>
 </footer>

templates/Includes/SideBar.ss

@@ -7,8 +7,8 @@
 				<% end_loop %>
 			</h3>
 			<ul>
-				<% loop Menu(2) %>
+				<% loop Menu(1) %>
-				<li class="$LinkingMode"><a href="$Link" title="Go to the $Title.XML page"><span class="arrow">&rarr;</span><span class="text">$MenuTitle.XML</span></a></li>
+					<% include SidebarMenu %>
 				<% end_loop %>
 			</ul>
 		</nav>

templates/Includes/SidebarMenu.ss

@@ -0,0 +1,18 @@
+<!--Include SidebarMenu recursively /-->
+<% if Children %>	
+	<% loop Children %>	
+		<li class="$LinkingMode">
+			<a href="$Link" class="$LinkingMode" title="Go to the $Title.XML page">
+				<span class="arrow">&rarr;</span>
+				<span class="text">$MenuTitle.XML</span>
+			</a>
+
+			<% if Children %>
+				<ul>	
+					<% include SidebarMenu %>
+				</ul>	
+			<% end_if %>
+
+		</li>
+	<% end_loop %>
+<% end_if %>

templates/Layout/Page_results.ss

@@ -2,21 +2,25 @@
     <h1>$Title</h1>
      
     <% if Query %>
-        <p class="searchQuery"><strong>You searched for &quot;{$Query}&quot;</strong></p>
+        <p class="searchQuery">You searched for &quot;{$Query}&quot;</p>
     <% end_if %>
          
     <% if Results %>
     <ul id="SearchResults">
         <% control Results %>
         <li>
-            <a class="searchResultHeader" href="$Link">
+            <h4>
+                <a href="$Link">
                     <% if MenuTitle %>
                     $MenuTitle
                     <% else %>
                     $Title
                     <% end_if %>
                 </a>
+            </h4>
+            <% if Content %>
                 <p>$Content.LimitWordCountXML</p>
+            <% end_if %>
             <a class="readMoreLink" href="$Link" title="Read more about &quot;{$Title}&quot;">Read more about &quot;{$Title}&quot;...</a>
         </li>
         <% end_control %>