Make main list horizontal and put slideshow below.

4 files changed, 51 insertions, 38 deletions

diff --git a/content/pages/index.md b/content/pages/index.md
index 5968f45..6823dc0 100644
--- a/content/pages/index.md
+++ b/content/pages/index.md
@@ -7,9 +7,11 @@ plugins, used by hundreds of plugins and other projects.  At its core, LV2 is a
 simple stable interface, accompanied by *extensions* which add functionality to
 support the needs of increasingly powerful audio software.
 
-* [**Download LV2 1.10.0**](http://lv2plug.in/spec/lv2-1.10.0.tar.bz2)
-  [(sig)](http://lv2plug.in/spec/lv2-1.10.0.tar.bz2.sig)
-* [Why LV2?](pages/why-lv2.html)
-* [Projects Using LV2](pages/projects.html)
-* [Mailing List](http://lists.lv2plug.in/listinfo.cgi/devel-lv2plug.in)
-* Chat in [#lv2](http://webchat.freenode.net/?channels=lv2) on irc.freenode.net
+<ul id="mainlist">
+  <li><a href="http://lv2plug.in/spec/lv2-1.10.0.tar.bz2">Download LV2 1.10.0</a>
+      <a href="http://lv2plug.in/spec/lv2-1.10.0.tar.bz2.sig"><small>.sig</small></a></li>
+  <li><a href="pages/why-lv2.html">Why LV2?</a></li>
+  <li><a href="pages/projects.html">Projects</a></li>
+  <li><a href="http://lists.lv2plug.in/listinfo.cgi/devel-lv2plug.in">Mailing List</a></li>
+  <li><a href="http://webchat.freenode.net/?channels=lv2">IRC Chat</a></li>
+</ul>
diff --git a/themes/lv2/static/css/main.css b/themes/lv2/static/css/main.css
index 53444ff..799cb10 100644
--- a/themes/lv2/static/css/main.css
+++ b/themes/lv2/static/css/main.css
@@ -194,6 +194,30 @@ header a#page-title {
 	border-radius: 6px;
 }
 
+#mainlist {
+	text-align: center;
+	margin: 0;
+	padding: 0;
+}
+
+#mainlist li {
+	background-color: #222;
+	color: #FFF;
+	font-weight: bold;
+	background: linear-gradient(to bottom, #444 0%, #000 100%);
+	border: solid 2px #444;
+	border-radius: 6px;
+	display: inline-block;
+	list-style-type: none;
+	margin: 0.25em;
+	padding: 0.5em;
+	white-space: nowrap;
+	vertical-align: middle;
+}
+
+#mainlist li a, #mainlist li a:visited {
+	color: #FFF;
+}
 
 /* Pygments Style */
 
diff --git a/themes/lv2/static/css/slideshow.css b/themes/lv2/static/css/slideshow.css
index 7fe664d..508761c 100644
--- a/themes/lv2/static/css/slideshow.css
+++ b/themes/lv2/static/css/slideshow.css
@@ -1,30 +1,32 @@
 #slideshow {
-    background-color: #000;
-    border: 3px solid #000;
-    border-radius: 6px;
-    display: inline-block;
-    height: 20em;
-    line-height: 20em;
-    margin: 1em;
+	line-height: 20em;
+	margin: 2em;
 	margin-left: auto;
 	margin-right: auto;
 	position: relative;
-    text-align: right;
-    vertical-align: middle;
-    width: 20em;
+	text-align: center;
+	transform-style: preserve-3d;
+	vertical-align: middle;
+	width: 640px;
+	height: 480px;
 }
 
 #slideshow img {
-    left: 0;
-    width: 100%;
-    height: auto;
-    max-height: 100%;
+	border-radius: 6px;
+	height: auto;
+	left: 0;
+	margin-left: auto;
+	margin-right: auto;
+	max-height: 100%;
+	max-width: 100%;
 	opacity: 0;
 	position: absolute;
-    text-align: center;
+	right: 0;
+	text-align: center;
 	transition-duration: 1s;
 	transition-property: opacity;
-    vertical-align: middle;
+	vertical-align: middle;
+	width: auto;
 }
 
 #slideshow .fadein {
diff --git a/themes/lv2/static/js/slideshow.js b/themes/lv2/static/js/slideshow.js
index d9fb9c5..e50991c 100644
--- a/themes/lv2/static/js/slideshow.js
+++ b/themes/lv2/static/js/slideshow.js
@@ -1,23 +1,8 @@
-function getPreviousNode(n) {
-	var p = n.previousSibling;
-	while (p && p.nodeType !== 1) {
-		p = p.previousSibling;
-	}
-	return p;
-}
-
 function startSlideShow() {
 	var slideshow = document.getElementById("slideshow"),
 		imgs      = slideshow.getElementsByTagName("img"),
 		n         = imgs.length,
-		m         = Math.floor((Math.random() * n)),
-		pred      = getPreviousNode(slideshow);
-
-	// Shrink width of predecessor so gallery fits beside it
-	if (pred) {
-		pred.style.width   = "50%";
-		pred.style.display = "inline-block";
-	}
+		m         = Math.floor((Math.random() * n));
 
 	// Start transition of initial image
 	imgs[m].className = "fadein";