CSS: media breakpoints

from Bootstrap and added a couple more for super big screens

src/styles/_config.sass

@@ -158,4 +158,6 @@ $tooltip-opacity: 1
 
 $nav-link-height: 37px
 $navbar-padding-x: 0
-$navbar-padding-y: 0
+$navbar-padding-y: 0
+
+$grid-breakpoints: (xs: 0,sm: 576px,md: 768px,lg: 1100px,xl: 1500px, xxl: 1800px)

src/styles/_utils.sass

@@ -171,17 +171,25 @@
 /* Small but wide: phablets, iPads
  **  Menu is collapsed, columns stack, no brand */
 =media-sm
-	@media (min-width: #{$screen-tablet}) and (max-width: #{$screen-desktop - 1px})
+	@include media-breakpoint-up(sm)
 		@content
 
 /* Tablets portrait.
  **  Menu is expanded, but columns stack, brand is shown */
 =media-md
-	@media (min-width: #{$screen-desktop})
+	@include media-breakpoint-up(md)
 		@content
 
 =media-lg
-	@media (min-width: #{$screen-lg-desktop})
+	@include media-breakpoint-up(lg)
+		@content
+
+=media-xl
+	@include media-breakpoint-up(xl)
+		@content
+
+=media-xxl
+	@include media-breakpoint-up(xxl)
 		@content
 
 =media-print

src/styles/blog.sass

@@ -49,7 +49,6 @@
 @import _comments
 @import _notifications
 
-
 #blog_post-edit-form
 	padding: 20px