From 7ca46dd8f30dbdac47ea481b9c2b0f1ce46289fa Mon Sep 17 00:00:00 2001
From: Sven Hoehn <shoehn@ipfire.org>
Date: Sat, 4 Nov 2017 12:27:51 +0100
Subject: [PATCH] basic style Download page

---
 static/css/style.css                   | 38 +++++++++++++++-------
 static/scss/style.scss                 | 45 ++++++--------------------
 templates/download.html                | 22 ++++++-------
 templates/modules/download-button.html | 13 +++++---
 4 files changed, 55 insertions(+), 63 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 9d491dd6..b54e37a0 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -4376,9 +4376,15 @@ a.text-gray-dark:focus, a.text-gray-dark:hover {
   .hidden-print {
     display: none !important; } }
 
+body {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column; }
+
 .container {
   width: 100%;
-  max-width: 1200px; }
+  max-width: 1200px;
+  flex: 1; }
 
 body {
   -webkit-font-smoothing: antialiased;
@@ -4695,9 +4701,11 @@ h5.fireinfo {
     transform: scaleX(1); } }
 
 @media (min-width: 992px) {
-  body.About li.nav-item a.about {
+  body.About li.nav-item a.about,
+  body.Download li.nav-item a.download {
     color: #b71c1c; }
-    body.About li.nav-item a.about:after {
+    body.About li.nav-item a.about:after,
+    body.Download li.nav-item a.download:after {
       content: "";
       border-bottom: 2px solid #b71c1c;
       position: absolute;
@@ -4880,6 +4888,11 @@ button.navbar-toggler div {
   .btn-outline-secondary:hover {
     transition: background-color .25s ease-in-out; }
 
+.btn-xlg {
+  height: 72px;
+  margin: 0 36px;
+  padding-top: 16px; }
+
 .btn-lg, .btn-group-lg > .btn {
   height: 48px;
   margin: 0 24px; }
@@ -4922,14 +4935,6 @@ button:focus {
     vertical-align: -7px;
     margin-right: 5px; }
 
-.amber-800 {
-  color: #ff8f00; }
-
-img.img-fluid {
-  width: 100%;
-  max-width: 100%;
-  height: auto; }
-
 .icon {
   width: 1.5rem;
   height: 1.5rem;
@@ -4958,10 +4963,21 @@ img.img-fluid {
   transform: translateY(-0.35rem);
   fill: #b71c1c; }
 
+.i_white {
+  fill: white; }
+
 .i_sm {
   vertical-align: top;
   transform: translateY(-0.1rem); }
 
+.amber-800 {
+  color: #ff8f00; }
+
+img.img-fluid {
+  width: 100%;
+  max-width: 100%;
+  height: auto; }
+
 footer .btn-toolbar .icon {
   height: 2.25rem;
   width: 2.25rem;
diff --git a/static/scss/style.scss b/static/scss/style.scss
index a97b14b8..5f061c20 100644
--- a/static/scss/style.scss
+++ b/static/scss/style.scss
@@ -53,15 +53,24 @@
 // Utility classes
 @import "bootstrap-4.0.0-alpha.6/scss/utilities";
 
+
+body {
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+}
+
 .container {
 	width: 100%;
 	max-width: 1200px;
+	flex: 1;
 }
 
 // Custom stuff
 @import '_fonts';
 @import '_nav';
 @import '_buttons';
+@import '_icons';
 
 
 
@@ -79,42 +88,6 @@ img {
 	}
 }
 
-// Icons
-.icon {
-	width: 1.5rem;
-	height: 1.5rem;
-	fill: currentColor;
-	vertical-align: -.15rem;
-	overflow: hidden;
-	margin-right: .5rem;
-}
-
-.i_arrow_down {
-	margin: 0;
-	position: absolute;
-	left: .75rem;
-	top: -.25rem;
-	animation: scroll 1.5s ease-in-out infinite;
-	@include media-breakpoint-down(xs) {
-		width: 1.75rem !important;
-		height: 1.75rem !important;
-		left: .25rem;
-		top: -.5rem;
-	}
-}
-
-.i_lg {
-	width: 2.5rem;
-	height: 2.5rem;
-	margin: 0;
-	transform: translateY(-.35rem);
-	fill: $red_900;
-}
-
-.i_sm {
-	vertical-align: top;
-	transform: translateY(-.10rem);
-}
 
 footer {
 	.btn-toolbar .icon {
diff --git a/templates/download.html b/templates/download.html
index 08c6c892..e336458f 100644
--- a/templates/download.html
+++ b/templates/download.html
@@ -3,17 +3,15 @@
 {% block title %}{{ _("Download IPFire") }}{% end block %}
 
 {% block container %}
-	<div class="container page-header">
-		<h1>{{ _("Download IPFire") }}</h1>
+	<div class="container features-content">
+		<section class="content col-12">
+			<h3 class="headline mb-5">Download IP<strong>Fire</strong></h3>
+			
+			<div class="d-flex justify-content-center">
+				{% module DownloadButton(release) %}
+			</div>
+			
+			<h5 class="subheadline mt-5"><a href="//downloads.ipfire.org/release/{{ release.sname }}">{{ _("Other download options") }}</a></h5>
+		</section>
 	</div>
-
-	<section id="download" class="container content-section text-center">
-		{% module DownloadButton(release) %}
-
-		<p>
-			<a href="https://downloads.ipfire.org/release/{{ release.sname }}">
-				{{ _("Other download options") }}
-			</a>
-		</p>
-	</section>
 {% end block %}
diff --git a/templates/modules/download-button.html b/templates/modules/download-button.html
index 0a3ed984..09667fdc 100644
--- a/templates/modules/download-button.html
+++ b/templates/modules/download-button.html
@@ -1,4 +1,9 @@
-<a class="btn btn-primary download-button download-splash" href="{{ escape(image.url) }}">
-	<span class="fa fa-download"></span> {{ _("Download %s") % escape(release.name) }}<br>
-	<small>({{ _("ISO-Image") }} - {{ escape(image.arch) }} - {{ format_size(image.size) }})</small>
-</a>
+<a class="btn btn-primary btn-xlg m-5 d-flex justify-content-center" href="{{ escape(image.url) }}">
+	<div class="mr-3">
+		<svg class="icon i_lg i_white i_download"><use xlink:href="#download"/></svg>
+	</div>
+	<div>
+		{{ _("Download %s") % escape(release.name) }}<br>
+		<small>({{ _("ISO-Image") }} - {{ escape(image.arch) }} - {{ format_size(image.size) }})</small>
+	</div>
+</a>
\ No newline at end of file
-- 
2.47.3