Adjust and improve CSS media query breakpoints

Since Nord Docs makes use of the responsive design best practice to set
breakpoints based on the content, this commit updates the currently used
breakpoint upper and lower boundary values to fit the compnents that'll
implement for this feature.

GH-64

src/styles/theme/breakpoints.js

@@ -19,6 +19,12 @@
  * @type {Object}
  * @since 0.3.0
  */
-const breakpoints = { minimal: 320 };
+const breakpoints = {
+  phoneLandscapeUpperBoundary: 480,
+  tabletPortraitLowerBoundary: 600,
+  tabletLandscapeLowerBoundary: 900,
+  desktopLowerBoundary: 1200,
+  desktopPlusLowerBoundary: 1800
+};
 
 export default breakpoints;

src/styles/theme/index.js

@@ -30,6 +30,7 @@ export {
   colors,
   generateMediaQuery,
   globals,
+  media,
   motion,
   nord,
   normalize,

src/styles/theme/media.js

@@ -19,15 +19,21 @@ import breakpoints from "./breakpoints";
 import typography from "./typography";
 import { generateMediaQuery } from "./utils";
 
+const query = value => em(value, typography.sizes.root);
+
 /**
  * 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)})`,
+  phonePortrait: generateMediaQuery`(max-width: ${query(breakpoints.phoneLandscapeUpperBoundary - 1)})`,
+  phoneLandscape: generateMediaQuery`(min-width: ${query(breakpoints.phoneLandscapeUpperBoundary)})`,
+  tabletPortrait: generateMediaQuery`(min-width: ${query(breakpoints.tabletPortraitLowerBoundary)})`,
+  tabletLandscape: generateMediaQuery`(min-width: ${query(breakpoints.tabletLandscapeLowerBoundary)})`,
+  desktop: generateMediaQuery`(min-width: ${query(breakpoints.desktopLowerBoundary)})`,
+  desktopPlus: generateMediaQuery`(min-width: ${query(breakpoints.desktopPlus)})`,
   breakpoints
 };