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;