From 254276865a97e0a0497c36179ad2d0089c1ea5d1 Mon Sep 17 00:00:00 2001 From: Parker Lougheed Date: Fri, 17 Jan 2025 17:31:54 -0600 Subject: [PATCH] Begin accounting for missing styles for content --- src/_sass/_overwrites.scss | 11 +--------- src/_sass/_site.scss | 24 ++++++++++++--------- src/_sass/components/_banner.scss | 4 ++-- src/_sass/components/_card.scss | 9 ++++---- src/_sass/components/_code.scss | 10 +++++++-- src/_sass/components/_linter-rules.scss | 3 ++- src/_sass/components/_toc.scss | 5 +++-- src/_sass/core/_base.scss | 9 ++++---- src/_sass/core/_reset.scss | 28 +++++++++++++++++++++++++ src/_sass/core/_variables.scss | 3 +-- 10 files changed, 69 insertions(+), 37 deletions(-) create mode 100644 src/_sass/core/_reset.scss diff --git a/src/_sass/_overwrites.scss b/src/_sass/_overwrites.scss index a7f961364f..34bb6ef9a6 100644 --- a/src/_sass/_overwrites.scss +++ b/src/_sass/_overwrites.scss @@ -3,10 +3,6 @@ @use 'core/variables' as *; @use 'core/bootstrap'; -b, strong { - font-weight: bold; -} - /* Effective Dart TOC */ .effective_dart--summary_column { @@ -43,15 +39,10 @@ b, strong { /* Show borders around notes and code blocks */ .alert, pre { - border: 1px solid black; + border: 1px solid $dash-dark-black; } } -/* Overwrite bootstrap: don't wrap code */ -pre code { - white-space: pre; -} - /* Effective Dart linter rules */ .linter-rule { font-size: smaller; diff --git a/src/_sass/_site.scss b/src/_sass/_site.scss index 284bda065d..a0c6ead933 100644 --- a/src/_sass/_site.scss +++ b/src/_sass/_site.scss @@ -1,3 +1,7 @@ +// Must be imported first to ensure that +// the reset is applied before any other styles are applied. +@use 'core/reset'; + @use 'core/variables' as *; @use 'core/colors'; @use 'core/mixins' as *; @@ -49,7 +53,7 @@ max-width: 960px; margin-left: auto; margin-right: auto; - padding-top: $top-content-padding; + padding: $top-content-padding 1.5rem 1.5rem; } @media(min-width: 1024px) { @@ -198,11 +202,12 @@ display: inline-block; padding: 0 6px; font-size: $site-font-size-header; - font-weight: 400; + font-weight: 500; font-family: $site-font-family-alt; &:hover, &:active { color: $site-color-card-link; + text-decoration: none; } } @@ -268,7 +273,7 @@ main .content { h6 { // Push # link targets clear of page header. &[id] { - scroll-margin: 60px; + scroll-margin: 4rem; } // Let the wrapper set the bottom margin. @@ -277,7 +282,7 @@ main .content { // Push # link targets clear of page header. a[id] { - scroll-margin: 60px; + scroll-margin: 4rem; } .header-wrapper { @@ -287,6 +292,7 @@ main .content { align-items: center; .heading-link { + border-radius: 0; margin-left: 0.4rem; font-size: 1.3rem; line-height: 1; @@ -321,11 +327,6 @@ main .content { Utility Classes ----------------------------------------- */ -.content { - position: relative; - padding: $content-padding; -} - .button { padding: 5px 10px; color: $blue; @@ -449,6 +450,8 @@ thead:has(th:empty) { .table-wrapper { overflow-x: auto; + margin-block-start: 1rem; + margin-block-end: 1rem; } .alert { @@ -556,7 +559,8 @@ thead:has(th:empty) { nav.breadcrumbs { align-items: center; - margin-bottom: 1rem; + margin-block-start: 1rem; + margin-block-end: 1rem; } ol.breadcrumb-list { diff --git a/src/_sass/components/_banner.scss b/src/_sass/components/_banner.scss index 33a31ba70f..f54ad7decd 100644 --- a/src/_sass/components/_banner.scss +++ b/src/_sass/components/_banner.scss @@ -13,14 +13,14 @@ color: white; - margin-bottom: 0; + margin: 0; padding-left: 1em; padding-right: 1em; a { color: $site-color-card-link; - &:hover, &:focus, &:active { + &:active { color: darken($site-color-card-link, 20%); } } diff --git a/src/_sass/components/_card.scss b/src/_sass/components/_card.scss index f3994897ca..4455b5d3ed 100644 --- a/src/_sass/components/_card.scss +++ b/src/_sass/components/_card.scss @@ -52,6 +52,9 @@ color: var(--card-text-color, $site-color-body); p { + margin: 0; + margin-block-end: 0.75rem; + code { font-size: 0.95em; background-color: rgba(0, 0, 0, .05); @@ -69,12 +72,10 @@ } a.card { + text-decoration: none; + .card-header { --card-title-color: #1967D2; - - .card-title { - font-weight: 400; - } } &:hover { diff --git a/src/_sass/components/_code.scss b/src/_sass/components/_code.scss index 5f3c26f2b3..06846cac8d 100644 --- a/src/_sass/components/_code.scss +++ b/src/_sass/components/_code.scss @@ -22,6 +22,10 @@ pre { font-weight: 400; padding: 1.25rem; + code { + white-space: pre; + } + a { font-family: inherit; font-weight: inherit; @@ -149,7 +153,8 @@ pre { } .code-block-wrapper { - margin-bottom: 1rem; + margin-block-start: 1rem; + margin-block-end: 1rem; border: 1px solid $flutter-color-grey-500; .code-block-header { @@ -201,7 +206,8 @@ pre { // Border and resizability for dartpad iframe[src^="https://dartpad"]:not(#try-dart-pad) { border: 1px solid #ccc; - margin-bottom: 1rem; + margin-block-start: 1rem; + margin-block-end: 1rem; min-height: 400px; resize: vertical; width: 100%; diff --git a/src/_sass/components/_linter-rules.scss b/src/_sass/components/_linter-rules.scss index 9ed67a79e0..28a4ef1be1 100644 --- a/src/_sass/components/_linter-rules.scss +++ b/src/_sass/components/_linter-rules.scss @@ -32,7 +32,8 @@ body.linter-rules { flex-wrap: wrap; justify-content: center; gap: 0.75rem; - margin-bottom: 1rem; + margin-block-start: 1rem; + margin-block-end: 1rem; &.hidden { display: none; diff --git a/src/_sass/components/_toc.scss b/src/_sass/components/_toc.scss index aa94959447..5a87be2c6e 100644 --- a/src/_sass/components/_toc.scss +++ b/src/_sass/components/_toc.scss @@ -17,7 +17,7 @@ } #site-toc--side { - padding: $top-content-padding 20px $content-padding 28px; + padding: $top-content-padding 20px 32px 28px; @include sidenav-top-position; display: none; @@ -75,7 +75,8 @@ #site-toc--inline { background: #f5f5f7; padding: 1rem 1.5rem; - margin-bottom: 1rem; + margin-block-start: 1rem; + margin-block-end: 1rem; @include bootstrap.media-breakpoint-up(xl) { display: none; diff --git a/src/_sass/core/_base.scss b/src/_sass/core/_base.scss index 4bdcdb869f..fd5146a246 100644 --- a/src/_sass/core/_base.scss +++ b/src/_sass/core/_base.scss @@ -12,9 +12,8 @@ body { font-size: $font-size-base; font-weight: 400; color: $site-color-body; - margin: 0; - padding: 0; line-height: 1.5; + -webkit-font-smoothing: antialiased; } section { @@ -25,6 +24,7 @@ h1, h2, h3, h4, h5, h6 { font-family: $site-font-family-gsans; font-weight: 400; color: $site-color-body; + line-height: 1.2; } h1, .h1 { @@ -85,7 +85,7 @@ button { } a { - border-radius: 0.25rem; + border-radius: 0.2rem; &:hover { text-decoration: underline; @@ -115,7 +115,8 @@ blockquote { } details { - margin-bottom: 0.75rem; + margin-block-start: 1rem; + margin-block-end: 1rem; > summary { font-weight: 500; diff --git a/src/_sass/core/_reset.scss b/src/_sass/core/_reset.scss new file mode 100644 index 0000000000..093a3b0daa --- /dev/null +++ b/src/_sass/core/_reset.scss @@ -0,0 +1,28 @@ +@use '../core/variables' as *; + +*, ::before, ::after { + box-sizing: border-box; + border-width: 0; +} + +html, body { + padding: 0; + margin: 0; +} + +*:focus-visible { + outline: 2px solid $site-color-primary; +} + +button, input, select, textarea { + font-family: inherit; + font-feature-settings: inherit; + font-variation-settings: inherit; + font-size: 100%; + font-weight: inherit; + line-height: inherit; + letter-spacing: inherit; + color: inherit; + margin: 0; + padding: 0; +} diff --git a/src/_sass/core/_variables.scss b/src/_sass/core/_variables.scss index 5a880c8b58..d3fa39160d 100644 --- a/src/_sass/core/_variables.scss +++ b/src/_sass/core/_variables.scss @@ -74,8 +74,7 @@ $font-size-small: 14px; // Spacing $live-content-width: 1280px; -$content-padding: 32px; -$top-content-padding: 40px; +$top-content-padding: 2rem; // Fonts $site-font-family-gsans: 'Google Sans', 'Roboto', sans-serif;