Re-work of main index page to make nice

Edited index.html and style.css
subpages are now broken-styled - will fix soon

2 files changed, 129 insertions, 95 deletions

diff --git a/htdocs/index.html b/htdocs/index.html
index 1da77f6..653ccba 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -14,71 +14,85 @@
 				</div>
 			</div>
 			
-			<div class="arches">
+			<div class="big_arches">
 				<ul>
 					<li>
-						<h2>alpha</h2>
-						<a href="http://distfiles.gentoo.org/releases/alpha/autobuilds/current-iso/">iso</a>
-						<a href="http://distfiles.gentoo.org/releases/alpha/autobuilds/current-stage3/">stages</a>
-					</li>
-					<li>
-						<h2>amd64</h2> 
+						<h1>amd64</h1> 
 						<a href="http://distfiles.gentoo.org/releases/amd64/autobuilds/current-iso/">iso</a>
 						<a href="http://distfiles.gentoo.org/releases/amd64/autobuilds/current-stage3/">stages</a>
+						<p>
+							<a href="http://bouncer.gentoo.org/fetch/gentoo-11.0-livedvd/amd64/"><b>LiveDVD (Mar 8th, 2011)</b></a>
+						</p>
 					</li>
 					<li>
-						<h2>arm</h2>
-						<a href="http://distfiles.gentoo.org/releases/arm/autobuilds/current-stage3/">stages</a>
-					</li>
-					<li>
-						<h2>hppa</h2> 
-						<a href="http://distfiles.gentoo.org/releases/hppa/autobuilds/current-stage3/">stages</a>
-					</li>
-					<li>
-						<h2>ia64</h2> 
-						<a href="http://distfiles.gentoo.org/releases/ia64/autobuilds/current-iso/">iso</a>
-						<a href="http://distfiles.gentoo.org/releases/ia64/autobuilds/current-stage3/">stages</a>
-					</li>
-					<li>
-						<h2>ppc/ppc64</h2> 
-						<a href="http://distfiles.gentoo.org/releases/ppc/autobuilds/current-iso/">iso</a>
-						<a href="http://distfiles.gentoo.org/releases/ppc/autobuilds/current-stage3/">stages</a>
-					</li>
-					<li>
-						<h2>s390/s390x</h2> 
-						<a href="http://distfiles.gentoo.org/releases/s390/autobuilds/current-stage3/">stages</a>
-					</li>
-					<li>
-						<h2>sh</h2> 
-						<a href="http://distfiles.gentoo.org/releases/sh/autobuilds/current-stage3/">stages</a>
-					</li>
-					<li>
-						<h2>sparc</h2> 
-						<a href="http://distfiles.gentoo.org/releases/sparc/autobuilds/current-iso/">iso</a>
-						<a href="http://distfiles.gentoo.org/releases/sparc/autobuilds/current-stage3/">stages</a>
-					</li>
-					<li>
-						<h2>x86</h2> 
+						<h1>x86</h1> 
 						<a href="http://distfiles.gentoo.org/releases/x86/autobuilds/current-iso/">iso</a>
 						<a href="http://distfiles.gentoo.org/releases/x86/autobuilds/current-stage3/">stages</a>
+						<p>
+							<a href="http://bouncer.gentoo.org/fetch/gentoo-11.0-livedvd/x86/"><b>LiveDVD (Mar 8th, 2011)</b></a>
+						</p>
 					</li>
 				</ul>
 			</div>
 			<div style="clear:both;"></div>
-			<div class="other">
-				<p>
-					<b>LiveDVD (released 2011 Mar 8)</b>
-					<br />(up to 2.5 gigabytes depending on arch)
-					<br />
-					<a href="http://bouncer.gentoo.org/fetch/gentoo-11.0-livedvd/amd64/">amd64</a>
-					<a href="http://bouncer.gentoo.org/fetch/gentoo-11.0-livedvd/x86/">x86</a>
-				</p>
+			<div class="arches">
+				<h1>
+					Other Architectures
+				</h1>
+				<table style="margin: auto;">
+					<tbody>
+						<tr>
+							<td class="cool">alpha</td>
+							<td><a href="http://distfiles.gentoo.org/releases/alpha/autobuilds/current-iso/">iso</a></td>
+							<td><a href="http://distfiles.gentoo.org/releases/alpha/autobuilds/current-stage3/">stages</a></td>
+						</tr>
+						<tr>
+							<td class="cool">arm</td>
+							<td></td>
+							<td><a href="http://distfiles.gentoo.org/releases/arm/autobuilds/current-stage3/">stages</a></td>
+						</tr>
+
+						<tr>
+							<td class="cool">hppa</td>
+							<td></td>
+							<td></td>
+						</tr>
+						<tr>
+							<td class="cool">ia64</td>
+							<td><a href="http://distfiles.gentoo.org/releases/ia64/autobuilds/current-iso/">iso</a></td>
+
+							<td><a href="http://distfiles.gentoo.org/releases/ia64/autobuilds/current-stage3/">stages</a></td>
+						</tr>
+						<tr>
+							<td class="cool">ppc/ppc64</td>
+							<td><a href="http://distfiles.gentoo.org/releases/ppc/autobuilds/current-iso/">iso</a></td>
+							<td><a href="http://distfiles.gentoo.org/releases/ppc/autobuilds/current-stage3/">stages</a></td>
+
+						</tr>
+						<tr>
+							<td class="cool">s390/s390x</td>
+							<td><br /></td>
+							<td><a href="http://distfiles.gentoo.org/releases/s390/autobuilds/current-stage3/">stages</a></td>
+						</tr>
+						<tr>
+
+							<td class="cool">sh</td>
+							<td><br /></td>
+							<td><a href="http://distfiles.gentoo.org/releases/sh/autobuilds/current-stage3/">stages</a></td>
+						</tr>
+						<tr>
+							<td class="cool">sparc</td>
+							<td><a href="http://distfiles.gentoo.org/releases/sparc/autobuilds/current-iso/">iso</a></td>
+							<td><a href="http://distfiles.gentoo.org/releases/sparc/autobuilds/current-stage3/">stages</a></td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+			<div style="clear:both;"></div>
+			<div class="footer">
 				<p>
 					If you prefer to select a local mirror yourself, see <a href="http://www.gentoo.org/main/en/mirrors2.xml">Gentoo Mirrors</a>.
 				</p>
-			</div>
-			
-			<div class="footer">
 				<p>Copyright 2001-2011 Gentoo Foundation, Inc. Questions, Comments? <a class="highlight" href="http://www.gentoo.org/main/en/contact.xml">Contact us</a></p>
 			</div>
 		</div>
diff --git a/htdocs/style.css b/htdocs/style.css
index c3878e5..f897cc1 100644
--- a/htdocs/style.css
+++ b/htdocs/style.css
@@ -2,7 +2,7 @@
 Created by Matthew Summers*/
 
 body {
-	background: #DDDAEC;
+/* 	background: #DDDAEC; */
 	font-size: 16px;
 	font-family: sans-serif;
 	color: #45347B;
@@ -14,7 +14,7 @@ div.contain {
 	width:95%;
 	height:100%;
 	margin: 2em 2.5%;
-	background: rgba(255,255,255,0.20);
+/* 	background: rgba(255,255,255,0.20); */
 	-moz-border-radius: 142px;
 	-webkit-border-radius: 142px;
 	-opera-border-radius: 142px;
@@ -40,27 +40,28 @@ div.logo h1 {
 	padding-top: 6em;
 }
 
-div.arches {
-	width:100%;
-	margin:auto;
+div.big_arches {
+	width:84%;
+	margin:auto ;
 	min-height:5em;
 	text-align:center;
-	display:inline-block;
+	display:block;
 }
 
-div.arches ul {
+div.big_arches ul {
 	display:inline-block;
 	margin: 0 auto;
 	text-align:center;
+	width: 100%;
 }
 
-div.arches ul li {
+div.big_arches ul li {
 	float:left;
 	display:block;
-	width:17%;
+	width:42%;
 	min-width: 160px;
 	margin: 1%;
-/* 	padding: 0.5%; */
+	padding: 0.5%;
 	min-height: 160px;
 	text-align:center;
 	border: none;
@@ -68,20 +69,21 @@ div.arches ul li {
 	-webkit-border-radius: 20px;
 	-opera-border-radius: 20px;
 	border-radius: 20px;
-	-moz-box-shadow: 0 0 1em #000;
-	-webkit-box-shadow: #000 0 0 1em;
-	-opera-box-shadow: #000 0 0 1em;
-	box-shadow: 0 0 1em #000;
+	-moz-box-shadow: 0 0 1em #45347B;
+	-webkit-box-shadow: #45347B 0 0 1em;
+	-opera-box-shadow: #45347B 0 0 1em;
+	box-shadow: 0 0 1em #45347B;
+}
+div.big_arches ul li h2 {
+	display: block;
 }
 
-div.arches ul li a {
-/* 	background: rgba(0,0,0,0.25); */
-	color: #45347B;
-	margin-right:1em;
-	margin-bottom: 1em;
+div.big_arches ul li a {
+	background-color: #45347B;
+	color: #FFFFFF;
+	margin:0 1em 1em 1em;
 	font-weight: bold;
 	text-decoration: none;
-/* 	text-shadow:0 3px 2px #000000,  0px 0px 2px #000000; */
 	display:inline-block;
 	border: none;
 	padding: 0.25em 1em;
@@ -89,18 +91,51 @@ div.arches ul li a {
 	-webkit-border-radius: 10px;
 	-opera-border-radius: 10px;
 	border-radius: 10px;
-	-moz-box-shadow: 0 0 0.5em #000;
-	-webkit-box-shadow: #000 0 0 0.5em;
-	-opera-box-shadow: #000 0 0 0.5em;
-	box-shadow: 0 0 0.5em #000;
+	-moz-box-shadow: 0 0 0.5em #45347B;
+	-webkit-box-shadow: #45347B 0 0 0.5em;
+	-opera-box-shadow: #45347B 0 0 0.5em;
+	box-shadow: 0 0 0.5em #45347B;
 }
 
-div.arches ul li a:hover {
-	text-decoration: none;
-	-moz-box-shadow:inset 0 0 0.5em #000;
-	-webkit-box-shadow:inset #000 0 0 0.5em;
-	-opera-box-shadow: inset #000 0 0 0.5em;
-	box-shadow:inset 0 0 0.5em #000;
+div.big_arches ul li a:hover {
+	text-decoration: dotted;
+	-moz-box-shadow:inset 0 0 0.5em #45347B;
+	-webkit-box-shadow:inset #45347B 0 0 0.5em;
+	-opera-box-shadow: inset #45347B 0 0 0.5em;
+	box-shadow:inset 0 0 0.5em #45347B;
+}
+
+div.arches {
+	width:50%;
+	margin:2em auto;
+	padding:1em;
+	min-height:5em;
+	text-align:center;
+	display:block;
+	-moz-border-radius: 20px;
+	-webkit-border-radius: 20px;
+	-opera-border-radius: 20px;
+	border-radius: 20px;
+	-moz-box-shadow: 0 0 1em #45347B;
+	-webkit-box-shadow: #45347B 0 0 1em;
+	-opera-box-shadow: #45347B 0 0 1em;
+	box-shadow: 0 0 1em #45347B;
+}
+
+
+td.cool {
+	text-align: left;
+	padding-right: 3em;
+	width: 5em;
+}
+
+td a {
+	color:#45347B;
+	text-decoration:underline;
+}
+
+td {
+	padding: 0.25em 1em;
 }
 
 div.two ul li {
@@ -121,21 +156,6 @@ div.three ul li {
 	text-align:center;
 	}
 
-div.other {
-	margin:2em auto;
-	padding:1em 0.5em;
-	text-align:center;
-	width: 42%;
-	-moz-border-radius: 20px;
-	-webkit-border-radius: 20px;
-	-opera-border-radius: 20px;
-	border-radius: 20px;
-	-moz-box-shadow: 0 0 1em #000;
-	-webkit-box-shadow: #000 0 0 1em;
-	-opera-box-shadow: #000 0 0 1em;
-	box-shadow: 0 0 1em #000;
-}
-
 div.footer {
 /* 	display:inline-block; */
 	text-align:center;