improve breakpoint use

Author: johndoh

download/index.html

@@ -28,7 +28,7 @@ <h2 id="{{ id }}">{{ params.title }} <a class="anchor" href="#{{ id }}" aria-lab
         {% for package in params.packages %}
             <div class="item-content" role="row">
                 <div class="col-package" role="rowheader">{{ package.version }} - {{ package.package }}{% if package.package == "Dependent" %}<sup><a href="#fn1" class="text-body-secondary">1</a></sup>{% endif %}</div>
-                <div class="col-link" role="cell"><a href="{{ package.url }}" title="Download now!" class="btn rc-icon btn-rc-download btn-sm"><span>Download</span></a></div>
+                <div class="col-link" role="cell"><a href="{{ package.url }}" title="Download now!" class="btn rc-icon btn-rc-download btn-sm"><span class="d-none d-sm-inline ms-0 ms-sm-1">Download</span></a></div>
                 <div class="col-size" role="cell">{{ package.size }}</div>
                 <div class="col-checksum" role="cell">
                     <span class="d-none d-lg-inline copy-popover-target">

index.html

@@ -15,7 +15,7 @@
                 <a href="/screens"><img src="/screens/skins/{{ skin }}/banner.png?g={{ generated }}" {% if site.data.screenshots[skin]['banner-dark'] %}data-rc-dark="/screens/skins/{{ skin }}/banner_dark.png?g={{ generated }}"{% endif %} width="647" height="390" id="bannerimg" class="img-fluid" alt="Welcome Roundcube Webmail"></a>
             </div>
             <div class="download text-center d-flex flex-column justify-content-center justify-content-lg-start align-items-center pt-xl-4">
-                <a href="/download" class="btn rc-icon btn-rc-download btn-lg" title="Download now!">Download</a>
+                <a href="/download" class="btn rc-icon btn-rc-download btn-lg" title="Download now!"><span class="ms-1">Download</span></a>
                 <span class="version text-body-secondary">Version {{ site.data.downloads.stable.packages[0].version }}</span>
             </div>
         </div>

styles/styles.less

@@ -3,10 +3,11 @@
 @nav-offset: 6rem;
 @thumbnail-width: 140px;
 
-@max-width-xl: 1399px;
-@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);
@@ -95,25 +96,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 {
@@ -132,23 +133,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;
       }
     }
   }
@@ -354,21 +355,8 @@ a.current-theme::after {
   }
 
   &::before {
-    margin-right: .5rem;
     content: @fa-var-download;
   }
-
-  &.btn-sm {
-    @media (max-width: @max-width-xs) {
-      & > span {
-        display: none;
-      }
-
-      &::before {
-        margin-right: 0;
-      }
-    }
-  }
 }
 
 div.color-modes > ul.dropdown-menu {
@@ -448,7 +436,7 @@ div.color-modes > ul.dropdown-menu {
 
 div.download-grid {
   display: grid;
-  grid-template-columns: 30% 12% 10% 48%;
+  grid-template-columns: 57% 13% 21% 9%;
 
   div.item-header,
   div.item-content {
@@ -464,19 +452,23 @@ div.download-grid {
     background-color: var(--rc-color-background-alt);
   }
 
-  @media (max-width: @max-width-xl) {
+  @media (min-width: @min-width-sm) {
+    grid-template-columns: 50% 25% 15% 10%;
+  }
+
+  @media (min-width: @min-width-lg) {
     grid-template-columns: 30% 15% 10% 43%;
 
     div.col-checksum span.copy-target {
       max-width: 90%;
     }
   }
 
-  @media (max-width: @max-width-md) {
-    grid-template-columns: 50% 25% 15% 10%;
-  }
+  @media (min-width: @min-width-xxl) {
+    grid-template-columns: 30% 12% 10% 48%;
 
-  @media (max-width: @max-width-xs) {
-    grid-template-columns: 57% 13% 21% 9%;
+    div.col-checksum span.copy-target {
+      max-width: none;
+    }
   }
 }