line-height: 2rem; }
h4 {
- font-weight: 600;
+ font-weight: 500;
line-height: 1.75rem; }
+ @media (max-width: 767px) {
+ h4 {
+ font-size: 1em; } }
h5 {
line-height: 1.5rem; }
animation: scroll 1.5s ease-in-out infinite; }
@media (max-width: 767px) {
.i_arrow_down {
- width: 2rem !important;
- height: 2rem !important;
- left: .15rem;
- top: -.75rem; } }
+ width: 1.75rem !important;
+ height: 1.75rem !important;
+ left: .25rem;
+ top: -.5rem; } }
.i_lg {
width: 2.5rem;
color: #546e7a;
position: absolute;
top: calc(50% - 1.25rem);
- width: 100%; }
+ width: 100%;
+ font-size: 1.25em; }
footer {
padding: 3rem 0 0 0; }
// Colors
-
.amber-800 {
color: $amber-800;
}
// Fonts
-
h1 {
line-height: 3rem;
}
}
h4 {
- font-weight: 600;
+ font-weight: 500;
line-height: 1.75rem;
+ @include media-breakpoint-down(sm) {
+ font-size: 1em;
+ }
}
h5 {
top: -.25rem;
animation: scroll 1.5s ease-in-out infinite;
@include media-breakpoint-down(sm) {
- width: 2rem !important;
- height: 2rem !important;
- left: .15rem;
- top: -.75rem;
+ width: 1.75rem !important;
+ height: 1.75rem !important;
+ left: .25rem;
+ top: -.5rem;
}
}
position: absolute;
top: calc(50% - 1.25rem);
width: 100%;
+ font-size: 1.25em;
}
}
<div class="container">
<h2 class="display-2 text-center">Fire<strong>Info</strong> Statistics</h2>
- <div class="row mb-6 mb-md-5 pb-lg-5 mb-lg-6">
+ <div class="row mb-6 mb-md-5 pb-lg-5 mb-lg-6">
<div class="col-6 col-md-3 mb-6 text-center">
- <p class="mb-3"><small>Latest Release</small></p>
+ <p class="mb-0 mb-sm-3"><small>Latest Release</small></p>
<h4 class="pb-5">2.19 Core 109</h4>
<div class="r_circle circle mt-5">
<p class="lead">48%</p>
</div>
<div class="col-6 col-md-3 mb-6 text-center">
- <p class="mb-3"><small>Favorite Kernel</small></p>
+ <p class="mb-0 mb-sm-3"><small>Favorite Kernel</small></p>
<h4 class="pb-5 truncate">3.14.79-ipfire-pae</h4>
<div class="f_circle circle mt-5">
<p class="lead">36%</p>
</div>
<div class="col-6 col-md-3 text-center">
- <p class="mb-3"><small>Favorite CPU</small></p>
+ <p class="mb-0 mb-sm-3"><small>Favorite CPU</small></p>
<h4 class="pb-5">Intel</h4>
<div class="c_circle circle mt-5">
<p class="lead">71%</p>
</div>
<div class="col-6 col-md-3 text-center">
- <p class="mb-3 truncate"><small>Favorite Virtualisation</small></p>
+ <p class="mb-0 mb-sm-3 truncate"><small>Favorite Virtualisation</small></p>
<h4 class="pb-5">VMWare</h4>
<div class="v_circle circle mt-5">
<p class="lead">46%</p>