From a96f31afefa787ddd66df3c9a6783d2412263601 Mon Sep 17 00:00:00 2001
From: Dylan Staley <staleydyla.n@gmail.com>
Date: Mon, 30 Oct 2017 13:55:26 -0700
Subject: [PATCH 1/2] add doc for reusable media queries

---
 docs/media-queries.md | 68 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 docs/media-queries.md

diff --git a/docs/media-queries.md b/docs/media-queries.md
new file mode 100644
index 000000000..85462e3f5
--- /dev/null
+++ b/docs/media-queries.md
@@ -0,0 +1,68 @@
+# Media Queries
+
+```jsx
+const Avatar = styled('img')`
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+
+  @media (min-width: 420px) {
+    width: 96px;
+    height: 96px;
+  }
+`
+
+render(<Avatar src={logoUrl} rounded />)
+```
+
+## Reusable Media Queries
+
+[Demo](https://stackblitz.com/edit/react-wudbyn)
+
+```js
+const breakpoints = {
+  // Numerical values will result in a min-width query
+  small: 576,
+  medium: 768,
+  large: 992,
+  xLarge: 1200,
+  // String values will be used as is
+  tallPhone: '(max-width: 360px) and (min-height: 740px)'
+};
+
+export const queries = Object.keys(breakpoints).reduce((accumulator, label) => {
+  if (typeof breakpoints[label] === 'string') {
+    accumulator[label] = (...args) =>
+      css`
+        @media (${breakpoints[label]}) {
+          ${css(...args)};
+        }
+      `;
+  } else {
+    accumulator[label] = (...args) =>
+      css`
+        @media (min-width: ${breakpoints[label]}px) {
+          ${css(...args)};
+        }
+      `;
+  }
+
+  return accumulator;
+}, {});
+```
+
+```js
+import { queries } from './mediaQueries.js`;
+
+const paragraph = css`
+  font-size: 12px;
+
+  ${queries.medium`
+    font-size: 14px;
+  `}
+
+  ${queries.large`
+    font-size: 16px;
+  `}
+`;
+```

From b3566aafaee3ef36d80db8512dd2fd2c04f70900 Mon Sep 17 00:00:00 2001
From: Dylan Staley <staleydyla.n@gmail.com>
Date: Mon, 30 Oct 2017 13:57:57 -0700
Subject: [PATCH 2/2] fix syntax highlighting

---
 docs/media-queries.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/media-queries.md b/docs/media-queries.md
index 85462e3f5..ca3feb7df 100644
--- a/docs/media-queries.md
+++ b/docs/media-queries.md
@@ -19,7 +19,7 @@ render(<Avatar src={logoUrl} rounded />)
 
 [Demo](https://stackblitz.com/edit/react-wudbyn)
 
-```js
+```jsx
 const breakpoints = {
   // Numerical values will result in a min-width query
   small: 576,
@@ -51,7 +51,7 @@ export const queries = Object.keys(breakpoints).reduce((accumulator, label) => {
 }, {});
 ```
 
-```js
+```jsx
 import { queries } from './mediaQueries.js`;
 
 const paragraph = css`