@ndla/preset-panda 0.0.30 → 0.0.31

package/dist/styles.css

@@ -208,6 +208,37 @@
     --skew-y: 0;
     --scale-x: 1;
     --scale-y: 1;
+}
+
+  @media screen and (max-width: 37.56rem) {
+    .ndla-article details,.ndla-article blockquote,.ndla-article [data-embed-type="framed-content"],.ndla-article [data-embed-type="factbox"],.ndla-article table,.ndla-article [data-embed-type="related-content-list"],.ndla-article [data-embed-type="link-block-list"],.ndla-article [data-embed-type="blog-post"],.ndla-article [data-embed-type="campaign-block"],.ndla-article [data-embed-type="key-figure"],.ndla-article [data-embed-type="grid"],.ndla-article [data-embed-type="contact-block"],.ndla-article [data-embed-type="file-list"],.ndla-article [data-embed-type="uu-disclaimer"] {
+      margin-block-start: var(--spacing-xlarge);
+      margin-block-end: var(--spacing-xlarge);
+}
+
+    .ndla-article section:not([class]) > :is(h2, [data-embed-type="copy-heading"]),.ndla-article section:not([class]) > div:not([class]) > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="framed-content"] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="grid"] > div > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="grid-parallax"] > div > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="factbox"] > div > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="copyright"] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="uu-disclaimer"] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article details > :is(h2, [data-embed-type="copy-heading"]),.ndla-article blockquote > :is(h2, [data-embed-type="copy-heading"]) {
+      margin-block-start: var(--spacing-large);
+}
+
+    .ndla-article section:not([class]) > h3,.ndla-article section:not([class]) > div:not([class]) > h3,.ndla-article [data-embed-type="framed-content"] > h3,.ndla-article [data-embed-type="grid"] > div > h3,.ndla-article [data-embed-type="grid-parallax"] > div > h3,.ndla-article [data-embed-type="factbox"] > div > h3,.ndla-article [data-embed-type="copyright"] > h3,.ndla-article [data-embed-type="uu-disclaimer"] > h3,.ndla-article details > h3,.ndla-article blockquote > h3 {
+      margin-block-start: var(--spacing-medium);
+}
+
+    .ndla-article section:not([class]) > :is(h4, h5, h6),.ndla-article section:not([class]) > div:not([class]) > :is(h4, h5, h6),.ndla-article [data-embed-type="framed-content"] > :is(h4, h5, h6),.ndla-article [data-embed-type="grid"] > div > :is(h4, h5, h6),.ndla-article [data-embed-type="grid-parallax"] > div > :is(h4, h5, h6),.ndla-article [data-embed-type="factbox"] > div > :is(h4, h5, h6),.ndla-article [data-embed-type="copyright"] > :is(h4, h5, h6),.ndla-article [data-embed-type="uu-disclaimer"] > :is(h4, h5, h6),.ndla-article details > :is(h4, h5, h6),.ndla-article blockquote > :is(h4, h5, h6) {
+      margin-block-start: var(--spacing-small);
+}
+
+    .ndla-article section:not([class]) > :is(figure),.ndla-article section:not([class]) > div:not([class]) > :is(figure),.ndla-article [data-embed-type="framed-content"] > :is(figure),.ndla-article [data-embed-type="grid"] > div > :is(figure),.ndla-article [data-embed-type="grid-parallax"] > div > :is(figure),.ndla-article [data-embed-type="factbox"] > div > :is(figure),.ndla-article [data-embed-type="copyright"] > :is(figure),.ndla-article [data-embed-type="uu-disclaimer"] > :is(figure),.ndla-article details > :is(figure),.ndla-article blockquote > :is(figure) {
+      margin-block-start: var(--spacing-xlarge);
+}
+
+    .ndla-article section:not([class]) > :is(:first-child),.ndla-article section:not([class]) > div:not([class]) > :is(:first-child),.ndla-article [data-embed-type="framed-content"] > :is(:first-child),.ndla-article [data-embed-type="grid"] > div > :is(:first-child),.ndla-article [data-embed-type="grid-parallax"] > div > :is(:first-child),.ndla-article [data-embed-type="factbox"] > div > :is(:first-child),.ndla-article [data-embed-type="copyright"] > :is(:first-child),.ndla-article [data-embed-type="uu-disclaimer"] > :is(:first-child),.ndla-article details > :is(:first-child),.ndla-article blockquote > :is(:first-child) {
+      margin-block-start: var(--spacing-xlarge);
+}
+
+    .ndla-article section:not([class]) > :first-child,.ndla-article section:not([class]) > div:not([class]) > :first-child,.ndla-article section:not([class]) > :last-child,.ndla-article section:not([class]) > div:not([class]) > :last-child {
+      margin-block-start: var(--spacing-xlarge);
+}
 }
 }
 

package/es/globalCss.js

@@ -66,32 +66,51 @@ export const globalCss = defineGlobalStyles({
     // Non-figure block elements that should have margin above and below.
     '& details, blockquote, [data-embed-type="framed-content"], [data-embed-type="factbox"], table, [data-embed-type="related-content-list"], [data-embed-type="link-block-list"], [data-embed-type="blog-post"], [data-embed-type="campaign-block"], [data-embed-type="key-figure"], [data-embed-type="grid"], [data-embed-type="contact-block"], [data-embed-type="file-list"], [data-embed-type="uu-disclaimer"]': {
       marginBlockStart: "xxlarge",
-      marginBlockEnd: "xxlarge"
+      marginBlockEnd: "xxlarge",
+      tabletDown: {
+        marginBlockStart: "xlarge",
+        marginBlockEnd: "xlarge"
+      }
     },
     // Article content is usually wrapped in a section. The rest of the elements in this list contains other elements, and should add margin to them no matter where they are placed in the DOM.
     '& section:not([class]), section:not([class]) > div:not([class]), [data-embed-type="framed-content"], [data-embed-type="grid"] > div, [data-embed-type="grid-parallax"] > div, [data-embed-type="factbox"] > div, [data-embed-type="copyright"], [data-embed-type="uu-disclaimer"], details, blockquote': {
       '& > :is(h2, [data-embed-type="copy-heading"])': {
         marginBlockStart: "xlarge",
-        marginBlockEnd: "small"
+        marginBlockEnd: "small",
+        tabletDown: {
+          marginBlockStart: "large"
+        }
       },
       "& > h3": {
         marginBlockStart: "large",
-        marginBlockEnd: "xsmall"
+        marginBlockEnd: "xsmall",
+        tabletDown: {
+          marginBlockStart: "medium"
+        }
       },
       "& > :is(h4, h5, h6)": {
         marginBlockStart: "medium",
-        marginBlockEnd: "xsmall"
+        marginBlockEnd: "xsmall",
+        tabletDown: {
+          marginBlockStart: "small"
+        }
       },
       "& > :is(figure)": {
         marginBlockStart: "xxlarge",
-        marginBlockEnd: "xxlarge"
+        marginBlockEnd: "xxlarge",
+        tabletDown: {
+          marginBlockStart: "xlarge"
+        }
       },
       '& > :is(p, ul, ol, dl, [data-embed-type="speech"])': {
         marginBlockStart: "xsmall",
         marginBlockEnd: "xsmall"
       },
       "& > :is(:first-child)": {
-        marginBlockStart: "xxlarge"
+        marginBlockStart: "xxlarge",
+        tabletDown: {
+          marginBlockStart: "xlarge"
+        }
       }
     },
     '& [data-embed-type="framed-content"], [data-embed-type="grid"] > div, [data-embed-type="grid-parallax"] > div, [data-embed-type="factbox"] > div, [data-embed-type="copyright"], [data-embed-type="uu-disclaimer"], details, blockquote': {
@@ -104,10 +123,16 @@ export const globalCss = defineGlobalStyles({
     },
     "& section:not([class]), section:not([class]) > div:not([class])": {
       "& > :first-child": {
-        marginBlockStart: "xxlarge"
+        marginBlockStart: "xxlarge",
+        tabletDown: {
+          marginBlockStart: "xlarge"
+        }
       },
       "& > :last-child": {
-        marginBlockEnd: "xxlarge"
+        marginBlockEnd: "xxlarge",
+        tabletDown: {
+          marginBlockStart: "xlarge"
+        }
       }
     }
   },

package/lib/globalCss.js

@@ -72,32 +72,51 @@ const globalCss = exports.globalCss = (0, _dev.defineGlobalStyles)({
     // Non-figure block elements that should have margin above and below.
     '& details, blockquote, [data-embed-type="framed-content"], [data-embed-type="factbox"], table, [data-embed-type="related-content-list"], [data-embed-type="link-block-list"], [data-embed-type="blog-post"], [data-embed-type="campaign-block"], [data-embed-type="key-figure"], [data-embed-type="grid"], [data-embed-type="contact-block"], [data-embed-type="file-list"], [data-embed-type="uu-disclaimer"]': {
       marginBlockStart: "xxlarge",
-      marginBlockEnd: "xxlarge"
+      marginBlockEnd: "xxlarge",
+      tabletDown: {
+        marginBlockStart: "xlarge",
+        marginBlockEnd: "xlarge"
+      }
     },
     // Article content is usually wrapped in a section. The rest of the elements in this list contains other elements, and should add margin to them no matter where they are placed in the DOM.
     '& section:not([class]), section:not([class]) > div:not([class]), [data-embed-type="framed-content"], [data-embed-type="grid"] > div, [data-embed-type="grid-parallax"] > div, [data-embed-type="factbox"] > div, [data-embed-type="copyright"], [data-embed-type="uu-disclaimer"], details, blockquote': {
       '& > :is(h2, [data-embed-type="copy-heading"])': {
         marginBlockStart: "xlarge",
-        marginBlockEnd: "small"
+        marginBlockEnd: "small",
+        tabletDown: {
+          marginBlockStart: "large"
+        }
       },
       "& > h3": {
         marginBlockStart: "large",
-        marginBlockEnd: "xsmall"
+        marginBlockEnd: "xsmall",
+        tabletDown: {
+          marginBlockStart: "medium"
+        }
       },
       "& > :is(h4, h5, h6)": {
         marginBlockStart: "medium",
-        marginBlockEnd: "xsmall"
+        marginBlockEnd: "xsmall",
+        tabletDown: {
+          marginBlockStart: "small"
+        }
       },
       "& > :is(figure)": {
         marginBlockStart: "xxlarge",
-        marginBlockEnd: "xxlarge"
+        marginBlockEnd: "xxlarge",
+        tabletDown: {
+          marginBlockStart: "xlarge"
+        }
       },
       '& > :is(p, ul, ol, dl, [data-embed-type="speech"])': {
         marginBlockStart: "xsmall",
         marginBlockEnd: "xsmall"
       },
       "& > :is(:first-child)": {
-        marginBlockStart: "xxlarge"
+        marginBlockStart: "xxlarge",
+        tabletDown: {
+          marginBlockStart: "xlarge"
+        }
       }
     },
     '& [data-embed-type="framed-content"], [data-embed-type="grid"] > div, [data-embed-type="grid-parallax"] > div, [data-embed-type="factbox"] > div, [data-embed-type="copyright"], [data-embed-type="uu-disclaimer"], details, blockquote': {
@@ -110,10 +129,16 @@ const globalCss = exports.globalCss = (0, _dev.defineGlobalStyles)({
     },
     "& section:not([class]), section:not([class]) > div:not([class])": {
       "& > :first-child": {
-        marginBlockStart: "xxlarge"
+        marginBlockStart: "xxlarge",
+        tabletDown: {
+          marginBlockStart: "xlarge"
+        }
       },
       "& > :last-child": {
-        marginBlockEnd: "xxlarge"
+        marginBlockEnd: "xxlarge",
+        tabletDown: {
+          marginBlockStart: "xlarge"
+        }
       }
     }
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/preset-panda",
-  "version": "0.0.30",
+  "version": "0.0.31",
   "description": "Panda preset for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -37,5 +37,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "92e263c72d707da94f33fb1aae9ea8e586b29b6e"
+  "gitHead": "784eea9f500d7e38a2d5102286118a1da129b743"
 }