add spacing and menu on mobile

diff --git a/static/css/style.css b/static/css/style.css
index a310821478614730d24464c8af1174ca4c9cd2b8..d9ae7b0c45e331dd91a9d5957d7c1371c1528845 100644 (file)
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -4994,6 +4994,15 @@ a.text-gray-dark:focus, a.text-gray-dark:hover {
   .hidden-print {
     display: none !important; } }
 
+h4 {
+  font-weight: 600; }
+
+button.navbar-toggler div {
+  font-family: 'Ubuntu', sans-serif;
+  font-size: 1rem;
+  display: inline-block;
+  margin-left: 12px; }
+
 .btn {
   text-transform: uppercase;
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.25);
@@ -5032,7 +5041,10 @@ a.text-gray-dark:focus, a.text-gray-dark:hover {
           transform: translateY(-2px); }
 
 .btn-block {
-  margin: 0 0 2rem 0; }
+  margin: 0 0 1.5rem 0; }
+  @media (min-width: 768px) {
+    .btn-block {
+      margin: 0 0 2rem 0; } }
 
 .fixed-top {
   -webkit-transition: background-color 700ms linear;
@@ -5054,6 +5066,10 @@ a.text-gray-dark:focus, a.text-gray-dark:hover {
     -webkit-transition: opacity 700ms linear;
     transition: opacity 700ms linear; }
 
+.menu-text.hidden {
+  display: none;
+  visibility: hidden; }
+
 .navbar a {
   color: #263238; }
 
@@ -5061,8 +5077,11 @@ a.text-gray-dark:focus, a.text-gray-dark:hover {
   margin-top: .15rem; }
 
 .navbar-brand {
-  font-size: 2rem;
+  font-size: 1.25rem;
   font-weight: 300; }
+  @media (min-width: 576px) {
+    .navbar-brand {
+      font-size: 2rem; } }
   .navbar-brand img {
     margin-right: 1rem;
     -webkit-transform: translateY(-5px);
@@ -5152,7 +5171,10 @@ section.intro {
             width: 24px; } }
 
 section.content-section {
-  padding: 96px 0; }
+  padding: 3rem 0; }
+  @media (min-width: 768px) {
+    section.content-section {
+      padding: 96px 0; } }
 
 section#features,
 section#appliances,

diff --git a/static/js/site.js b/static/js/site.js
index 2b405a779f4bcd47d82ae3166b978064c7b44248..84521fb9807119afbf0f35664d3bb6659d5bc044 100644 (file)
--- a/static/js/site.js
+++ b/static/js/site.js
@@ -2,8 +2,10 @@ $(document).ready(function () {
     $(window).scroll(function () {
         if ($(document).scrollTop() > 100) {
             $(".fixed-top").addClass("scrolled");
+            $(".menu-text").addClass("hidden");
         } else {
             $(".fixed-top").removeClass("scrolled");
+            $(".menu-text").removeClass("hidden");
         }
     });
 });

diff --git a/static/scss/style.scss b/static/scss/style.scss
index 4115900f356e37c5e2a65f371963ac0ae30e9aed..8c51d586cc55be1cdbf873bb7f3e26abc23fbb48 100644 (file)
--- a/static/scss/style.scss
+++ b/static/scss/style.scss
@@ -53,6 +53,17 @@
 // Utility classes
 @import "bootstrap-4.0.0-alpha.6/scss/utilities";
 
+h4 {
+       font-weight: 600;
+}
+
+button.navbar-toggler div {
+       font-family: 'Ubuntu', sans-serif;
+       font-size: 1rem;
+       display: inline-block;
+       margin-left: 12px;
+}
+
 .btn {
        text-transform: uppercase;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .25);
@@ -91,7 +102,10 @@
 }
 
 .btn-block {
-       margin: 0 0 2rem 0;
+               margin: 0 0 1.5rem 0;
+       @include media-breakpoint-up(md) {
+               margin: 0 0 2rem 0;
+       }
 }
 
 .fixed-top {
@@ -116,6 +130,11 @@
        }
 }
 
+.menu-text.hidden {
+       display: none;
+       visibility: hidden;
+}
+
 .navbar {
        a {
                color: $blue-grey-900;
@@ -126,7 +145,10 @@
 }
 
 .navbar-brand {
-       font-size: 2rem;
+       font-size: 1.25rem;
+       @include media-breakpoint-up(sm) {
+               font-size: 2rem;
+       }
        font-weight: 300;
        img {
                margin-right: 1rem;
@@ -227,7 +249,10 @@ section.intro {
 }
 
 section.content-section {
-       padding: 96px 0;
+               padding: 3rem 0;
+       @include media-breakpoint-up(md) {
+               padding: 96px 0;
+       }
 }
 
 section#features,

diff --git a/templates/base.html b/templates/base.html
index 3e47bae40de73193275e4a3eaf222a2068ace68d..c420810852d2bd3ecc778e9cc98e439727d85b41 100644 (file)
--- a/templates/base.html
+++ b/templates/base.html
@@ -28,9 +28,10 @@
                                <nav class="navbar navbar-toggleable-md align-items-md-start">
                                        <button class="navbar-toggler navbar-toggler-left pt-4" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                                <svg width="18" height="12" viewBox="0 0 18 12" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-3-6h24v24H-3z"/><path d="M0 12h18v-2H0v2zm0-5h18V5H0v2zm0-7v2h18V0H0z" fill="#000"/></g></svg>
+                                               <div class="visible-md-up menu-text">Menu</div>
                                        </button>
                                        
-                                       <a class="navbar-brand align-self-md-center" href="/">
+                                       <a class="navbar-brand align-self-center" href="/">
                                                <img src="http://static.ipfire:8891/img/ipfire-tux.png" alt="IPFire Tux" height="40px" />
                                                {% if hostname in ("www.ipfire.org", "dev.ipfire.org") %}
                                                        {{ _("IPFire") }}
@@ -67,7 +68,7 @@
                        <footer class="footer">
                                <div class="container pb-3">
                                        <div class="row mb-6">
-                                               <div class="col-6 col-md-3 col-lg-2">
+                                               <div class="col-6 col-md-3 col-lg-2 mb-5">
                                                        <h4>{{ _("About") }}</h4>
 
                                                        <ul class="list-unstyled">
@@ -86,7 +87,7 @@
                                                        </ul>
                                                </div>
 
-                                               <div class="col-6 col-md-3 col-lg-2">
+                                               <div class="col-6 col-md-3 col-lg-2 mb-5">
                                                        <h4>{{ _("Support") }}</h4>
 
                                                        <ul class="list-unstyled">
@@ -99,7 +100,7 @@
                                                        </ul>
                                                </div>
 
-                                               <div class="col-6 col-md-3 col-lg-2">
+                                               <div class="col-6 col-md-3 col-lg-2 mb-5">
                                                        <h4>{{ _("Community") }}</h4>
 
                                                        <ul class="list-unstyled">
@@ -118,7 +119,7 @@
                                                        </ul>
                                                </div>
 
-                                               <div class="col-6 col-md-3 col-lg-2">
+                                               <div class="col-6 col-md-3 col-lg-2 mb-6">
                                                        <h4>{{ _("Development") }}</h4>
 
                                                        <ul class="list-unstyled">

diff --git a/templates/index.html b/templates/index.html
index 1bb5c1f897346f79bec0bb3a900a09d0d16d0d67..50a0589f9e31abd7db519507a640fcc3dc55e6a4 100644 (file)
--- a/templates/index.html
+++ b/templates/index.html
@@ -56,7 +56,7 @@
                                        <div class="feature_icons">
                                                <svg width="18" height="22" viewBox="0 0 18 22" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-3-1h24v24H-3z"/><path d="M9 0L0 4v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V4L9 0zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V11H2V5.3l7-3.11v8.8z" fill="#b71c1c"/></g></svg>
                                        </div>
-                                       <h4>{{ _("Firewall") }}</h4>
+                                       <h4 class="pb-3">{{ _("Firewall") }}</h4>
                                        <p>
                                                {% if lang == "de" %}
                                                        Die vielseitige und State-of-the-Art Firewall-Engine
@@ -74,7 +74,7 @@
                                        <div class="feature_icons">
                                                <svg width="20" height="18" viewBox="0 0 20 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-2-3h24v24H-2z"/><path d="M10 13a3 3 0 0 1-3-3c0-1.12.61-2.1 1.5-2.61l9.71-5.62-5.53 9.58c-.5.98-1.51 1.65-2.68 1.65zm0-13c1.81 0 3.5.5 4.97 1.32l-2.1 1.21C12 2.19 11 2 10 2a8 8 0 0 0-8 8c0 2.21.89 4.21 2.34 5.65h.01c.39.39.39 1.02 0 1.41-.39.39-1.03.39-1.42.01A9.969 9.969 0 0 1 0 10C0 4.477 4.477 0 10 0zm10 10c0 2.76-1.12 5.26-2.93 7.07-.39.38-1.02.38-1.41-.01a.996.996 0 0 1 0-1.41A7.95 7.95 0 0 0 18 10c0-1-.19-2-.54-2.9L18.67 5C19.5 6.5 20 8.18 20 10z" fill="#b71c1c" fill-rule="nonzero"/></g></svg>
                                        </div>
-                                       <h4>{{ _("Performance") }}</h4>
+                                       <h4 class="pb-3">{{ _("Performance") }}</h4>
                                        <p>
                                                {% if lang == "de" %}
                                                        Auch schnelle Netze und der Einsatz
@@ -91,8 +91,8 @@
                                        <div class="feature_icons">
                                                <svg width="22" height="14" viewBox="0 0 22 14" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h24v24H0z"/></defs><g transform="translate(-1 -5)" fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path d="M21 10c-1.1 0-2 .9-2 2v3H5v-3c0-1.1-.9-2-2-2s-2 .9-2 2v5c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2v-5c0-1.1-.9-2-2-2zm-3-5H6c-1.1 0-2 .9-2 2v2.15c1.16.41 2 1.51 2 2.82V14h12v-2.03c0-1.3.84-2.4 2-2.82V7c0-1.1-.9-2-2-2z" fill="#b71c1c" mask="url(#b)"/></g></svg>
                                        </div>
-                                       <h4>{{ _("Easy to use") }}</h4>
-                                       <p>
+                                       <h4 class="pb-3">{{ _("Easy to use") }}</h4>
+                                       <p class="mb-1">
                                                {% if lang == "de" %}
                                                        IPFire ist in 15 bis 20 Minuten installiert
                                                        und kommt mit vielen wichtigen Funktionen für
@@ -109,7 +109,7 @@
                                        <div class="feature_icons">
                                                <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-2-2h24v24H-2z"/><path d="M11 16h1a1 1 0 0 1 1 1h7v2h-7a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1H0v-2h7a1 1 0 0 1 1-1h1v-1.66C6.07 13.13 4 10 4 6.67v-4L10 0l6 2.67v4c0 3.33-2.07 6.46-5 7.67V16zM10 2L6 3.69V7h4V2zm0 5v6c1.91-.47 4-2.94 4-5V7h-4z" fill="#b71c1c" fill-rule="nonzero"/></g></svg>
                                        </div>
-                                       <h4>{{ _("Network Security") }}</h4>
+                                       <h4 class="pb-3">{{ _("Network Security") }}</h4>
                                        <p>
                                                {% if lang == "de" %}
                                                        Sicherheit hat höchste Priorität.
@@ -127,7 +127,7 @@
                                        <div class="feature_icons">
                                                <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-2-2h24v24H-2z"/><path d="M10 0C4.477 0 0 4.477 0 10c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V19c0 .27.16.59.67.5C17.14 18.16 20 14.42 20 10A10 10 0 0 0 10 0z" fill="#b71c1c" fill-rule="nonzero"/></g></svg>
                                        </div>
-                                       <h4>{{ _("Open Source") }}</h4>
+                                       <h4 class="pb-3">{{ _("Open Source") }}</h4>
                                        <p>
                                                {% if lang == "de" %}
                                                        IPFire ist freie Software, welche von einer offenen
@@ -143,7 +143,7 @@
                                        <div class="feature_icons">
                                                <svg width="20" height="19" viewBox="0 0 20 19" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-2-3h24v24H-2z"/><path d="M10 18.35l-1.45-1.32C3.4 12.36 0 9.28 0 5.5 0 2.42 2.42 0 5.5 0 7.24 0 8.91.81 10 2.09 11.09.81 12.76 0 14.5 0 17.58 0 20 2.42 20 5.5c0 3.78-3.4 6.86-8.55 11.54L10 18.35z" fill="#b71c1c"/></g></svg>
                                        </div>
-                                       <h4>{{ _("Trusted by thousands") }}</h4>
+                                       <h4 class="pb-3">{{ _("Trusted by thousands") }}</h4>
                                        <p>
                                                {% if lang == "de" %}
                                                        IPFire wird in Europa entwickelt,
@@ -160,8 +160,8 @@
                        </div>
                        
                        <div class="row justify-content-center pt-4">
-                               <a class="btn btn-primary btn-lg" href="/get-started">{{ _("Get Started") }}</a>
-                               <a class="btn btn-white btn-lg" href="/learn-more">{{ _("Learn more") }}</a>
+                               <a class="btn btn-primary btn-lg px-4" href="/get-started">{{ _("Get Started") }}</a>
+                               <a class="btn btn-white btn-lg px-4" href="/learn-more">{{ _("Learn more") }}</a>
                        </div>
                </div>
        </section>
@@ -169,7 +169,7 @@
        <section id="news" class="content-section">
                <div class="container">
                        <div class="row">
-                               <div class="col col-md-5">
+                               <div class="col col-md-5 mb-6">
                                        <h2 class="display-2 mb-6">Latest Release</h2>
                                        <p class="mb-3"><small>{{ locale.format_date(latest_release.date, shorter=True) }}</small></p>
                                        <h3 class="display-3 mb-5 pb-5"><a href="/news/{{ latest_release.news.slug }}">
@@ -283,7 +283,7 @@
                        <h2 class="display-2 text-center">{{ _("Professional Appliances & Services") }}</h2>
                        
                        <div class="row mb-lg-6 mb-md-4 pb-6">
-                               <div class="col-md-12 col-lg-7 mb-md-6">
+                               <div class="col-md-12 col-lg-7 mb-5 mb-md-6">
                                        <p class="lead">
                                                {% if lang == "de" %}
                                                        <a href="http://www.lightningwirelabs.com" target="_blank">Lightning Wire Labs</a> bietet

diff --git a/templates/modules/menu.html b/templates/modules/menu.html
index f5382c64677492f2c372950f4afb411ff07fb972..bf57f0f7b76e247597495a12d3bfed4f1fe25b6d 100644 (file)
--- a/templates/modules/menu.html
+++ b/templates/modules/menu.html
@@ -1,18 +1,21 @@
 <ul class="navbar-nav justify-content-lg-end">
        {% if hostname in ("www.ipfire.org", "dev.ipfire.org") %}
-               <li class="nav-item mr-5">
+               <li class="nav-item hidden-lg-up my-4">
+                       <a class="nav-link" href="/">{{ _("Home") }}</a>
+               </li>
+               <li class="nav-item mb-4 mr-lg-5">
                        <a class="nav-link" href="/features">{{ _("Features") }}</a>
                </li>
 
-               <li class="nav-item ml-lg-5 mr-lg-5">
+               <li class="nav-item mb-4 ml-lg-5 mr-lg-5">
                        <a class="nav-link" href="/download">{{ _("Download") }}</a>
                </li>
 
-               <li class="nav-item ml-lg-5 mr-lg-5">
+               <li class="nav-item mb-4 ml-lg-5 mr-lg-5">
                        <a class="nav-link" href="/get-support">{{ _("Support") }}</a>
                </li>
 
-               <li class="nav-item ml-lg-5 mr-lg-5">
+               <li class="nav-item mb-4 ml-lg-5 mr-lg-5">
                        <a class="nav-link" href="/get-involved">{{ _("Community") }}</a>
                </li>