Slightly smaller sidebar on small desktop to leave more space for content

front/src/style/_main.scss

@@ -75,6 +75,9 @@
 // see https://github.com/webpack/webpack/issues/215
 @import "./vendor/media";
 
+$desktop-sidebar-width: 300px;
+$widedesktop-sidebar-width: 350px;
+
 html,
 body {
   @include media("<desktop") {
@@ -91,12 +94,25 @@ body {
   margin-top: 2em;
 }
 
+.ui.wide.left.sidebar {
+  @include media(">desktop") {
+    width: $desktop-sidebar-width;
+  }
+
+  @include media(">widedesktop") {
+    width: $widedesktop-sidebar-width;
+  }
+}
 .main.pusher,
 .footer {
   @include media(">desktop") {
-    margin-left: 350px !important;
+    margin-left: $desktop-sidebar-width !important;
     margin-top: 50px;
   }
+
+  @include media(">widedesktop") {
+    margin-left: $widedesktop-sidebar-width !important;;
+  }
   transform: none !important;
 }
 
@@ -118,11 +134,14 @@ body {
   }
   @include media(">desktop") {
     position: fixed;
-    left: 350px;
+    left: $desktop-sidebar-width;
     right: 0px;
     top: 0px;
     z-index: 99;
   }
+  @include media(">widedesktop") {
+    left: $widedesktop-sidebar-width;
+  }
   background-color: white;
   .item {
     padding-top: 1.5em;
@@ -135,7 +154,10 @@ body {
   bottom: 1em;
   left: 1em;
   @include media(">desktop") {
-    left: 350px;
+    left: $desktop-sidebar-width;
+  }
+  @include media(">widedesktop") {
+    left: $widedesktop-sidebar-width;
   }
 }
 .main-pusher {
@@ -147,7 +169,7 @@ body {
   @include media(">tablet") {
     padding: 2em;
   }
-  @include media(">desktop") {
+  @include media(">widedesktop") {
     padding: 3em;
   }
 }

front/src/style/vendor/_media.scss

@@ -34,7 +34,8 @@
 $breakpoints: (
   'phone': 320px,
   'tablet': 768px,
-  'desktop': 1024px
+  'desktop': 1024px,
+  'widedesktop': 1200px
 ) !default;