Simplify styles used on Effective Dart pages (#6352)

This PR eliminates the usages of bootstrap by styles added for Effective
Dart. Also completes some nearby/related cleanup. No (large) functional
change.

Contributes to #4164

Author: parlough

src/_sass/_overwrites.scss

@@ -1,7 +1,6 @@
 @use 'sass:color';
 
 @use 'core/variables' as *;
-@use 'core/bootstrap';
 
 /* Add space between definitions. */
 dd {
@@ -28,16 +27,6 @@ a {
   color: white;
 }
 
-/* Effective Dart TOC */
-
-.effective_dart--summary_column {
-  @include bootstrap.media-breakpoint-up(md) {
-    width: 50%;
-    float: left;
-    padding-right: 5%;
-  }
-}
-
 @media print {
   /* Don't display navigation aids when printing */
   #page-header, #sidenav, #subnav, #page-footer, .banner,
@@ -72,9 +61,3 @@ a {
 pre code {
   white-space: pre;
 }
-
-/* Effective Dart linter rules */
-.linter-rule {
-  font-size: smaller;
-  font-style: italic;
-}

src/_sass/_site.scss

@@ -4,6 +4,7 @@
 
 @use 'core/bootstrap';
 @use 'core/base';
+@use 'core/utils';
 
 @use 'components/banner';
 @use 'components/card';
@@ -387,6 +388,13 @@ main .content {
   }
 }
 
+// Callouts for related lints in Effective Dart guidelines.
+.linter-rule {
+  margin-block-start: -0.375rem;
+  font-size: 0.9em;
+  font-style: italic;
+}
+
 .list-image {
   width: 48px;
   margin: 0.25rem;

src/_sass/core/_utils.scss

@@ -0,0 +1,7 @@
+.side-by-side {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
+  column-gap: 2rem;
+  row-gap: 0;
+  justify-content: center;
+}

src/content/effective-dart/_toc.md

@@ -7,8 +7,8 @@ the project:
 ./dash_site effective-dart
 ```
 {% endcomment %}
-    
-<div class='effective_dart--summary_column'>
+
+<div class="side-by-side"><div>
 
 ### Style
 
@@ -42,7 +42,7 @@ the project:
 * <a href='/effective-dart/style#do-use-curly-braces-for-all-flow-control-statements'>DO use curly braces for all flow control statements.</a>
 
 </div>
-<div class='effective_dart--summary_column'>
+<div>
 
 
 ### Documentation
@@ -85,8 +85,7 @@ the project:
 * <a href='/effective-dart/documentation#prefer-using-this-instead-of-the-to-refer-to-a-members-instance'>PREFER using &quot;this&quot; instead of &quot;the&quot; to refer to a member's instance.</a>
 
 </div>
-<div style='clear:both'></div>
-<div class='effective_dart--summary_column'>
+<div>
 
 
 ### Usage
@@ -166,7 +165,7 @@ the project:
 * <a href='/effective-dart/usage#do-test-for-futuret-when-disambiguating-a-futureort-whose-type-argument-could-be-object'>DO test for <code>Future&lt;T&gt;</code> when disambiguating a <code>FutureOr&lt;T&gt;</code> whose type argument could be <code>Object</code>.</a>
 
 </div>
-<div class='effective_dart--summary_column'>
+<div>
 
 
 ### Design
@@ -258,4 +257,4 @@ the project:
 * <a href='/effective-dart/design#dont-make-the-parameter-to-nullable'>DON'T make the parameter to <code>==</code> nullable.</a>
 
 </div>
-<div style='clear:both'></div>
+</div>

tool/dart_site/lib/src/commands/generate_effective_dart_toc.dart

@@ -78,27 +78,20 @@ the project:
 ./dash_site effective-dart
 ```
 {% endcomment %}
-    ''');
+''');
 
-  newOutput.writeln(
-    r"<div class='effective_dart--summary_column'>",
-  );
+  newOutput.writeln(r'<div class="side-by-side"><div>');
 
   for (var sectionIndex = 0; sectionIndex < sections.length; sectionIndex++) {
     final section = sections[sectionIndex];
     if (sectionIndex > 0) {
-      if (sectionIndex.isEven) {
-        newOutput.writeln("<div style='clear:both'></div>");
-      }
-      newOutput.writeln(
-        "<div class='effective_dart--summary_column'>\n",
-      );
+      newOutput.writeln('<div>\n');
     }
     _writeSection(newOutput, section);
     newOutput.writeln('\n</div>');
   }
 
-  newOutput.writeln("<div style='clear:both'></div>");
+  newOutput.writeln('</div>');
 
   final tocFile = File(path.join(dirPath, '_toc.md'));
   try {