h3 {
line-height: 2rem; }
+ @media (max-width: 767px) {
+ h3 {
+ font-size: 1em; } }
h4 {
font-weight: 500;
p {
line-height: 1.5rem; }
+ @media (max-width: 767px) {
+ p {
+ font-size: .85em; } }
p.lead {
line-height: 2rem; }
@media (max-width: 991px) {
font-size: 2rem;
line-height: 2.75rem; } }
-@media (max-width: 767px) {
+@media (max-width: 575px) {
.display-4 {
font-size: .875rem;
line-height: 1.25rem; } }
small {
line-height: 1rem; }
+ @media (max-width: 767px) {
+ small {
+ font-size: .75em; } }
.truncate {
width: 100%;
top: -.25rem;
-webkit-animation: scroll 1.5s ease-in-out infinite;
animation: scroll 1.5s ease-in-out infinite; }
- @media (max-width: 767px) {
+ @media (max-width: 575px) {
.i_arrow_down {
width: 1.75rem !important;
height: 1.75rem !important;
@media (min-width: 768px) {
.btn-block {
margin: 0 0 2rem 0; } }
- @media (max-width: 767px) {
+ @media (max-width: 575px) {
.btn-block {
font-size: .875rem;
line-height: 0; } }
margin-bottom: 64px;
text-align: center;
color: #546e7a; }
- @media (min-width: 768px) {
+ @media (min-width: 576px) {
section.intro .branding {
padding-top: 192px; } }
section.intro .branding h1 {
font-weight: 300 !important;
color: #263238; }
- @media (max-width: 767px) {
+ @media (max-width: 575px) {
section.intro .branding h1 {
font-size: 4.5rem; } }
section.intro .branding h1 strong {
display: inline-block;
position: relative;
top: 4px; }
- @media (min-width: 768px) {
+ @media (min-width: 576px) {
section.intro .branding h1:before {
height: 120px;
width: 93px;
width: 36px;
height: 36px;
fill: #b71c1c; }
- @media (min-width: 768px) {
+ @media (min-width: 576px) {
section.intro .page-scroll .btn {
width: 64px;
height: 64px; } }
section.content-section {
padding: 3rem 0; }
- @media (min-width: 768px) {
+ @media (min-width: 576px) {
section.content-section {
padding: 72px 0; } }
width: 100%;
font-size: 1.25em; }
+section#appliances {
+ padding-bottom: 48px; }
+
footer {
padding: 3rem 0 0 0; }
+ @media (max-width: 991px) {
+ footer {
+ padding-top: 31px; } }
footer h4 {
margin-bottom: 1.25rem;
color: rgba(38, 50, 56, 0.6); }
h3 {
line-height: 2rem;
+ @include media-breakpoint-down(sm) {
+ font-size: 1em;
+ }
}
h4 {
p {
line-height: 1.5rem;
+ @include media-breakpoint-down(sm) {
+ font-size: .85em;
+ }
&.lead {
line-height: 2rem;
@include media-breakpoint-down(md) {
}
.display-4 {
- @include media-breakpoint-down(sm) {
+ @include media-breakpoint-down(xs) {
font-size: .875rem;
line-height: 1.25rem;
}
small {
line-height: 1rem;
+ @include media-breakpoint-down(sm) {
+ font-size: .75em;
+ }
}
.truncate {
left: .75rem;
top: -.25rem;
animation: scroll 1.5s ease-in-out infinite;
- @include media-breakpoint-down(sm) {
+ @include media-breakpoint-down(xs) {
width: 1.75rem !important;
height: 1.75rem !important;
left: .25rem;
@include media-breakpoint-up(md) {
margin: 0 0 2rem 0;
}
- @include media-breakpoint-down(sm) {
+ @include media-breakpoint-down(xs) {
font-size: .875rem;
line-height: 0;
}
position: relative;
.branding {
padding-top: 6rem;
- @include media-breakpoint-up(md) {
+ @include media-breakpoint-up(sm) {
padding-top: 192px;
}
margin-bottom: 64px;
h1 {
font-weight: 300 !important;
color: $blue-grey-900;
- @include media-breakpoint-down(sm) {
+ @include media-breakpoint-down(xs) {
font-size: 4.5rem;
}
strong {
display: inline-block;
position: relative;
top: 4px;
- @include media-breakpoint-up(md) {
+ @include media-breakpoint-up(sm) {
height: 120px;
width: 93px;
margin-right: 32px;
width: 36px;
height: 36px;
fill: $red_900;
- @include media-breakpoint-up(md) {
+ @include media-breakpoint-up(sm) {
width: 64px;
height: 64px;
}
section.content-section {
padding: 3rem 0;
- @include media-breakpoint-up(md) {
+ @include media-breakpoint-up(sm) {
padding: 72px 0;
}
}
}
}
+section#appliances {
+ padding-bottom: 48px;
+}
+
footer {
padding: 3rem 0 0 0;
+ @include media-breakpoint-down(md) {
+ padding-top: 31px;
+ }
h4 {
margin-bottom: 1.25rem;
color: rgba($blue-grey-900, .6);
<footer class="footer">
<div class="container pb-3">
<div class="row mb-6">
- <div class="col-6 col-md-3 col-lg-2 mb-5">
+ <div class="col-6 col-sm-5 offset-sm-1 col-md-3 col-lg-2 mb-5">
<h4>{{ _("About") }}</h4>
<ul class="list-unstyled">
</ul>
</div>
- <div class="col-6 col-md-3 col-lg-2 mb-5">
+ <div class="col-6 col-sm-5 col-md-3 col-lg-2 mb-5">
<h4>{{ _("Support") }}</h4>
<ul class="list-unstyled">
</ul>
</div>
- <div class="col-6 col-md-3 col-lg-2 mb-5">
+ <div class="col-6 col-sm-5 offset-sm-1 col-md-3 col-lg-2 mb-5">
<h4>{{ _("Community") }}</h4>
<ul class="list-unstyled">
</ul>
</div>
- <div class="col-6 col-md-3 col-lg-2 mb-6">
+ <div class="col-6 col-sm-5 col-md-3 col-lg-2 mb-6">
<h4>{{ _("Development") }}</h4>
<ul class="list-unstyled">
</ul>
</div>
- <div class="col-md-12 col-lg-4 pt-md-6 pt-lg-1 text-center">
+ <div class="col-sm-8 offset-sm-2 col-md-12 col-lg-4 pt-md-6 pt-lg-1 text-center">
<a class="btn btn-primary btn-lg" href="//www.ipfire.org/donate">
<svg class="icon i_heart"><use xlink:href="#heart"/></svg>
{{ _("Donate") }}
{% end %}
</p>
</div>
- <div class="col-md-6 offset-md-3 col-lg-4 offset-lg-1">
+ <div class="col-sm-6 offset-sm-3 col-lg-4 offset-lg-1 mt-sm-5">
<a class="btn btn-bluegrey900 btn-lg btn-block px-md-0" href="/get-support#professional">{{ _("Get Professional Support") }}</a>
<a class="btn btn-bluegrey900 btn-lg btn-block px-md-0" href="/hardware">{{ _("Hardware Appliances") }}</a>
</div>