{"id":6,"date":"2023-05-16T22:29:38","date_gmt":"2023-05-16T22:29:38","guid":{"rendered":"https:\/\/fontsplayground.aaronelizondoe.com\/?page_id=6"},"modified":"2023-06-08T18:17:38","modified_gmt":"2023-06-08T18:17:38","slug":"home-test","status":"publish","type":"page","link":"https:\/\/fontsplayground.aaronelizondoe.com\/","title":{"rendered":"Home Test"},"content":{"rendered":"\n<div class=\"wp-block-group content center max scene is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h1 class=\"wp-block-heading\">Type Scale, Perfect Fourth, Base 18<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">Heading 2<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Heading 3<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Heading 4<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">Heading 5<\/h5>\n\n\n\n<h6 class=\"wp-block-heading\">Heading 6<\/h6>\n\n\n\n<p>Paragraph text lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas rutrum ultricies massa, sed fringilla massa consectetur vitae. Praesent nec mauris vel dui tempor commodo a eu neque. Pellentesque volutpat purus lorem, quis lobortis est feugiat nec. Curabitur et gravida purus, feugiat sodales ex. In ultrices dolor sit amet interdum pharetra. Fusce nec viverra ante. Suspendisse vitae nibh id velit rhoncus gravida. Pellentesque eget nisi at dui rhoncus tempor. Morbi dignissim lacinia ornare. Integer rutrum sodales libero eu pellentesque. In efficitur velit vitae ex vestibulum, quis consectetur justo sagittis. Donec nec dui et elit suscipit scelerisque. Duis rhoncus volutpat vulputate. Proin consectetur tempus condimentum. Pellentesque tempus sapien arcu, ac molestie ex dapibus dapibus. Donec faucibus libero elit, nec hendrerit nisl fermentum a&#8230;<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group content center max scene is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h2 class=\"wp-block-heading\">Section with scene margin &#8211; 160px at 1920px screen, 160px is the master number to control everything else<\/h2>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group content center max scene-padding bg-light is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h2 class=\"wp-block-heading\">Section with scene padding &#8211; 160px at 1920px screen,  160px is the master number to control everything else<\/h2>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group content center max padding-top-l padding-bottom-l bg-light scene is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h2 class=\"wp-block-heading\">Section with padding-top and bottom L &#8211; master*1.624 at 1920px screen<\/h2>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group content center max margin-top-l margin-bottom-l is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h2 class=\"wp-block-heading\">Section with margin-top and bottom L &#8211; master*1.624 at 1920px screen<\/h2>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group bg-light content center max padding-top-m padding-bottom-m margin-top-2x margin-bottom-m is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h2 class=\"wp-block-heading\">Section with margin-top and bottom M &#8211; master*0.6 at 1920px screen<\/h2>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group bg-light content center max padding-top-s padding-bottom-s margin-top-s margin-bottom-s is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h2 class=\"wp-block-heading\">Section with padding-top and bottom S &#8211; master*0.250 at 1920px screen<\/h2>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group bg-light content center max padding-top-xs padding-bottom-xs margin-top-s margin-bottom-xs is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h2 class=\"wp-block-heading\">Section with padding-top and bottom XS &#8211; master*0.250 at 1920px screen<\/h2>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group content center max not-inner bg-light scene-padding scene is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h2 class=\"wp-block-heading has-text-align-center\">Container MAX, width 1400px at 1920px screen<\/h2>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group content center medium not-inner bg-light scene-padding scene is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h2 class=\"wp-block-heading has-text-align-center\">Container MEDIUM, width around 1050px at 1920px screen<\/h2>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group content center small not-inner bg-light scene-padding scene is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h2 class=\"wp-block-heading has-text-align-center\">Container SMALL, width around 730px at 1920px screen<\/h2>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group content center extra not-inner bg-light scene-padding scene is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h2 class=\"wp-block-heading has-text-align-center\">Container EXTRA, width around 1744px at 1920px screen<\/h2>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group content center max padding-top-m padding-bottom-m margin-top-m margin-bottom-m bg-light is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h2 class=\"wp-block-heading\">Heading 2 padding bottom 32px at 1920<\/h2>\n\n\n\n<p>Some lorem ipsum text here to mimic some paragraph below a headline Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue magna, convallis non orci at, fringilla molestie magna. Phasellus ut nisi sed libero fermentum tristique. Proin tempus lacinia aliquam. Nullam nec est ac diam ornare mattis. Mauris eu tellus eu diam ultricies blandit. Vivamus rhoncus euismod lorem ac congue. Maecenas eu aliquam tortor, vitae luctus neque. Cras ac orci diam. Maecenas lorem lectus, auctor quis diam ut, aliquet commodo ante. Aenean feugiat ipsum id nisi dignissim, nec aliquam sem iaculis.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group content center max padding-top-m padding-bottom-m margin-top-m margin-bottom-m bg-light is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h3 class=\"wp-block-heading\">Heading 3 padding bottom 26px at 1920<\/h3>\n\n\n\n<p>Some lorem ipsum text here to mimic some paragraph below a headline Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue magna, convallis non orci at, fringilla molestie magna. Phasellus ut nisi sed libero fermentum tristique. Proin tempus lacinia aliquam. Nullam nec est ac diam ornare mattis. Mauris eu tellus eu diam ultricies blandit. Vivamus rhoncus euismod lorem ac congue. Maecenas eu aliquam tortor, vitae luctus neque. Cras ac orci diam. Maecenas lorem lectus, auctor quis diam ut, aliquet commodo ante. Aenean feugiat ipsum id nisi dignissim, nec aliquam sem iaculis.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group content center max padding-top-m padding-bottom-m margin-top-m margin-bottom-m bg-light is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h4 class=\"wp-block-heading\">Heading 4 padding bottom 20px at 1920<\/h4>\n\n\n\n<p>Some lorem ipsum text here to mimic some paragraph below a headline Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue magna, convallis non orci at, fringilla molestie magna. Phasellus ut nisi sed libero fermentum tristique. Proin tempus lacinia aliquam. Nullam nec est ac diam ornare mattis. Mauris eu tellus eu diam ultricies blandit. Vivamus rhoncus euismod lorem ac congue. Maecenas eu aliquam tortor, vitae luctus neque. Cras ac orci diam. Maecenas lorem lectus, auctor quis diam ut, aliquet commodo ante. Aenean feugiat ipsum id nisi dignissim, nec aliquam sem iaculis.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group content center max padding-top-m padding-bottom-m margin-top-m margin-bottom-m bg-light is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h5 class=\"wp-block-heading\">Heading 5 padding bottom 14px at 1920<\/h5>\n\n\n\n<p>Some lorem ipsum text here to mimic some paragraph below a headline Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue magna, convallis non orci at, fringilla molestie magna. Phasellus ut nisi sed libero fermentum tristique. Proin tempus lacinia aliquam. Nullam nec est ac diam ornare mattis. Mauris eu tellus eu diam ultricies blandit. Vivamus rhoncus euismod lorem ac congue. Maecenas eu aliquam tortor, vitae luctus neque. Cras ac orci diam. Maecenas lorem lectus, auctor quis diam ut, aliquet commodo ante. Aenean feugiat ipsum id nisi dignissim, nec aliquam sem iaculis.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group content center max padding-top-m padding-bottom-m margin-top-m margin-bottom-m bg-light is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h6 class=\"wp-block-heading\">Heading 6 padding bottom 8px at 1920, btw heading 6 has to be the same size as P, just different style<\/h6>\n\n\n\n<p>Some lorem ipsum text here to mimic some paragraph below a headline Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue magna, convallis non orci at, fringilla molestie magna. Phasellus ut nisi sed libero fermentum tristique. Proin tempus lacinia aliquam. Nullam nec est ac diam ornare mattis. Mauris eu tellus eu diam ultricies blandit. Vivamus rhoncus euismod lorem ac congue. Maecenas eu aliquam tortor, vitae luctus neque. Cras ac orci diam. Maecenas lorem lectus, auctor quis diam ut, aliquet commodo ante. Aenean feugiat ipsum id nisi dignissim, nec aliquam sem iaculis.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group content center max scene bg-light scene-padding is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h2 class=\"wp-block-heading has-text-align-center\">2 Columns container, gap of 72px at 1920<\/h2>\n\n\n\n<div class=\"wp-block-columns w-gap is-layout-flex wp-container-20\">\n<div class=\"wp-block-column scene-padding bg-red is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column scene-padding bg-red is-layout-flow\"><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group content center max scene bg-light scene-padding is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h2 class=\"wp-block-heading has-text-align-center\">3 Columns container, gap of 56px at 1920<\/h2>\n\n\n\n<div class=\"wp-block-columns w-gap-3 is-layout-flex wp-container-25\">\n<div class=\"wp-block-column scene-padding bg-red is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column scene-padding bg-red is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column scene-padding bg-red is-layout-flow\"><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group content center max scene bg-light scene-padding is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h2 class=\"wp-block-heading has-text-align-center\">4 Columns container, gap of 40px at 1920<\/h2>\n\n\n\n<div class=\"wp-block-columns w-gap-4 is-layout-flex wp-container-31\">\n<div class=\"wp-block-column scene-padding bg-red is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column scene-padding bg-red is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column scene-padding bg-red is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column scene-padding bg-red is-layout-flow\"><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group content center max scene bg-light scene-padding is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h2 class=\"wp-block-heading has-text-align-center\">5 Columns container that should never be used but just in case, gap of 24px at 1920<\/h2>\n\n\n\n<div class=\"wp-block-columns w-gap-5 is-layout-flex wp-container-38\">\n<div class=\"wp-block-column scene-padding bg-red is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column scene-padding bg-red is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column scene-padding bg-red is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column scene-padding bg-red is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column scene-padding bg-red is-layout-flow\"><\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading has-text-align-center padding-top-m\">6 Columns container should never be used<\/h3>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group content center max scene is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h2 class=\"wp-block-heading has-text-align-center\">3 Button sizes visualizer<\/h2>\n\n\n\n<div class=\"wp-block-columns w-gap-3 is-layout-flex wp-container-43\">\n<div class=\"wp-block-column is-layout-flow\">\n<h3 class=\"wp-block-heading has-text-align-center\">Small<\/h3>\n\n\n\n<h4 class=\"wp-block-heading has-text-align-center\">padding: 8px 40px, <br>margin-top: 32px<br>font-size: 16px<\/h4>\n\n\n\r\n    <div id=\"\" class=\"buttons-wrapper  aligncenter small-buttons\">\r\n            <a class=\"button \" href=\"\" target=\"_self\" aria-label=\"Button Text\" >\r\n            Button Text        <\/a>\r\n    <\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow\">\n<h3 class=\"wp-block-heading has-text-align-center\">Medium (Default)<\/h3>\n\n\n\n<h4 class=\"wp-block-heading has-text-align-center\">padding: 16px 48px, <br>margin-top: 64px<br>font-size: 20px<\/h4>\n\n\n\r\n    <div id=\"\" class=\"buttons-wrapper  aligncenter default-buttons\">\r\n            <a class=\"button \" href=\"\" target=\"_self\" aria-label=\"Button Text\" >\r\n            Button Text        <\/a>\r\n    <\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow\">\n<h3 class=\"wp-block-heading has-text-align-center\">Large<\/h3>\n\n\n\n<h4 class=\"wp-block-heading has-text-align-center\">padding: 24px 56px, <br>margin-top: 96px<br>font-size: 24px<\/h4>\n\n\n\r\n    <div id=\"\" class=\"buttons-wrapper  aligncenter large-buttons\">\r\n            <a class=\"button \" href=\"\" target=\"_self\" aria-label=\"Button Text\" >\r\n            Button Text        <\/a>\r\n    <\/div><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group content center max padding-top-m padding-bottom-m margin-top-m margin-bottom-m bg-light is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h2 class=\"wp-block-heading\">Small button in a container under a paragraph<\/h2>\n\n\n\n<p>Some lorem ipsum text here to mimic some paragraph below a headline Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue magna, convallis non orci at, fringilla molestie magna. Phasellus ut nisi sed libero fermentum tristique. Proin tempus lacinia aliquam. Nullam nec est ac diam ornare mattis. Mauris eu tellus eu diam ultricies blandit. Vivamus rhoncus euismod lorem ac congue. Maecenas eu aliquam tortor, vitae luctus neque. Cras ac orci diam. Maecenas lorem lectus, auctor quis diam ut, aliquet commodo ante. Aenean feugiat ipsum id nisi dignissim, nec aliquam sem iaculis.<\/p>\n\n\n\r\n    <div id=\"\" class=\"buttons-wrapper  small-buttons\">\r\n            <a class=\"button \" href=\"\" target=\"_self\" aria-label=\"Button Text\" >\r\n            Button Text        <\/a>\r\n    <\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-group content center max padding-top-m padding-bottom-m margin-top-m margin-bottom-m bg-light is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h2 class=\"wp-block-heading\">Default button in a container under a paragraph<\/h2>\n\n\n\n<p>Some lorem ipsum text here to mimic some paragraph below a headline Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue magna, convallis non orci at, fringilla molestie magna. Phasellus ut nisi sed libero fermentum tristique. Proin tempus lacinia aliquam. Nullam nec est ac diam ornare mattis. Mauris eu tellus eu diam ultricies blandit. Vivamus rhoncus euismod lorem ac congue. Maecenas eu aliquam tortor, vitae luctus neque. Cras ac orci diam. Maecenas lorem lectus, auctor quis diam ut, aliquet commodo ante. Aenean feugiat ipsum id nisi dignissim, nec aliquam sem iaculis.<\/p>\n\n\n\r\n    <div id=\"\" class=\"buttons-wrapper  default-buttons\">\r\n            <a class=\"button \" href=\"\" target=\"_self\" aria-label=\"Button Text\" >\r\n            Button Text        <\/a>\r\n    <\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-group content center max padding-top-m padding-bottom-m margin-top-m margin-bottom-m bg-light is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h2 class=\"wp-block-heading\">Large button in a container under a paragraph<\/h2>\n\n\n\n<p>Some lorem ipsum text here to mimic some paragraph below a headline Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur augue magna, convallis non orci at, fringilla molestie magna. Phasellus ut nisi sed libero fermentum tristique. Proin tempus lacinia aliquam. Nullam nec est ac diam ornare mattis. Mauris eu tellus eu diam ultricies blandit. Vivamus rhoncus euismod lorem ac congue. Maecenas eu aliquam tortor, vitae luctus neque. Cras ac orci diam. Maecenas lorem lectus, auctor quis diam ut, aliquet commodo ante. Aenean feugiat ipsum id nisi dignissim, nec aliquam sem iaculis.<\/p>\n\n\n\r\n    <div id=\"\" class=\"buttons-wrapper  large-buttons\">\r\n            <a class=\"button \" href=\"\" target=\"_self\" aria-label=\"Button Text\" >\r\n            Button Text        <\/a>\r\n    <\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Type Scale, Perfect Fourth, Base 18 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Paragraph text lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas rutrum ultricies massa, sed fringilla massa consectetur vitae. Praesent nec mauris vel dui tempor commodo a eu neque. Pellentesque volutpat purus lorem, quis lobortis est feugiat nec. Curabitur [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"acf":[],"_links":{"self":[{"href":"https:\/\/fontsplayground.aaronelizondoe.com\/index.php\/wp-json\/wp\/v2\/pages\/6"}],"collection":[{"href":"https:\/\/fontsplayground.aaronelizondoe.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fontsplayground.aaronelizondoe.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fontsplayground.aaronelizondoe.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fontsplayground.aaronelizondoe.com\/index.php\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":75,"href":"https:\/\/fontsplayground.aaronelizondoe.com\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":86,"href":"https:\/\/fontsplayground.aaronelizondoe.com\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions\/86"}],"wp:attachment":[{"href":"https:\/\/fontsplayground.aaronelizondoe.com\/index.php\/wp-json\/wp\/v2\/media?parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}