@ndla/preset-panda 0.0.30 → 0.0.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/styles.css CHANGED
@@ -56,6 +56,7 @@
56
56
  }
57
57
 
58
58
  .ndla-article h1 {
59
+ letter-spacing: -1px;
59
60
  font-family: var(--fonts-sans);
60
61
  font-weight: var(--font-weights-bold);
61
62
  font-size: var(--font-sizes-3xlarge);
@@ -68,6 +69,7 @@
68
69
  }
69
70
 
70
71
  .ndla-article h2 {
72
+ letter-spacing: -2px;
71
73
  font-family: var(--fonts-sans);
72
74
  font-weight: var(--font-weights-bold);
73
75
  font-size: var(--font-sizes-xxlarge);
@@ -80,6 +82,7 @@
80
82
  }
81
83
 
82
84
  .ndla-article h3 {
85
+ letter-spacing: -1px;
83
86
  font-family: var(--fonts-sans);
84
87
  font-weight: var(--font-weights-bold);
85
88
  font-size: var(--font-sizes-large);
@@ -92,6 +95,7 @@
92
95
  }
93
96
 
94
97
  .ndla-article h4,.ndla-article h5,.ndla-article h6 {
98
+ letter-spacing: -1px;
95
99
  font-family: var(--fonts-sans);
96
100
  font-weight: var(--font-weights-bold);
97
101
  font-size: var(--font-sizes-medium);
@@ -208,6 +212,75 @@
208
212
  --skew-y: 0;
209
213
  --scale-x: 1;
210
214
  --scale-y: 1;
215
+ }
216
+
217
+ @media screen and (max-width: 37.56rem) {
218
+ .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"] {
219
+ margin-block-start: var(--spacing-xlarge);
220
+ margin-block-end: var(--spacing-xlarge);
221
+ }
222
+
223
+ .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"]) {
224
+ margin-block-start: var(--spacing-large);
225
+ }
226
+
227
+ .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 {
228
+ margin-block-start: var(--spacing-medium);
229
+ }
230
+
231
+ .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) {
232
+ margin-block-start: var(--spacing-small);
233
+ }
234
+
235
+ .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) {
236
+ margin-block-start: var(--spacing-xlarge);
237
+ }
238
+
239
+ .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) {
240
+ margin-block-start: var(--spacing-xlarge);
241
+ }
242
+
243
+ .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 {
244
+ margin-block-start: var(--spacing-xlarge);
245
+ }
246
+ }
247
+
248
+ @media screen and (max-width: 29.7475rem) {
249
+ .ndla-article h1 {
250
+ letter-spacing: -2px;
251
+ font-size: var(--font-sizes-xxlarge);
252
+ line-height: var(--line-heights-xxlarge);
253
+ }
254
+
255
+ .ndla-article h1:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
256
+ font-size: calc(var(--font-sizes-xxlarge) * 1.11);
257
+ line-height: calc(var(--line-heights-xxlarge) * 1.11);
258
+ }
259
+ }
260
+
261
+ @media screen and (max-width: 29.7475rem) {
262
+ .ndla-article h2 {
263
+ letter-spacing: -1px;
264
+ font-size: var(--font-sizes-xlarge);
265
+ line-height: var(--line-heights-xlarge);
266
+ }
267
+
268
+ .ndla-article h2:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
269
+ font-size: calc(var(--font-sizes-xlarge) * 1.11);
270
+ line-height: calc(var(--line-heights-xlarge) * 1.11);
271
+ }
272
+ }
273
+
274
+ @media screen and (max-width: 29.7475rem) {
275
+ .ndla-article h3 {
276
+ font-size: var(--font-sizes-medium);
277
+ line-height: var(--line-heights-small);
278
+ }
279
+
280
+ .ndla-article h3:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
281
+ font-size: calc(var(--font-sizes-medium) * 1.11);
282
+ line-height: calc(var(--line-heights-small) * 1.11);
283
+ }
211
284
  }
212
285
  }
213
286
 
package/es/globalCss.js CHANGED
@@ -66,32 +66,51 @@ export const globalCss = defineGlobalStyles({
66
66
  // Non-figure block elements that should have margin above and below.
67
67
  '& 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"]': {
68
68
  marginBlockStart: "xxlarge",
69
- marginBlockEnd: "xxlarge"
69
+ marginBlockEnd: "xxlarge",
70
+ tabletDown: {
71
+ marginBlockStart: "xlarge",
72
+ marginBlockEnd: "xlarge"
73
+ }
70
74
  },
71
75
  // 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.
72
76
  '& 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': {
73
77
  '& > :is(h2, [data-embed-type="copy-heading"])': {
74
78
  marginBlockStart: "xlarge",
75
- marginBlockEnd: "small"
79
+ marginBlockEnd: "small",
80
+ tabletDown: {
81
+ marginBlockStart: "large"
82
+ }
76
83
  },
77
84
  "& > h3": {
78
85
  marginBlockStart: "large",
79
- marginBlockEnd: "xsmall"
86
+ marginBlockEnd: "xsmall",
87
+ tabletDown: {
88
+ marginBlockStart: "medium"
89
+ }
80
90
  },
81
91
  "& > :is(h4, h5, h6)": {
82
92
  marginBlockStart: "medium",
83
- marginBlockEnd: "xsmall"
93
+ marginBlockEnd: "xsmall",
94
+ tabletDown: {
95
+ marginBlockStart: "small"
96
+ }
84
97
  },
85
98
  "& > :is(figure)": {
86
99
  marginBlockStart: "xxlarge",
87
- marginBlockEnd: "xxlarge"
100
+ marginBlockEnd: "xxlarge",
101
+ tabletDown: {
102
+ marginBlockStart: "xlarge"
103
+ }
88
104
  },
89
105
  '& > :is(p, ul, ol, dl, [data-embed-type="speech"])': {
90
106
  marginBlockStart: "xsmall",
91
107
  marginBlockEnd: "xsmall"
92
108
  },
93
109
  "& > :is(:first-child)": {
94
- marginBlockStart: "xxlarge"
110
+ marginBlockStart: "xxlarge",
111
+ tabletDown: {
112
+ marginBlockStart: "xlarge"
113
+ }
95
114
  }
96
115
  },
97
116
  '& [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({
104
123
  },
105
124
  "& section:not([class]), section:not([class]) > div:not([class])": {
106
125
  "& > :first-child": {
107
- marginBlockStart: "xxlarge"
126
+ marginBlockStart: "xxlarge",
127
+ tabletDown: {
128
+ marginBlockStart: "xlarge"
129
+ }
108
130
  },
109
131
  "& > :last-child": {
110
- marginBlockEnd: "xxlarge"
132
+ marginBlockEnd: "xxlarge",
133
+ tabletDown: {
134
+ marginBlockStart: "xlarge"
135
+ }
111
136
  }
112
137
  }
113
138
  },
package/es/typography.js CHANGED
@@ -115,21 +115,35 @@ export const textStyles = defineTextStyles({
115
115
  value: {
116
116
  fontFamily: "sans",
117
117
  fontWeight: "bold",
118
- ...sizes("4xlarge", "4xlarge")
118
+ letterSpacing: "-1",
119
+ ...sizes("4xlarge", "4xlarge"),
120
+ mobileWideDown: {
121
+ ...sizes("3xlarge", "3xlarge")
122
+ }
119
123
  }
120
124
  },
121
125
  medium: {
122
126
  value: {
123
127
  fontFamily: "sans",
124
128
  fontWeight: "bold",
125
- ...sizes("3xlarge", "3xlarge")
129
+ letterSpacing: "-1",
130
+ ...sizes("3xlarge", "3xlarge"),
131
+ mobileWideDown: {
132
+ letterSpacing: "-2",
133
+ ...sizes("xxlarge", "xxlarge")
134
+ }
126
135
  }
127
136
  },
128
137
  small: {
129
138
  value: {
130
139
  fontFamily: "sans",
131
140
  fontWeight: "bold",
132
- ...sizes("xxlarge", "xxlarge")
141
+ letterSpacing: "-2",
142
+ ...sizes("xxlarge", "xxlarge"),
143
+ mobileWideDown: {
144
+ letterSpacing: "-1",
145
+ ...sizes("xlarge", "xlarge")
146
+ }
133
147
  }
134
148
  }
135
149
  },
@@ -138,20 +152,29 @@ export const textStyles = defineTextStyles({
138
152
  value: {
139
153
  fontFamily: "sans",
140
154
  fontWeight: "bold",
141
- ...sizes("xlarge", "xlarge")
155
+ letterSpacing: "-1",
156
+ ...sizes("xlarge", "xlarge"),
157
+ mobileWideDown: {
158
+ ...sizes("large", "large")
159
+ }
142
160
  }
143
161
  },
144
162
  medium: {
145
163
  value: {
146
164
  fontFamily: "sans",
147
165
  fontWeight: "bold",
148
- ...sizes("large", "large")
166
+ letterSpacing: "-1",
167
+ ...sizes("large", "large"),
168
+ mobileWideDown: {
169
+ ...sizes("medium", "small")
170
+ }
149
171
  }
150
172
  },
151
173
  small: {
152
174
  value: {
153
175
  fontFamily: "sans",
154
176
  fontWeight: "bold",
177
+ letterSpacing: "-1",
155
178
  ...sizes("medium", "small")
156
179
  }
157
180
  }
package/lib/globalCss.js CHANGED
@@ -72,32 +72,51 @@ const globalCss = exports.globalCss = (0, _dev.defineGlobalStyles)({
72
72
  // Non-figure block elements that should have margin above and below.
73
73
  '& 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"]': {
74
74
  marginBlockStart: "xxlarge",
75
- marginBlockEnd: "xxlarge"
75
+ marginBlockEnd: "xxlarge",
76
+ tabletDown: {
77
+ marginBlockStart: "xlarge",
78
+ marginBlockEnd: "xlarge"
79
+ }
76
80
  },
77
81
  // 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.
78
82
  '& 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': {
79
83
  '& > :is(h2, [data-embed-type="copy-heading"])': {
80
84
  marginBlockStart: "xlarge",
81
- marginBlockEnd: "small"
85
+ marginBlockEnd: "small",
86
+ tabletDown: {
87
+ marginBlockStart: "large"
88
+ }
82
89
  },
83
90
  "& > h3": {
84
91
  marginBlockStart: "large",
85
- marginBlockEnd: "xsmall"
92
+ marginBlockEnd: "xsmall",
93
+ tabletDown: {
94
+ marginBlockStart: "medium"
95
+ }
86
96
  },
87
97
  "& > :is(h4, h5, h6)": {
88
98
  marginBlockStart: "medium",
89
- marginBlockEnd: "xsmall"
99
+ marginBlockEnd: "xsmall",
100
+ tabletDown: {
101
+ marginBlockStart: "small"
102
+ }
90
103
  },
91
104
  "& > :is(figure)": {
92
105
  marginBlockStart: "xxlarge",
93
- marginBlockEnd: "xxlarge"
106
+ marginBlockEnd: "xxlarge",
107
+ tabletDown: {
108
+ marginBlockStart: "xlarge"
109
+ }
94
110
  },
95
111
  '& > :is(p, ul, ol, dl, [data-embed-type="speech"])': {
96
112
  marginBlockStart: "xsmall",
97
113
  marginBlockEnd: "xsmall"
98
114
  },
99
115
  "& > :is(:first-child)": {
100
- marginBlockStart: "xxlarge"
116
+ marginBlockStart: "xxlarge",
117
+ tabletDown: {
118
+ marginBlockStart: "xlarge"
119
+ }
101
120
  }
102
121
  },
103
122
  '& [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)({
110
129
  },
111
130
  "& section:not([class]), section:not([class]) > div:not([class])": {
112
131
  "& > :first-child": {
113
- marginBlockStart: "xxlarge"
132
+ marginBlockStart: "xxlarge",
133
+ tabletDown: {
134
+ marginBlockStart: "xlarge"
135
+ }
114
136
  },
115
137
  "& > :last-child": {
116
- marginBlockEnd: "xxlarge"
138
+ marginBlockEnd: "xxlarge",
139
+ tabletDown: {
140
+ marginBlockStart: "xlarge"
141
+ }
117
142
  }
118
143
  }
119
144
  },
package/lib/typography.js CHANGED
@@ -121,21 +121,35 @@ const textStyles = exports.textStyles = (0, _dev.defineTextStyles)({
121
121
  value: {
122
122
  fontFamily: "sans",
123
123
  fontWeight: "bold",
124
- ...sizes("4xlarge", "4xlarge")
124
+ letterSpacing: "-1",
125
+ ...sizes("4xlarge", "4xlarge"),
126
+ mobileWideDown: {
127
+ ...sizes("3xlarge", "3xlarge")
128
+ }
125
129
  }
126
130
  },
127
131
  medium: {
128
132
  value: {
129
133
  fontFamily: "sans",
130
134
  fontWeight: "bold",
131
- ...sizes("3xlarge", "3xlarge")
135
+ letterSpacing: "-1",
136
+ ...sizes("3xlarge", "3xlarge"),
137
+ mobileWideDown: {
138
+ letterSpacing: "-2",
139
+ ...sizes("xxlarge", "xxlarge")
140
+ }
132
141
  }
133
142
  },
134
143
  small: {
135
144
  value: {
136
145
  fontFamily: "sans",
137
146
  fontWeight: "bold",
138
- ...sizes("xxlarge", "xxlarge")
147
+ letterSpacing: "-2",
148
+ ...sizes("xxlarge", "xxlarge"),
149
+ mobileWideDown: {
150
+ letterSpacing: "-1",
151
+ ...sizes("xlarge", "xlarge")
152
+ }
139
153
  }
140
154
  }
141
155
  },
@@ -144,20 +158,29 @@ const textStyles = exports.textStyles = (0, _dev.defineTextStyles)({
144
158
  value: {
145
159
  fontFamily: "sans",
146
160
  fontWeight: "bold",
147
- ...sizes("xlarge", "xlarge")
161
+ letterSpacing: "-1",
162
+ ...sizes("xlarge", "xlarge"),
163
+ mobileWideDown: {
164
+ ...sizes("large", "large")
165
+ }
148
166
  }
149
167
  },
150
168
  medium: {
151
169
  value: {
152
170
  fontFamily: "sans",
153
171
  fontWeight: "bold",
154
- ...sizes("large", "large")
172
+ letterSpacing: "-1",
173
+ ...sizes("large", "large"),
174
+ mobileWideDown: {
175
+ ...sizes("medium", "small")
176
+ }
155
177
  }
156
178
  },
157
179
  small: {
158
180
  value: {
159
181
  fontFamily: "sans",
160
182
  fontWeight: "bold",
183
+ letterSpacing: "-1",
161
184
  ...sizes("medium", "small")
162
185
  }
163
186
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ndla/preset-panda",
3
- "version": "0.0.30",
3
+ "version": "0.0.32",
4
4
  "description": "Panda preset for NDLA.",
5
5
  "license": "GPL-3.0",
6
6
  "main": "lib/index.js",
@@ -37,5 +37,5 @@
37
37
  "publishConfig": {
38
38
  "access": "public"
39
39
  },
40
- "gitHead": "92e263c72d707da94f33fb1aae9ea8e586b29b6e"
40
+ "gitHead": "8bfa22e2ca1f9ee0638df252f56389807797e704"
41
41
  }