Base Media Query Setup

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,18 +14,21 @@
  * @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 { 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 };
+const theme = { breakpoints, colors, media, motion, typography };
 
 export {
   colors,
+  generateMediaQuery,
   globals,
   motion,
   nord,

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;

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 };