Sticky line numbers on codeblocks

DeclanChidlow · Oct 19, 2024 · 9f55188 · 9f55188
1 parent 09ed509
commit 9f55188
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/docs/styles/type/code.css b/docs/styles/type/code.css
@@ -6,9 +6,8 @@ code {
 
 pre {
 	width: 100%;
-	overflow-x: scroll;
+	overflow-x: auto;
 	background: var(--black);
-	color: var(--_white);
 	border: 2px solid light-dark(var(--white), var(--grey));
 	padding: 0.8rem;
 	line-height: 150%;
@@ -23,9 +22,14 @@ pre {
 	.line::before {
 		content: counter(step);
 		counter-increment: step;
-		width: 1rem;
-		margin-right: 1.5rem;
+		position: sticky;
+		left: -0.8rem;
 		display: inline-block;
+		margin-left: -0.8rem;
+		padding: 0 0.8rem;
+		width: 3.5rem;
+		color: var(--white);
+		background: var(--black);
 		text-align: right;
 	}
 }
diff --git a/input/global/styles/type/code.css b/input/global/styles/type/code.css
@@ -6,9 +6,8 @@ code {
 
 pre {
 	width: 100%;
-	overflow-x: scroll;
+	overflow-x: auto;
 	background: var(--black);
-	color: var(--_white);
 	border: 2px solid light-dark(var(--white), var(--grey));
 	padding: 0.8rem;
 	line-height: 150%;
@@ -23,9 +22,14 @@ pre {
 	.line::before {
 		content: counter(step);
 		counter-increment: step;
-		width: 1rem;
-		margin-right: 1.5rem;
+		position: sticky;
+		left: -0.8rem;
 		display: inline-block;
+		margin-left: -0.8rem;
+		padding: 0 0.8rem;
+		width: 3.5rem;
+		color: var(--white);
+		background: var(--black);
 		text-align: right;
 	}
 }