adding new breakpoint xxxlarge

app/assets/stylesheets/_settings.scss

@@ -119,13 +119,14 @@ $include-css: (
 
 // These are our named breakpoints. You can use them in our breakpoint function like this:
 // @include breakpoint(medium) { // Medium and larger styles }
-// $breakpoints: (
-//   small: rem-calc(0),
-//   medium: rem-calc(640),
-//   large: rem-calc(1200),
-//   xlarge: rem-calc(1440),
-//   xxlarge: rem-calc(1920),
-// );
+$breakpoints: (
+  small: rem-calc(300),
+  medium: rem-calc(640),
+  large: rem-calc(1200),
+  xlarge: rem-calc(1440),
+  xxlarge: rem-calc(1920),
+  xxxlarge: rem-calc(2048),
+);
 
 // All of the names in this list will be output as classes in your CSS,
 // like small-12, medium-6, and so on.

app/assets/stylesheets/default.css.sass

@@ -35,13 +35,13 @@
 @import bourbon
 
 @import open_project_global/all
+
+@import foundation
 @import settings
 
 @import fonts/lato
 @import fonts/openproject_icon_font
 
-@import foundation
-
 @import layout/all
 @import content/accounts
 @import content/context_menu