fix-media

src/.vitepress/theme/components/CustomDoc.vue

@@ -73,58 +73,70 @@ const pageName = computed(() =>
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
+@use 'src/assets/scss/app/helpers/media';
+
 .VPDoc {
   padding: 32px 24px 96px;
   width: 100%;
-}
 
-@media (min-width: 768px) {
-  .VPDoc {
+  @include media.media_min(960px) {
+    padding: 48px 32px 0;
+  }
+
+  @include media.media_max(768px) {
     padding: 48px 32px 128px;
   }
 }
 
-@media (min-width: 960px) {
-  .VPDoc {
-    padding: 48px 32px 0;
+.VPDoc:not(.has-sidebar) .container {  
+  @include media.media_min(1440px) {
+    max-width: 1104px;
   }
 
-  .VPDoc:not(.has-sidebar) .container {
-    display: flex;
+  @include media.media_max(960px) {
+    padding: 0 32px 128px;display: flex;
     justify-content: center;
     max-width: 992px;
   }
+}
 
-  .VPDoc:not(.has-sidebar) .content {
+.VPDoc:not(.has-sidebar) .content {
+  @include media.media_min(1440px) {
+    max-width: 784px;
+  }
+
+  @include media.media_max(960px) {
     max-width: 752px;
   }
 }
 
-@media (min-width: 1280px) {
-  .VPDoc .container {
+.VPDoc .container {
+  @include media.media_min(1280px) {
     display: flex;
     justify-content: center;
   }
-
-  .VPDoc .aside {
-    display: block;
-  }
 }
 
-@media (min-width: 1440px) {
-  .VPDoc:not(.has-sidebar) .content {
-    max-width: 784px;
-  }
-
-  .VPDoc:not(.has-sidebar) .container {
-    max-width: 1104px;
+.VPDoc .aside {
+  @include media.media_min(1280px) {
+    display: block;
   }
 }
 
 .container {
   margin: 0 auto;
   width: 100%;
+
+  @include media.media_min(1280px) {
+    order: 1;
+    margin: 0;
+    min-width: 640px;
+  }
+
+  @include media.media_max(960px) {
+    padding: 0 32px 128px;
+  }
 }
 
 .aside {
@@ -180,20 +192,6 @@ const pageName = computed(() =>
   width: 100%;
 }
 
-@media (min-width: 960px) {
-  .content {
-    padding: 0 32px 128px;
-  }
-}
-
-@media (min-width: 1280px) {
-  .content {
-    order: 1;
-    margin: 0;
-    min-width: 640px;
-  }
-}
-
 .content-container {
   margin: 0 auto;
 }