made the site look a lot better on ‘small’ responsive mode (phones and such).

6 files changed, 70 insertions, 44 deletions

diff --git a/website/extra/htaccess b/website/extra/htaccess
index a4c3f83d..fd34633f 100644
--- a/website/extra/htaccess
+++ b/website/extra/htaccess
@@ -1,15 +1,17 @@
-RewriteRule ^/features/all$ /features/index.html [L]
-RewriteRule ^/features/experimental/all$ /features/experimental/index.html [L]
-RewriteRule ^/features/.*\.html$ - [L]
-RewriteRule ^/features/(.*)$ /features/$1.html [L]
-RewriteRule ^/features$ /features/index.html [L]
-RewriteRule ^/features/experimental$ /features/experimental/index.html [L]
-RewriteRule ^/changelog$ /changelog.html [L]
-RewriteRule ^/?$ /main.html [L]
-RewriteRule ^/index(.html)?$ /main.html [L]
-RewriteRule ^/credits$ /credits.html [L]
-RewriteRule ^/download$ /download.html [L]
-RewriteRule ^/all(-v|V)ersions(.html)?$ /all-versions.html [L]
-RewriteRule ^/setup/.*\.html$ - [L]
-RewriteRule ^/setup/(.*) /setup/$1.html [L]
-
+RewriteEngine On
+RewriteRule ^features/all$ /features/index.html [L,END]
+RewriteRule ^features/index(\.html)?$ /features/index.html [L,END]
+RewriteRule ^features/experimental/all$ /features/experimental/index.html [L,END]
+RewriteRule ^features/experimental/index(\.html)?$ /features/experimental/index.html [L,END]
+RewriteRule ^features/.*\.html$ - [L,END]
+RewriteRule ^features/(.*)$ /features/$1.html [L,END]
+RewriteRule ^features$ /features/index.html [L,END]
+RewriteRule ^features/experimental$ /features/experimental/index.html [L,END]
+RewriteRule ^changelog$ /changelog.html [L,END]
+RewriteRule ^$ /main.html [L,END]
+RewriteRule ^index(\.html)?$ /main.html [L,END]
+RewriteRule ^credits$ /credits.html [L,END]
+RewriteRule ^download$ /download.html [L,END]
+RewriteRule ^all-versions$ /all-versions.html [L,END]
+RewriteRule ^setup/.*\.html$ - [L,END]
+RewriteRule ^setup/(.*) /setup/$1.html [L,END]
diff --git a/website/resources/css/custom.css b/website/resources/css/custom.css
index d3022e28..6a1c564d 100644
--- a/website/resources/css/custom.css
+++ b/website/resources/css/custom.css
@@ -5,6 +5,7 @@ html {
 
 body {
 	margin-bottom: 60px;
+	overflow-y: scroll;
 }
 
 ul.dropdown-menu .header {
@@ -24,12 +25,6 @@ div.snippet code {
 	z-index: 2000;
 }
 
-@media (max-width: 768px) {
-	.fork-me {
-		display: none;
-	}
-}
-
 .video {
 	padding-top: 4%;
 }
@@ -150,3 +145,32 @@ a {
 .changelog li {
 	text-align: left;
 }
+
+@media (max-width: 768px) {
+	.fork-me {
+		display: none;
+	}
+	
+	h1 {
+		font-size: 20px;
+	}
+	
+	h2 {
+		font-size: 18px;
+	}
+	
+	h3 {
+		font-size: 16px;
+	}
+	
+	.main-section {
+		padding-left: 30px;
+		padding-right: 30px;
+	}
+	
+	video {
+		width: 100%;
+		height: auto;
+	}
+}
+
diff --git a/website/resources/js/main.js b/website/resources/js/main.js
index 146dd554..ebeeab9d 100644
--- a/website/resources/js/main.js
+++ b/website/resources/js/main.js
@@ -2,13 +2,13 @@
 
 (function($) {
 	swfobject.registerObject("player", "9.0.98", "videos/expressInstall.swf");
-
+	
 	function toKey(href) {
 		var lnk = "__savedContent_" + href.replace(/\//g, '_');
 		if (lnk.substring(lnk.length - 5) === ".html") lnk = lnk.substring(0, lnk.length - 5);
 		return lnk;
 	}
-
+	
 	function captureLinkClick() {
 		var self = $(this);
 		if (self.data("clc")) return;
@@ -25,13 +25,17 @@
 			History.pushState({urlPath: href}, self.text(), href);
 		});
 	}
-
+	
+	function collapseMenu() {
+		if ($(".navbar-collapse").is(".in")) $(".navbar-toggle").click()
+	}
+	
 	function ajaxFeaturePages() {
 		if (!History.enabled) return;
 		History.replaceState({urlPath: window.location.pathname}, $("title").text(), History.getState().urlpath);
-
+		
 		$("a").each(captureLinkClick);
-
+		
 		$(window).on("statechange", function() {
 			var hs = History.getState();
 			var u = hs.data.urlPath;
@@ -44,6 +48,7 @@
 				var a = $("#main-section");
 				sc.show().attr("id", "main-section").attr("class", "container-fluid main-section");
 				a.replaceWith(sc);
+				collapseMenu();
 			} else {
 				$.ajax({
 					url: u,
@@ -54,12 +59,13 @@
 						var end = response.indexOf(y);
 						var newH = $(response.substr(start, end - start));
 						$("#main-section").replaceWith(newH);
+						collapseMenu();
 						$("a").each(captureLinkClick);
 					}
 				});
 			}
 		});
 	}
-
+	
 	$(ajaxFeaturePages);
 })($);
diff --git a/website/templates/_scaffold.html b/website/templates/_scaffold.html
index f20a839d..8d639b69 100644
--- a/website/templates/_scaffold.html
+++ b/website/templates/_scaffold.html
@@ -13,14 +13,6 @@
 		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 		<meta name="google-site-verification" content="uCgX3Or3kDRGpbJ6JCsQc3Ub4JsnR5-p0itfsKAYZ_U" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<script>
-			(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-ga('create', 'UA-9884254-1', 'auto');
-ga('send', 'pageview');
-		</script>
 		<link href="/favicon.ico" rel="icon" type="image/x-icon" />
 
 		<title>Project Lombok</title>
@@ -49,12 +41,14 @@ ga('send', 'pageview');
 			</#if>
 		</#list>
 	</head><body>
-		<a href="https://github.com/rzwitserloot/lombok" class="fork-me">
-			<img
-					alt="Fork me on GitHub"
-					src="//s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" />
-		</a>
-
+		<script>
+			(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+ga('create', 'UA-9884254-1', 'auto');
+ga('send', 'pageview');
+		</script>
 		<div class="navbar navbar-default navbar-fixed-top">
 			<div class="container">
 				<div class="navbar-header">
diff --git a/website/templates/all-versions.html b/website/templates/all-versions.html
index 97592160..e4319665 100644
--- a/website/templates/all-versions.html
+++ b/website/templates/all-versions.html
@@ -6,7 +6,7 @@
 				<h1 class="text-center">
 					<div class="row">
 						<icon class="fa fa-download"></icon>
-						<a class="currentVersion">
+						<a class="currentVersion" href="downloads/lombok.jar">
 							${version} [Current Version]
 						</a>
 					</div>
diff --git a/website/templates/main.html b/website/templates/main.html
index 18f7230b..b836a3c9 100644
--- a/website/templates/main.html
+++ b/website/templates/main.html
@@ -5,12 +5,12 @@
 			<h1>Lombok Demo</h1>
 		</div>
 		<div class="video text-center">
-			<video width="800" height="480" poster="img/poster.png" controls="controls" preload="none">
+			<video width="800" height="480" poster="/img/poster.png" controls="controls" preload="none">
 				<source src="/videos/lombok.ogv" type="video/ogg" />
 				<source src="/videos/lombok.mp4" type="video/mp4" />
 				<source src="/videos/lombok-iPhone.m4v" type="video/mp4" />
 				<object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="500">
-					<param name="movie" value="/videos/player.swf?image=poster.png&amp;file=lombok.mp4" />
+					<param name="movie" value="/videos/player.swf?image=/img/poster.png&amp;file=/videos/lombok.mp4" />
 					<param name="allowfullscreen" value="true" />
 					<!--[if !IE]>-->
 					<object width="800" height="500" type="application/x-shockwave-flash"