From 85acb77158b7dd1c60a5979ce1add179eae05f6e Mon Sep 17 00:00:00 2001
From: Justin Cooper <jwcooper@gmail.com>
Date: Thu, 8 Nov 2018 15:20:39 -0600
Subject: [PATCH] add responsive sizes for download sections

---
 README.md                         |  2 +-
 assets/css/main.scss              |  1 +
 assets/sass/base/_variables.scss  | 22 ++++++++++++++++++++++
 assets/sass/pages/_downloads.scss | 12 ++++++++++++
 4 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 assets/sass/base/_variables.scss

diff --git a/README.md b/README.md
index 605171cb..d725fbcf 100644
--- a/README.md
+++ b/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
diff --git a/assets/css/main.scss b/assets/css/main.scss
index 4051465a..e94af32e 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -4,6 +4,7 @@
 
 @import 'vendors/normalize';
 
+@import 'base/variables';
 @import 'base/typography';
 @import 'base/base';
 
diff --git a/assets/sass/base/_variables.scss b/assets/sass/base/_variables.scss
new file mode 100644
index 00000000..14a9c9ce
--- /dev/null
+++ b/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;
diff --git a/assets/sass/pages/_downloads.scss b/assets/sass/pages/_downloads.scss
index b8019742..f64e343d 100644
--- a/assets/sass/pages/_downloads.scss
+++ b/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;
+  }
+}