MINOR javascript optimization, css, line endings, file modes...

css/layout.css

@@ -1,6 +1,6 @@
-header:after, .main:after, #Root:after, .search-bar:after, header .inner:after {height:0;content:".";display:block;clear:both;visibility:hidden;}
+header:after, .main:after, #Root:after, .search-bar:after, header .inner:after, footer:after {height:0;content:".";display:block;clear:both;visibility:hidden;}
 
-body{margin:0; background:#ededed; min-width:240px;-webkit-text-size-adjust:none; font-family:Arial, Helvetica, sans-serif;}
+body{margin:0; background:#ededed; min-width:240px; -webkit-text-size-adjust:none; font-family:Arial, Helvetica, sans-serif;}
 .ie7 body, .ie8 body{min-width:860px;}
 
 ::-moz-selection{background:#b80000; color:#fff; text-shadow:none;}
@@ -10,24 +10,25 @@ a:link {-webkit-tap-highlight-color:#b80000;}
 a.btn{background:#b80000; color:#fff; display:inline-block; border-radius:4px; padding:6px 15px; margin-top:10px; text-transform:uppercase; letter-spacing:1px; border-bottom:none !important; font-size:13px;}
 a.btn:after{content:'\2192'; padding-left:10px;  font-size:14px; font-family:Arial, Helvetica, sans-serif;}
 a.btn:hover{background:#d80000; color:#fff;}
-.content img{border:5px solid #d7d7d7; width:60%; height:auto; float:left; margin:6px 20px 10px 0;}
+.content img{border:5px solid #d7d7d7; max-width:60%; height:auto; float:left; margin:6px 20px 10px 0;}
 .content ul{margin:20px 0 20px 30px;}
 .content li{line-height:22px; margin-bottom:5px; list-style-type:disc;}
 
 .content-container h1 {font-size:36px; border-bottom:1px solid #e5e5e5; padding-bottom:6px; margin:0 0 23px 0; line-height:45px;}
 .content-container h1 span.amp{font-family:Baskerville,"Goudy Old Style","Palatino","Book Antiqua",Georgia; font-style:italic;}
-.content-container h2{font-size:25px; margin-bottom:15px; padding-top:15px;}
+.content-container h2{font-size:24px; margin-bottom:15px; padding-top:15px; line-height:32px;}
 .content-container h3{font-size:21px; margin-bottom:10px; padding-top:10px;}
 .content a{border-bottom:1px dashed #b80000;}
 
 .brand{float:left; display:inline-block;}
-.brand h1{margin:0; padding:0; font-size:50px; font-family: "HelveticaNeueLTPro-Bd", "Helvetica Neue LT Pro Bold", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "Helvetica Neue LT Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color:#fff; font-weight:600; font-stretch:normal; line-height:1em;} 
+.brand h1{margin:0; padding:0; font-size:48px; font-family: "HelveticaNeueLTPro-Bd", "Helvetica Neue LT Pro Bold", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "Helvetica Neue LT Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color:#fff; font-weight:600; font-stretch:normal; line-height:1em;} 
 .brand, .brand:hover{color:#fff;}
+.brand p{color:#888; margin-bottom:22px;}
 
 .search-bar form input.action, .header .primary li a, .footer a{-moz-transition:color 0.2s; -webkit-transition:color 0.2s; transition:color 0.2s;}
 
 /* Search Form */
-.search-bar {position:absolute; right:30px; top:32px;}
+.search-bar {position:absolute; right:30px; top:34px;}
 .search-dropdown-icon {display:none;}
 .search-bar form fieldset {position:relative; padding:0; margin:0;}
 .search-bar form input.text {width:155px; padding-left:10px; padding-right:35px; color:#888; margin:0; border:none; border-radius:20px; background:#fff; font-family:Arial, Helvetica, sans-serif;}
@@ -36,16 +37,17 @@ a.btn:hover{background:#d80000; color:#fff;}
 .search-bar form input.action:hover {color:#000;}
 .search-bar form input:focus, .header textarea:focus {outline:none;}
 
-.header .primary ul{float:right; margin:23px -12px 0 0;}
-.header .primary li{float:left; padding-bottom:20px; margin:0 5px; position:relative; white-space:nowrap;}
+.header .primary ul{/*float:right; margin:23px -12px 0 0;*/ position:absolute; bottom:0; right:17px;}
+.header .primary li{float:left; padding-bottom:17px; margin:0 5px; position:relative; white-space:nowrap;}
 .header .primary li a{color:#888; font-size:15px; font-family:Helvetica, Arial, sans-serif; padding:6px 8px; font-weight:bold; display:block; }
 .header .primary li a:hover{color:#fff;} 
 .header .primary li.section a, .header .primary li.current a{color:#fff;}
 .header .primary li.section:after, .header .primary li.current:after{content:'}'; display:block; position:absolute; left:50%; margin-left:-7px; bottom:-6px; font-family:'WebSymbolsRegular'; font-size:28px; color:#fff; text-align:center; line-height:20px;} 
 
 /* when navigation and logo overlap tablet-nav is initialized */
+.tablet-nav .brand p{margin-bottom:0;}
 .tablet-nav .header .inner{padding-top:20px;}
-.tablet-nav .header .primary ul {float:left; clear:both; margin:20px 0 4px -12px; white-space:nowrap;} 
+.tablet-nav .header .primary ul {float:left; clear:both; position:relative; margin:20px 0 4px -12px; 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{-moz-transition:none; -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;}
@@ -73,7 +75,7 @@ aside{float:left; width:23%; margin-top:17px;}
 .content-container{float:right; width:73%; padding-bottom:20px;}
 .no-sidebar .content-container{float:left;}
 .header{background:#161616;}
-.header .inner{padding-top:55px; position:relative;}
+.header .inner{padding-top:45px; position:relative; min-height:72px;}
 
 /* Search Results */
 .searchResults h1 { font-size:36px; margin-bottom:15px;}
@@ -95,7 +97,7 @@ aside{float:left; width:23%; margin-top:17px;}
 .footer a{color:#999;}
 .footer a:hover{color:#000;}
 .footer .left{float:left; color:#000; display:block; margin-bottom:10px;}
-.footer .right{float:right; display:block;}
+.footer .right{float:right; display:block; margin-bottom:10px;}
 .footer span{padding:0 3px; color:#bbb;}
 .footer .primary, .footer .primary ul{display:inline; margin:0; padding:0;}
 .footer .primary li{display:inline;}
@@ -114,12 +116,14 @@ aside{float:left; width:23%; margin-top:17px;}
 
 /* when changing the breakpoint below, change it ito the same value in the script.js file as well */
 @media only screen and (max-width: 640px) {
+body{max-width:640px;}
 #media-query-trigger{ visibility:visible;}
-.brand{float:none; display:inline-block; margin-left:22px; margin-bottom:24px;}
+.brand{float:none; display:inline-block; margin-left:22px; margin-bottom:22px;}
 .brand h1{font-size:40px;}
+.brand h1{padding-right:80px;}
 .header {padding:0px;}
-.header .inner{padding:20px 0 0 0;}
-.header .primary .nav-open-button {z-index:100; width:20px; height:20px; position:absolute; right:20px; top:30px; display:block; cursor:pointer; font-family:'WebSymbolsRegular'; font-size:20px; color:#ededed;} 
+.header .inner{padding:20px 0 0 0; min-height:0;}
+.header .primary .nav-open-button {z-index:100; width:20px; height:20px; position:absolute; right:20px; top:32px; display:block; cursor:pointer; font-family:'WebSymbolsRegular'; font-size:20px; color:#ededed;} 
 .header .primary ul {z-index:10; position:relative; display:none; float:left; margin:0 !important; padding:0; white-space:normal; width:100%;}
 .header .primary ul li {width:100%; margin:0 !important; float:none; background:none; position:relative; text-shadow:0 1px #fff;}
 .header .primary ul li:after {content:'\003e'; display:block; position:absolute; right:20px; top:0px; font-family:'WebSymbolsRegular'; font-size:14px; color:#999; text-align:center; vertical-align:middle; line-height:38px;}
@@ -128,7 +132,7 @@ aside{float:left; width:23%; margin-top:17px;}
 
 /* Search Form */
 .search-bar {width:100%; position:relative; top:0; right:0; display:none; padding:20px 0; margin:0; background-color:#E7E7E7;}
-.search-dropdown-icon {display:block; cursor:pointer; width:20px; height:20px; position:absolute; right:60px; top:32px; font-family:'WebSymbolsRegular'; font-size:20px; color:#ededed; text-align:center; line-height:20px;}
+.search-dropdown-icon {display:block; cursor:pointer; width:20px; height:20px; position:absolute; right:60px; top:34px; font-family:'WebSymbolsRegular'; font-size:20px; color:#ededed; text-align:center; line-height:20px;}
 .search-bar form {margin:0; width:100%;}
 .search-bar form fieldset {padding:0 18px; left:0; right:0; position:relative;}
 .search-bar div.field{margin-bottom:0;}

javascript/script.js

@@ -2,6 +2,25 @@ jQuery.noConflict();
 
 (function($) {    
     $(document).ready(function() {
+										 
+		/* removes text from search form on focus and replaces it on unfocus - if text is entered then it does not get replaced with default on unfocus */
+		$('#SearchForm_SearchForm_action_results').val('L');
+		var searchField = $('#SearchForm_SearchForm_Search');
+		var default_value = searchField.val();
+		searchField.focus(function() {
+			$(this).addClass('active');
+			if(searchField.val() == default_value) {
+				searchField.val('');
+			}
+		});
+		searchField.blur(function() {
+			  if(searchField.val() == '') {
+					searchField.val(default_value);
+			  }
+		});
+				
+		if (!$.browser.msie || ($.browser.msie && (parseInt($.browser.version, 10) > 8))) {
+			
 			var searchBarButton = $("span.search-dropdown-icon");
 			var searchBar = $('div.search-bar');
 			var menuButton = $("span.nav-open-button");
@@ -59,29 +78,14 @@ jQuery.noConflict();
 			/* toggle navigation and search in mobile view */		
 			searchBarButton.click(function() {
 				menu.slideUp();													 
-			searchBar.slideToggle('fast');
+				searchBar.slideToggle(200);
 			});
 			
 			menuButton.click(function() {
 				searchBar.slideUp();													 
-			menu.slideToggle('fast');
+				menu.slideToggle(200);
 			});	
-
-		/* removes text from search form on focus and replaces it on unfocus - if text is entered then it does not get replaced with default on unfocus */
-		 $('#SearchForm_SearchForm_action_results').val('L');
-		 var searchField = $('#SearchForm_SearchForm_Search');
-		 var default_value = searchField.val();
-		 searchField.focus(function() {
-			$(this).addClass('active');
-			if(searchField.val() == default_value) {
-				searchField.val('');
 		}
-		 });
-		 searchField.blur(function() {
-			  if(searchField.val() == '') {
-					searchField.val(default_value);
-			  }
-		 });
 		
     });
 }(jQuery));

templates/Includes/Footer.ss

@@ -1,6 +1,6 @@
 <footer class="footer" role="contentinfo">
 	<div class="inner copy">
-		<div class="left">Simple <span class="arrow">&rarr;</span> <% include Navigation %></div>
-		<small class="right">&copy; Simple by <a href="http://www.saratusar.com">Sara</a> (Innovatif) / Powered by <a href="http://silverstripe.org">Silverstripe</a></small>
+		<div class="left">$SiteConfig.Title <span class="arrow">&rarr;</span> <% include Navigation %></div>
+		<small class="right">&copy; <a href="http://simple.innovatif.com/about/">Simple</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/Header.ss

@@ -2,7 +2,9 @@
 	<div class="inner">
 		<a href="$BaseHref" class="brand" rel="home">
 			<h1>$SiteConfig.Title</h1>
+			<% if SiteConfig.Tagline %>
 			<p>$SiteConfig.Tagline</p>
+			<% end_if %>
 		</a>
 		<% if SearchForm %>
 			<span class="search-dropdown-icon">L</span>

templates/Page.ss

@@ -18,12 +18,14 @@ Change it, enhance it and most importantly enjoy it!
 	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	$MetaTags(false)
-	
-<link rel="shortcut icon" href="$ThemeDir/images/favicon.ico" />
 	<!--[if lt IE 9]>
 	<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 	<![endif]-->
-
+	<% require themedCSS(reset) %>
+	<% require themedCSS(typography) %>
+	<% require themedCSS(form) %>	
+	<% require themedCSS(layout) %>
+	<link rel="shortcut icon" href="$ThemeDir/images/favicon.ico" />
 </head>
 <body class="$ClassName<% if Menu(2) %><% else %> no-sidebar<% end_if %>">
 <% include Header %>
@@ -33,7 +35,7 @@ Change it, enhance it and most importantly enjoy it!
 	</div>
 </div>
 <% include Footer %>
-	<% require javascript(http://code.jquery.com/jquery-1.7.2.js) %>
-	<% require javascript(themes/simple/javascript/script.js) %>
+<% require javascript(http://code.jquery.com/jquery-1.7.2.js) %>
+<% require javascript(themes/simple/javascript/script.js) %>
 </body>
 </html>