-
Lorem ipsum dolor sit amet, consectetur adipiscing elit!
-
-
- Vivamus iaculis augue elit, sit amet consectetur dui condimentum a. Vivamus arcu diam, commodo
- id dictum et, fermentum eget tellus. Etiam mattis purus vitae volutpat luctus. Cras et nisi
- risus. Suspendisse potenti. Donec ut rutrum magna. Aenean a ligula in erat sodales posuere at
- sed quam. Etiam feugiat faucibus est id laoreet. Aliquam egestas euismod lectus, in finibus
- sem pulvinar fringilla. Vestibulum justo lacus, gravida sed dolor sit amet, lacinia varius
- augue. Aenean sollicitudin eleifend enim, sagittis viverra eros fringilla eget.
-
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit!
-
- Etiam rhoncus interdum urna, vel tincidunt justo consequat sit amet. Quisque pellentesque
- sagittis feugiat. Morbi vel ultricies ligula. Sed faucibus enim dui, in dictum lectus gravida
- ac. Aliquam commodo metus sed dui malesuada, nec commodo leo rutrum. Integer ut nulla blandit
- libero finibus dignissim suscipit pretium elit. Morbi convallis ex eget leo semper volutpat.
- Nulla feugiat dapibus porttitor. Praesent nec sodales urna. Nam lacinia odio sit amet arcu
- mattis, ac imperdiet nibh accumsan. Phasellus congue congue arcu nec vulputate. In non commodo
- felis, at tristique ante. Cras volutpat ante ex, in venenatis nunc blandit ut.
-
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit!
+
+
+ Vivamus iaculis augue elit, sit amet consectetur dui condimentum a. Vivamus arcu diam, commodo
+ id dictum et, fermentum eget tellus. Etiam mattis purus vitae volutpat luctus. Cras et nisi
+ risus. Suspendisse potenti. Donec ut rutrum magna. Aenean a ligula in erat sodales posuere at
+ sed quam. Etiam feugiat faucibus est id laoreet. Aliquam egestas euismod lectus, in finibus
+ sem pulvinar fringilla. Vestibulum justo lacus, gravida sed dolor sit amet, lacinia varius
+ augue. Aenean sollicitudin eleifend enim, sagittis viverra eros fringilla eget.
+
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit!
+
+ Etiam rhoncus interdum urna, vel tincidunt justo consequat sit amet. Quisque pellentesque
+ sagittis feugiat. Morbi vel ultricies ligula. Sed faucibus enim dui, in dictum lectus gravida
+ ac. Aliquam commodo metus sed dui malesuada, nec commodo leo rutrum. Integer ut nulla blandit
+ libero finibus dignissim suscipit pretium elit. Morbi convallis ex eget leo semper volutpat.
+ Nulla feugiat dapibus porttitor. Praesent nec sodales urna. Nam lacinia odio sit amet arcu
+ mattis, ac imperdiet nibh accumsan. Phasellus congue congue arcu nec vulputate. In non commodo
+ felis, at tristique ante. Cras volutpat ante ex, in venenatis nunc blandit ut.
+
+
+ Etiam rhoncus interdum urna, vel tincidunt justo consequat sit amet. Quisque pellentesque
+ sagittis feugiat. Morbi vel ultricies ligula. Sed faucibus enim dui, in dictum lectus gravida
+ ac. Aliquam commodo metus sed dui malesuada, nec commodo leo rutrum. Integer ut nulla blandit
+ libero finibus dignissim suscipit pretium elit. Morbi convallis ex eget leo semper volutpat.
+ Nulla feugiat dapibus porttitor. Praesent nec sodales urna. Nam lacinia odio sit amet arcu
+ mattis, ac imperdiet nibh accumsan. Phasellus congue congue arcu nec vulputate. In non commodo
+ felis, at tristique ante. Cras volutpat ante ex, in venenatis nunc blandit ut.
+
+
+ Etiam rhoncus interdum urna, vel tincidunt justo consequat sit amet. Quisque pellentesque
+ sagittis feugiat. Morbi vel ultricies ligula. Sed faucibus enim dui, in dictum lectus gravida
+ ac. Aliquam commodo metus sed dui malesuada, nec commodo leo rutrum.
+
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit!
+
+ Vivamus iaculis augue elit, sit amet consectetur dui condimentum a. Vivamus arcu diam, commodo
+ id dictum et, fermentum eget tellus. Etiam mattis purus vitae volutpat luctus. Cras et nisi
+ risus. Suspendisse potenti. Donec ut rutrum magna. Aenean a ligula in erat sodales posuere at
+ sed quam. Etiam feugiat faucibus est id laoreet. Aliquam egestas euismod lectus, in finibus
+ sem pulvinar fringilla. Vestibulum justo lacus, gravida sed dolor sit amet, lacinia varius
+ augue. Aenean sollicitudin eleifend enim, sagittis viverra eros fringilla eget.
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit!
+
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit!
+
+ Etiam rhoncus interdum urna, vel tincidunt justo consequat sit amet. Quisque pellentesque
+ sagittis feugiat. Morbi vel ultricies ligula. Sed faucibus enim dui, in dictum lectus gravida
+ ac. Aliquam commodo metus sed dui malesuada, nec commodo leo rutrum. Integer ut nulla blandit
+ libero finibus dignissim suscipit pretium elit. Morbi convallis ex eget leo semper volutpat.
+ Nulla feugiat dapibus porttitor. Praesent nec sodales urna. Nam lacinia odio sit amet arcu
+ mattis, ac imperdiet nibh accumsan. Phasellus congue congue arcu nec vulputate. In non commodo
+ felis, at tristique ante. Cras volutpat ante ex, in venenatis nunc blandit ut.
+
+
+ Etiam rhoncus interdum urna, vel tincidunt justo consequat sit amet. Quisque pellentesque
+ sagittis feugiat. Morbi vel ultricies ligula. Sed faucibus enim dui, in dictum lectus gravida
+ ac. Aliquam commodo metus sed dui malesuada, nec commodo leo rutrum. Integer ut nulla blandit
+ libero finibus dignissim suscipit pretium elit. Morbi convallis ex eget leo semper volutpat.
+ Nulla feugiat dapibus porttitor. Praesent nec sodales urna. Nam lacinia odio sit amet arcu
+ mattis, ac imperdiet nibh accumsan. Phasellus congue congue arcu nec vulputate. In non commodo
+ felis, at tristique ante. Cras volutpat ante ex, in venenatis nunc blandit ut.
+
+
+ Etiam rhoncus interdum urna, vel tincidunt justo consequat sit amet. Quisque pellentesque
+ sagittis feugiat. Morbi vel ultricies ligula. Sed faucibus enim dui, in dictum lectus gravida
+ ac. Aliquam commodo metus sed dui malesuada, nec commodo leo rutrum.
+
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit!
-
- Vivamus iaculis augue elit, sit amet consectetur dui condimentum a. Vivamus arcu diam, commodo
- id dictum et, fermentum eget tellus. Etiam mattis purus vitae volutpat luctus. Cras et nisi
- risus. Suspendisse potenti. Donec ut rutrum magna. Aenean a ligula in erat sodales posuere at
- sed quam. Etiam feugiat faucibus est id laoreet. Aliquam egestas euismod lectus, in finibus
- sem pulvinar fringilla. Vestibulum justo lacus, gravida sed dolor sit amet, lacinia varius
- augue. Aenean sollicitudin eleifend enim, sagittis viverra eros fringilla eget.
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit!
-
-
-
-
- Nunc eu eros tincidunt, aliquam ipsum non, auctor ipsum. Fusce et sem fermentum nisl pulvinar
- vulputate id a dui. Curabitur id aliquet magna. Donec laoreet ante at dapibus sagittis.
- Maecenas id varius risus. Curabitur eros leo, pretium in ipsum eu, mollis interdum justo.
- Curabitur sodales, erat quis ultricies consectetur, tortor velit condimentum mi, et pulvinar
- tellus arcu sit amet magna. Integer iaculis diam vel lacus sodales consequat. Pellentesque
- habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec semper
- molestie massa, ut vehicula justo porttitor nec. Vestibulum vulputate purus turpis, eu cursus
- ipsum consectetur sit amet. Mauris hendrerit venenatis porttitor. Fusce vel arcu nec ligula
- scelerisque euismod. Ut sed sagittis justo. Aliquam eget dignissim risus, vitae ultrices
- felis.
-
-
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit!
+
+
+ Etiam rhoncus interdum urna, vel tincidunt justo consequat sit amet. Quisque pellentesque
+ sagittis feugiat. Morbi vel ultricies ligula. Sed faucibus enim dui, in dictum lectus gravida
+ ac. Aliquam commodo metus sed dui malesuada, nec commodo leo rutrum. Integer ut nulla blandit
+ libero finibus dignissim suscipit pretium elit. Morbi convallis ex eget leo semper volutpat.
+ Nulla feugiat dapibus porttitor. Praesent nec sodales urna. Nam lacinia odio sit amet arcu
+ mattis, ac imperdiet nibh accumsan. Phasellus congue congue arcu nec vulputate. In non commodo
+ felis, at tristique ante. Cras volutpat ante ex, in venenatis nunc blandit ut.
+
-
-
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit!
-
-
- Etiam rhoncus interdum urna, vel tincidunt justo consequat sit amet. Quisque pellentesque
- sagittis feugiat. Morbi vel ultricies ligula. Sed faucibus enim dui, in dictum lectus gravida
- ac. Aliquam commodo metus sed dui malesuada, nec commodo leo rutrum. Integer ut nulla blandit
- libero finibus dignissim suscipit pretium elit. Morbi convallis ex eget leo semper volutpat.
- Nulla feugiat dapibus porttitor. Praesent nec sodales urna. Nam lacinia odio sit amet arcu
- mattis, ac imperdiet nibh accumsan. Phasellus congue congue arcu nec vulputate. In non commodo
- felis, at tristique ante. Cras volutpat ante ex, in venenatis nunc blandit ut.
-
-
-
-
- Etiam at turpis metus. Aliquam ut tellus at erat ultrices dapibus. Curabitur vestibulum
- dignissim efficitur. Etiam sed mi quis orci interdum gravida. Curabitur eget massa quam. Morbi
- leo leo, consectetur a nibh a, consectetur rhoncus ipsum. Pellentesque ultrices eros vel neque
- lobortis, et cursus enim bibendum. Curabitur non elit quam. Aliquam vitae urna ut urna aliquet
- lobortis sed in eros. Mauris sed euismod velit, quis tempus orci. Integer vehicula bibendum
- libero non lobortis.
-
-
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit!
+
+ Etiam rhoncus interdum urna, vel tincidunt justo consequat sit amet. Quisque pellentesque
+ sagittis feugiat. Morbi vel ultricies ligula. Sed faucibus enim dui, in dictum lectus gravida
+ ac. Aliquam commodo metus sed dui malesuada, nec commodo leo rutrum. Integer ut nulla blandit
+ libero finibus dignissim suscipit pretium elit. Morbi convallis ex eget leo semper volutpat.
+ Nulla feugiat dapibus porttitor. Praesent nec sodales urna. Nam lacinia odio sit amet arcu
+ mattis, ac imperdiet nibh accumsan. Phasellus congue congue arcu nec vulputate. In non commodo
+ felis, at tristique ante. Cras volutpat ante ex, in venenatis nunc blandit ut.
+
+
+ Etiam rhoncus interdum urna, vel tincidunt justo consequat sit amet. Quisque pellentesque
+ sagittis feugiat. Morbi vel ultricies ligula. Sed faucibus enim dui, in dictum lectus gravida
+ ac. Aliquam commodo metus sed dui malesuada, nec commodo leo rutrum. Integer ut nulla blandit
+ libero finibus dignissim suscipit pretium elit. Morbi convallis ex eget leo semper volutpat.
+ Nulla feugiat dapibus porttitor. Praesent nec sodales urna. Nam lacinia odio sit amet arcu
+ mattis, ac imperdiet nibh accumsan. Phasellus congue congue arcu nec vulputate. In non commodo
+ felis, at tristique ante. Cras volutpat ante ex, in venenatis nunc blandit ut.
+
+
+ Etiam rhoncus interdum urna, vel tincidunt justo consequat sit amet. Quisque pellentesque
+ sagittis feugiat. Morbi vel ultricies ligula. Sed faucibus enim dui, in dictum lectus gravida
+ ac. Aliquam commodo metus sed dui malesuada, nec commodo leo rutrum.
+
diff --git a/src/examples/article/electric-power-consumption.css b/src/examples/article/electric-power-consumption.css
index a8330b61..c6dc009a 100644
--- a/src/examples/article/electric-power-consumption.css
+++ b/src/examples/article/electric-power-consumption.css
@@ -24,7 +24,7 @@
justify-content: space-evenly;
}
-@media (min-width: 25em) {
+@media (min-width: 25rem) {
#electric-power-consumption .point, #electric-power-consumption .axis-x .tick, #electric-power-consumption .axis-y .tick {
display: none;
}
@@ -32,7 +32,7 @@
display: block;
}
}
-@media (max-width: 25em) {
+@media (max-width: 25rem) {
#electric-power-consumption .point, #electric-power-consumption .axis {
display: none;
}
diff --git a/src/examples/article/electric-power-consumption.js b/src/examples/article/electric-power-consumption.js
index 73390afc..b898096e 100644
--- a/src/examples/article/electric-power-consumption.js
+++ b/src/examples/article/electric-power-consumption.js
@@ -19,16 +19,16 @@ const yAsia= xValues.map(year => asiaData[year])
const chartData = {
xValues: xValues,
- yValues: [yAsia, yUSA, yEurope],
- xAxis: { title: 'Years' },
+ yValues: [yUSA, yEurope, yAsia],
+ xAxis: { title: 'Year' },
yAxis: { title: 'Consumption' },
markerTooltips: {
tooltips: (_, { xValue, yValue }) => `Year: ${xValue}
Pow. Consumption: ${yValue}kWh`
},
legend: {
title: 'Legend',
- keys: ['East Asia', 'USA', 'Europe'],
- labels: ['East Asia', 'USA', 'Europe'],
+ keys: ['USA', 'Europe', 'East Asia'],
+ labels: ['USA', 'Europe', 'East Asia'],
}
}
@@ -40,9 +40,9 @@ const chart = select('#electric-power-consumption')
.call(chartWindowLineAutoResize)
.on('resize', () => {
- const mediumWidth = window.matchMedia('(min-width: 25em)').matches && window.matchMedia('(min-width: 25em)').matches;
- const largeWidth = window.matchMedia('(min-width: 43.5em)').matches;
- const minWidth = window.matchMedia('(max-width: 25em)').matches;
+ const mediumWidth = window.matchMedia('(min-width: 25rem)').matches && window.matchMedia('(min-width: 25rem)').matches;
+ const largeWidth = window.matchMedia('(min-width: 43.5rem)').matches;
+ const minWidth = window.matchMedia('(max-width: 25rem)').matches;
chartData.title = chooseTitle()
@@ -57,14 +57,14 @@ const chooseTitle = () => {
const smallTitle = 'Pow. Cons.'
const middleTitle = 'Power Consumption (kWh)'
const largeTitle = 'Electric power consumption (kWh per capita)'
- if (window.matchMedia('(max-width: 27.5em)').matches ||
- window.matchMedia('(min-width: 68.75em)').matches) return smallTitle
- // if (window.matchMedia('(min-width: 600px)').matches) return largeTitle
+ if (window.matchMedia('(max-width: 27.5rem)').matches ||
+ window.matchMedia('(min-width: 77rem)').matches) return smallTitle
return middleTitle
}
const chooseXTickFormat = () => {
- if (window.matchMedia('(min-width: 550px)').matches &&
- window.matchMedia('(max-width: 700px)').matches) return (v) => v
- return (v) => `'${v.slice(-2)}`
+ const firstChange = window.matchMedia('(max-width: 56.25rem)').matches && window.matchMedia('(min-width: 52rem)').matches
+ const secondChange = window.matchMedia('(max-width: 30rem)').matches
+ if (firstChange || secondChange) return (v) => `'${v.slice(-2)}`
+ return (v) => v
}
diff --git a/src/examples/article/electric-power-consumption.scss b/src/examples/article/electric-power-consumption.scss
index 52e37ca5..494dd78c 100644
--- a/src/examples/article/electric-power-consumption.scss
+++ b/src/examples/article/electric-power-consumption.scss
@@ -30,7 +30,7 @@
}
}
-@media (min-width: 25em) {
+@media (min-width: 25rem) {
#electric-power-consumption {
.point, .axis-x .tick, .axis-y .tick {
display: none;
@@ -41,7 +41,7 @@
}
}
-@media (max-width: 25em) {
+@media (max-width: 25rem) {
#electric-power-consumption {
.point, .axis {
display: none;
diff --git a/src/examples/article/market-shares-chart.js b/src/examples/article/market-shares-chart.js
index 8fa1377a..1940092a 100644
--- a/src/examples/article/market-shares-chart.js
+++ b/src/examples/article/market-shares-chart.js
@@ -41,9 +41,9 @@ const chartWindow = d3
.call(chartWindowBarStackedAutoFilterCategories(data))
.call(chartWindowBarStackedAutoFilterSubcategories(data))
.on('resize', function (e, d) {
- const hasSmallTitle = window.matchMedia('(max-width: 27.5em)').matches
- const mediumWidth = window.matchMedia('(min-width: 40em)').matches;
- const largeWidth = window.matchMedia('(min-width: 60em)').matches;
+ const hasSmallTitle = window.matchMedia('(max-width: 27.5rem)').matches
+ const mediumWidth = window.matchMedia('(min-width: 40rem)').matches;
+ const largeWidth = window.matchMedia('(min-width: 60rem)').matches;
data.flipped = chooseDataFlipped()
data.legend.title = mediumWidth ? 'Platforms' : ''
@@ -55,8 +55,9 @@ const chartWindow = d3
});
const chooseDataFlipped = () => {
- // if (window.matchMedia('(min-width: 25em)').matches &&
- // window.matchMedia('(max-width: 37.5em)').matches) return true
- if (window.matchMedia('(max-width: 31.25em)').matches ) return true
+ // if (window.matchMedia('(min-width: 25rem)').matches &&
+ // window.matchMedia('(max-width: 37.5rem)').matches) return true
+ const firstChange = window.matchMedia('(min-width: 77rrem)').matches
+ if (firstChange || window.matchMedia('(max-width: 31.25rem)').matches ) return true
return false
}
diff --git a/src/examples/article/market-shares.css b/src/examples/article/market-shares.css
index 724345b3..ded9960a 100644
--- a/src/examples/article/market-shares.css
+++ b/src/examples/article/market-shares.css
@@ -10,7 +10,7 @@
display: none;
}
}
-@media (max-width: 25em) {
+@media (max-width: 25rem) {
#market-shares-chart .point, #market-shares-chart .axis {
display: none;
}
diff --git a/src/examples/article/market-shares.scss b/src/examples/article/market-shares.scss
index 84680b5c..323cba6e 100644
--- a/src/examples/article/market-shares.scss
+++ b/src/examples/article/market-shares.scss
@@ -18,7 +18,7 @@
}
}
- @media (max-width: 25em) {
+ @media (max-width: 25rem) {
.point, .axis {
display: none;
}
diff --git a/src/examples/article/styles.css b/src/examples/article/styles.css
index 487876fe..bf3605c0 100644
--- a/src/examples/article/styles.css
+++ b/src/examples/article/styles.css
@@ -18,21 +18,16 @@ h1 {
}
.grid-article {
- display: flex;
- flex-wrap: wrap;
- max-width: 1400px;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+ max-width: 87.5rem;
margin: 0 auto;
}
-.col-1, .col-2, .col-3 {
- width: 100%;
- flex-grow: 1;
-}
-
.article {
padding: 1rem;
- border-right: 1px solid #DADCE0;
- border-bottom: 1px solid #DADCE0;
+ border-right: 0.063rem solid #DADCE0;
+ border-bottom: 0.063rem solid #DADCE0;
}
@media (min-width: 700px) {
diff --git a/src/examples/article/styles.css.map b/src/examples/article/styles.css.map
index f7fe9ba1..6fc51ef3 100644
--- a/src/examples/article/styles.css.map
+++ b/src/examples/article/styles.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EAEA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;IAAS;;EACT;IAAS;;EACT;IAAS;;;AAGX;EACE;IAAS;;EACT;IAAS;;EACT;IAAS;;;AAGX;EACE","file":"styles.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EAEA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;IAAS;;EACT;IAAS;;EACT;IAAS;;;AAGX;EACE;IAAS;;EACT;IAAS;;EACT;IAAS;;;AAGX;EACE","file":"styles.css"}
\ No newline at end of file
diff --git a/src/examples/article/styles.scss b/src/examples/article/styles.scss
index 81d2daac..d097857d 100644
--- a/src/examples/article/styles.scss
+++ b/src/examples/article/styles.scss
@@ -19,21 +19,16 @@ h1 {
}
.grid-article {
- display: flex;
- flex-wrap: wrap;
- max-width: 1400px;
+ display: grid;
+ grid-template-columns: repeat( auto-fit, minmax(400px, 1fr));
+ max-width: 87.5rem;
margin: 0 auto;
}
-.col-1, .col-2, .col-3 {
- width: 100%;
- flex-grow: 1;
-}
-
.article {
padding: 1rem;
- border-right: 1px solid #DADCE0;
- border-bottom: 1px solid #DADCE0;
+ border-right: 0.063rem solid #DADCE0;
+ border-bottom: 0.063rem solid #DADCE0;
}
@media (min-width: 700px) {