Begin accounting for missing styles for content

dart-lang · Jan 17, 2025 · 2542768 · 2542768
1 parent 82aa089
commit 2542768
Show file tree

Hide file tree

Showing 10 changed files with 69 additions and 37 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;