diff --git a/_sass/_layout.scss b/_sass/_layout.scss index a0adbfa..fd188d4 100755 --- a/_sass/_layout.scss +++ b/_sass/_layout.scss @@ -1,12 +1,10 @@ .page-container { display: flex; flex-direction: column; - margin-left: auto; - margin-right: auto; + margin-inline: auto; max-width: var(--large-breakpoint); min-height: 100vh; - padding-left: 1.25rem; - padding-right: 1.25rem; + padding-inline: 1.25rem; // WebKit mobile viewport bug fix @supports (-webkit-touch-callout: none) { @@ -21,12 +19,11 @@ main { .border-rule { border: none; border-top: 1px solid var(--color-primary-info-bg); - margin: 1.75rem 0; + margin-block: 1.75rem; } .gap-bottom-top-base { - margin-bottom: 1.25rem; - margin-top: 3rem; + margin-block: 3rem 1.25rem; } .page-footer { diff --git a/_sass/_masthead.scss b/_sass/_masthead.scss index 2d7cec3..797ee2c 100755 --- a/_sass/_masthead.scss +++ b/_sass/_masthead.scss @@ -10,8 +10,7 @@ --spacer-lg: 1rem; color: var(--color-shades-secondary-glare); margin-bottom: 5rem; - padding-bottom: var(--spacer-sm); - padding-top: var(--spacer-lg); + padding-block: var(--spacer-lg) var(--spacer-sm); .header-nav { @include flex-center; diff --git a/_sass/_posts.scss b/_sass/_posts.scss index 4b8cfff..4064b05 100755 --- a/_sass/_posts.scss +++ b/_sass/_posts.scss @@ -202,8 +202,7 @@ } &.shrink { - padding-bottom: 0.25rem; - padding-top: 0.5rem; + padding-block: 0.5rem 0.25rem; } &.stretch { diff --git a/_sass/_type.scss b/_sass/_type.scss index 36014a4..3dc7b0e 100755 --- a/_sass/_type.scss +++ b/_sass/_type.scss @@ -78,3 +78,25 @@ caption, figcaption { text-wrap: pretty; } + +.table-container { + overflow-x: auto; + + table { + border-collapse: collapse; + width: 100%; + + td, + th { + border: 1px solid var(--color-stroke); + padding: 0.3rem 0.65rem; + text-align: left; + } + + tr:nth-child(even) { + &:has(td) { + background-color: var(--color-shades-light); + } + } + } +}