From: Michael Tremer <michael.tremer@ipfire.org>
Date: Wed, 26 Mar 2014 14:52:37 +0000 (+0100)
Subject: index page: Redesign jumbotron.
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=05f8cfae22544d819e5981b3fd7f8f9c15ac8481;p=ipfire.org.git

index page: Redesign jumbotron.
---

diff --git a/static/css/style.css b/static/css/style.css
index 01ff7404..f8006300 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -63,93 +63,45 @@ color: #5a5a5a;
 section > ul li {
 margin-bottom: 5px;
 }
+
 .jumbotron {
-position: relative;
-padding: 40px 0;
-color: #fff;
-text-align: center;
-text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
-background: #880400; /* Old browsers */
-background: -moz-linear-gradient(45deg, #000000 0%, #880400 100%); /* FF3.6+ */
-background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#000000), color-stop(100%,#880400)); /* Chrome,Safari4+ */
-background: -webkit-linear-gradient(45deg, #000000 0%,#880400 100%); /* Chrome10+,Safari5.1+ */
-background: -o-linear-gradient(45deg, #000000 0%, #880400 100%); /* Opera 11.10+ */
-background: -ms-linear-gradient(45deg, #000000 0%, #880400 100%); /* IE10+ */
-background: linear-gradient(45deg,  #000000 0%, #880400 100%); /* W3C */
-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#880400',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
--webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
--moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
-margin-bottom: 1em;
-}
-.jumbotron h1 {
-font-size: 80px;
-font-weight: bold;
-letter-spacing: -1px;
-line-height: 1;
-}
-.jumbotron p {
-font-size: 24px;
-font-weight: 300;
-line-height: 1.25;
-margin-bottom: 30px;
-}
-.jumbotron a {
-color: #fff;
-color: rgba(255,255,255,.5);
-}
-.jumbotron a:hover {
-color: #fff;
-text-shadow: 0 0 10px rgba(255,255,255,.25);
+	color: white;
+	background: #880400; /* Old browsers */
+	background: -moz-linear-gradient(45deg, #000000 0%, #880400 100%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#000000), color-stop(100%,#880400)); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(45deg, #000000 0%,#880400 100%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(45deg, #000000 0%, #880400 100%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(45deg, #000000 0%, #880400 100%); /* IE10+ */
+	background: linear-gradient(45deg,  #000000 0%, #880400 100%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#880400',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
+	-webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
+	-moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
+	box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
 }
+
 /* Download button */
 .masthead .btn, .download-button {
-padding: 19px 24px;
-font-size: 24px;
-font-weight: 200;
-color: #fff;
-}
-.jumbotron .container {
-position: relative;
-z-index: 2;
+	padding: 19px 24px;
+	font-size: 24px;
 }
+
 .masthead {
-padding: 70px 0 60px;
-margin-bottom: 0;
-color: #fff;
+	padding-top: 70px;
+	margin-bottom: 0;
 }
+
 .masthead h1 {
-font-size: 120px;
-line-height: 1;
-letter-spacing: -2px;
-}
-.masthead p {
-font-size: 40px;
-font-weight: 200;
-line-height: 1.25;
+	font-size: 120px;
+	line-height: 1;
+	letter-spacing: -2px;
 }
-.masthead-links {
-margin: 0;
-list-style: none;
-}
-.masthead-links li {
-display: inline;
-padding: 0 10px;
-color: rgba(255,255,255,.5);
-}
-.subhead {
-text-align: left;
-border-bottom: 1px solid #ddd;
-}
-.subhead h1 {
-font-size: 60px;
-}
-.subhead p {
-margin-bottom: 20px;
-}
-.subhead .navbar {
-display: none;
+
+.masthead p.lead {
+	font-size: 36px;
+	font-weight: 200;
+	line-height: 1.25;
 }
+
 .footer {
   border-top: 1px solid #E7E7E7;
   padding: 30px 0;
diff --git a/static/images/tux/ipfire_tux_420x420.png b/static/images/tux/ipfire_tux_420x420.png
new file mode 100644
index 00000000..23fa194c
Binary files /dev/null and b/static/images/tux/ipfire_tux_420x420.png differ
diff --git a/templates/index.html b/templates/index.html
index 503ddc0d..ed2cf2f0 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -6,27 +6,20 @@
 	<div class="jumbotron masthead">
 		<div class="container">
 			<div class="row">
-				<div class="col-lg-4 col-md-4">
-					<img src="{{ static_url("images/tux/ipfire_tux_512x512.png") }}" alt="IPFire Logo" />
-				</div>
-
-				<div class="col-lg-8 col-md-8">
+				<div class="col-lg-7 col-md-7 ac">
 					<h1>IPFire</h1>
+
 					<p class="lead">An Open Source Firewall Distribution</p>
 
+					<br class="separator">
+
 					<p>
 						<a class="btn btn-primary btn-lg" href="/download">{{ _("Download IPFire") }}</a>
 					</p>
+				</div>
 
-					<ul class="masthead-links">
-						{% if latest_release %}
-							<li>
-								{{ _("Latest release") }}:<br>
-								{{ latest_release.name }} &dash;
-								{{ locale.format_date(latest_release.date, relative=True, shorter=True) }}
-							</li>
-						{% end %}
-					</ul>
+				<div class="col-lg-5 col-md-5 ac">
+					<img src="{{ static_url("images/tux/ipfire_tux_420x420.png") }}" alt="IPFire Logo">
 				</div>
 			</div>
 		</div>
@@ -130,6 +123,17 @@
 
 		<div class="col-lg-6 col-md-6">
 			<div class="panel panel-default">
+				{% if latest_release %}
+					<div class="panel-heading ac">
+						<h3>
+							<a href="/download">{{ latest_release.name }}</a>
+						</h3>
+						<p>
+							{{ _("This is the latest release from %s.") % locale.format_date(latest_release.date, relative=True, shorter=True) }}
+						</p>
+					</div>
+				{% end %}
+
 				<div class="panel-body">
 					<h3>
 						<a href="/news">{{ _("What's new?") }}</a>