Miroirs/noc-book-2
1
0
Fork 0
mirror of https://github.com/nature-of-code/noc-book-2 synced 2024-11-17 07:49:05 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

wrap the code comments when overflow

Browse source
This commit is contained in:
jasongao97 2022-08-22 16:04:22 -04:00
parent 952b490d0b
commit dd17dc3842
2 changed files with 8 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/styles/codesplit.css
View file

@ -5,11 +5,11 @@
}
.pair {
@apply w-full flex justify-between space-x-8 px-5;
@apply w-full px-5 overflow-x-auto;
}
.pair:not(.no-comment) {
@apply bg-gray-200 border-l-2 border-noc-400 py-2 my-1;
@apply bg-gray-200 border-l-2 border-noc-400 py-2 my-1 flex flex-col-reverse lg:flex-row justify-between flex-wrap-reverse gap-y-2 gap-x-8;
}
.pair.line-through code {
@ -27,5 +27,9 @@
}
.comment {
@apply pl-2 text-sm text-gray-600 max-w-[18em] w-full;
@apply text-sm text-gray-600 flex-grow flex lg:justify-end;
}
.comment > p {
@apply lg:w-[18em];
}

2
src/utils/codesplit.js
View file

@ -91,7 +91,7 @@ export const rehypeCodesplit = () => (tree) => {
return h('div', { className }, [
h('pre', [h('code', { class: ['code', `language-${lang}`] }, codes)]),
h('p', { class: ['comment'] }, comments),
h('div', { class: ['comment'] }, h('p', comments)),
]);
});