Fix gutter of code block scrollable

MrWillCom · MrWillCom · commit edc94088800c · 2026-05-11T19:02:30.000+08:00
diff --git a/.changeset/silver-lizards-fry.md b/.changeset/silver-lizards-fry.md
@@ -0,0 +1,5 @@
+---
+'hexo-theme-cupertino': patch
+---
+
+Fix gutter of code block scrollable.
diff --git a/source/css/code-highlighting.scss b/source/css/code-highlighting.scss
@@ -2,6 +2,7 @@
 
 .gutter {
   color: var(--color-text-tertiary);
+  background-color: var(--color-background-secondary);
   user-select: none;
 }
 
diff --git a/source/css/post.scss b/source/css/post.scss
@@ -222,7 +222,8 @@ body {
     background-color: var(--color-background-secondary);
     border-radius: var(--radius-medium);
     @include utilities.corner-squircle;
-    max-width: calc(800px - 16px * 2);
+    padding: 0;
+    max-width: 800px;
 
     @media (max-width: 800px) {
       border-radius: 0;
@@ -235,7 +236,10 @@ body {
     }
 
     .gutter {
-      padding-right: 16px;
+      padding-left: 16px;
+      position: sticky;
+      left: 0;
+      text-align: right;
     }
   }
 

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'hexo-theme-cupertino': patch
 +---
++
 +Fix gutter of code block scrollable.
Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,7 @@`
`2`	`2`
`3`	`3`	`.gutter {`
`4`	`4`	`color: var(--color-text-tertiary);`
	`5`	`+ background-color: var(--color-background-secondary);`
`5`	`6`	`user-select: none;`
`6`	`7`	`}`
`7`	`8`
Original file line number	Diff line number	Diff line change
`@@ -222,7 +222,8 @@ body {`
`222`	`222`	`background-color: var(--color-background-secondary);`
`223`	`223`	`border-radius: var(--radius-medium);`
`224`	`224`	`@include utilities.corner-squircle;`
`225`		`- max-width: calc(800px - 16px * 2);`
	`225`	`+ padding: 0;`
	`226`	`+ max-width: 800px;`
`226`	`227`
`227`	`228`	`@media (max-width: 800px) {`
`228`	`229`	`border-radius: 0;`
`@@ -235,7 +236,10 @@ body {`
`235`	`236`	`}`
`236`	`237`
`237`	`238`	`.gutter {`
`238`		`- padding-right: 16px;`
	`239`	`+ padding-left: 16px;`
	`240`	`+ position: sticky;`
	`241`	`+ left: 0;`
	`242`	`+ text-align: right;`
`239`	`243`	`}`
`240`	`244`	`}`
`241`	`245`