Skip to content

Commit ad54961

Browse files
lamATnginxlamATnginx
authored
fix: hide the v1 codeblocks on new theme + fix padding on v2 codeblocks (#138)
1 parent f99436f commit ad54961

File tree

3 files changed

+108
-119
lines changed

3 files changed

+108
-119
lines changed

‎assets/css/v2/style.css

Lines changed: 103 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -74,10 +74,6 @@ p {
7474
header {
7575
margin: 2rem 2rem;
7676

77-
.navbar {
78-
79-
}
80-
8177
.header-container {
8278
display: flex;
8379
flex-direction: row;
@@ -750,114 +746,116 @@ blockquote p:last-child {
750746
position: relative;
751747
margin-left: calc(var(--overflow-gutter-extension) / -2);
752748
width: calc(100% + var(--overflow-gutter-extension));
753-
}
754749

755-
code {
756-
font-weight: light;
757-
font-family: 'JetBrains Mono', monospace;
758-
display: flex;
759-
flex-direction: column;
760-
}
761-
762-
pre.chroma {
763-
overflow-x: auto;
764-
box-sizing: border-box;
765-
}
766-
767-
code .line {
768-
position: relative;
769-
display: grid;
770-
grid-template-columns: 1fr 1fr;
771-
grid-template-areas: " code "
772-
" comment ";
773-
}
774-
775-
code .line:has(.comment) .code {
776-
display: inline-block;
777-
height: fit-content;
778-
white-space: pre-wrap;
779-
width: 100%;
780-
background-color: var(--color-codeblock-code-with-comment);
781-
margin: var(--codeblock-comment-space-between) 0;
782-
position: relative;
783-
grid-column: 1 / -1;
784-
}
785-
786-
code .line:not(:has(.comment)) .code {
787-
grid-column: 1 / -1;
788-
grid-row: 1;
789-
}
790-
791-
code:not(:has(.comment)) .code {
792-
/* For codeblocks without comments */
793-
grid-column: 1 / -1 !important;
794-
grid-row: 1;
795-
}
796-
797-
code .code {
798-
padding-left: var(--codeblock-code-section-padding-left);
799-
grid-area: code;
800-
}
801-
802-
code .comment {
803-
display: inline-block;
804-
white-space: normal;
805-
margin: var(--codeblock-comment-space-between) 0;
806-
width: calc(100vw - (var(--codeblock-comment-diff) * 2));
807-
border: black var(--codeblock-border-thickness) solid;
808-
box-shadow: 3px 3px 0px var(--color-shadow);
809-
padding: 8px;
810-
grid-column: 1 / -1;
811-
}
812-
813-
code .line:has(.comment) .code::before {
814-
/* Vertical Lines */
815-
content: '';
816-
position: absolute;
817-
border-left: black var(--codeblock-border-thickness) solid;
818-
left: calc(var(--codeblock-horizontal-line-overflow) + 1px);
819-
top: 10px;
820-
height: calc(100% + 0.7rem);
821-
}
822-
823-
code .line:has(.comment) .code::after {
824-
/* Block */
825-
content: '';
826-
background-color: black;
827-
position: absolute;
828-
height: var(--codeblock-line-box-side-length);
829-
width: var(--codeblock-line-box-side-length);
830-
top: calc(10px - (var(--codeblock-border-thickness) * 1.5));
831-
left: var(--codeblock-horizontal-line-overflow);
832-
}
833-
834-
@media (min-width: 768px) { /* Tablet */
835-
code .line:has(.comment) .code {
836-
grid-column: 2 / -1;
750+
code {
751+
font-weight: light;
752+
font-family: 'JetBrains Mono', monospace;
753+
display: flex;
754+
flex-direction: column;
837755
}
838-
839-
code .comment {
840-
grid-column: 1;
841-
width: calc(100% - (var(--codeblock-comment-diff)));
756+
757+
pre.chroma {
758+
overflow-x: auto;
759+
box-sizing: border-box;
842760
}
843-
761+
762+
code .line {
763+
position: relative;
764+
display: grid;
765+
grid-template-columns: 1fr 1fr;
766+
grid-template-areas: " code "
767+
" comment ";
768+
}
769+
770+
code .line:has(.comment) .code {
771+
display: inline-block;
772+
height: fit-content;
773+
white-space: pre-wrap;
774+
width: 100%;
775+
background-color: var(--color-codeblock-code-with-comment);
776+
margin: var(--codeblock-comment-space-between) 0;
777+
position: relative;
778+
grid-column: 1 / -1;
779+
}
780+
844781
code .line:not(:has(.comment)) .code {
845-
grid-column: 2 / -1;
782+
grid-column: 1 / -1;
783+
grid-row: 1;
846784
}
847-
848-
code .line {
849-
/* Readjust the areas to be more responsive */
850-
grid-template-columns: 40% 60%;
851-
grid-template-areas: "comment code";
785+
786+
code:not(:has(.comment)) .code {
787+
/* For codeblocks without comments */
788+
grid-column: 1 / -1 !important;
789+
grid-row: 1;
790+
padding-left: 0;
852791
}
853-
792+
793+
code .code {
794+
padding-left: var(--codeblock-code-section-padding-left);
795+
grid-area: code;
796+
}
797+
798+
code .comment {
799+
display: inline-block;
800+
white-space: normal;
801+
margin: var(--codeblock-comment-space-between) 0;
802+
width: calc(100vw - (var(--codeblock-comment-diff) * 2));
803+
border: black var(--codeblock-border-thickness) solid;
804+
box-shadow: 3px 3px 0px var(--color-shadow);
805+
padding: 8px;
806+
grid-column: 1 / -1;
807+
}
808+
854809
code .line:has(.comment) .code::before {
855-
/* Horizontal Lines */
856-
border-left: none;
857-
border-top: black var(--codeblock-border-thickness) solid;
858-
left: calc(var(--codeblock-comment-diff) * -1);
859-
width: calc(var(--codeblock-horizontal-line-length) + var(--codeblock-horizontal-line-overflow));
810+
/* Vertical Lines */
811+
content: '';
812+
position: absolute;
813+
border-left: black var(--codeblock-border-thickness) solid;
814+
left: calc(var(--codeblock-horizontal-line-overflow) + 1px);
815+
top: 10px;
816+
height: calc(100% + 0.7rem);
817+
}
818+
819+
code .line:has(.comment) .code::after {
820+
/* Block */
821+
content: '';
822+
background-color: black;
823+
position: absolute;
824+
height: var(--codeblock-line-box-side-length);
825+
width: var(--codeblock-line-box-side-length);
826+
top: calc(10px - (var(--codeblock-border-thickness) * 1.5));
827+
left: var(--codeblock-horizontal-line-overflow);
828+
}
829+
830+
@media (min-width: 768px) { /* Tablet */
831+
code .line:has(.comment) .code {
832+
grid-column: 2 / -1;
833+
}
834+
835+
code .comment {
836+
grid-column: 1;
837+
width: calc(100% - (var(--codeblock-comment-diff)));
838+
}
839+
840+
code .line:not(:has(.comment)) .code {
841+
grid-column: 2 / -1;
842+
}
843+
844+
code .line {
845+
/* Readjust the areas to be more responsive */
846+
grid-template-columns: 40% 60%;
847+
grid-template-areas: "comment code";
848+
}
849+
850+
code .line:has(.comment) .code::before {
851+
/* Horizontal Lines */
852+
border-left: none;
853+
border-top: black var(--codeblock-border-thickness) solid;
854+
left: calc(var(--codeblock-comment-diff) * -1);
855+
width: calc(var(--codeblock-horizontal-line-length) + var(--codeblock-horizontal-line-overflow));
856+
}
860857
}
858+
861859
}
862860

863861
/* Logo */
@@ -867,17 +865,7 @@ code .line:has(.comment) .code::after {
867865
}
868866

869867
.nginx-logo-footer {
870-
height: 72x;
871-
width: 156px;
872-
}
873-
874-
.f5-logo-footer {
875-
height: 32px;
876-
width: 32px;
877-
}
878-
879-
.nginx-logo-footer {
880-
height: 72x;
868+
height: 72px;
881869
width: 156px;
882870
}
883871

@@ -894,9 +882,6 @@ code .line:has(.comment) .code::after {
894882
background-size: contain;
895883
background-position: left center;
896884
width: 200px; /* Adjust the width as needed to fit the logo */
897-
background-size: contain;
898-
background-position: left center;
899-
width: 200px; /* Adjust the width as needed to fit the logo */
900885

901886
img {
902887
display: none;

‎layouts/_default/_markup/render-codeblock.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{{ $code := .Inner | safeHTML }}
22
{{ $lines := split $code "\n" }}
33
<div data-mf="true" class="highlight-mf" style="display: none">
4-
<pre class="chroma" tabindex="0">
4+
<pre class="chroma" tabindex="0">
55
<code class="language-{{ .Type }}">
66
{{ range $lines }}
77
<span class="line">{{ $line := . }}{{ $parts := split $line "#" }}<span class="code">{{ index $parts 0 | safeHTML }}

‎layouts/_default/baseof.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,10 @@
7676
table.style.display = isNewTheme ? "none" : "";
7777
});
7878

79+
document.querySelectorAll(".highlight").forEach((codeblock) => {
80+
codeblock.style.display = isNewTheme ? "none" : "";
81+
})
82+
7983
const mfElements = ['[data-mf="true"]'];
8084
mfElements.forEach((elementId) => {
8185
document.querySelectorAll(elementId).forEach(

0 commit comments

Comments
 (0)