example/pages/index: add documentation about vars.widths for breakppo…

…ints
magic · Jan 5, 2023 · b6d9f23 · b6d9f23
1 parent 72c6ee8
commit b6d9f23
Showing 1 changed file with 15 additions and 1 deletion.
diff --git a/example/pages/index.mjs b/example/pages/index.mjs
@@ -246,9 +246,23 @@ await css.stringify(style)
 `),
 
   h3({ id: 'styles-media-queries' }, 'media queries'),
+
+  p('Mediaqueries can use the vars.widths object to determine appropriate breakpoint sizes.'),
+  p('Default widths:'),
+  Pre(`
+vars.widths = {
+  tablet: '500px',
+  laptop: '900px',
+  desktop: '1200px',
+  agency: '1600px',
+}
+`),
+
+  p('Usage of the vars.widths in media queries:'),
+
   Pre(`
 const style = {
-  '@media screen and (min-width: 500px)': {
+  [\`@media screen and(min-width: \${vars.widths?.tablet || '500px'})\`]: {
     '#id': {
       color: opts.textColor,
     },