Upgrade Bootstrap from 3.4.1 to 5.3.3

hugovk · Sep 5, 2024 · 06d13a4 · 06d13a4
1 parent 8cf3a56
commit 06d13a4
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 28 deletions.
diff --git a/all.html b/all.html
@@ -2,7 +2,7 @@
 <html lang="en" ng-app="app">
 <head>
     <meta charset="utf-8">
-    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.2/gh-fork-ribbon.min.css" />
     <link rel="icon" href="favicon.ico">
     <link rel="icon" href="3.2/wheel.png">
@@ -22,73 +22,73 @@ <h1 id="drop">Drop Python</h1>
         <div class="row">
             <div class="col-sm-3">
                 <h2 id="2.0"><a href="2.0">Python 2.0</a></h2>
-                <object data="2.0/wheel.svg" type="image/svg+xml" width="190" height="190" class="center-block"></object>
+                <object data="2.0/wheel.svg" type="image/svg+xml" width="190" height="190" class="d-block mx-auto"></object>
             </div>
             <div class="col-sm-3">
                 <h2 id="2.1"><a href="2.1">Python 2.1</a></h2>
-                <object data="2.1/wheel.svg" type="image/svg+xml" width="190" height="190" class="center-block"></object>
+                <object data="2.1/wheel.svg" type="image/svg+xml" width="190" height="190" class="d-block mx-auto"></object>
             </div>
             <div class="col-sm-3">
                 <h2 id="2.2"><a href="2.2">Python 2.2</a></h2>
-                <object data="2.2/wheel.svg" type="image/svg+xml" width="190" height="190" class="center-block"></object>
+                <object data="2.2/wheel.svg" type="image/svg+xml" width="190" height="190" class="d-block mx-auto"></object>
             </div>
             <div class="col-sm-3">
                 <h2 id="2.3"><a href="2.3">Python 2.3</a></h2>
-                <object data="2.3/wheel.svg" type="image/svg+xml" width="190" height="190" class="center-block"></object>
+                <object data="2.3/wheel.svg" type="image/svg+xml" width="190" height="190" class="d-block mx-auto"></object>
             </div>
         </div>
         <div class="row">
             <div class="col-sm-3">
                 <h2 id="2.4"><a href="2.4">Python 2.4</a></h2>
-                <object data="2.4/wheel.svg" type="image/svg+xml" width="190" height="190" class="center-block"></object>
+                <object data="2.4/wheel.svg" type="image/svg+xml" width="190" height="190" class="d-block mx-auto"></object>
             </div>
             <div class="col-sm-3">
                 <h2 id="2.5"><a href="2.5">Python 2.5</a></h2>
-                <object data="2.5/wheel.svg" type="image/svg+xml" width="190" height="190" class="center-block"></object>
+                <object data="2.5/wheel.svg" type="image/svg+xml" width="190" height="190" class="d-block mx-auto"></object>
             </div>
             <div class="col-sm-3">
                 <h2 id="2.6"><a href="2.6">Python 2.6</a></h2>
-                <object data="2.6/wheel.svg" type="image/svg+xml" width="190" height="190" class="center-block"></object>
+                <object data="2.6/wheel.svg" type="image/svg+xml" width="190" height="190" class="d-block mx-auto"></object>
             </div>
             <div class="col-sm-3">
                 <h2 id="2.7"><a href="2.7">Python 2.7</a></h2>
-                <object data="2.7/wheel.svg" type="image/svg+xml" width="190" height="190" class="center-block"></object>
+                <object data="2.7/wheel.svg" type="image/svg+xml" width="190" height="190" class="d-block mx-auto"></object>
             </div>
         </div>
         <div class="row">
             <div class="col-sm-3">
                 <h2 id="3.0"><a href="3.0">Python 3.0</a></h2>
-                <object data="3.0/wheel.svg" type="image/svg+xml" width="190" height="190" class="center-block"></object>
+                <object data="3.0/wheel.svg" type="image/svg+xml" width="190" height="190" class="d-block mx-auto"></object>
             </div>
             <div class="col-sm-3">
                 <h2 id="3.1"><a href="3.1">Python 3.1</a></h2>
-                <object data="3.1/wheel.svg" type="image/svg+xml" width="190" height="190" class="center-block"></object>
+                <object data="3.1/wheel.svg" type="image/svg+xml" width="190" height="190" class="d-block mx-auto"></object>
             </div>
             <div class="col-sm-3">
                 <h2 id="3.2"><a href="3.2">Python 3.2</a></h2>
-                <object data="3.2/wheel.svg" type="image/svg+xml" width="190" height="190" class="center-block"></object>
+                <object data="3.2/wheel.svg" type="image/svg+xml" width="190" height="190" class="d-block mx-auto"></object>
             </div>
             <div class="col-sm-3">
                 <h2 id="3.3"><a href="3.3">Python 3.3</a></h2>
-                <object data="3.3/wheel.svg" type="image/svg+xml" width="190" height="190" class="center-block"></object>
+                <object data="3.3/wheel.svg" type="image/svg+xml" width="190" height="190" class="d-block mx-auto"></object>
             </div>
         </div>
         <div class="row">
             <div class="col-sm-3">
                 <h2 id="3.4"><a href="3.4">Python 3.4</a></h2>
-                <object data="3.4/wheel.svg" type="image/svg+xml" width="190" height="190" class="center-block"></object>
+                <object data="3.4/wheel.svg" type="image/svg+xml" width="190" height="190" class="d-block mx-auto"></object>
             </div>
             <div class="col-sm-3">
                 <h2 id="3.5"><a href="3.5">Python 3.5</a></h2>
-                <object data="3.5/wheel.svg" type="image/svg+xml" width="190" height="190" class="center-block"></object>
+                <object data="3.5/wheel.svg" type="image/svg+xml" width="190" height="190" class="d-block mx-auto"></object>
             </div>
             <div class="col-sm-3">
                 <h2 id="3.6"><a href="3.6">Python 3.6</a></h2>
-                <object data="3.6/wheel.svg" type="image/svg+xml" width="190" height="190" class="center-block"></object>
+                <object data="3.6/wheel.svg" type="image/svg+xml" width="190" height="190" class="d-block mx-auto"></object>
             </div>
             <div class="col-sm-3">
                 <h2 id="3.7"><a href="3.7">Python 3.7</a></h2>
-                <object data="3.7/wheel.svg" type="image/svg+xml" width="190" height="190" class="center-block"></object>
+                <object data="3.7/wheel.svg" type="image/svg+xml" width="190" height="190" class="d-block mx-auto"></object>
             </div>
         </div>
         <div class="row">

diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en" ng-app="app">
 <head>
     <meta charset="utf-8">
-    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.2/gh-fork-ribbon.min.css" />
     <link rel="icon" href="favicon.ico">
     <link rel="icon" href="3.3/wheel.png">
@@ -22,21 +22,21 @@ <h1 id="drop">Drop Python</h1>
     <div class="row">
         <div class="col-sm-6">
             <h2 id="2.6"><a href="2.6">Python 2.6</a></h2>
-            <object data="2.6/wheel.svg" type="image/svg+xml" width="380" height="380" class="center-block"></object>
+            <object data="2.6/wheel.svg" type="image/svg+xml" width="380" height="380" class="d-block mx-auto"></object>
         </div>
         <div class="col-sm-6">
             <h2 id="2.7"><a href="2.7">Python 2.7</a></h2>
-            <object data="2.7/wheel.svg" type="image/svg+xml" width="380" height="380" class="center-block"></object>
+            <object data="2.7/wheel.svg" type="image/svg+xml" width="380" height="380" class="d-block mx-auto"></object>
         </div>
     </div>
     <div class="row">
         <div class="col-sm-6">
             <h2 id="3.5"><a href="3.5">Python 3.5</a></h2>
-            <object data="3.5/wheel.svg" type="image/svg+xml" width="380" height="380" class="center-block"></object>
+            <object data="3.5/wheel.svg" type="image/svg+xml" width="380" height="380" class="d-block mx-auto"></object>
         </div>
         <div class="col-sm-6">
             <h2 id="3.6"><a href="3.6">Python 3.6</a></h2>
-            <object data="3.6/wheel.svg" type="image/svg+xml" width="380" height="380" class="center-block"></object>
+            <object data="3.6/wheel.svg" type="image/svg+xml" width="380" height="380" class="d-block mx-auto"></object>
         </div>
     </div>
     <div class="row">
@@ -48,7 +48,7 @@ <h2 id="what">What is this about?</h2>
             <p>This site shows the top 360 most-downloaded packages on <a href="https://pypi.org/">PyPI</a> (<a href="https://hugovk.github.io/top-pypi-packages/">source</a>) showing which have dropped support for a Python version.</p>
             <ul>
                 <li><span class="text-success">Green</span> packages have dropped support,</li>
-                <li><span class="text-muted">White</span> packages may still support it.</li>
+                <li><span class="text-default">White</span> packages may still support it.</li>
             </ul>
             <p>Packages that are backports (for example, enum34) or known to be deprecated are not included (for example, distribute). If your package is incorrectly listed, please <a href="https://github.com/hugovk/drop-python/issues/">create a ticket</a>.</p>
             <p>See them <a href="all.html">all</a>.</p>

diff --git a/style.css b/style.css
@@ -44,6 +44,10 @@ footer {
     box-sizing: content-box;
 }
 
+.text-default {
+    color: #777;
+}
+
 @media (prefers-color-scheme: dark) {
   body {
     color: #ccc;

diff --git a/template/index.html b/template/index.html
@@ -2,7 +2,7 @@
 <html lang="en" ng-app="app">
 <head>
     <meta charset="utf-8">
-    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.2/gh-fork-ribbon.min.css" />
     <link rel="icon" href="favicon.ico">
     <link rel="icon" href="wheel.png">
@@ -21,7 +21,7 @@
         <div class="row">
             <div class="col-sm-6">
             <h1 id="drop"><a href="..">Drop Python</a> $template_version</h1>
-                <object data="wheel.svg" type="image/svg+xml" width="380" height="380" class="center-block"></object>
+                <object data="wheel.svg" type="image/svg+xml" width="380" height="380" class="d-block mx-auto"></object>
                 <h2 id="what">What is this about?</h2>
                 <p>Python $template_version reached the <a href="https://en.wikipedia.org/wiki/History_of_Python#Table_of_versions">end of its life on $template_eol</a>. It's about time to drop support for Python $template_version.</p>
                 <h3 id="reasons">Reasons for dropping</h3>
@@ -32,7 +32,7 @@ <h2 id="about-list">What is this list?</h2>
                 <p>This site shows the top 360 most-downloaded packages on <a href="https://pypi.org/">PyPI</a> (<a href="https://hugovk.github.io/top-pypi-packages/">source</a>) showing which have dropped support for Python $template_version.</p>
                 <ul>
                     <li><span class="text-success">Green</span> packages have dropped Python $template_version,</li>
-                    <li><span class="text-muted">White</span> packages may still support Python $template_version.</li>
+                    <li><span class="text-default">White</span> packages may still support Python $template_version.</li>
                 </ul>
                 <p>Packages that are backports (for example, enum34) or known to be deprecated are not included (for example, distribute). If your package is incorrectly listed, please <a href="https://github.com/hugovk/drop-python/issues/">create a ticket</a>.</p>
                 <p>This is not an official website, just a nice visual way to measure progress. To see the authoritative guide on wheels and other aspects of python packaging, see the <a href="https://packaging.python.org">Python Packaging User Guide</a>.</p>

diff --git a/wheel.css b/wheel.css
@@ -1,7 +1,7 @@
 .success {
-  stroke: #4CAE4C;
+  stroke: #198754;
   stroke-width: 1;
-  fill: #5CB85C;
+  fill: #198754;
 }
 
 .default {