From: Michael Tremer <michael.tremer@ipfire.org>
Date: Mon, 30 Jul 2018 19:14:08 +0000 (+0100)
Subject: donation: Move explanation text to the bottom on smaller viewports
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=161b0c225ca01356b5f1e640581863709c6328e7;p=ipfire.org.git

donation: Move explanation text to the bottom on smaller viewports

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---

diff --git a/src/scss/style.scss b/src/scss/style.scss
index e16a97cd..7b74a0b0 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -272,6 +272,24 @@ footer {
 	}
 }
 
+.donation-explanation {
+	padding: 1.5rem;
+	margin-bottom: 2rem;
+
+	p {
+		color: $text-muted;
+	}
+
+	@include media-breakpoint-down(sm) {
+		background-color: $dark;
+		color: $white;
+
+		h5, p {
+			color: inherit;
+		}
+	}
+}
+
 // Sidebar navigation
 
 #sidebar .nav {
diff --git a/src/templates/donate.html b/src/templates/donate.html
index 5d544dcb..202f77c8 100644
--- a/src/templates/donate.html
+++ b/src/templates/donate.html
@@ -9,8 +9,27 @@
 
 	<div class="container">
 		<div class="card mb-5">
-			<div class="row flex-lg-row-reverse">
-				<div class="col-12 col-lg-8 p-4">
+			<div class="row">
+				<div class="d-none d-md-block col col-lg-4 p-4 bg-dark text-white">
+					<h5 class="text-white mt-4">Why we need you to donate today</h5>
+
+					<p>
+						IP<strong>Fire</strong> has grown to be the backbone of networks in companies,
+						schools and homes worldwide.
+					</p>
+
+					<p>
+						It is trusted by many and has proven that free software, developed by a diverse
+						community, can not only be equal, but better than proprietary solutions.
+					</p>
+
+					<p>
+						But still, development doesn’t come free to us and therefore
+						we are asking for your contribution today.
+					</p>
+				</div>
+
+				<div class="col p-4">
 					<form action="" method="POST">
 						{% raw xsrf_form_html() %}
 
@@ -244,9 +263,13 @@
 						</div>
 					</form>
 				</div>
+			</div>
+		</div>
 
-				<div class="col col-lg-4 p-4 bg-dark text-white">
-					<h5 class="text-white mt-4">Why we need you to donate today</h5>
+		<div class="row justify-content-center">
+			<div class="col-12 col-md-5 donation-explanation">
+				<div class="d-block d-md-none">
+					<h5>Why we need you to donate today</h5>
 
 					<p>
 						IP<strong>Fire</strong> has grown to be the backbone of networks in companies,
@@ -263,21 +286,17 @@
 						we are asking for your contribution today.
 					</p>
 				</div>
-			</div>
-		</div>
 
-		<div class="row justify-content-center">
-			<div class="col-10 col-md-5">
 				<section>
-					<h3>Why should I donate?</h3>
+					<h5>Why should I donate?</h5>
 
-					<p class="text-muted">
+					<p>
 						At IPFire, we are working hard to provide you with a free firewall distribution
 						that is like no other. We release updates regularly and enhance functionality
 						to make IPFire more secure, faster and easier to use.
 					</p>
 
-					<p class="text-muted">
+					<p>
 						To achieve our high standards that we have set for ourselves, we need your help.
 
 						Only with your donation, we can get the right tools, people and utilities that
@@ -289,22 +308,22 @@
 				</section>
 
 				<section>
-					<h3>How much should I give?</h3>
+					<h5>How much should I give?</h5>
 
-					<p class="text-muted">
+					<p>
 						We are grateful for every single donation, but of course, we appreciate
 						if you help us as much as you can.
 					</p>
 
-					<p class="text-muted">
+					<p>
 						We rely on steady contributions from companies to keep the project healthy
 						and encourage them to set up a monthly donation.
 					</p>
 				</section>
 			</div>
 
-			<div class="col-10 col-md-5 faq">
-				<h3>Frequently Asked Questions</h3>
+			<div class="col-12 col-md-5 faq">
+				<h5>Frequently Asked Questions</h5>
 
 				<p>
 					<a data-toggle="collapse" href="#faq-bank-transfer">