From: Sven Date: Tue, 4 Apr 2017 07:24:40 +0000 (+0200) Subject: add spacing and menu on mobile X-Git-Url: http://git.ipfire.org/?p=people%2Fshoehn%2Fipfire.org.git;a=commitdiff_plain;h=ccd81281f6d53021853731060bd753b7aa706f8e add spacing and menu on mobile --- diff --git a/static/css/style.css b/static/css/style.css index a310821..d9ae7b0 100644 --- 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 2b405a7..84521fb 100644 --- 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 4115900..8c51d58 100644 --- 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 3e47bae..c420810 100644 --- a/templates/base.html +++ b/templates/base.html @@ -28,9 +28,10 @@