diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 7bd1282f..8213d597 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -19,6 +19,7 @@ --color-footer: #1D1D1D; --color-footer-text: #E2E2E2; --color-product-title: #8D8D8D; + --color-table-divider: #CCCCCC; --sidebar-margin: 24px; --sidebar-line-box-side-length: 8px; @@ -27,6 +28,13 @@ --sidebar-width: 24rem; --sidebar-line-width: 11.5px; --side-gutter-width: 20rem; + --table-top-bottom-spacing: 3rem; + --table-row-space-between: 1.5rem; + --table-min-column-spacing-narrow: 1.5rem; + --table-min-column-spacing-wide: 0.75rem; + --table-header-bottom-spacing: 1rem; + --table-line-extension: 1rem; + --table-line-height: 1px; --text-content-width-iphone-13: 30rem; --text-content-width-mbp-14: 40rem; --text-content-width-mbp-16: 50rem; @@ -188,11 +196,6 @@ nav { min-width: 100%; } -.main-layout { - display: grid; - grid-template-columns: 1fr; -} - .sidebar-layout { display: flex; flex-direction: column; @@ -205,58 +208,6 @@ nav { } } -.text-content { - grid-column-start: 1; -} - -@media (min-width: 1512px) { /* Macbook Pro 14 */ - .main-layout { - display: grid; - grid-template-columns: var(--sidebar-width) 1fr; - column-gap: var(--component-gap); - } - - .content-layout { - display: grid; - grid-template-columns: var(--text-content-width-mbp-14) var(--side-gutter-width); - column-gap: var(--component-gap); - } - - .content-layout .side-gutter { - grid-column-start: 2; - } - - .base-layout { - display: grid; - grid-template-rows: repeat(2, auto); - column-gap: var(--component-gap); - } - - .breadcrumb-layout { - display: grid; - grid-template-columns: var(--sidebar-width) 1fr; - column-gap: var(--component-gap); - align-items: center; - margin: 0 2rem; - } -} - -@media (min-width: 1728px) { /* Macbook Pro 16 */ - .content-layout { - display: grid; - grid-template-columns: var(--text-content-width-mbp-16) var(--side-gutter-width); - column-gap: var(--component-gap); - } -} - -@media (min-width: 2560px) { /* 4k Desktop */ - .content-layout { - display: grid; - grid-template-columns: var(--text-content-width-4k-display) var(--side-gutter-width); - column-gap: var(--component-gap); - } -} - #searchbox { width: 24rem; display:none; @@ -286,14 +237,21 @@ nav { flex-direction: column; } -.content-layout { +.text-content { + grid-column-start: 1; display: grid; - grid-template-columns: var(--text-content-width-iphone-13) var(--side-gutter-width); - column-gap: var(--component-gap); } -.text-content { - grid-column-start: 1; +.text-content > :not(.wide) { + grid-column: 1; +} + +.text-content .wide { + grid-column: 1 / -1; +} + +.text-content table { + width: 100%; } @media (min-width: 1512px) { /* Macbook Pro 14 */ @@ -310,6 +268,11 @@ nav { align-items: center; } + .text-content { + grid-template-columns: var(--text-content-width-mbp-14) var(--side-gutter-width); + column-gap: var(--component-gap); + } + .main-layout { display: grid; grid-template-columns: var(--sidebar-width) 1fr; @@ -333,6 +296,11 @@ nav { grid-template-columns: var(--text-content-width-mbp-16) var(--side-gutter-width); column-gap: var(--component-gap); } + + .text-content { + grid-template-columns: var(--text-content-width-mbp-16) var(--side-gutter-width); + column-gap: var(--component-gap); + } } @media (min-width: 2560px) { /* 4k Desktop */ @@ -341,6 +309,11 @@ nav { grid-template-columns: var(--text-content-width-4k-display) var(--side-gutter-width); column-gap: var(--component-gap); } + + .text-content { + grid-template-columns: var(--text-content-width-4k-display) var(--side-gutter-width); + column-gap: var(--component-gap); + } } .main { @@ -672,6 +645,65 @@ h2 { margin: 3rem 0 1rem 0; } +/* tables */ +table { + td { + padding: var(--table-row-space-between) 0; + } + + th { + font-weight: bold; + text-align: start; + vertical-align: top; + padding-bottom: var(--table-header-bottom-spacing); + } + + tr { + position: relative; + } + + tr::after { + content: ''; + position: absolute; + border-bottom: var(--table-line-height) solid var(--color-table-divider); + bottom: 0; + left: calc(-1 * var(--table-line-extension)); + width: calc(100% + (2 * var(--table-line-extension))); + } +} + +.narrow table { + min-width: 100%; + margin: var(--table-top-bottom-spacing) 0; + border-collapse: collapse; +} + +.wide table { + margin: var(--table-top-bottom-spacing) 0; + border-collapse: collapse; +} + +.narrow table th, +.narrow table td { + padding-left: var(--table-min-column-spacing-narrow); +} + +.wide table th, +.wide table td { + padding-left: var(--table-min-column-spacing-wide); +} + +table th:first-child, +table td:first-child { + padding-left: 0; +} + +table hr { + color: var(--color-table-divider); + border: none; + border-bottom: var(--table-line-height) solid var(--color-table-divider); +} + /* callouts */ blockquote { border: 1px solid var(--color-foreground); diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 479d389c..f6de9e28 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -72,6 +72,10 @@ } }); + document.querySelectorAll(".table-v1").forEach((table) => { + table.style.display = isNewTheme ? "none" : ""; + }); + const mfElements = ['[data-mf="true"]']; mfElements.forEach((elementId) => { document.querySelectorAll(elementId).forEach( diff --git a/layouts/shortcodes/bootstrap-table.html b/layouts/shortcodes/bootstrap-table.html index c1991d98..9489b8ac 100644 --- a/layouts/shortcodes/bootstrap-table.html +++ b/layouts/shortcodes/bootstrap-table.html @@ -1,6 +1,17 @@ {{ $htmlTable := .Inner | markdownify }} {{ $class := .Get 0 }} {{ $old := "" }} -{{ $new := printf "
" $class }} +{{ $new := printf "
" $class "table-v1" }} {{ $htmlTable := replace $htmlTable $old $new }} -{{ $htmlTable | safeHTML }} \ No newline at end of file +{{ $htmlTable | safeHTML }} + + +{{ $narrowOption := "narrow" }} +{{ $wideOption := "wide" }} +{{ if and (not (strings.Contains $class $narrowOption)) (not (strings.Contains $class $wideOption)) }} + {{ $class = printf "%s %s" $class $narrowOption }} +{{ end }} + + \ No newline at end of file