Merge pull request #87 from johndoh/breakpoints

fix usage of breakpoints to be smallest first

Author: alecpl

_config.yml

@@ -18,7 +18,7 @@ libs: {
         url: 'https://cdn.jsdelivr.net/npm/less@4.2.0/dist/less.min.js',
         sri: 'sha384-SlYTcCEsC10TwMfcpGjqd+bWfA2QdB0CInBtPX6erDT3NnEkhX2X3gJ83UyHtXs3'
     },
-    css: '/styles/styles.min.css?v=2024021800',
+    css: '/styles/styles.min.css?v=2026041800',
     bootstrap: {
         css: {
             url: 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css',

styles/styles.less

@@ -2,10 +2,13 @@
 @nav-height: 66px;
 @nav-offset: 6rem;
 @thumbnail-width: 140px;
+@icon-margin: .25rem;
 
-@max-width-md: 991px;
-@max-width-sm: 767px;
-@max-width-xs: 575px;
+@min-width-sm: 576px;
+@min-width-md: 768px;
+@min-width-lg: 992px;
+@min-width-xl: 1200px;
+@min-width-xxl: 1400px;
 
 @color-primary: #37beff;
 @color-background-alt: rgba(0, 0, 0, 0.05);
@@ -98,25 +101,25 @@ a:not(.btn):not(.nav-link):not(.dropdown-item),
 
   > .container > .grid {
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: auto 1fr;
+    grid-template-columns: auto;
+    grid-template-rows: auto;
 
     > .logo {
       grid-column: 1;
       grid-row: 1;
     }
 
     > .image {
-      grid-column: 2;
-      grid-row: 1 / 3;
+      grid-column: 1;
+      grid-row: 2;
     }
 
     > .download {
       grid-column: 1;
-      grid-row: 2;
+      grid-row: 3;
     }
 
-    @media (max-width: @max-width-md) {
+    @media (min-width: @min-width-md) {
       grid-template-columns: 1fr 1.5fr;
 
       > .logo {
@@ -135,23 +138,23 @@ a:not(.btn):not(.nav-link):not(.dropdown-item),
       }
     }
 
-    @media (max-width: @max-width-sm) {
-      grid-template-columns: auto;
-      grid-template-rows: auto;
+    @media (min-width: @min-width-lg) {
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: auto 1fr;
 
       > .logo {
         grid-column: 1;
         grid-row: 1;
       }
 
       > .image {
-        grid-column: 1;
-        grid-row: 2;
+        grid-column: 2;
+        grid-row: 1 / 3;
       }
 
       > .download {
         grid-column: 1;
-        grid-row: 3;
+        grid-row: 2;
       }
     }
   }
@@ -293,11 +296,11 @@ footer {
 }
 
 .rc-icon::before {
-  margin-right: .25rem;
+  margin-right: @icon-margin;
 }
 
 .rc-icon::after {
-  margin-left: .25rem;
+  margin-left: @icon-margin;
 }
 
 a.back-link::before {
@@ -362,13 +365,21 @@ a.current-theme::after {
   }
 
   &.btn-sm {
-    @media (max-width: @max-width-xs) {
+    & > span {
+      display: none;
+    }
+
+    &::before {
+      margin-right: 0;
+    }
+
+    @media (min-width: @min-width-sm) {
       & > span {
-        display: none;
+        display: inline;
       }
 
       &::before {
-        margin-right: 0;
+        margin-right: .5rem;
       }
     }
   }
@@ -450,25 +461,29 @@ div.color-modes > ul.dropdown-menu {
 }
 
 table.download-table {
+  tbody th,
+  tbody td {
+    vertical-align: middle;
+  }
+
   th.package {
+    width: 55%;
+  }
+
+  td.link {
     width: 20%;
   }
 
-  td.link,
   td.size {
-    width: 15%;
+    width: 20%;
   }
 
   td.checksum {
     font-size: 0.9em;
+    width: 5%;
   }
 
-  tbody th,
-  tbody td {
-    vertical-align: middle;
-  }
-
-  @media (max-width: @max-width-md) {
+  @media (min-width: @min-width-md) {
     th.package {
       width: 40%;
     }
@@ -482,25 +497,18 @@ table.download-table {
     }
 
     td.checksum {
-      width: 5%;
+      width: auto;
     }
   }
 
-  @media (max-width: @max-width-xs) {
+  @media (min-width: @min-width-lg) {
     th.package {
-      width: 55%;
-    }
-
-    td.link {
       width: 20%;
     }
 
+    td.link,
     td.size {
-      width: 20%;
-    }
-
-    td.checksum {
-      width: 5%;
+      width: 15%;
     }
   }
 }