index page: Redesign jumbotron.

diff --git a/static/css/style.css b/static/css/style.css
index 01ff740474fa6f88865101dba50a7e6bdbc23246..f8006300d731bc544a23c03330c0fa45eb71b0f3 100644 (file)
--- 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 (file)
index 0000000..23fa194
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 503ddc0d70497c787e4d100effb9ce726bb62103..ed2cf2f0bd643f3619e6393dd90be7ec097ead7a 100644 (file)
--- 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>