File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change @@ -563,6 +563,9 @@ summary {
563563}
564564
565565/* css/layout.css */
566+ # main {
567+ container : content / inline-size;
568+ }
566569html ,
567570body {
568571 box-sizing : border-box;
@@ -617,7 +620,6 @@ body {
617620 position : absolute;
618621}
619622.content .content-inner {
620- container : content / inline-size;
621623 max-width : var (--content-width );
622624 min-height : 100% ;
623625 margin : 0 auto;
@@ -1310,33 +1312,45 @@ textarea {
13101312 font-weight : 400 ;
13111313}
13121314.content-inner {
1315+ --h1-size : 1.5rem ;
1316+ --h2-size : 1.35rem ;
1317+ --h3-size : 1.25rem ;
1318+ --h4-h5-size : 1.15rem ;
1319+ --h6-size : 1rem ;
13131320 & h1 {
1314- font-size : 2 rem ;
1321+ font-size : var ( --h1-size ) ;
13151322 margin-top : 1.75em ;
13161323 }
13171324 : is (# summary , # callbacks , # functions ) > h1 .section-heading ,
13181325 h2 {
1319- font-size : 1.75 rem ;
1326+ font-size : var ( --h2-size ) ;
13201327 margin-top : 1.5em ;
13211328 margin-bottom : .5em ;
13221329 }
13231330 : is (# summary , # callbacks , # functions ) > h2 .section-heading ,
13241331 h3 ,
13251332 # summary : is (.summary-callbacks , .summary-functions ) h2 {
1326- font-size : 1.45 rem ;
1333+ font-size : var ( --h3-size ) ;
13271334 margin-top : 1.5em ;
13281335 margin-bottom : .5em ;
13291336 }
13301337 : is (h4 , h5 , h6 ) {
1331- font-size : 1.15 rem ;
1338+ font-size : var ( --h4-h5-size ) ;
13321339 margin-top : 1.25em ;
13331340 margin-bottom : .5em ;
13341341 }
13351342 : is (h5 , h6 ) {
13361343 font-weight : 400 ;
13371344 }
13381345 & h6 {
1339- font-size : 1rem ;
1346+ font-size : var (--h6-size );
1347+ }
1348+ }
1349+ @container content (width > 600px) {
1350+ .content-inner {
1351+ --h1-size : 2rem ;
1352+ --h2-size : 1.75rem ;
1353+ --h3-size : 1.45rem ;
13401354 }
13411355}
13421356.content-inner li + li {
Original file line number Diff line number Diff line change @@ -563,6 +563,9 @@ summary {
563563}
564564
565565/* css/layout.css */
566+ # main {
567+ container : content / inline-size;
568+ }
566569html ,
567570body {
568571 box-sizing : border-box;
@@ -617,7 +620,6 @@ body {
617620 position : absolute;
618621}
619622.content .content-inner {
620- container : content / inline-size;
621623 max-width : var (--content-width );
622624 min-height : 100% ;
623625 margin : 0 auto;
@@ -1310,33 +1312,45 @@ textarea {
13101312 font-weight : 400 ;
13111313}
13121314.content-inner {
1315+ --h1-size : 1.5rem ;
1316+ --h2-size : 1.35rem ;
1317+ --h3-size : 1.25rem ;
1318+ --h4-h5-size : 1.15rem ;
1319+ --h6-size : 1rem ;
13131320 & h1 {
1314- font-size : 2 rem ;
1321+ font-size : var ( --h1-size ) ;
13151322 margin-top : 1.75em ;
13161323 }
13171324 : is (# summary , # callbacks , # functions ) > h1 .section-heading ,
13181325 h2 {
1319- font-size : 1.75 rem ;
1326+ font-size : var ( --h2-size ) ;
13201327 margin-top : 1.5em ;
13211328 margin-bottom : .5em ;
13221329 }
13231330 : is (# summary , # callbacks , # functions ) > h2 .section-heading ,
13241331 h3 ,
13251332 # summary : is (.summary-callbacks , .summary-functions ) h2 {
1326- font-size : 1.45 rem ;
1333+ font-size : var ( --h3-size ) ;
13271334 margin-top : 1.5em ;
13281335 margin-bottom : .5em ;
13291336 }
13301337 : is (h4 , h5 , h6 ) {
1331- font-size : 1.15 rem ;
1338+ font-size : var ( --h4-h5-size ) ;
13321339 margin-top : 1.25em ;
13331340 margin-bottom : .5em ;
13341341 }
13351342 : is (h5 , h6 ) {
13361343 font-weight : 400 ;
13371344 }
13381345 & h6 {
1339- font-size : 1rem ;
1346+ font-size : var (--h6-size );
1347+ }
1348+ }
1349+ @container content (width > 600px) {
1350+ .content-inner {
1351+ --h1-size : 2rem ;
1352+ --h2-size : 1.75rem ;
1353+ --h3-size : 1.45rem ;
13401354 }
13411355}
13421356.content-inner li + li {
You can’t perform that action at this time.
0 commit comments