{"_id":"@aredridel/mq-portal","_rev":"2-751b0ff5b6c153ac22e15769ed23be51","name":"@aredridel/mq-portal","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@aredridel/mq-portal","version":"1.0.0","description":"A custom element to re-arrange content based on media query","main":"index.js","author":{"name":"Aria Stewart","email":"aredridel@dinhe.net"},"license":"ISC","gitHead":"7c2d94bb73f695f1568e4c6d176eb6ca4a183c2f","_id":"@aredridel/mq-portal@1.0.0","_nodeVersion":"13.6.0","_npmVersion":"6.13.6","dist":{"integrity":"sha512-srSZvI06V0mubIMkaNg7LJDYBXdFxZsOTBml48jdR7uM90OegAY0AfaAqMaj7enFGLkz/4scaNOUCZVxxIE/bw==","shasum":"445cc5424a83feef2f7754eefdbbccb2dd9def25","tarball":"https://registry.npmjs.org/@aredridel/mq-portal/-/mq-portal-1.0.0.tgz","fileCount":3,"unpackedSize":3459,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIpOaCRA9TVsSAnZWagAAFjcP/0lsIgoR84bWu/u+sPo/\nbgO7sn0wqNyAxa0THn5iERJk5lSSpOlhOaRrSP0g5T65h5JmvPe3AqRMLOtA\nyfUk+TT7FvryxU4E4mQqktL9YVWR+eArv5fPBLk71K6p3cbZZCV73CvhGEPL\njN/nPnl5eN1by7OdA/XJvFLLjeaxgo9cUzOEl9j+kmd3HgplTeC/i259qxVY\nXdVY8FkPAKGSXCVzwhxVUxM6irDoPQ/DpV4ZZEbzocJUbXvM98GMcqdBTzpF\nfulQFcErmqHyeF5CzFkZpae9B2rgL6egQF4gMEUVwVJHxL68lvKqqfjnnWsz\nzGjQnylNzGiSRDmPUvKsTgWGXsJMb28wwZyDTIhx2+QxfJCAAuIc0wSRIleA\n+bDd52Tpb3nCFOHp1xEtUocFJxhfpTUrSxP/QcgIdWIugkY6eSOuRCfdnTUS\nA30RGkuj7jxLcxylXrn4km3GNe53W4sIRC12ApP8MRr/jU/fb1FuKU7X/Q8N\nicaOOsHfpBQl/OItJ9Ktbhmyc63KfFH0+px4m4kKVsLWxxi8ICV3I4pxMTUY\ncPCdKlCknu0IWLfDV/92FaY8F257OFuRb92Lj3X44KUZu9lwlzxmEC4ethZV\nM7kPou3sBN/ofDYr69Z7YcXrXJ2auVyt0DHt6LmX2asfkcZMj+hlSh//6kgm\nskjb\r\n=idbm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICPHBmAC7AZbJx7SO2rDxwUglTdqbGXId9xBpyrhkUxPAiEA/RI0EeT8dcDGUD1oN/4u3mf1a6V6JPTAhB7UvB5xUfc="}]},"maintainers":[{"name":"aredridel","email":"aredridel@dinhe.net"}],"_npmUser":{"name":"aredridel","email":"aredridel@dinhe.net"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mq-portal_1.0.0_1579324313959_0.18407497558404518"},"_hasShrinkwrap":false},"1.0.1":{"name":"@aredridel/mq-portal","version":"1.0.1","description":"A custom element to re-arrange content based on media query","main":"index.js","author":{"name":"Aria Stewart","email":"aredridel@dinhe.net"},"license":"ISC","gitHead":"46fb5d3450d3cf70383817159cea18adc108b3b4","_id":"@aredridel/mq-portal@1.0.1","_nodeVersion":"13.6.0","_npmVersion":"6.13.6","dist":{"integrity":"sha512-qhnmjIZI0qODyzD9OaRi5rHXe0oI+8w1FXj5CgRVTDroelxAtIV0dwBEk7zCB8KMFhB+pm8cfdMOUGlP6kOGVQ==","shasum":"d73b1ddc811bba16e747a4da6aa90540e75fad47","tarball":"https://registry.npmjs.org/@aredridel/mq-portal/-/mq-portal-1.0.1.tgz","fileCount":3,"unpackedSize":3352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIpRHCRA9TVsSAnZWagAAs1cQAKKHzOQUThNDSi3aEEUk\ntj6MvMJH5RgKEv9sq/xDuMOL9gb9rIby5v+KoCGo8Brf3PJMVTjk/sbnWJGN\ncnzDwuN6+moSw3YHZr6tpIh7/zclHMM+yXalHd27apWVKf3uU3/lyxn/FSJb\noy/gQMMI3bhlSyBy6AiGr3wsAftnmwl0grh0vn1HQaL60FZ/pVv3G+fMFs1V\n79987a1fk0CuUnkTrlPQR2en1vnbe4z+JNHgFiCHaAdDm+XdGjXfeRshPD7N\nP1I4QThWOFu0IP4OT1QbfATCyTxTcKynoiFNE4qpDhE7VR7lzikgts+qpS6A\nEww9YWUsoVuUKSZJ4Zersm5lMhrhUiPeUJDvWQHY6B2GdM9B7vsztKBXBvse\ni4uqvmJoFOT+h3CZW8JcHI5JWxoSLUB93TwMpFbaecS4UPDN5GRmsBtSLgqm\nT28tFGYKN0jToc8KZg6KcQ4ob2QRbafZyzhB7EIJH/J2VptAsUckNGyHSmJr\nPwuwK7WiQ4PJkOhtZ+EFHoBbX/xXSrwJLAWpp9QsCCdvRTOzzEpxIJ9elovI\nBbCIdznGRGJ/2yvvzXfSy5SzvW9bjfAr0v2eeVd7WkDwi5LMKuhdeRzqwX9H\nq5M1j0a5UQ1RA9iJkCPbInlWjLsNdNXg2eiwQ9+FApjY2CoqHVbdQwRpt02i\nblKj\r\n=WbRc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCX1Ml2YSwiN4/UYiU7c764COKxPQcAFJp+vAWmI7xPygIgILcHDYq9M78a0VhtGA/2XaelJXi2CHTkbfVUJMMGMVM="}]},"maintainers":[{"name":"aredridel","email":"aredridel@dinhe.net"}],"_npmUser":{"name":"aredridel","email":"aredridel@dinhe.net"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mq-portal_1.0.1_1579324487482_0.884083014598029"},"_hasShrinkwrap":false}},"time":{"created":"2020-01-18T05:11:53.928Z","1.0.0":"2020-01-18T05:11:54.143Z","modified":"2022-04-04T15:22:57.637Z","1.0.1":"2020-01-18T05:14:47.652Z"},"maintainers":[{"name":"aredridel","email":"aredridel@dinhe.net"}],"description":"A custom element to re-arrange content based on media query","author":{"name":"Aria Stewart","email":"aredridel@dinhe.net"},"license":"ISC","readme":"# mq-portal\n\nA custom element to re-arrange the DOM based on media queries\n\n## Rationale\n\nBecause MS Edge doesn't support `display: contents` sufficiently yet, using\n`display: grid` and `display: flex` are insufficient to get a two-column layout\nwhere the parts interleave on mobile but have no vertical gaps on larger\nscreens — a variation on the CSS Masonry problem.\n\nThis gives us the ability to rearrange the DOM declaratively and restore it\n(with some caveats) when the query no longer applies.\n\n## Use\n\nImport this module, then\n\n```html\n<mq-portal media=\"(max-width: 640px)\" match=\".target\"></mq-portal>\n\nSome other content\n\n<div class=\"target\">\nThis moves\n</div>\n```\n\nBelow 640px width, the DOM looks like this:\n\n```html\n<mq-portal media=\"(max-width: 640px)\" match=\".target\">\n    <div class=\"target\">\n    This moves\n    </div>\n</mq-portal>\n\nSome other content\n```\n","readmeFilename":"README.md"}