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 e16a97cd53c3a701f3b995c0776d89d0ebe59d6f..7b74a0b042a6bca4026454240cdf628834340949 100644 (file)
--- 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 5d544dcb122d3497fcffe3ae598022dc00abdc8f..202f77c81338883555df28026e2b4941c8d0a698 100644 (file)
--- 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">