diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 5ab9fbb..6123e7f 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -966,11 +966,7 @@ blockquote.side-callout { } .tab-content { - border-bottom: 1px solid black; - - /* Lines extend 1rem into gutter on both sides */ - width: calc(100% + 2rem); - margin-left: -1rem; + position: relative; .tab-pane { display: none; @@ -979,15 +975,21 @@ blockquote.side-callout { margin-left: 1rem; } - .tab-pane * { - margin-left: 0; - } - .active { display: block !important; } } +.tab-content::after { + /* Bottom Horizontal Line for Tabs */ + content: ""; + position: absolute; + border-bottom: 1px solid black; + left: calc(-1 * var(--overflow-gutter-extension)); + bottom: 0; + width: calc(100% + (2 * var(--overflow-gutter-extension))); +} + /* Codeblocks */ .highlight { padding: 0 1rem 0 1rem; @@ -1004,6 +1006,16 @@ blockquote.side-callout { grid-column: 1; } +.code-block .code-header:not(:has(.code-type)) { + /* Remove margin for codeblocks without a type */ + margin-top: -1.5rem; +} + +li .code-block { + /* For indented code blocks, move 1rem back to align code with text from heading */ + margin-left: -1rem; +} + .icon-code-copy { background-color: #f2f2f2; border: none; @@ -1015,21 +1027,29 @@ blockquote.side-callout { } .highlight-v2 { - padding: 0 1rem 0 0; - margin: 0 -1rem 1rem -1rem; + margin: 0 0 1rem 0; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; overflow-x: scroll; scrollbar-width: none; + width: calc(100% + var(--overflow-gutter-extension)); + + background-image: linear-gradient(to right, white, white), + linear-gradient(to right, white, white), + linear-gradient(to right, rgba(165, 165, 165, 0.25), rgba(255, 255, 255, 0)), + linear-gradient(to left, rgba(165, 165, 165, 0.25), rgba(255, 255, 255, 0)); + background-position: left center, right center, left center, right center; + background-repeat: no-repeat; + background-size: 12px 100%, 12px 100%, 10px 100%, 10px 100%; + background-attachment: local, local, scroll, scroll; } .highlight-v2.single-line { display: flex; align-items: center; - padding: 0 1rem 0 0; border: 1px solid #cccccc; overflow-x: scroll; - width: calc(100% + (2 * var(--overflow-gutter-extension))); + width: calc(100% + var(--overflow-gutter-extension)); } .code-header { @@ -1081,9 +1101,11 @@ figure { margin: 0; } +img, .figure-bitmap { margin-bottom: 0.625rem; display: inline-block; + width: 100%; max-width: 100%; }