basic style Download page

diff --git a/static/css/style.css b/static/css/style.css
index 9d491dd64992fde434e93538c7cb625a76952689..b54e37a0baf446d258824a2d0e44ad86b546d061 100644 (file)
--- 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 a97b14b8092b63141349bdc4b97a39e280a91e43..5f061c2034f42d3743eda56f88c1ef3d7d3cf357 100644 (file)
--- 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 98bf3b9f47b211b1e06f7da0cbd00ee41992fbb8..e336458ff67a3279c3407c77efa4a0ac0da9cde2 100644 (file)
--- 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="http://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 0a3ed984bad67977ee86685a8972911b17713768..09667fdcf77144cf6154dd6e75e138d4c72f9769 100644 (file)
--- 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