From e8d6d37322a11030813dc58826c513871e871fd8 Mon Sep 17 00:00:00 2001 From: Kevin Heis Date: Fri, 19 Nov 2021 12:50:06 -0800 Subject: [PATCH 1/2] Use rem for image sizing (#23008) Co-authored-by: Grace Park --- stylesheets/images.scss | 35 ++++++++++++++++++----------------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/stylesheets/images.scss b/stylesheets/images.scss index d59a61eb802e..adfc988969e7 100644 --- a/stylesheets/images.scss +++ b/stylesheets/images.scss @@ -1,27 +1,28 @@ .markdown-body .procedural-image-wrapper { display: block; - padding: 10px 0; - margin: 20px auto 0 auto; + padding: 1rem 0; + margin: 1rem auto 0 auto; border: none; - max-width: calc(100% - 32px); -} + max-width: calc(100% - 2rem); -.markdown-body .procedural-image-wrapper img { - width: auto; - height: auto; - max-height: 500px; - padding: 0; - box-shadow: var(--color-shadow-medium); -} + img { + width: auto; + height: auto; + max-height: 32rem; + padding: 0; + box-shadow: var(--color-shadow-medium); + } -// make sure images that contain emoji render at the expected size -.markdown-body img[src*="https://github.githubassets.com/images/icons/emoji"] -{ - height: 20px; - width: 20px; + // make sure images that contain emoji render at the expected size + img[src*="https://github.githubassets.com/images/icons/emoji"] + { + height: 20px; + width: 20px; + box-shadow: none; + } } .markdown-body img { - max-height: 500px; + max-height: 32rem; padding: 0; } From 58fbe1edf5190da646f5e884a09aa14503fb98b3 Mon Sep 17 00:00:00 2001 From: Kevin Heis Date: Fri, 19 Nov 2021 13:06:45 -0800 Subject: [PATCH 2/2] Move px to rem in scss files (#23009) Co-authored-by: Mike Surowiec --- .../page-header/Breadcrumbs.module.scss | 2 +- components/sidebar/SidebarProduct.module.scss | 2 +- .../MarkdownContent.module.scss | 8 ++--- .../ui/MarkdownContent/stylesheets/code.scss | 30 +++++++++---------- .../ui/MarkdownContent/stylesheets/lists.scss | 22 +++++++------- .../ui/MarkdownContent/stylesheets/table.scss | 10 +++---- stylesheets/extended-markdown.scss | 4 +-- 7 files changed, 39 insertions(+), 39 deletions(-) diff --git a/components/page-header/Breadcrumbs.module.scss b/components/page-header/Breadcrumbs.module.scss index 3e82493512e0..ba389ad73f02 100644 --- a/components/page-header/Breadcrumbs.module.scss +++ b/components/page-header/Breadcrumbs.module.scss @@ -1,3 +1,3 @@ .breadcrumbs { - clip-path: inset(-5px -5px -5px 0px); + clip-path: inset(-0.5rem -0.5rem -0.5rem 0); } diff --git a/components/sidebar/SidebarProduct.module.scss b/components/sidebar/SidebarProduct.module.scss index e46a56783f75..5696dd25683a 100644 --- a/components/sidebar/SidebarProduct.module.scss +++ b/components/sidebar/SidebarProduct.module.scss @@ -1,7 +1,7 @@ .sidebarArticle::before { content: ""; position: absolute; - left: 26px; + left: calc(1.5rem + 2px); height: 100%; border-left: 1px solid var(--color-fg-default); width: 1px; diff --git a/components/ui/MarkdownContent/MarkdownContent.module.scss b/components/ui/MarkdownContent/MarkdownContent.module.scss index a36d8a21c093..859941a877f7 100644 --- a/components/ui/MarkdownContent/MarkdownContent.module.scss +++ b/components/ui/MarkdownContent/MarkdownContent.module.scss @@ -14,8 +14,8 @@ h5, h6 { display: inline-block; - margin-top: 10px; - margin-bottom: 10px; + margin-top: 0.5rem; + margin-bottom: 0.5rem; p { margin: 0; @@ -36,8 +36,8 @@ } } & > a[class~="doctocat-link"] { - padding: 8px; - margin-left: -32px; + padding: 0.5rem; + margin-left: -2rem; color: var(--color-fg-muted); &:active, &:focus { diff --git a/components/ui/MarkdownContent/stylesheets/code.scss b/components/ui/MarkdownContent/stylesheets/code.scss index e3b1a7a32f7e..8c440c47c8da 100644 --- a/components/ui/MarkdownContent/stylesheets/code.scss +++ b/components/ui/MarkdownContent/stylesheets/code.scss @@ -1,16 +1,16 @@ .markdownBody { [class~="highlight"] pre, pre { - margin-top: 10px; + margin-top: 0.5rem; } [class~="height-constrained-code-block"] pre { - max-height: 500px; + max-height: 32rem; overflow: auto; } [class~="code-extra"] { - margin-top: 24px; + margin-top: 1.5rem; pre { margin-top: 0 !important; @@ -22,24 +22,24 @@ } } + // on graphql/overview/resource-limitations + pre [class~="redbox"], + pre [class~="greenbox"], + pre [class~="bluebox"] { + color: var(--color-fg-on-emphasis); + padding: 0 0.25rem; + border-radius: 4px; // primer rounded-1 + } + pre [class~="redbox"] { - border: 2px solid var(--color-danger-emphasis); - padding: 2px; - border-radius: 2px; - margin-right: 2px; + background-color: var(--color-danger-emphasis); } pre [class~="greenbox"] { - border: 2px solid var(--color-success-emphasis); - padding: 2px; - border-radius: 2px; - margin-right: 2px; + background-color: var(--color-success-emphasis); } pre [class~="bluebox"] { - border: 2px solid var(--color-accent-emphasis); - padding: 2px; - border-radius: 2px; - margin-right: 2px; + background-color: var(--color-accent-emphasis); } } diff --git a/components/ui/MarkdownContent/stylesheets/lists.scss b/components/ui/MarkdownContent/stylesheets/lists.scss index fdfb43ff6c0d..e4e626eca673 100644 --- a/components/ui/MarkdownContent/stylesheets/lists.scss +++ b/components/ui/MarkdownContent/stylesheets/lists.scss @@ -3,20 +3,20 @@ counter-reset: li; list-style: none; position: relative; - padding-bottom: 10px; + padding-bottom: 0.5rem; padding-left: 0; > li { - padding: 8px 0 8px 40px; + padding: 0.5rem 0 0.5rem 2.5rem; border: 0; position: relative; - margin-bottom: 5px; + margin-bottom: 0.25rem; &:before { - width: 22px; - height: 22px; - font-size: 14px; - margin: 1px 0 0 8px; + width: calc(1.5rem - 2px); + height: calc(1.5rem - 2px); + font-size: calc(1rem - 2px); + margin: 1px 0 0 0.5rem; content: counter(li); counter-increment: li; position: absolute; @@ -46,11 +46,11 @@ } p:not(:first-child) { - margin-top: 15px; + margin-top: 1rem; } [class~="extended-markdown"] { - margin-top: 15px; + margin-top: 1rem; } } @@ -63,8 +63,8 @@ ul ol, ol ol, ol ul { - margin-top: 15px; - margin-bottom: 15px; + margin-top: 1rem; + margin-bottom: 1rem; } } diff --git a/components/ui/MarkdownContent/stylesheets/table.scss b/components/ui/MarkdownContent/stylesheets/table.scss index 0738f4bcac8d..33cc0148b4f1 100644 --- a/components/ui/MarkdownContent/stylesheets/table.scss +++ b/components/ui/MarkdownContent/stylesheets/table.scss @@ -16,7 +16,7 @@ font-size: 85%; padding: 0.2em 0.4em; background-color: var(--color-canvas-subtle); - border-radius: 6px; + border-radius: 6px; // primer rounded-2 } pre > code { @@ -37,8 +37,8 @@ top: 0; background: var(--color-canvas-default); box-shadow: 0 3px 0 0 var(--color-canvas-subtle); - padding: 12px 8px; - border: 0px; + padding: 0.75rem 0.5rem; + border: 0; } th[align="center"] { @@ -55,8 +55,8 @@ } td { - padding: 10px 8px; - border: 0px; + padding: 0.75rem 0.5rem; + border: 0; vertical-align: top; } diff --git a/stylesheets/extended-markdown.scss b/stylesheets/extended-markdown.scss index 7fa97ec00234..81cdd4c15923 100644 --- a/stylesheets/extended-markdown.scss +++ b/stylesheets/extended-markdown.scss @@ -15,7 +15,7 @@ } p:not(:first-child) { - margin-top: 15px; + margin-top: 1rem; } &.note pre code { @@ -24,7 +24,7 @@ &.note pre { background: none; - padding: 10px 10px 10px 0; + padding: 0.5rem 0.5rem 0.5rem 0; margin-bottom: 0; } }