Fixed menu proportions with xl and xxl screens

templates/page.html

@@ -3,7 +3,7 @@
 {% block body %}
  <div class="container-fluid h-md-100">
  <div class="row h-100">
- <div class="col-md-5 col-lg-4 px-0">
+ <div class="col-md-5 col-lg-4 col-xl-3 col-xxl-2 px-0">
  <svg class="w-100 h-100 position-absolute z-lowest" id="graph"></svg>
  <header class="my-3 text-center">
  <img src="{{ '/images/logo.svg' | url}}" alt="Mittelab" class="logo m-2">
@@ -12,7 +12,7 @@
  {% include 'nav.html' %}
  </nav>
  </div>
- <div class="col-md-7 col-lg-8">
+ <div class="col">
  <div class="scrollable-md">
  <main>
  <h1 class="display-4 text-muted my-3">{{ this.title }}</h1>

webpack/scss/mlab.scss

@@ -5,9 +5,31 @@ $body-color: #fff;
 $link-color: $mittelab-logo;
 
 $theme-colors: (
- "dark": $body-bg,
- "mitte": $mittelab-blue,
- "light": $mittelab-logo,
+ "dark": $body-bg,
+ "mitte": $mittelab-blue,
+ "light": $mittelab-logo,
+);
+
+
+$grid-breakpoints: (
+ xs: 0,
+ sm: 576px,
+ md: 768px,
+ lg: 992px,
+ xl: 1200px,
+ xxl: 1800px
+);
+
+// Grid containers
+//
+// Define the maximum width of `.container` for different screen sizes.
+
+$container-max-widths: (
+ sm: 540px,
+ md: 720px,
+ lg: 960px,
+ xl: 1140px,
+ xxl: 1600px
 );
 
 $font-family-sans-serif: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;