{"id":15438,"date":"2022-10-26T08:37:25","date_gmt":"2022-10-26T14:37:25","guid":{"rendered":"https:\/\/macblaze.ca\/?p=15438"},"modified":"2022-10-26T08:37:25","modified_gmt":"2022-10-26T14:37:25","slug":"css-magic","status":"publish","type":"post","link":"https:\/\/macblaze.ca\/?p=15438","title":{"rendered":"CSS Magic"},"content":{"rendered":"

I haven’t been keeping up on my css learning but I saw a new one the other day that is so applicable to text design. One can only hope that ebook reading systems will eventually support it. From https:\/\/www.youtube.com\/watch?v=OGJvhpoE8b4<\/a><\/p>\n

Often you want a different spacing between a H1 and H2 than you want between an H1 and paragraph. This is actually quite hard to do:<\/p>\n

Title<\/h1>\n

Subtitle<\/h2>\n

This is the paragraph.<\/p>\n

Title<\/h1>\n

This is the paragraph.<\/p>\n

Using the :has<\/code> selector you can say if the h1 class has (not) a subtitle them change the space after:<\/p>\n

\r\n<h1 class="article-title">Title<\/h1> \r\n    <h2 class="article-title">subtitle<\/h2>\r\n    <p>Lorem ipsum baby.<\/p>\r\n\r\n<h1 class="article-title">Title&<\/h1>\r\n   <p>Lorem ipsum baby.<\/p>\r\n<\/pre>\n
\r\n.article-title{\r\n  margin:0;\r\n\r\n.article-subtitle{\r\n  margin:0;\r\n  margin-block-end: 3rem;\r\n}\r\n\r\n.article-title:not(:has(+ .article-subtitle)){\r\n  margin-block-end: 3rem;\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
I haven’t been keeping up on my css learning but I saw a new one the other day that is so applicable to text design. One can only hope that ebook reading systems will eventually support it. From https:\/\/www.youtube.com\/watch?v=OGJvhpoE8b4 Often you want a different spacing between a H1 and H2 than you want between an […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false},"categories":[1],"tags":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/macblaze.ca\/index.php?rest_route=\/wp\/v2\/posts\/15438"}],"collection":[{"href":"https:\/\/macblaze.ca\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/macblaze.ca\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/macblaze.ca\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/macblaze.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=15438"}],"version-history":[{"count":17,"href":"https:\/\/macblaze.ca\/index.php?rest_route=\/wp\/v2\/posts\/15438\/revisions"}],"predecessor-version":[{"id":15456,"href":"https:\/\/macblaze.ca\/index.php?rest_route=\/wp\/v2\/posts\/15438\/revisions\/15456"}],"wp:attachment":[{"href":"https:\/\/macblaze.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15438"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/macblaze.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=15438"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/macblaze.ca\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=15438"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}