margin-bottom: 0; } }
h3.headline {
text-align: center;
- font-size: 36px;
- line-height: 48px;
+ font-size: 32px;
+ line-height: 44px;
color: #263238; }
+ @media (min-width: 576px) {
+ h3.headline {
+ font-size: 36px;
+ line-height: 48px; } }
h4 {
font-weight: 500;
font-size: 24px;
line-height: 32px; } }
p.copy {
- margin-top: 24px; }
+ margin-top: 16px; }
+ @media (min-width: 576px) {
+ p.copy {
+ margin-top: 24px; } }
.display-1 {
font-size: 120px;
transition: opacity .35s ease-in-out; }
.fixed-top {
- transition: background-color .5s linear;
+ transition: background-color .25s linear;
height: 56px; }
@media (min-width: 576px) {
.fixed-top {
height: 100vh;
padding-top: 64px;
transform: translateX(-256px);
- transition: all 0.25s ease-in-out; }
+ transition: all .15s ease-in-out; }
#navbarSupportedContent.open {
transform: translateX(0);
- transition: all .25s ease-in-out;
+ transition: all .15s ease-in-out;
box-shadow: 14px 0 28px 0 rgba(0, 0, 0, 0.25), 10px 0 10px 0 rgba(0, 0, 0, 0.26); } }
@media (min-width: 992px) {
.navbar-nav .nav-link:hover:after {
transform: scaleX(1); } }
-body.About li.nav-item a.about {
- color: #b71c1c; }
- body.About li.nav-item a.about:after {
- content: "";
- border-bottom: 2px solid #b71c1c;
- position: absolute;
- width: 100%;
- left: 0;
- top: 44px;
- padding: inherit;
- transform: scale(1); }
+@media (min-width: 992px) {
+ body.About li.nav-item a.about {
+ color: #b71c1c; }
+ body.About li.nav-item a.about:after {
+ content: "";
+ border-bottom: 2px solid #b71c1c;
+ position: absolute;
+ width: 100%;
+ left: 0;
+ top: 44px;
+ padding: inherit;
+ transform: scale(1); } }
#sidebar {
padding: 0; }
+ @media (max-width: 991px) {
+ #sidebar {
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.23);
+ position: fixed;
+ top: 52px;
+ z-index: 9999;
+ background-color: white; } }
#sidebar ul {
list-style: none; }
#sidebar ul.features_nav {
- padding: 0 0 24px 0; }
+ padding: 0 0 24px 0;
+ overflow-x: auto; }
+ #sidebar ul.features_nav.fixed {
+ position: fixed;
+ top: 100px;
+ outline: 1px solid grey; }
#sidebar ul ul {
margin: 0;
padding-left: 0; }
border-left: 2px solid #b71c1c;
padding: 0 8px 0 6px; }
+/* Fix for Android */
+body {
+ -webkit-animation: bugfix infinite 1s; }
+
+@-webkit-keyframes bugfix {
+ from {
+ padding: 0; }
+ to {
+ padding: 0; } }
+
+/* default checkbox */
+input[type=checkbox] {
+ position: absolute;
+ top: -9999px;
+ left: -9999px; }
+
+label {
+ cursor: pointer;
+ user-select: none; }
+
+nav[role="dropdown"] label {
+ display: none; }
+
+@media screen and (max-width: 44em) {
+ nav[role="dropdown"] ul {
+ height: 48px;
+ overflow: hidden; }
+ nav[role="dropdown"] label {
+ position: relative;
+ display: block;
+ width: 100%; }
+ nav[role="dropdown"] label:after {
+ font-family: FontAwesome;
+ font-size: 24px;
+ content: "\f107";
+ position: absolute;
+ right: 20px;
+ top: 12px; }
+ nav[role="dropdown"] input:checked ~ label:after {
+ content: "\f106"; }
+ nav[role="dropdown"] input:checked ~ ul {
+ display: block;
+ height: 40vh;
+ overflow-y: scroll; } }
+
.btn-red900 {
color: #fff !important;
background-color: #b71c1c;
padding-bottom: 48px; }
.features-content {
- padding-top: 161px;
+ padding-top: 88px;
margin-bottom: 40px; }
+ @media (min-width: 576px) {
+ .features-content {
+ padding-top: 161px; } }
.features-content .content {
background: white;
border-radius: 4px;
height: 4px;
border-radius: 2px;
background-image: linear-gradient(to right, #b71c1c, #ff3d00);
- margin: 56px auto 40px auto; }
+ margin: 40px auto 24px auto; }
+ @media (min-width: 576px) {
+ .divider {
+ margin: 56px auto 40px auto; } }
footer {
padding: 3rem 0 0 0; }
}
.features-content {
- padding-top: 161px;
+ padding-top: 88px;
margin-bottom: 40px;
+ @include media-breakpoint-up(sm) {
+ padding-top: 161px;
+ }
.content {
background: white;
border-radius: 4px;
height: 4px;
border-radius: 2px;
background-image: linear-gradient(to right, $red_900, $deep_orange_a400);
- margin: 56px auto 40px auto;
+ margin: 40px auto 24px auto;
+ @include media-breakpoint-up(sm) {
+ margin: 56px auto 40px auto;
+ }
}
footer {
<meta name="description" content="{{ _("IPFire is a free firewall distribution based on Linux.") }}" />
<!-- styling stuff -->
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="{{ static_url("css/style.css") }}" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% block container %}
<div class="container features-content">
<div class="row">
- <nav id="sidebar" class="col-3">
+ <nav id="sidebar" class="col-sm-12 col-md-3" role="dropdown">
+ <input type="checkbox" id="menu">
+ <label for="menu" onclick></label>
<ul class="nav flex-column features_nav">
<li class="nav-item"><a class="nav-link active" href="#about">About IPFire</a></li>
<li class="nav-item"><a class="nav-link" href="#security">Security</a></li>
</ul>
</nav>
- <section class="content col-9">
+ <section class="content col-sm-12 col-md-9">
<section id="about">
<h3 class="headline">About IP<strong>Fire</strong></h3>
<h5 class="subheadline">The Open Source Firewall Distribution</h5>
<h4 class="secondHeadline">Web User-Interface screenshots</h4>
<div class="row">
- <div class="col-3">
+ <div class="col-sm-12 col-md-3">
<a class="thumbnail" href="{{ static_url("images/screenshots/en/firewall/rules.png") }}">
<img class="img-fluid" src="{{ static_url("images/screenshots/en/firewall/rules.png") }}" alt="{{ _("Screenshot") }}">
</a>
</div>
- <div class="col-3">
+ <div class="col-sm-12 col-md-3">
<a class="thumbnail" href="{{ static_url("images/screenshots/en/firewall/new-rule.png") }}">
<img class="img-fluid" src="{{ static_url("images/screenshots/en/firewall/new-rule.png") }}" alt="{{ _("Screenshot") }}">
</a>
</div>
- <div class="col-3">
+ <div class="col-sm-12 col-md-3">
<a class="thumbnail" href="{{ static_url("images/screenshots/en/firewall/service-groups.png") }}">
<img class="img-fluid" src="{{ static_url("images/screenshots/en/firewall/service-groups.png") }}" alt="{{ _("Screenshot") }}">
</a>
</div>
<div class="row">
- <div class="col-3">
+ <div class="col-sm-12 col-md-3">
<a class="thumbnail" href="{{ static_url("images/screenshots/en/firewall/host-groups.png") }}">
<img class="img-fluid" src="{{ static_url("images/screenshots/en/firewall/host-groups.png") }}" alt="{{ _("Screenshot") }}">
</a>
</div>
- <div class="col-3">
+ <div class="col-sm-12 col-md-3">
<a class="thumbnail" href="{{ static_url("images/screenshots/en/firewall/connections-1.png") }}">
<img class="img-fluid" src="{{ static_url("images/screenshots/en/firewall/connections-1.png") }}" alt="{{ _("Screenshot") }}">
</a>
<div class="row">
- <div class="col-3">
+ <div class="col-sm-12 col-md-3">
<a class="thumbnail" href="{{ static_url("images/screenshots/en/pakfire/pakfire-overview-1.png") }}">
<img class="img-fluid" src="{{ static_url("images/screenshots/en/pakfire/pakfire-overview-1.png") }}" alt="{{ _("Screenshot") }}">
</a>
</div>
- <div class="col-3">
+ <div class="col-sm-12 col-md-3">
<a class="thumbnail" href="{{ static_url("images/screenshots/en/pakfire/addon-services-1.png") }}">
<img class="img-fluid" src="{{ static_url("images/screenshots/en/pakfire/addon-services-1.png") }}" alt="{{ _("Screenshot") }}">
</a>
{% end %}
<div class="row">
- <div class="col-3">
+ <div class="col-sm-12 col-md-3">
<a class="thumbnail" href="{{ static_url("images/screenshots/en/virtualization/virt-manager-1.png") }}">
<img class="img-fluid" src="{{ static_url("images/screenshots/en/virtualization/virt-manager-1_thumb.png") }}" alt="{{ _("Screenshot") }}">
</a>
$('body').scrollspy({ target: '#sidebar', offset: 148 })
$('a[href^="#"]').on('click', function(event) {
- var target = $(this.getAttribute('href'));
- if( target.length ) {
- event.preventDefault();
- $('html, body').stop().animate({
- scrollTop: target.offset().top -150
- }, 750);
- }
- });
+ var target = $(this.getAttribute('href'));
+ if( target.length ) {
+ event.preventDefault();
+ $('html, body').stop().animate({
+ scrollTop: target.offset().top -147
+ }, 750);
+ }
+ });
});
</script>
{% end block %}
\ No newline at end of file