Feature page mobile version first steps.

[people/shoehn/ipfire.org.git] / templates / static / features.html

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