From 90c2a559f03d75795c0aaad47b7cd6feee78f5d7 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 26 Oct 2020 03:05:52 -0700
Subject: [PATCH] Add preliminary styles for mobile devices

---
 assets/scss/globals.scss                   |  6 ++++++
 src/components/App/index.scss              |  6 ++++++
 src/components/Button/index.scss           |  6 ++++++
 src/components/Segment/index.scss          |  7 +++++++
 src/components/SegmentedControl/index.scss | 10 ++++++++++
 5 files changed, 35 insertions(+)

diff --git a/assets/scss/globals.scss b/assets/scss/globals.scss
index b5ddbd59..489bfb1c 100644
--- a/assets/scss/globals.scss
+++ b/assets/scss/globals.scss
@@ -1,3 +1,9 @@
+@import 'include-media/dist/_include-media';
+
+// Breakpoints
+$breakpoints: (small: 320px, medium: 768px, large: 1024px);
+
+// Sizing
 $unit: 8px;
 
 // Colors
diff --git a/src/components/App/index.scss b/src/components/App/index.scss
index 8eff9c1c..68c6b63f 100644
--- a/src/components/App/index.scss
+++ b/src/components/App/index.scss
@@ -41,6 +41,12 @@ h1 {
     margin-top: $unit * 3;
 }
 
+@include media('>small', '<=medium') {
+    body {
+        font-size: 1.6rem;
+    }
+}
+
 // #NotFound {
 //     display: flex;
 //     flex-direction: column;
diff --git a/src/components/Button/index.scss b/src/components/Button/index.scss
index 43fb8ea6..5a21b3e7 100644
--- a/src/components/Button/index.scss
+++ b/src/components/Button/index.scss
@@ -87,3 +87,9 @@ button {
         color: inherit;
     }
 }
+
+@include media('>small', '<=medium') {
+    .Button {
+        font-size: 1.6rem;
+    }
+}
\ No newline at end of file
diff --git a/src/components/Segment/index.scss b/src/components/Segment/index.scss
index 7f953f48..3b3ad093 100644
--- a/src/components/Segment/index.scss
+++ b/src/components/Segment/index.scss
@@ -34,3 +34,10 @@
         }
     }
 }
+
+@include media('>small', '<=medium') {
+  .Segment {
+      flex-grow: 1;
+      font-size: 1.6rem;
+  }
+}
\ No newline at end of file
diff --git a/src/components/SegmentedControl/index.scss b/src/components/SegmentedControl/index.scss
index 0416e786..0660ac2e 100644
--- a/src/components/SegmentedControl/index.scss
+++ b/src/components/SegmentedControl/index.scss
@@ -13,4 +13,14 @@
     overflow: hidden;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     z-index: 1;
+}
+
+@include media('>small', '<=medium') {
+    .SegmentedControlWrapper {
+        justify-content: stretch;
+    }
+    
+    .SegmentedControl {
+        width: 100%;
+    }
 }
\ No newline at end of file