moved part from the custom scss to modules _custom_nav and buttons.

work on bugs: 11328, 11330, 11336, 11327, 11339, 11335

diff --git a/static/css/style.css b/static/css/style.css
index a0be2eae5f6736bd427a924de0a245ff5a26bf7e..0e35e21815794ec8890f3317baf87e8aae588d90 100644 (file)
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -220,7 +220,7 @@ html {
 body {
   font-family: "Ubuntu", sans-serif;
   font-size: 1rem;
-  font-weight: normal;
+  font-weight: 300;
   line-height: 1.5;
   color: #263238;
   background-color: #eceff1; }
@@ -4849,7 +4849,7 @@ a.bg-inverse:focus, a.bg-inverse:hover {
   font-weight: 300; }
 
 .font-weight-bold {
-  font-weight: 900; }
+  font-weight: 500; }
 
 .font-italic {
   font-style: italic; }
@@ -4969,129 +4969,163 @@ a.text-gray-dark:focus, a.text-gray-dark:hover {
   .hidden-print {
     display: none !important; } }
 
-.amber-800 {
-  color: #ff8f00; }
-
-h1 {
-  line-height: 3rem; }
-
-h2 {
-  line-height: 2.75rem; }
-
-h3 {
-  line-height: 2rem; }
-  @media (max-width: 767px) {
-    h3 {
-      font-size: 1em; } }
-
-h4 {
-  font-weight: 500;
-  line-height: 1.75rem; }
-  @media (max-width: 767px) {
-    h4 {
-      font-size: 1em; } }
-
-h5 {
-  line-height: 1.5rem; }
+#mask {
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: transparent;
+  display: none;
+  visibility: hidden; }
+  #mask.open {
+    display: block;
+    visibility: visible; }
 
-p {
-  line-height: 1.5rem; }
-  @media (max-width: 767px) {
-    p {
-      font-size: .85em; } }
-  p.lead {
-    line-height: 2rem; }
-    @media (max-width: 991px) {
-      p.lead {
-        font-size: 1.5rem;
-        line-height: 2rem; } }
-    @media (max-width: 767px) {
-      p.lead {
-        font-size: 1rem;
-        line-height: 1.5rem; } }
+.menu-text {
+  -webkit-transition: opacity .25s ease-in-out;
+  transition: opacity .25s ease-in-out; }
 
-.display-2 {
-  margin-bottom: 4rem; }
-  @media (max-width: 991px) {
-    .display-2 {
-      font-size: 2.5rem;
-      line-height: 3.5rem;
-      margin-bottom: 3rem; } }
-  @media (max-width: 767px) {
-    .display-2 {
-      font-size: 2rem;
-      line-height: 2.75rem; } }
+.menu-text.hidden {
+  opacity: 0;
+  -webkit-transition: opacity .35s ease-in-out;
+  transition: opacity .35s ease-in-out; }
 
-@media (max-width: 575px) {
-  .display-4 {
-    font-size: .875rem;
-    line-height: 1.25rem; } }
+.fixed-top {
+  -webkit-transition: background-color .5s linear;
+  transition: background-color .5s linear;
+  height: 56px; }
+  @media (min-width: 576px) {
+    .fixed-top {
+      height: 72px; } }
+  @media (min-width: 992px) {
+    .fixed-top {
+      height: 96px; } }
+  .fixed-top .navbar {
+    width: 100%; }
+    .fixed-top .navbar a {
+      color: #263238; }
+    .fixed-top .navbar .navbar-toggler-left {
+      left: -12px;
+      top: 8px;
+      z-index: 950; }
+      @media (min-width: 576px) {
+        .fixed-top .navbar .navbar-toggler-left {
+          top: 17px; } }
+    .fixed-top .navbar .btn {
+      margin-top: .15rem; }
 
-small {
-  line-height: 1rem; }
-  @media (max-width: 767px) {
-    small {
-      font-size: .75em; } }
+.navbar-brand {
+  font-size: 20px;
+  font-weight: 300;
+  opacity: 0;
+  z-index: 950;
+  margin: 8px 0 0 96px;
+  margin-top: 8px;
+  -webkit-transition: opacity .7s linear;
+  transition: opacity .7s linear; }
+  @media (min-width: 992px) {
+    .navbar-brand {
+      opacity: 1;
+      font-size: 36px; } }
+  .navbar-brand strong {
+    font-weight: 900; }
+  .navbar-brand img {
+    margin-right: 4px;
+    -webkit-transform: translateY(-5px);
+            transform: translateY(-5px);
+    height: 32px;
+    width: auto; }
+    @media (min-width: 992px) {
+      .navbar-brand img {
+        height: 40px; } }
 
-.truncate {
-  width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis; }
+.scrolled {
+  background-color: rgba(255, 255, 255, 0.96);
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.25);
+  height: 56px; }
+  @media (min-width: 576px) {
+    .scrolled {
+      height: 72px; } }
+  @media (min-width: 992px) {
+    .scrolled {
+      height: 96px; } }
+  .scrolled .navbar-brand {
+    opacity: 1; }
 
-img.img-fluid {
-  width: 100%;
-  max-width: 100%;
-  height: auto; }
+#navbarSupportedContent {
+  width: 100%; }
+  @media (max-width: 1199px) {
+    #navbarSupportedContent {
+      background: white;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 256px;
+      height: 100vh;
+      padding-top: 64px;
+      -webkit-transform: translateX(-256px);
+              transform: translateX(-256px);
+      -webkit-transition: all 0.25s ease-in-out;
+      transition: all 0.25s ease-in-out; }
+      #navbarSupportedContent.open {
+        -webkit-transform: translateX(0);
+                transform: translateX(0);
+        -webkit-transition: all .25s ease-in-out;
+        transition: all .25s 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); } }
 
-.icon {
-  width: 1.5rem;
-  height: 1.5rem;
-  fill: currentColor;
-  vertical-align: -.15rem;
-  overflow: hidden;
-  margin-right: .5rem; }
+@media (min-width: 992px) {
+  .navbar-nav {
+    padding-top: 10px; } }
 
-.i_arrow_down {
-  margin: 0;
-  position: absolute;
-  left: .75rem;
-  top: -.25rem;
-  -webkit-animation: scroll 1.5s ease-in-out infinite;
-          animation: scroll 1.5s ease-in-out infinite; }
-  @media (max-width: 575px) {
-    .i_arrow_down {
-      width: 1.75rem !important;
-      height: 1.75rem !important;
-      left: .25rem;
-      top: -.5rem; } }
+.navbar-nav .nav-link {
+  color: #263238;
+  padding: 16px !important;
+  display: block;
+  position: relative; }
+  @media (min-width: 992px) {
+    .navbar-nav .nav-link {
+      margin-right: 16px;
+      display: block;
+      position: relative; }
+      .navbar-nav .nav-link:after {
+        content: "";
+        border-bottom: 2px solid #b71c1c;
+        position: absolute;
+        -webkit-transform: scaleX(0);
+                transform: scaleX(0);
+        width: 100%;
+        left: 0;
+        top: 44px;
+        padding: inherit;
+        -webkit-transition: color .3s ease-out, -webkit-transform .3s ease-out;
+        transition: color .3s ease-out, -webkit-transform .3s ease-out;
+        transition: transform .3s ease-out, color .3s ease-out;
+        transition: transform .3s ease-out, color .3s ease-out, -webkit-transform .3s ease-out; } }
 
-.i_lg {
-  width: 2.5rem;
-  height: 2.5rem;
-  margin: 0;
-  -webkit-transform: translateY(-0.35rem);
-          transform: translateY(-0.35rem);
-  fill: #b71c1c; }
+@media (max-width: 1199px) {
+  .navbar-nav .nav-link:active {
+    color: #b71c1c; } }
 
-.i_sm {
-  vertical-align: top;
-  -webkit-transform: translateY(-0.1rem);
-          transform: translateY(-0.1rem); }
+@media (max-width: 1199px) {
+  .navbar-nav .nav-link:active:before {
+    content: "";
+    border-left: 2px solid #b71c1c;
+    position: absolute;
+    left: 0;
+    height: 36px;
+    -webkit-transform: translateY(-4px);
+            transform: translateY(-4px); } }
 
-footer .btn-toolbar .icon {
-  height: 2.25rem;
-  width: 2.25rem;
-  fill: rgba(38, 50, 56, 0.6); }
+@media (min-width: 992px) {
+  .navbar-nav .nav-link:hover {
+    color: #b71c1c; } }
 
-footer .i_heart {
-  vertical-align: top;
-  -webkit-transform: translateY(-0.15rem);
-          transform: translateY(-0.15rem); }
-  @media (max-width: 767px) {
-    footer .i_heart {
-      -webkit-transform: translateY(-0.75rem);
-              transform: translateY(-0.75rem); } }
+@media (min-width: 992px) {
+  .navbar-nav .nav-link:hover:after {
+    -webkit-transform: scaleX(1);
+            transform: scaleX(1); } }
 
 .btn-red900 {
   color: #fff !important;
@@ -5212,78 +5246,142 @@ button.navbar-toggler div {
 button:focus {
   outline: none; }
 
-.fixed-top {
-  -webkit-transition: background-color 700ms linear;
-  transition: background-color 700ms linear; }
-  .fixed-top .navbar {
-    width: 100%; }
+.btn-donate {
+  margin-top: 18px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  padding: 3px 16px 0 5px; }
+  @media (min-width: 992px) {
+    .btn-donate {
+      margin-top: 29px; } }
+  .btn-donate svg {
+    vertical-align: -7px;
+    margin-right: 5px; }
+
+.amber-800 {
+  color: #ff8f00; }
+
+h1 {
+  line-height: 3rem; }
+
+h2 {
+  line-height: 2.75rem; }
+
+h3 {
+  line-height: 2rem; }
+  @media (max-width: 767px) {
+    h3 {
+      font-size: 1em; } }
+
+h4 {
+  font-weight: 500;
+  line-height: 1.75rem; }
+  @media (max-width: 767px) {
+    h4 {
+      font-size: 1em; } }
+
+h5 {
+  line-height: 1.5rem; }
+
+p {
+  line-height: 1.5rem; }
+  @media (max-width: 767px) {
+    p {
+      font-size: .85em; } }
+  p.lead {
+    line-height: 2rem; }
     @media (max-width: 991px) {
-      .fixed-top .navbar {
-        padding: .5rem 0; } }
-    .fixed-top .navbar .navbar-toggler-left {
-      left: -1rem; }
-  .fixed-top .navbar-brand {
-    opacity: 0;
-    -webkit-transition: opacity 700ms linear;
-    transition: opacity 700ms linear; }
-    @media (min-width: 992px) {
-      .fixed-top .navbar-brand {
-        opacity: 1; } }
+      p.lead {
+        font-size: 1.5rem;
+        line-height: 2rem; } }
+    @media (max-width: 767px) {
+      p.lead {
+        font-size: 1rem;
+        line-height: 1.5rem; } }
 
-.scrolled {
-  background-color: rgba(255, 255, 255, 0.96); }
-  .scrolled .navbar-brand {
-    opacity: 1;
-    -webkit-transition: opacity 700ms linear;
-    transition: opacity 700ms linear; }
+.display-2 {
+  margin-bottom: 4rem; }
+  @media (max-width: 991px) {
+    .display-2 {
+      font-size: 2.5rem;
+      line-height: 3.5rem;
+      margin-bottom: 3rem; } }
+  @media (max-width: 767px) {
+    .display-2 {
+      font-size: 2rem;
+      line-height: 2.75rem; } }
 
-.menu-text.hidden {
-  display: none;
-  visibility: hidden; }
+@media (max-width: 575px) {
+  .display-4 {
+    font-size: .875rem;
+    line-height: 1.25rem; } }
 
-.navbar a {
-  color: #263238; }
+small {
+  line-height: 1rem; }
+  @media (max-width: 767px) {
+    small {
+      font-size: .75em; } }
 
-.navbar .btn {
-  margin-top: .15rem; }
+.truncate {
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis; }
 
-a.nav-link {
-  padding-bottom: 30px;
-  display: block;
-  position: relative; }
-  a.nav-link:after {
-    content: "";
-    border-bottom: 2px solid #b71c1c;
-    position: absolute;
-    -webkit-transform: scaleX(0);
-            transform: scaleX(0);
-    width: 100%;
-    left: 0;
-    padding: inherit;
-    -webkit-transition: color .3s ease-out, -webkit-transform .3s ease-out;
-    transition: color .3s ease-out, -webkit-transform .3s ease-out;
-    transition: transform .3s ease-out, color .3s ease-out;
-    transition: transform .3s ease-out, color .3s ease-out, -webkit-transform .3s ease-out; }
+img.img-fluid {
+  width: 100%;
+  max-width: 100%;
+  height: auto; }
 
-a.nav-link:hover {
-  color: #b71c1c; }
+.icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  fill: currentColor;
+  vertical-align: -.15rem;
+  overflow: hidden;
+  margin-right: .5rem; }
 
-a.nav-link:hover:after {
-  -webkit-transform: scaleX(1);
-          transform: scaleX(1); }
+.i_arrow_down {
+  margin: 0;
+  position: absolute;
+  left: .75rem;
+  top: -.25rem;
+  -webkit-animation: scroll 1.5s ease-in-out infinite;
+          animation: scroll 1.5s ease-in-out infinite; }
+  @media (max-width: 575px) {
+    .i_arrow_down {
+      width: 1.75rem !important;
+      height: 1.75rem !important;
+      left: .25rem;
+      top: -.5rem; } }
 
-.navbar-brand {
-  font-size: 1.25rem;
-  font-weight: 300; }
-  @media (min-width: 576px) {
-    .navbar-brand {
-      font-size: 2rem; } }
-  .navbar-brand strong {
-    font-weight: 900; }
-  .navbar-brand img {
-    margin-right: 1rem;
-    -webkit-transform: translateY(-5px);
-            transform: translateY(-5px); }
+.i_lg {
+  width: 2.5rem;
+  height: 2.5rem;
+  margin: 0;
+  -webkit-transform: translateY(-0.35rem);
+          transform: translateY(-0.35rem);
+  fill: #b71c1c; }
+
+.i_sm {
+  vertical-align: top;
+  -webkit-transform: translateY(-0.1rem);
+          transform: translateY(-0.1rem); }
+
+footer .btn-toolbar .icon {
+  height: 2.25rem;
+  width: 2.25rem;
+  fill: rgba(38, 50, 56, 0.6); }
+
+footer .i_heart {
+  vertical-align: top;
+  -webkit-transform: translateY(-0.15rem);
+          transform: translateY(-0.15rem); }
+  @media (max-width: 767px) {
+    footer .i_heart {
+      -webkit-transform: translateY(-0.75rem);
+              transform: translateY(-0.75rem); } }
 
 section.intro {
   min-height: 100vh;

diff --git a/static/js/site-min.js b/static/js/site-min.js
index 408634ae50f85247411b6a545f229015b7e0736c..1e8643fba5d11bbe83a92bc3e7fdceeaa436df9b 100644 (file)
--- a/static/js/site-min.js
+++ b/static/js/site-min.js
@@ -1 +1 @@
-function getCookie(o){var e=document.cookie.match("\\b"+o+"=([^;]*)\\b");return e?e[1]:void 0}$(document).ready(function(){$(window).scroll(function(){$(document).scrollTop()>100?($(".fixed-top").addClass("scrolled"),$(".menu-text").addClass("hidden")):($(".fixed-top").removeClass("scrolled"),$(".menu-text").removeClass("hidden"))}),$("#scrollto").click(function(){$("html, body").animate({scrollTop:$("#features").offset().top-72},1500,"easeInOutExpo")})}),$.query=function(o){return new RegExp("[\\?&]"+o+"=([^&#]*)").exec(window.location.href)[1]||0},$("a.download-splash").click(function(o){o.preventDefault(),linkLocation=this.href,window.location="http://downloads.ipfire.org/download-splash?file="+linkLocation}),/.*download-splash.*/i.test(window.location.href)&&$("p.download-path").ready(function(){var o=!1,e=["http://downloads.ipfire.org/"],n=$.query("file");for(i in e)prefix=e[i],n.substring(0,prefix.length)==prefix&&(o=!0);o&&($("p.download-path").prepend($("<a>",{href:encodeURI(n),text:n})),setTimeout(function(){window.location=n},"2000"))}),jQuery.postJSON=function(url,args,callback){args._xsrf=getCookie("_xsrf"),$.ajax({url:url,data:$.param(args),dataType:"text",type:"POST",success:function(response){callback(eval("("+response+")"))}})};
\ No newline at end of file
+function getCookie(o){var e=document.cookie.match("\\b"+o+"=([^;]*)\\b");return e?e[1]:void 0}$(document).ready(function(){$("#scrollto").click(function(o){o.preventDefault(),$("body").animate({scrollTop:$("#features").offset().top-72},1e3)}),$(window).scroll(function(){$(document).scrollTop()>100?($(".fixed-top").addClass("scrolled"),$(".menu-text").addClass("hidden")):($(".fixed-top").removeClass("scrolled"),$(".menu-text").removeClass("hidden"))}),$(".navbar-toggler-left").click(function(){$("#navbarSupportedContent, #mask").addClass("open")}),$("#mask").click(function(){$("#navbarSupportedContent, #mask").removeClass("open")})}),$.query=function(o){return new RegExp("[\\?&]"+o+"=([^&#]*)").exec(window.location.href)[1]||0},$("a.download-splash").click(function(o){o.preventDefault(),linkLocation=this.href,window.location="http://downloads.ipfire.org/download-splash?file="+linkLocation}),/.*download-splash.*/i.test(window.location.href)&&$("p.download-path").ready(function(){var o=!1,e=["http://downloads.ipfire.org/"],n=$.query("file");for(i in e)prefix=e[i],n.substring(0,prefix.length)==prefix&&(o=!0);o&&($("p.download-path").prepend($("<a>",{href:encodeURI(n),text:n})),setTimeout(function(){window.location=n},"2000"))}),jQuery.postJSON=function(url,args,callback){args._xsrf=getCookie("_xsrf"),$.ajax({url:url,data:$.param(args),dataType:"text",type:"POST",success:function(response){callback(eval("("+response+")"))}})};
\ No newline at end of file

diff --git a/static/js/site.js b/static/js/site.js
index e265921f55e5b5b4b8cc6cc561fe33844ff4424b..d13f286f32917883043d621d961de9c3b10ba743 100644 (file)
--- a/static/js/site.js
+++ b/static/js/site.js
@@ -3,7 +3,7 @@ $(document).ready(function () {
                e.preventDefault();
            $('body').animate({
                scrollTop: $("#features").offset().top -72
-           }, 1500);
+           }, 1000);
        });
     $(window).scroll(function () {
         if ($(document).scrollTop() > 100) {
@@ -14,6 +14,13 @@ $(document).ready(function () {
             $(".menu-text").removeClass("hidden");
         }
     });
+    //* Menu *//
+       $('.navbar-toggler-left').click(function() {
+               $('#navbarSupportedContent, #mask').addClass('open');
+       });
+       $('#mask').click(function() {
+               $('#navbarSupportedContent, #mask').removeClass('open');
+       });
 });
 
 $.query = function(name){

diff --git a/static/scss/bootstrap-4.0.0-alpha.6/css/bootstrap-reboot.css b/static/scss/bootstrap-4.0.0-alpha.6/css/bootstrap-reboot.css
index e0a9747fc89df9f5d81ccec7f006afc4f1c1919a..90d649745352cbe76d42055c10e4507177794e38 100644 (file)
--- a/static/scss/bootstrap-4.0.0-alpha.6/css/bootstrap-reboot.css
+++ b/static/scss/bootstrap-4.0.0-alpha.6/css/bootstrap-reboot.css
@@ -214,7 +214,7 @@ html {
 body {
   font-family: "Ubuntu", sans-serif;
   font-size: 1rem;
-  font-weight: normal;
+  font-weight: 300;
   line-height: 1.5;
   color: #263238;
   background-color: #eceff1; }

diff --git a/static/scss/bootstrap-4.0.0-alpha.6/css/bootstrap.css b/static/scss/bootstrap-4.0.0-alpha.6/css/bootstrap.css
index e7175654666b4e542ec11b489ba574eb91f037be..10dd6935d90d0784c006859aa182255580db8127 100644 (file)
--- a/static/scss/bootstrap-4.0.0-alpha.6/css/bootstrap.css
+++ b/static/scss/bootstrap-4.0.0-alpha.6/css/bootstrap.css
@@ -271,7 +271,7 @@ html {
 body {
   font-family: "Ubuntu", sans-serif;
   font-size: 1rem;
-  font-weight: normal;
+  font-weight: 300;
   line-height: 1.5;
   color: #263238;
   background-color: #eceff1; }
@@ -6042,7 +6042,7 @@ a.bg-inverse:focus, a.bg-inverse:hover {
   font-weight: 300; }
 
 .font-weight-bold {
-  font-weight: 900; }
+  font-weight: 500; }
 
 .font-italic {
   font-style: italic; }

diff --git a/static/scss/bootstrap-4.0.0-alpha.6/scss/_custom.scss b/static/scss/bootstrap-4.0.0-alpha.6/scss/_custom.scss
index aaf29a9dc74d2ee00c79293e0075ed63917ff0a4..523969780d57dc7fa8252ec3fff152b1a5babcd6 100755 (executable)
--- a/static/scss/bootstrap-4.0.0-alpha.6/scss/_custom.scss
+++ b/static/scss/bootstrap-4.0.0-alpha.6/scss/_custom.scss
@@ -83,7 +83,6 @@ $link-hover-decoration: none;
 
 // Grid
 
-
 $grid-columns:               12 !default;
 $grid-gutter-width-base:     24px;
 $grid-gutter-widths: (
@@ -103,7 +102,9 @@ $font-family-base:       $font-family-sans-serif;
 $font-size-lg:   1.25rem;
 
 $font-weight-normal: 300;
-$font-weight-bold: 900;
+$font-weight-bold: 500;
+
+$font-weight-base: $font-weight-normal;
 
 $font-size-h1: 2.25rem;
 $font-size-h2: 2rem;

diff --git a/static/scss/style.scss b/static/scss/style.scss
index ce7879db1b2ed530c672c9a4374418ae305e7ea6..27ab0e99e9388bc90ad4b4bbe723b60a8fda3693 100644 (file)
--- a/static/scss/style.scss
+++ b/static/scss/style.scss
@@ -53,6 +53,10 @@
 // Utility classes
 @import "bootstrap-4.0.0-alpha.6/scss/utilities";
 
+// Custom stuff
+@import '_custom_nav';
+@import '_buttons';
+
 
 // Colors
 .amber-800 {
@@ -200,161 +204,6 @@ footer {
        }
 }
 
-// Buttons
-.btn-red900 {
-  @include button-variant($btn-red900-color, $btn-red900-bg, $btn-red900-border);
-}
-.btn-white {
-  @include button-variant($btn-white-color, $btn-white-bg, $btn-white-border);
-}
-.btn-bluegrey900 {
-  @include button-variant($btn-bluegrey900-color, $btn-bluegrey900-bg, $btn-bluegrey900-border);
-}
-
-button.navbar-toggler div {
-       font-family: 'Ubuntu', sans-serif;
-       font-size: 1rem;
-       display: inline-block;
-       position: relative;
-       top: -4px;
-}
-
-.btn {
-       height: 36px;
-       text-transform: uppercase;
-       box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .25);
-       transition: box-shadow .25s ease-in-out;
-       &:hover {
-               box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .15), 0 3px 6px 0 rgba(0, 0, 0, .25);
-               transition: box-shadow .25s ease-in-out;
-       }
-       @include media-breakpoint-down(sm) {
-               font-size: .875rem;
-       }
-}
-
-.btn-outline-primary,
-.btn-outline-secondary {
-       transition: background-color .25s ease-in-out;
-       &:hover {
-               transition: background-color .25s ease-in-out;
-       }
-}
-
-.btn-lg {
-       height: 48px;
-       margin: 0 24px;
-       @include media-breakpoint-down(sm) {
-               height: 36px;
-               margin: 0 8px;
-               padding: 1rem;
-               font-size: .875rem;
-               line-height: 0;
-       }
-}
-
-.btn-md {
-       font-size: 0.875rem;
-       line-height: 1.25rem;
-       padding: .4rem 1rem .5rem 1rem;
-}
-
-.btn-block {
-       margin: 0 0 1.5rem 0;
-       @include media-breakpoint-up(md) {
-               margin: 0 0 2rem 0;     
-       }
-       @include media-breakpoint-down(xs) {
-               font-size: .875rem;
-               line-height: 0;
-       }
-}
-
-button:focus {
-       outline: none;
-}
-
-// Top Navigation
-.fixed-top {
-       transition: background-color 700ms linear;
-       .navbar {
-               width: 100%;
-               @include media-breakpoint-down(md) {
-                       padding: .5rem 0;
-               }
-               .navbar-toggler-left {
-                       left: -1rem;
-               }
-       }
-       .navbar-brand {
-               opacity: 0;
-               transition: opacity 700ms linear;
-               @include media-breakpoint-up(lg) {
-                       opacity: 1;
-               }
-       }
-}
-
-.scrolled {
-       background-color: rgba(255, 255, 255, .96);
-       .navbar-brand {
-               opacity: 1;
-               transition: opacity 700ms linear;
-       }
-}
-
-.menu-text.hidden {
-       display: none;
-       visibility: hidden;
-}
-
-.navbar {
-       a {
-               color: $blue-grey-900;
-       }
-       .btn {
-               margin-top: .15rem;
-       }
-}
-
-a.nav-link {
-       padding-bottom: 30px;
-       display: block;
-       position: relative;
-       &:after {
-               content: "";
-               border-bottom: 2px solid $red_900;
-               position: absolute;
-               transform: scaleX(0);
-               width: 100%;
-               left: 0;
-               padding: inherit;
-               transition: transform .3s ease-out, color .3s ease-out;
-       }
-}
-
-a.nav-link:hover {
-       color: $red_900;
-}
-
-a.nav-link:hover:after {
-       transform: scaleX(1);
-}
-
-.navbar-brand {
-       font-size: 1.25rem;
-       @include media-breakpoint-up(sm) {
-               font-size: 2rem;
-       }
-       font-weight: 300;
-       strong {
-               font-weight: 900;
-       }
-       img {
-               margin-right: 1rem;
-               transform: translateY(-5px);
-       }
-}
 
 // Sections
 section.intro {

diff --git a/templates/base.html b/templates/base.html
index cbe2ee426410c073587ee3d0f52a97917059d539..d346afead0bc1bf878f1f884e1f2ee408a6784c9 100644 (file)
--- a/templates/base.html
+++ b/templates/base.html
@@ -29,7 +29,7 @@
                <div class="fixed-top">
                        <div class="container d-flex justify-content-between">
                                <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">
+                                       <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="slide-collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                                <svg class="icon i_hamburger"><use xlink:href="#hamburger"/></svg>
                                                <div class="visible-md-up menu-text">Menu</div>
                                        </button>
@@ -49,16 +49,16 @@
                                                {% end %}
                                        </a>
                                        
-                                       <div id="navbarSupportedContent" class="navbar-collapse collapse d-lg-flex justify-content-lg-end pt-lg-2">
+                                       <div id="navbarSupportedContent" class="d-lg-flex justify-content-lg-end">
                                                {% block menu %}
                                                        {% module Menu() %}
                                                {% end block %}
                                        </div>
                                </nav>
-                               <div class="align-self-start hidden-md-down">
-                                       <a class="btn btn-red900 btn-sm mt-5" href="/donate">
+                               <div class="align-self-start hidden-xs-down">
+                                       <a class="btn btn-red900 btn-sm btn-donate" href="/donate">
                                                <svg class="icon i_heart"><use xlink:href="#heart"/></svg>
-                                               <small style="vertical-align: .30rem;">{{ _("Donate") }}</small>
+                                               {{ _("Donate") }}
                                        </a>
                                </div>
                        </div>
@@ -190,11 +190,11 @@
                                        </div>
                                </div>
                        </footer>
+                       <div id="mask"></div>
                {% end block %}
 
                <script src="{{ static_url("js/jquery.easing.js") }}"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
-               <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
                <script src="{{ static_url("js/site.js") }}"></script>
                
                <!-- Hidden icon data -->

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