Complete removal and replacement of bootstrap (#6357)

In replacing some of the used bootstrap styles and layouts, this PR also
updates the styles of a few affected components to improve visual
accessibility.

Closes #4164 🚀

Author: parlough

package.json

@@ -18,9 +18,6 @@
     "pnpm": ">=9.12.3"
   },
   "packageManager": "pnpm@9.15.2",
-  "dependencies": {
-    "bootstrap-scss": "^4.6.2"
-  },
   "devDependencies": {
     "@11ty/eleventy": "^3.0.0",
     "@types/hast": "^3.0.4",

pnpm-lock.yaml

@@ -65,7 +65,7 @@ function _registerAside(markdown: MarkdownIt, id: string, defaultTitle: string |
         const title = parsedArgs?.[1] ?? defaultTitle ?? '';
         return `<aside class="alert ${style}">
 <div class="alert-header">
-${icon !== null ? `<i class="material-symbols" aria-hidden="true">${icon}</i>` : ''}
+${icon !== null ? `<span class="material-symbols" aria-hidden="true">${icon}</span>` : ''}
 <span>${title ?? ''}</span>
 </div>
 <div class="alert-content">

src/_11ty/plugins/markdown.ts

@@ -1,5 +1,5 @@
 <div class="banner">
-  <p class="banner__text">
+  <p>
     Dart 3.6 is here! Read the
     <a href="https://medium.com/dartlang/announcing-dart-3-6-778dd7a80983" target="_blank">blog post</a>
     to learn about new features in pub and the language.

src/_includes/banner.html

@@ -4,6 +4,6 @@
       enhance the quality of its services and to analyze traffic.
       <a href="https://policies.google.com/technologies/cookies" target="_blank" rel="noopener">Learn more</a>.
     </p>
-    <button id="cookie-consent" class="btn btn-primary">OK, got it</button>
+    <button id="cookie-consent" class="filled-button">OK, got it</button>
   </div>
 </section>

src/_includes/cookie-notice.html

@@ -78,17 +78,12 @@
           integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw=="
           crossorigin="anonymous"
           referrerpolicy="no-referrer"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.min.js"
-          integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+"
-          crossorigin="anonymous"
-          referrerpolicy="no-referrer"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/3.0.5/js.cookie.min.js"
           integrity="sha512-nlp9/l96/EpjYBx7EP7pGASVXNe80hGhYAUrjeXnu/fyF5Py0/RXav4BBNs7n5Hx1WFhOEOWSAVjGeC3oKxDVQ=="
           crossorigin="anonymous"
           referrerpolicy="no-referrer"></script>
-  
+
   <script src="{{ '/assets/js/os-tabs.js' | append: cache_bust }}"></script>
-  <script src="{{ '/assets/js/utilities.js' | append: cache_bust }}"></script>
   <script src="{{ '/assets/js/main.js' | append: cache_bust }}"></script>
 
   {% if js -%}

src/_includes/head.html

@@ -1,3 +1,4 @@
+{% if site.show_banner -%} {% render 'banner.html' %} {%- endif -%}
 <header id="page-header" class="site-header">
   {% include 'navigation-main.html' %}
   {% if obsolete -%}
@@ -10,4 +11,3 @@ <h4 class="text-center">
   {% endif -%}
   {% endif -%}
 </header>
-{% if site.show_banner -%} {% render 'banner.html' %} {%- endif -%}

src/_includes/page-header.html

@@ -1,21 +1,22 @@
-@use 'core/bootstrap';
-
 .book-img-with-details {
   margin-bottom: 1.5rem;
 
   img {
-    @include bootstrap.media-breakpoint-down(sm) {
-      max-width: 200px;
-    }
     width: 100%;
+    max-width: 200px;
+
+    @media (min-width: 768px) {
+      max-width: unset;
+    }
   }
 
   .details {
     .title {
-      @include bootstrap.media-breakpoint-up(sm) {
+      margin-bottom: 0;
+
+      @media (min-width: 768px) {
         margin-top: 0;
       }
-      margin-bottom: 0;
     }
   }
 }

src/_sass/_books.scss

@@ -1,5 +1,4 @@
 @use 'core/variables' as *;
-@use 'core/bootstrap';
 
 // Homepage styles