refactor: simplify margin breakpoints

These two ways of defining the margin are mathematically equivalent.
HDInnovations · Jan 31, 2025 · ac4d23f · ac4d23f
1 parent c42c64f
commit ac4d23f
Show file tree

Hide file tree

Showing 9 changed files with 8 additions and 120 deletions.
diff --git a/resources/sass/components/_user-active.scss b/resources/sass/components/_user-active.scss
@@ -1,22 +1,10 @@
 .user-peers {
-    margin: 0 calc(-1 * max(0px, 10vw - 60px)); /* Inverses the magic numbers used in the main layout styles */
+    margin: 0 calc(-1 * max(0px, 10vw - 60px, 25vw - 300px, 45vw - 800px)); /* Inverses the magic numbers used in the main layout styles */
     width: max-content;
     max-width: 100vw;
     align-self: center;
 }
 
-@media only screen and (min-width: 1600px) {
-    .user-peers {
-        margin: 0 calc(-1 * max(0px, 25vw - 300px)); /* Inverses the magic numbers used in the main layout styles */
-    }
-}
-
-@media only screen and (min-width: 2500px) {
-    .user-peers {
-        margin: 0 calc(-1 * max(0px, 45vw - 800px)); /* Inverses the magic numbers used in the main layout styles */
-    }
-}
-
 .user-peers__filters {
     margin: 0 calc(-1 * max(0px, 45vw - 800px) + max(12px, 45vw - 600px));
 }

diff --git a/resources/sass/components/_user-resurrections.scss b/resources/sass/components/_user-resurrections.scss
@@ -1,22 +1,10 @@
 .user-resurrections {
-    margin: 0 calc(-1 * max(0px, 10vw - 60px)); /* Inverses the magic numbers used in the main layout styles */
+    margin: 0 calc(-1 * max(0px, 10vw - 60px, 25vw - 300px, 45vw - 800px)); /* Inverses the magic numbers used in the main layout styles */
     width: max-content;
     max-width: 100vw;
     align-self: center;
 }
 
-@media only screen and (min-width: 1600px) {
-    .user-resurrections {
-        margin: 0 calc(-1 * max(0px, 25vw - 300px)); /* Inverses the magic numbers used in the main layout styles */
-    }
-}
-
-@media only screen and (min-width: 2500px) {
-    .user-resurrections {
-        margin: 0 calc(-1 * max(0px, 45vw - 800px)); /* Inverses the magic numbers used in the main layout styles */
-    }
-}
-
 .user-resurrections__filters {
     margin: 0 calc(-1 * max(0px, 45vw - 800px) + max(12px, 45vw - 600px));
 }

diff --git a/resources/sass/components/_user-torrents.scss b/resources/sass/components/_user-torrents.scss
@@ -1,22 +1,10 @@
 .user-torrents {
-    margin: 0 calc(-1 * max(0px, 10vw - 60px)); /* Inverses the magic numbers used in the main layout styles */
+    margin: 0 calc(-1 * max(0px, 10vw - 60px, 25vw - 300px, 45vw - 800px)); /* Inverses the magic numbers used in the main layout styles */
     width: max-content;
     max-width: 100vw;
     align-self: center;
 }
 
-@media only screen and (min-width: 1600px) {
-    .user-torrents {
-        margin: 0 calc(-1 * max(0px, 25vw - 300px)); /* Inverses the magic numbers used in the main layout styles */
-    }
-}
-
-@media only screen and (min-width: 2500px) {
-    .user-torrents {
-        margin: 0 calc(-1 * max(0px, 45vw - 800px)); /* Inverses the magic numbers used in the main layout styles */
-    }
-}
-
 .user-torrents__filters {
     margin: 0 calc(-1 * max(0px, 45vw - 800px) + max(12px, 45vw - 600px));
 }

diff --git a/resources/sass/components/_user-uploads.scss b/resources/sass/components/_user-uploads.scss
@@ -1,22 +1,10 @@
 .user-uploads {
-    margin: 0 calc(-1 * max(0px, 10vw - 60px)); /* Inverses the magic numbers used in the main layout styles */
+    margin: 0 calc(-1 * max(0px, 10vw - 60px, 25vw - 300px, 45vw - 800px)); /* Inverses the magic numbers used in the main layout styles */
     width: max-content;
     max-width: 100vw;
     align-self: center;
 }
 
-@media only screen and (min-width: 1600px) {
-    .user-uploads {
-        margin: 0 calc(-1 * max(0px, 25vw - 300px)); /* Inverses the magic numbers used in the main layout styles */
-    }
-}
-
-@media only screen and (min-width: 2500px) {
-    .user-uploads {
-        margin: 0 calc(-1 * max(0px, 45vw - 800px)); /* Inverses the magic numbers used in the main layout styles */
-    }
-}
-
 .user-uploads__filters {
     margin: 0 calc(-1 * max(0px, 45vw - 800px) + max(12px, 45vw - 600px));
 }

diff --git a/resources/sass/layout/_footer.scss b/resources/sass/layout/_footer.scss
@@ -4,19 +4,7 @@ body {
 }
 
 .footer {
-    padding: 20px max(20px, 10vw - 60px); /* Magic numbers - slightly increases the margins as you go from 600px up to 1600px */
-}
-
-@media only screen and (min-width: 1600px) {
-    .footer {
-        padding: 20px max(0px, 25vw - 300px); /* Magic numbers - slightly increases the margins as you go from 1600px up to 2500px */
-    }
-}
-
-@media only screen and (min-width: 2500px) {
-    .footer {
-        padding: 20px max(0px, 45vw - 800px); /* Magic numbers - slightly increases the margins as you go from 2500px to beyond 4k resolution */
-    }
+    padding: 20px max(20px, 10vw - 60px, 25vw - 300px, 45vw - 800px); /* Magic numbers - slightly increases the margins as you go from 0 to 600px to 1600px to 2500px to beyond */
 }
 
 .footer {

diff --git a/resources/sass/layout/_main.scss b/resources/sass/layout/_main.scss
@@ -1,17 +1,5 @@
 main {
-    margin: 0 max(0px, 10vw - 60px); /* Magic numbers - slightly increases the margins as you go from 600px up to 1600px */
-}
-
-@media only screen and (min-width: 1600px) {
-    main {
-        margin: 0 max(0px, 25vw - 300px); /* Magic numbers - slightly increases the margins as you go from 1600px up to 2500px */
-    }
-}
-
-@media only screen and (min-width: 2500px) {
-    main {
-        margin: 0 max(0px, 45vw - 800px); /* Magic numbers - slightly increases the margins as you go from 2500px to beyond 4k resolution */
-    }
+    margin: 0 max(0px, 10vw - 60px, 25vw - 300px, 45vw - 800px); /* Magic numbers - slightly increases the margins as you go from 0 to 600px to 1600px to 2500px to beyond */
 }
 
 main > article {

diff --git a/resources/sass/pages/_home.scss b/resources/sass/pages/_home.scss
@@ -1,19 +1,3 @@
-// .page__home {
-//     margin: 0 calc(-1 * max(0px, 10vw - 60px)); /* Inverses the magic numbers used in the main layout styles */
-// }
-
-// @media only screen and (min-width: 1600px) {
-//     .page__home {
-//         margin: 0 calc(-1 * max(0px, 25vw - 300px)); /* Inverses the magic numbers used in the main layout styles */
-//     }
-// }
-
-// @media only screen and (min-width: 2500px) {
-//     .page__home {
-//         margin: 0 calc(-1 * max(0px, 45vw - 800px)); /* Inverses the magic numbers used in the main layout styles */
-//     }
-// }
-
 .top-users__place {
     border-radius: 50%;
     background: #212125;

diff --git a/resources/sass/pages/_top10.scss b/resources/sass/pages/_top10.scss
@@ -1,22 +1,10 @@
 .top10--weekly {
-    margin: 0 calc(-1 * max(0px, 10vw - 60px)); /* Inverses the magic numbers used in the main layout styles */
+    margin: 0 calc(-1 * max(0px, 10vw - 60px, 25vw - 300px, 45vw - 800px)); /* Inverses the magic numbers used in the main layout styles */
     width: max-content;
     max-width: 100vw;
     align-self: center;
 }
 
-@media only screen and (min-width: 1600px) {
-    .top10--weekly {
-        margin: 0 calc(-1 * max(0px, 25vw - 300px)); /* Inverses the magic numbers used in the main layout styles */
-    }
-}
-
-@media only screen and (min-width: 2500px) {
-    .top10--weekly {
-        margin: 0 calc(-1 * max(0px, 45vw - 800px)); /* Inverses the magic numbers used in the main layout styles */
-    }
-}
-
 .top10-poster {
     display: grid;
     grid-template-rows: auto 1fr;

diff --git a/resources/sass/pages/_torrents.scss b/resources/sass/pages/_torrents.scss
@@ -1,18 +1,6 @@
 @supports selector(:has(.torrent-search-grouped__results)) {
     .page__torrents:not(:has(.torrent-search--grouped__results)) {
-        margin: 0 calc(-1 * max(0px, 10vw - 60px)); /* Inverses the magic numbers used in the main layout styles */
-    }
-
-    @media only screen and (min-width: 1600px) {
-        .page__torrents:not(:has(.torrent-search--grouped__results)) {
-            margin: 0 calc(-1 * max(0px, 25vw - 300px)); /* Inverses the magic numbers used in the main layout styles */
-        }
-    }
-
-    @media only screen and (min-width: 2500px) {
-        .page__torrents:not(:has(.torrent-search--grouped__results)) {
-            margin: 0 calc(-1 * max(0px, 45vw - 800px)); /* Inverses the magic numbers used in the main layout styles */
-        }
+        margin: 0 calc(-1 * max(0px, 10vw - 60px, 25vw - 300px, 45vw - 800px)); /* Inverses the magic numbers used in the main layout styles */
     }
 }