compensate anchors for fixed navbar, use vp-mixins for flex

* navbar-height calculation moved to common_variables.scss
* body padding-top for fixed navbar moved to
compensate_fixed_navbar.scss
* content anchors won't scroll behind fixed navbar anmyore, via
compensate_fixed_navbar.scss
* use vendor-prefix mixins for flexbox styles

themes/Bootswatch4_Scss/_common/common_style.scss

@@ -1,17 +1,24 @@
 /* Bootswatch 4 Scss 
  * common styles used in all layouts
+ *
+ * as of commit https://github.com/Typesetter/Typesetter/commit/eac99656819f330f69d786927ad0dce75251d004
+ * we use vendor-prefix mixins, see /include/thirdparty/Bootstrap4/scss/bootstrap/vp-mixins
+ *
  */
 
+@import 'common_variables.scss';
 @import 'contactform.scss';
+@import 'compensate_fixed_navbar.scss'; // default, use only with 'fixed-top' class on navbar in template.php line 44
 
 // Page Flex Layout for Sticky Footer ==========================================
 html, body {
   height: 100%;
 }
 
 body {
-  display: flex;
-  flex-direction: column; 
+  // use vendor-prefix mixins
+  @include vp-flexbox();
+  @include vp-flex-direction(column); 
 }
 
 // Height fix for Admin Top Bar and active 'Hide Admin UI' plugin
@@ -20,16 +27,19 @@ html:not(.override_admin_style) body.gpAdmin {
 }
 
 .main-content {
-  flex: 1 0 auto;
+  // use vendor-prefix mixins
+  @include vp-flex(1 0 auto);
 }
+
 footer.main-footer {
-  flex-shrink: 0;
+  // use vendor-prefix mixins
+  @include vp-flex-shrink(0);
 }
 
 
 // Navbar =======================================================================
 
-$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
+// $navbar-height: ($nav-link-height + $navbar-padding-y * 2); // moved to common_variables.scss
 
 // Fix for bad container paddings in navbars (as of Bootatrap 4.1.1)
 @include media-breakpoint-up(sm) {
@@ -41,9 +51,10 @@ $navbar-height: ($nav-link-height + $navbar-padding-y * 2);
 }
 
 // when using fixed-top
-body {
-  padding-top: ($navbar-height + 2rem);
-}
+// moved to compensate_fixed_navbar.scss
+// body {
+//  padding-top: ($navbar-height + 2rem);
+// }
 
 // Align menu right, fix dropdown alignment
 .navbar-right {
@@ -81,5 +92,3 @@ body {
     content: "\f2bd\a0";
   }
 }
-
-

themes/Bootswatch4_Scss/_common/common_variables.scss

@@ -0,0 +1,5 @@
+/* Bootswatch 4 Scss 
+ * common variables used in all layouts
+ */
+
+$navbar-height:   ($nav-link-height + $navbar-padding-y * 2);

themes/Bootswatch4_Scss/_common/compensate_fixed_navbar.scss

@@ -0,0 +1,29 @@
+/* Bootswatch 4 Scss 
+ * compensations for fixed navbar
+ * required when the main navbar has the css class 'fixed-top'
+ */
+
+$body-padding-top: 2rem;
+
+// additional padding-top to the body element
+body {
+  padding-top: calc( #{$navbar-height} + $body-padding-top );
+}
+
+// Prevent targeted anchors hiding behind fixed header navbar
+
+// default compensation
+.GPAREA a[name]:not([href]),
+.GPAREA a[id]:not([href]) {
+  margin-top: calc( ( #{$navbar-height} + #{$body-padding-top} ) * -1 );
+  padding-top: calc( #{$navbar-height} + #{$body-padding-top}  );
+  z-index: -5;
+}
+
+// compensation when logged-in 
+// with support for HideAdminUI plugin https://github.com/juek/HideAdminUI
+html:not(.override_admin_style) body.gpAdmin .GPAREA a[name]:not([href]),
+html:not(.override_admin_style) body.gpAdmin .GPAREA a[id]:not([href]) {
+  margin-top: calc( ( #{$navbar-height} + #{$body-padding-top} + 29px ) * -1 );
+  padding-top: calc( #{$navbar-height} + #{$body-padding-top}  + 29px );
+}