Implement initial media query template functions

| Always adjust media queries to the content individually and not vice-versa.
| The design supports the content. Not the other way around.

Like documented in the GH-52, Nord Docs uses the mobile-first pattern
and follows the great "Google Developer Responsive Web Design
guidelines (1). The recommended way is to create media queries not based
on any device sizes but individually based on the content which is
unique for each project. This is the best practice and, contrary to most
popular CSS framework like Bootstrap, the correct way since each site is
different and there are thousands of devices and in the future new sizes
will appear.
Therefore, this commit includes the initial media query template
functions that define the smallest `min-width` query `base` (`<320px`)
and `minimal` (`>=320px`).

References:
  (1) https://developers.google.com/web/fundamentals/design-and-ux/responsive

Associated epic: GH-52
GH-61

Author: arcticicestudio

src/styles/theme/breakpoints.js

@@ -0,0 +1,24 @@
+/*
+ * 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
+ */
+
+/**
+ * Breakpoints for the "mobile-first" pattern based on and adjusted to the site content.
+ *
+ * @type {Object}
+ * @since 0.3.0
+ */
+const breakpoints = { minimal: 320 };
+
+export default breakpoints;

src/styles/theme/index.js

@@ -14,15 +14,17 @@
  * @since 0.2.0
  */
 
+import breakpoints from "./breakpoints";
 import colors, { nord, palettes } from "./colors";
 import globals from "./globals";
+import media from "./media";
 import motion from "./motion";
 import normalize from "./normalize";
 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 };
+const theme = { breakpoints, colors, media, motion, typography };
 
 export {
   colors,

src/styles/theme/media.js

@@ -0,0 +1,34 @@
+/*
+ * 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.2.0
+ */
+
+import { em } from "polished";
+
+import breakpoints from "./breakpoints";
+import typography from "./typography";
+import { generateMediaQuery } from "./utils";
+
+/**
+ * Provides media query template functions based on the configured breakpoints.
+ *
+ * @type {Object}
+ * @since 0.3.0
+ */
+const media = {
+  base: generateMediaQuery`(max-width: ${em(breakpoints.minimal - 1, typography.sizes.root)})`,
+  minimal: generateMediaQuery`(min-width: ${em(breakpoints.minimal, typography.sizes.root)})`,
+  breakpoints
+};
+
+export default media;