fix(toc): apply highlighting to mobile design (#1472)

GitToTheHub · web-flow · commit 97d5f65b02d4 · 2026-02-18T16:49:33.000+09:00
- Make css styling for `this-page` more global
diff --git a/www/static/css-src/_docs.scss b/www/static/css-src/_docs.scss
@@ -105,11 +105,6 @@
                     display: block;
                     padding: 0 50%;
                     margin: 0 -50%;
-
-                    &.this-page {
-                        font-weight: bold;
-                        background-color: $brand-primary-darker;
-                    }
                 }
             }
             .toc-section-heading {
@@ -141,6 +136,12 @@
         }
     }
 
+    /* Highlight the current page in the ToC */
+    .this-page {
+        font-weight: bold;
+        background-color: $brand-primary-darker;
+    }
+
     .page-content-container {
         margin-left: $toc-width;
         width: calc(100% - #{$toc-width});

Original file line number	Diff line number	Diff line change
`@@ -105,11 +105,6 @@`
`105`	`105`	`display: block;`
`106`	`106`	`padding: 0 50%;`
`107`	`107`	`margin: 0 -50%;`
`108`		`-`
`109`		`- &.this-page {`
`110`		`- font-weight: bold;`
`111`		`- background-color: $brand-primary-darker;`
`112`		`- }`
`113`	`108`	`}`
`114`	`109`	`}`
`115`	`110`	`.toc-section-heading {`
`@@ -141,6 +136,12 @@`
`141`	`136`	`}`
`142`	`137`	`}`
`143`	`138`
	`139`	`+ /* Highlight the current page in the ToC */`
	`140`	`+ .this-page {`
	`141`	`+ font-weight: bold;`
	`142`	`+ background-color: $brand-primary-darker;`
	`143`	`+ }`
	`144`	`+`
`144`	`145`	`.page-content-container {`
`145`	`146`	`margin-left: $toc-width;`
`146`	`147`	`width: calc(100% - #{$toc-width});`