add responsive sizes for download sections

README.md

@@ -4,7 +4,7 @@ TODO
 - [ ] add feed_meta and seo tags to layout head
 - [ ] setup github_pages gemfile
 - [ ] favicons
-- [ ] search of Downloads
+- [ ] filtering and sorting of Downloads
 - [x] layout of Downloads
 - [ ] responsive snap sizes
 - [ ] download details pages

assets/css/main.scss

@@ -4,6 +4,7 @@
 
 @import 'vendors/normalize';
 
+@import 'base/variables';
 @import 'base/typography';
 @import 'base/base';
 

assets/sass/base/_variables.scss

@@ -0,0 +1,22 @@
+// derived from bootstrap variables
+
+// Extra small screen / phone
+$screen-xs:                  480px !default;
+$screen-phone:               $screen-xs !default;
+
+// Small screen / tablet
+$screen-sm:                  768px !default;
+$screen-tablet:              $screen-sm !default;
+
+// Medium screen / desktop
+$screen-md:                  1024px !default;
+$screen-desktop:             $screen-md !default;
+
+// Large screen / wide desktop
+$screen-lg:                  1366px !default;
+$screen-lg-desktop:          $screen-lg !default;
+
+// So media queries don't overlap when required, provide a maximum
+$screen-xs-max:              ($screen-sm - 1) !default;
+$screen-sm-max:              ($screen-md - 1) !default;
+$screen-md-max:              ($screen-lg - 1) !default;

assets/sass/pages/_downloads.scss

@@ -82,3 +82,15 @@
     }
   }
 }
+
+@media (max-width: $screen-md) {
+  #download-page .download-section {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (max-width: $screen-xs-max) {
+  #download-page .download-section {
+    grid-template-columns: 1fr;
+  }
+}