Implement generateMediaQuery media query generator function

To simplify the usage of media queries (1) with styled-components (2),
a utility function to generate media templates (3) will be implemented.
It'll use the `min-width` parameter to fulfill the used "mobile-first"
approach. The base size that'll be used has been implemented as theme
property in GH-54 (4).

References:
  (1) https://developer.mozilla.org/de/docs/Web/CSS/Media_Queries/Using_media_queries
  (2) #52
  (3) https://www.styled-components.com/docs/advanced#media-templates
  (4) https://github.com/arcticicestudio/nord-docs/pull/55/files#diff-90a2aa45c339ce4720a7fbbd23c65e3eR49

Associated epic: #52
GH-61

src/styles/theme/index.js

@@ -18,14 +18,15 @@ import colors, { nord, palettes } from "./colors";
 import globals from "./globals";
 import motion from "./motion";
 import normalize from "./normalize";
-import { themedMode, themedModeVariant } from "./utils";
+import { generateMediaQuery, themedMode, themedModeVariant } from "./utils";
 import typography from "./typography";
 import { MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST, THEME_KEY_MODE } from "./constants";
 
 const theme = { colors, motion, typography };
 
 export {
   colors,
+  generateMediaQuery,
   globals,
   motion,
   nord,

src/styles/theme/utils/generateMediaQuery.js

@@ -0,0 +1,35 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+/**
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.3.0
+ */
+
+import { css } from "styled-components";
+
+/**
+ * Generates a tag function for the specified media query that can be used to automatically wrap the tagged template
+ * literal in its media query.
+ *
+ * @param {string} query The string or template literal containing the media query features
+ * @returns {function} The tag function for the specified media query
+ * @see https://www.styled-components.com/docs/advanced#media-templates
+ * @see https://www.styled-components.com/docs/api#css
+ * @since 0.3.0
+ */
+const generateMediaQuery = (...query) => (...rules) =>
+  css`
+    @media ${css(...query)} {
+      ${css(...rules)};
+    }
+  `;
+
+export default generateMediaQuery;

src/styles/theme/utils/index.js

@@ -14,7 +14,8 @@
  * @since 0.2.0
  */
 
+import generateMediaQuery from "./generateMediaQuery";
 import themedMode from "./themedMode";
 import themedModeVariant from "./themedModeVariant";
 
-export { themedMode, themedModeVariant };
+export { generateMediaQuery, themedMode, themedModeVariant };