Media queries to use variables when possible

client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss

@@ -58,7 +58,7 @@
   margin: 20px 0 50px;
 }
 
-@media screen and (max-width: 800px) {
+@media screen and (max-width: $small-view) {
   .video-channels-header {
     text-align: center;
   }

client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss

@@ -43,7 +43,7 @@
   }
 }
 
-@media screen and (max-width: 800px) {
+@media screen and (max-width: $small-view) {
   .video-playlists-header {
     text-align: center;
   }

client/src/app/+signup/+register/register.component.scss

@@ -44,7 +44,7 @@
       }
     }
 
-    @media screen and (max-width: 500px) {
+    @media screen and (max-width: $mobile-view) {
       width: auto;
     }
   }

client/src/app/app.component.scss

@@ -61,7 +61,7 @@
       }
     }
 
-    @media screen and (max-width: 500px) {
+    @media screen and (max-width: $mobile-view) {
       width: 70px;
 
       .peertube-title {

client/src/app/core/hotkeys/hotkeys.component.scss

@@ -1,3 +1,4 @@
+@import '_variables';
 @import '_mixins';
 
 .cfp-hotkeys-container {
@@ -93,7 +94,7 @@
   cursor: pointer;
 }
 
-@media all and (max-width: 500px) {
+@media all and (max-width: $mobile-view) {
   .cfp-hotkeys {
     font-size: 0.8em;
   }

client/src/sass/application.scss

@@ -167,7 +167,7 @@ label {
     color: var(--mainForegroundColor);
   }
 
-  @media screen and (max-width: 500px) {
+  @media screen and (max-width: $mobile-view) {
     margin-right: 15px;
   }
 }

client/src/sass/include/_miniature.scss

@@ -240,7 +240,7 @@ $play-overlay-width: 18px;
     width: $video-miniature-width * 2;
   }
 
-  @media screen and (max-width: 500px) {
+  @media screen and (max-width: $mobile-view) {
     width: auto;
     margin: 0 !important;