use variable named breakpoints

src/assets/scss/abstracts/_variables.scss

@@ -52,13 +52,16 @@ $yiq-contrasted-threshold: 120;
 $grid-breakpoints: (
   xs: 0,
   sm: 576px,
-  tb: 768px,
+  tb: 769px,
   md: 1024px,
   lg: 1200px,
   xl: 1440px,
 );
 
 $layout-bp: md;
+$layout-bp-down: tb;
+$size-bp: tb;
+$size-bp-down: sm;
 
 // Body
 $body-bg: #fffcfb;

src/assets/scss/base/_bootstrap-overrides.scss

@@ -18,7 +18,7 @@ a:hover {
     padding: .25rem $header-spacer-sm;
   }
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up($layout-bp) {
     margin-left: -#{$header-spacer};
 
     .dropdown-item {

src/components/formItems/MultipleTagsSelect.vue

@@ -55,7 +55,7 @@ export default {
   border: 0;
   padding: 0;
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up($layout-bp) {
     ul li {
       display: block;
     }

src/components/nodes/NodeView.vue

@@ -112,15 +112,17 @@ export default {
   &-card &-header {
     padding: $node-card-spacer-sm-y $node-card-spacer-sm-x 0;
 
-    @include media-breakpoint-up(md) {
+    @include media-breakpoint-up($size-bp) {
       padding: $node-card-spacer-y $node-card-spacer-x 0;
     }
   }
 
   &-card &-footer {
     padding: $node-card-spacer-sm-y $node-card-spacer-sm-x $node-card-spacer-sm-y * 2;
+    position: sticky;
+    bottom: 0;
 
-    @include media-breakpoint-up(md) {
+    @include media-breakpoint-up($size-bp) {
       padding: $node-card-spacer-y $node-card-spacer-x $node-card-spacer-y * 2;
     }
   }
@@ -133,7 +135,7 @@ export default {
   &-view {
     width: 100%;
 
-    @include media-breakpoint-up(md) {
+    @include media-breakpoint-up($layout-bp) {
       height: 100%;
       overflow-y: auto;
 
@@ -146,8 +148,11 @@ export default {
   &-view &-header {
     padding: $node-view-spacer-sm-y $node-view-spacer-sm-x 0;
 
-    @include media-breakpoint-up(md) {
+    @include media-breakpoint-up($size-bp) {
       padding: $node-view-spacer-y $node-view-spacer-x 0;
+    }
+
+    @include media-breakpoint-up($layout-bp) {
       position: sticky;
       top: 0;
       z-index: 1;
@@ -157,8 +162,11 @@ export default {
   &-view &-footer {
     padding: $node-view-spacer-sm-y $node-view-spacer-sm-x;
 
-    @include media-breakpoint-up(md) {
+    @include media-breakpoint-up($size-bp) {
       padding: $node-view-spacer-y $node-view-spacer-x;
+    }
+
+    @include media-breakpoint-up($layout-bp) {
       position: sticky;
       bottom: 0;
     }

src/components/nodes/NodeViewBody.vue

@@ -104,7 +104,7 @@ export default {
     line-height: inherit;
   }
 
-  @include media-breakpoint-up(sm) {
+  @include media-breakpoint-up($size-bp) {
     font-size: 2rem;
   }
 
@@ -112,7 +112,9 @@ export default {
     padding: 0 $node-view-spacer-sm-x;
     font-size: 1.25rem;
 
-    @include media-breakpoint-up(sm) {
+    @include media-breakpoint-up($size-bp) {
+      padding: 0 $node-view-spacer-x;
+
       &.node-view-body-ref {
         font-size: 2.6rem;
       }
@@ -121,21 +123,14 @@ export default {
         font-size: 1.5rem;
       }
     }
-
-    @include media-breakpoint-up(md) {
-      padding: 0 $node-view-spacer-x;
-    }
   }
 
   &-card {
     padding: 0 $node-card-spacer-sm-x;
     font-size: 1.1rem;
 
-    @include media-breakpoint-up(sm) {
+    @include media-breakpoint-up($size-bp) {
       font-size: 2rem;
-    }
-
-    @include media-breakpoint-up(md) {
       padding: 0 $node-card-spacer-x;
     }
   }
@@ -169,7 +164,7 @@ export default {
   color: $white;
   font-size: 1.25rem;
 
-  @include media-breakpoint-up(sm) {
+  @include media-breakpoint-up($size-bp) {
     font-size: 1.5rem;
   }
 
@@ -188,6 +183,4 @@ export default {
     margin-top: .5rem;
   }
 }
-
-
 </style>

src/components/nodes/NodeViewChildList.vue

@@ -78,7 +78,7 @@ export default {
       justify-content: space-between;
     }
 
-    @include media-breakpoint-up(md) {
+    @include media-breakpoint-up($layout-bp) {
       display: none;
     }
   }

src/components/nodes/NodeViewChildListGroup.vue

@@ -32,7 +32,7 @@ export default {
     font-family: $font-family-base;
     font-weight: $font-weight-bold;
 
-    @include media-breakpoint-up(sm) {
+    @include media-breakpoint-up($size-bp) {
       font-size: 1.75rem;
     }
 

src/components/nodes/NodeViewHeaderProd.vue

@@ -90,7 +90,7 @@ export default {
     h4 {
       font-size: 0.8rem;
 
-      @include media-breakpoint-up(sm) {
+      @include media-breakpoint-up($size-bp) {
         font-size: 1.25rem;
       }
     }
@@ -100,7 +100,7 @@ export default {
     h4 {
       font-size: 1rem;
 
-      @include media-breakpoint-up(sm) {
+      @include media-breakpoint-up($size-bp) {
         font-size: 1.4525rem;
       }
     }

src/pages/_partials/MainHeader.vue

@@ -86,7 +86,7 @@ export default {
   font-size: $font-size-sm;
   justify-content: space-between;
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up($layout-bp) {
     height: $header-height;
     padding: 0 $header-spacer;
   }
@@ -99,14 +99,14 @@ export default {
       padding: 0 .5rem;
       margin-left: -.5rem;
 
-      @include media-breakpoint-up(tb) {
+      @include media-breakpoint-up($size-bp) {
         padding: 0 .75rem;
         margin-left: -.75rem;
       }
     }
 
     .dropdown-menu {
-      @include media-breakpoint-down(sm) {
+      @include media-breakpoint-down($size-bp-down) {
         width: 100vw;
       }
 

src/pages/library/LibraryOptions.vue

@@ -148,7 +148,7 @@ export default {
   width: 100%;
 
 
-  @include media-breakpoint-down(tb) {
+  @include media-breakpoint-down($layout-bp-down) {
     font-size: 0.9rem;
 
     ::v-deep {
@@ -158,7 +158,7 @@ export default {
     }
   }
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up($layout-bp) {
     padding: 0 $header-spacer $header-spacer;
     display: flex;
     justify-content: space-between;
@@ -166,7 +166,7 @@ export default {
 
 
   ::v-deep {
-    @include media-breakpoint-up(md) {
+    @include media-breakpoint-up($layout-bp) {
       flex-wrap: wrap;
 
       fieldset {
@@ -230,7 +230,7 @@ export default {
         }
       }
 
-      @include media-breakpoint-up(md) {
+      @include media-breakpoint-up($layout-bp) {
         min-width: 450px;
 
         .form-group {