.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;
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;
.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; }
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;
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;
// 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';
}
}
-// 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 {
{% 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 %}
-<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