Feature page mobile version first steps.

diff --git a/static/css/style.css b/static/css/style.css
index 27b3d6828513e6ae22564d24f688b28deaa984f3..bb32825af4591bef5d6667f6346b168db74156dc 100644 (file)
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -4401,9 +4401,13 @@ h3 {
       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;
@@ -4444,7 +4448,10 @@ p {
         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;
@@ -4558,7 +4565,7 @@ h5.fireinfo {
   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 {
@@ -4635,10 +4642,10 @@ h5.fireinfo {
       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) {
@@ -4687,24 +4694,37 @@ h5.fireinfo {
   .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; }
@@ -4724,6 +4744,51 @@ body.About li.nav-item a.about {
           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;
@@ -5012,8 +5077,11 @@ section#appliances {
   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;
@@ -5026,7 +5094,10 @@ section#appliances {
   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; }

diff --git a/static/scss/style.scss b/static/scss/style.scss
index 20bb379792ec539175dc64c09efa2cf33ca88751..a97b14b8092b63141349bdc4b97a39e280a91e43 100644 (file)
--- a/static/scss/style.scss
+++ b/static/scss/style.scss
@@ -261,8 +261,11 @@ section#appliances {
 }
 
 .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;
@@ -277,7 +280,10 @@ section#appliances {
        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 {

diff --git a/templates/base.html b/templates/base.html
index 88d15d1563e6bd1cdc1920e78ba950e83a759dbf..c376475dca066699b820be5cfaca604a24fb6dab 100644 (file)
--- a/templates/base.html
+++ b/templates/base.html
@@ -12,6 +12,7 @@
                <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">

diff --git a/templates/static/features.html b/templates/static/features.html
index 091c41fde50c52f479af1d8211a5012d7ef9d983..b8ba1cfaa09324f4290324c86e473fbab5a48a96 100644 (file)
--- a/templates/static/features.html
+++ b/templates/static/features.html
@@ -5,7 +5,9 @@
 {% 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>
@@ -35,7 +37,7 @@
                                </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>
@@ -360,19 +362,19 @@
                                        <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>
@@ -380,13 +382,13 @@
                                        </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>
@@ -455,13 +457,13 @@
                
                
                                <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>
@@ -1468,7 +1470,7 @@
                                        {% 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>
@@ -1520,14 +1522,14 @@
                $('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