From: Sven Date: Mon, 8 May 2017 13:45:31 +0000 (+0200) Subject: moved part from the custom scss to modules _custom_nav and buttons. X-Git-Url: http://git.ipfire.org/?p=people%2Fshoehn%2Fipfire.org.git;a=commitdiff_plain;h=55edf6f3a19f6ff85b508f4318cc49d86009d048 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 a0be2ea..0e35e21 100644 --- 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 408634a..1e8643f 100644 --- 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($("",{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($("",{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 4d6eddd..5270a54 100644 --- 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 e0a9747..90d6497 100644 --- 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 e717565..10dd693 100644 --- 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 aaf29a9..5239697 100755 --- 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 ce7879d..27ab0e9 100644 --- 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 4ea9cb2..a61c9cf 100644 --- a/templates/base.html +++ b/templates/base.html @@ -29,7 +29,7 @@
-
- +
+ - {{ _("Donate") }} + {{ _("Donate") }}
@@ -190,11 +190,11 @@
+
{% end block %} - diff --git a/templates/modules/menu.html b/templates/modules/menu.html index bf57f0f..b2b6ffe 100644 --- a/templates/modules/menu.html +++ b/templates/modules/menu.html @@ -1,21 +1,21 @@