From cd5cfd63a037f60b527ca24198e50e6bed3d176d Mon Sep 17 00:00:00 2001 From: a Date: Fri, 23 Dec 2022 05:21:41 -0600 Subject: [PATCH] misc style fixes --- assets/styles/common/base.scss | 2 +- assets/styles/common/content.scss | 66 +++++++++---------- assets/styles/components/breadcrumbs.scss | 8 +-- assets/styles/components/nav-docs.scss | 28 ++++---- assets/styles/components/nav-section.scss | 2 +- assets/styles/components/site-footer.scss | 4 +- assets/styles/components/site-header.scss | 17 ++--- .../styles/components/table-of-contents.scss | 22 +++---- assets/styles/features/headings.scss | 18 ++--- assets/styles/features/search.scss | 20 +++--- assets/styles/layouts/list.scss | 6 +- assets/styles/layouts/responsive.scss | 8 +-- assets/styles/layouts/single.scss | 12 ++-- assets/styles/print.scss | 2 +- assets/styles/shortcodes/hint.scss | 8 +-- assets/styles/shortcodes/ref.scss | 12 ++-- layouts/partials/color-switcher.html | 14 +++- 17 files changed, 124 insertions(+), 125 deletions(-) diff --git a/assets/styles/common/base.scss b/assets/styles/common/base.scss index 765bbf6..93693a3 100644 --- a/assets/styles/common/base.scss +++ b/assets/styles/common/base.scss @@ -10,7 +10,7 @@ $sidebar-width: 20rem; } html { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-family: sans-serif; scroll-behavior: smooth; text-rendering: optimizeLegibility; } diff --git a/assets/styles/common/content.scss b/assets/styles/common/content.scss index fd1d390..c694997 100644 --- a/assets/styles/common/content.scss +++ b/assets/styles/common/content.scss @@ -8,14 +8,14 @@ h6 {font-size: 1em} h1, h2, h3, h4, h5, h6 { line-height: 1.2; - margin-bottom: 1rem; - margin-top: 2rem; + margin-block-start: 2rem; + margin-block-end: 1rem; font-weight: 700; } p { line-height: 2; - margin-bottom: 1em; - max-width: 80ch; + margin-block-end: 1em; + max-inline-size: 80ch; } a { word-wrap: break-word; @@ -28,7 +28,7 @@ sup { position: relative; font-size: var(--script-size); - top: -1em; + inset-block-start: -1em; } sub { position: relative; @@ -66,9 +66,8 @@ mark { background: var(--primary-accent-transparent); color: var(--ui-text); - --pad-x-highlight: 0.125em; - padding-left: var(--pad-x-highlight); - padding-right: var(--pad-x-highlight); + --pad-highlight: 0.125em; + padding-inline: var(--pad-highlight); transition: background var(--color-crossfade-duration) var(--color-crossfade-ease), color var(--color-crossfade-duration) var(--color-crossfade-ease); @@ -81,21 +80,21 @@ color var(--color-crossfade-duration) var(--color-crossfade-ease); } /* lists */ - ul {list-style: disc; margin: 1em 0;} - li {margin-bottom: 1em; line-height: 1.4; margin-left: 1em;} - ol {list-style: decimal; margin: 1em 0;} - dl {margin: 1em 0; line-height: 1.4;} + ul {list-style: disc; margin-block: 1em;} + li {margin-inline-start: 1em; margin-block-end: 1em; line-height: 1.4;} + ol {list-style: decimal; margin-block: 1em;} + dl {margin-block: 1em; line-height: 1.4;} dt {font-weight: 700;} - dd {margin-left: 1em; margin-bottom: 1em;} + dd {margin-inline-start: 1em; margin-block-end: 1em;} /* block elements */ img { - width: 100%; - margin-bottom: 1em; + inline-size: 100%; + margin-block-end: 1em; } blockquote { font-style: italic; font-size: 1.3rem; - margin: 1em 0; + margin-block: 1em; padding: 0.5rem 1rem; line-height: 1.4; cite { @@ -111,11 +110,11 @@ color var(--color-crossfade-duration) var(--color-crossfade-ease); padding: 1em; line-height: 2; - overflow-x: auto; + overflow-inline: auto; white-space: pre; display: grid; tab-size: 3; - margin-bottom: 1em; + margin-block-end: 1em; } code { font-family: monospace; @@ -137,29 +136,30 @@ padding: 0; } code .line { - padding: 0 1em; + padding-inline: 1em; } .highlight pre { - padding: 1em 0; + padding-block: 1em; } /* figures */ figure { - margin-bottom: 1em; + margin-block: 1em; + display: grid; + place-items: center; } figure img { - width: 100%; - margin-bottom: -0.125em; + inline-size: max-content; + max-inline-size: 100%; + margin-block-end: -0.125em; } figcaption { - background: #212121; - color: white; - transition: - background var(--color-crossfade-duration) var(--color-crossfade-ease), - color var(--color-crossfade-duration) var(--color-crossfade-ease); font-style: italic; - padding: 1em; - font-size: 0.8em; line-height: 1.2; + inline-size: 100%; + text-align: center; + p { + margin: 1em auto; + } } /* tables */ table {text-align: center;} @@ -209,9 +209,9 @@ } &:after { content: ''; - width: 100%; - margin-left: 1rem; - border-bottom: 1px solid; + inline-size: 100%; + margin-inline-start: 1rem; + border-block-end: 1px solid; border-color: var(--ui-text-muted); transition: border-color var(--color-crossfade-duration) var(--color-crossfade-ease); diff --git a/assets/styles/components/breadcrumbs.scss b/assets/styles/components/breadcrumbs.scss index b79379e..b96d143 100644 --- a/assets/styles/components/breadcrumbs.scss +++ b/assets/styles/components/breadcrumbs.scss @@ -2,11 +2,11 @@ display: flex; flex-flow: row wrap; li { - margin-bottom: 1rem; - margin-right: 0.5rem; - margin-left: 1rem; + margin-inline-start: 1rem; + margin-inline-end: 0.5rem; + margin-block-end: 1rem; a { - margin-left: 0.5rem; + margin-inline-start: 0.5rem; } &::marker { content: "» "; diff --git a/assets/styles/components/nav-docs.scss b/assets/styles/components/nav-docs.scss index 5c4b8f6..facdace 100644 --- a/assets/styles/components/nav-docs.scss +++ b/assets/styles/components/nav-docs.scss @@ -16,39 +16,39 @@ .toggle-menu__label { - margin-bottom: 2em + margin-block-end: 2em } /* navigation menu */ .docs-nav { - padding: 1em 0; + padding-block: 1em; #search-form { - margin-bottom: 2em; + margin-block-end: 2em; } .menu { - margin-top: 1em; + margin-block-start: 1em; > li { - margin-bottom: 2em; + margin-block-end: 2em; font-weight: 700; } > details summary { - margin-bottom: 1em; + margin-block-end: 1em; } display: flex; flex-flow: column; } details { display: flex; - margin-bottom: 1em; - &[open] {margin-bottom: 2em;} + margin-block-end: 1em; + &[open] {margin-block-end: 2em;} } summary { font-weight: 700; cursor: pointer; } .sub-menu { - margin-left: 1em; + margin-inline-start: 1em; display: flex; flex-flow: column; gap: 0.5rem; @@ -56,8 +56,8 @@ line-height: 1.5; } .sub-menu { - margin-top: 0.5rem; - margin-left: 2em; + margin-block-start: 0.5rem; + margin-inline-start: 2em; } li::marker { content: '→ '; @@ -80,13 +80,13 @@ /* top of menu link should show only when focused */ -#menu {margin-bottom: 1em;} +#menu {margin-block-end: 1em;} #menu:not(:focus) { clip: rect(0 0 0 0); clip-path: inset(50%); - height: 1px; + block-size: 1px; overflow: hidden; position: absolute; white-space: nowrap; - width: 1px; + inline-size: 1px; } \ No newline at end of file diff --git a/assets/styles/components/nav-section.scss b/assets/styles/components/nav-section.scss index 2f6b00d..112929d 100644 --- a/assets/styles/components/nav-section.scss +++ b/assets/styles/components/nav-section.scss @@ -45,5 +45,5 @@ grid-column: 2; } } - margin-bottom: 2em; + margin-block-end: 2em; } \ No newline at end of file diff --git a/assets/styles/components/site-footer.scss b/assets/styles/components/site-footer.scss index bd5cc43..4e9ede8 100644 --- a/assets/styles/components/site-footer.scss +++ b/assets/styles/components/site-footer.scss @@ -1,7 +1,7 @@ .site-footer { display: flex; align-items: center; - padding: 1em 0; + padding-block: 1em; hr {display: none;} @@ -29,7 +29,7 @@ } a[href='#top'] { - margin-left: auto; + margin-inline-start: auto; } .copyright a { diff --git a/assets/styles/components/site-header.scss b/assets/styles/components/site-header.scss index 4185e7c..17122b4 100644 --- a/assets/styles/components/site-header.scss +++ b/assets/styles/components/site-header.scss @@ -5,16 +5,13 @@ gap: 1em; text-decoration: none; img { - height: 2rem; + block-size: 2rem; } svg { - height: 2rem; - width: 100%; + block-size: 2rem; + inline-size: 100%; } } -.site-icon { - height: 2em; -} .site-title { font-weight: 900; letter-spacing: -0.5px; @@ -27,8 +24,8 @@ .color-switcher { display: grid; place-items: center; - margin-left: auto; - margin-right: 0.5em; + margin-inline-start: auto; + margin-inline-end: 0.5em; } .site-header { @@ -38,7 +35,7 @@ justify-content: space-between; gap: 1em; } - padding: 1em 0; + padding-block: 1em; a { font-weight: 500; } @@ -46,7 +43,7 @@ display: flex; gap: 1em; flex-flow: row wrap; - max-width: 100%; + max-inline-size: 100%; flex-grow: 1; justify-content: space-between; } diff --git a/assets/styles/components/table-of-contents.scss b/assets/styles/components/table-of-contents.scss index 4f6b371..139efe3 100644 --- a/assets/styles/components/table-of-contents.scss +++ b/assets/styles/components/table-of-contents.scss @@ -1,5 +1,5 @@ .toc-title { - margin-bottom: 0.5em; + margin-block-end: 0.5em; font-weight: 900; text-transform: uppercase; color: var(--ui-text-muted); @@ -7,23 +7,17 @@ color var(--color-crossfade-duration) var(--color-crossfade-ease); } #TableOfContents { - ul { + ol, ul { list-style: none; - margin: 0; } li { - margin: 0; + margin-block: 0.5em; + } + a { + display: inline-block; line-height: 1.5; } - li > ul { /* indent subheadings */ - margin: 0; - margin-left: 1em; - } - ol { - list-style: none; - margin: 0; - } - li > ol { - margin-left: 1em; + li > ol, li > ul { /* indent subheadings */ + margin-inline-start: 1em; } } \ No newline at end of file diff --git a/assets/styles/features/headings.scss b/assets/styles/features/headings.scss index 4c26678..eb1a210 100644 --- a/assets/styles/features/headings.scss +++ b/assets/styles/features/headings.scss @@ -1,20 +1,20 @@ h2.heading { - border-bottom: 1px solid var(--ui-text-muted); - padding-bottom: 1rem; + padding-block-end: 1rem; + border-block-end: 1px solid var(--ui-text-muted); } /* headings with no numbers */ article:not([autonumbering]) .heading { position: relative; - margin-right: 2.5rem; + margin-inline-end: 2.5rem; &__anchor-link { display: inline-flex; align-content: center; - margin-left: 0.25em; + margin-inline-start: 0.25em; position: absolute; - right: -2.5rem; - top: 3px; + inset-inline-end: -2.5rem; + inset-block-start: 3px; font-size: 1rem; } } @@ -43,7 +43,7 @@ article[autonumbering] { h3:before, h4:before { - margin-right: 1em; + margin-inline-end: 1em; font-family: monospace; font-size: 1rem; } @@ -52,7 +52,7 @@ article[autonumbering] { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; - grid-gap: 0.5rem; + gap: 0.5rem; &__text { grid-column: span 2; } @@ -75,6 +75,6 @@ article[autonumbering] { #TableOfContents ol ol, #TableOfContents ul ul { - margin-left: 0; + margin-inline-start: 0; } } \ No newline at end of file diff --git a/assets/styles/features/search.scss b/assets/styles/features/search.scss index 61d49f0..d96ac83 100644 --- a/assets/styles/features/search.scss +++ b/assets/styles/features/search.scss @@ -2,7 +2,7 @@ display: block; font-size: 2em; line-height: 1; - margin-bottom: 1em; + margin-block-end: 1em; } .search-results strong { @@ -17,24 +17,24 @@ #search-results { display: flex; flex-flow: column; - max-width: 80ch; + max-inline-size: 80ch; } #search-results li:not(:first-child) { - border-top: 1px solid; + border-block-start: 1px solid; border-color: var(--ui-text-muted); transition: border-color var(--color-crossfade-duration) var(--color-crossfade-ease); } #search-results li { - padding: 1em 0; + padding-block: 1em; } .search-result-page-title { font-size: 1.25em; display: block; - margin-bottom: 1rem; + margin-block-end: 1rem; } .search-result-item p { @@ -45,7 +45,7 @@ display: flex; justify-content: center; align-items: center; - max-width: 100%; + max-inline-size: 100%; } #search-input { @@ -58,10 +58,10 @@ border-radius: 100rem; border: 0; padding: 0.5rem 1rem; - margin-right: 0.5rem; - width: 100%; + margin-inline-end: 0.5rem; + inline-size: 100%; flex-shrink: 1; - height: 2rem; + block-size: 2rem; box-sizing: border-box; } @@ -74,6 +74,6 @@ background var(--color-crossfade-duration) var(--color-crossfade-ease), color var(--color-crossfade-duration) var(--color-crossfade-ease); border-radius: 4px; - height: 2rem; + block-size: 2rem; filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.15)); } \ No newline at end of file diff --git a/assets/styles/layouts/list.scss b/assets/styles/layouts/list.scss index 7726ec0..51ae181 100644 --- a/assets/styles/layouts/list.scss +++ b/assets/styles/layouts/list.scss @@ -1,12 +1,12 @@ .list-item { - margin-bottom: 2rem; + margin-block-end: 2rem; &__title { display: inline-block; - margin-bottom: 0.5rem; + margin-block-end: 0.5rem; font-size: 1.25em; } &__summary { - margin-bottom: 0.5rem; + margin-block-end: 0.5rem; line-height: 1.5; } &__date { diff --git a/assets/styles/layouts/responsive.scss b/assets/styles/layouts/responsive.scss index 6c3ce76..5310eec 100644 --- a/assets/styles/layouts/responsive.scss +++ b/assets/styles/layouts/responsive.scss @@ -24,7 +24,7 @@ @media (min-width: 60rem) { body { display: grid; - grid-template-columns: 1fr 3fr; + grid-template-columns: var(--sidebar-width) 1fr; grid-template-rows: auto 0 1fr auto; height: calc(100 * var(--vh, 1vh)); } @@ -78,7 +78,7 @@ @media (min-width: 90rem) { body { - grid-template-columns: auto 1fr; + grid-template-columns: var(--sidebar-width) 1fr; } .page { display: grid; @@ -133,10 +133,10 @@ } .page-header { - padding-top: 2rem; + padding-block-start: 2rem; } .page-footer { - padding-bottom: 1rem; + padding-block-end: 1rem; } } diff --git a/assets/styles/layouts/single.scss b/assets/styles/layouts/single.scss index aeda7b0..1011722 100644 --- a/assets/styles/layouts/single.scss +++ b/assets/styles/layouts/single.scss @@ -1,24 +1,24 @@ .breadcrumbs { - margin-bottom: 1rem; + margin-block-end: 1rem; } .page-title { font-size: 2em; - margin-bottom: 1rem; + margin-block-end: 1rem; } .page-summary { line-height: 1.5; - max-width: 80ch; - margin-bottom: 1rem; + max-inline-size: 80ch; + margin-block-end: 1rem; } .lastmod { - margin-top: 1rem; + margin-block-start: 1rem; line-height: 1.5; color: var(--ui-text-muted); transition: color var(--color-crossfade-duration) var(--color-crossfade-ease); } .language-list { - margin-top: 0.5rem; + margin-block-start: 0.5rem; display: flex; flex-flow: wrap; list-style: none; diff --git a/assets/styles/print.scss b/assets/styles/print.scss index 684930e..5d6da88 100644 --- a/assets/styles/print.scss +++ b/assets/styles/print.scss @@ -56,6 +56,6 @@ a.source-ref[href^="http"]:after { } .content pre code { - width: 100%; + inline-size: 100%; } diff --git a/assets/styles/shortcodes/hint.scss b/assets/styles/shortcodes/hint.scss index facb594..ce322f1 100644 --- a/assets/styles/shortcodes/hint.scss +++ b/assets/styles/shortcodes/hint.scss @@ -1,21 +1,21 @@ .hint { padding: 1em; line-height: 2; - margin: 1rem 0; + margin-block: 1rem; } .hint, .hint.info, .hint.tip { background: rgba(142, 226, 142, 0.2); - border-left: 4px solid rgb(142, 226, 142); + border-inline-start: 4px solid rgb(142, 226, 142); } .hint.warning { background: rgba(218, 226, 142, 0.2); - border-left: 4px solid rgb(218, 226, 142); + border-inline-start: 4px solid rgb(218, 226, 142); } .hint.danger { background: rgba(226, 142, 142, 0.2); - border-left: 4px solid rgb(226, 142, 142); + border-inline-start: 4px solid rgb(226, 142, 142); } \ No newline at end of file diff --git a/assets/styles/shortcodes/ref.scss b/assets/styles/shortcodes/ref.scss index 152f948..9a1f076 100644 --- a/assets/styles/shortcodes/ref.scss +++ b/assets/styles/shortcodes/ref.scss @@ -17,13 +17,13 @@ @media (min-width: 20rem) { grid-template-columns: 3em 1fr; } - margin: 1em 0; + margin-block: 1em; padding: 1em; border-radius: 6px; text-decoration: none; &__icon { - height: 3em; - width: 3em; + block-size: 3em; + inline-size: 3em; grid-column: 1; background: var(--primary-accent); color: var(--primary-accent-text); @@ -35,8 +35,8 @@ grid-column: 2 / -1; } svg { - height: 1.5em; - width: 1.5em; + block-size: 1.5em; + inline-size: 1.5em; } } @@ -56,7 +56,7 @@ font-weight: 700; } &__path { - margin-top: 8px; + margin-block-start: 8px; display: block; font-family: monospace; } diff --git a/layouts/partials/color-switcher.html b/layouts/partials/color-switcher.html index 6651467..d75b3ff 100644 --- a/layouts/partials/color-switcher.html +++ b/layouts/partials/color-switcher.html @@ -133,10 +133,14 @@