Show release cycle charts on downloads page (#2837)

hugovk · web-flow · commit 7be9287bdb03 · 2026-01-02T12:07:11.000-06:00
diff --git a/static/sass/style.css b/static/sass/style.css
@@ -2589,6 +2589,13 @@ p.quote-by-organization {
   font-size: 0.875em; }
 .active-release-list-widget .list-row-container {
   margin-bottom: .5em; }
+.active-release-list-widget .release-cycle-chart img {
+  display: block;
+  margin: 0 auto;
+  width: 80%; }
+  @media screen and (max-width: 860px) {
+    .active-release-list-widget .release-cycle-chart img {
+      width: 100%; } }
 
 .download-list-widget {
   /*modernizr*/ }
diff --git a/static/sass/style.scss b/static/sass/style.scss
@@ -1696,6 +1696,14 @@ $colors: $blue, $psf, $yellow, $green, $purple, $red;
 
     .list-row-container { margin-bottom: .5em; }
 
+    .release-cycle-chart img {
+        display: block;
+        margin: 0 auto;
+        width: 80%;
+        @media screen and (max-width: 860px) {
+            width: 100%;
+        }
+    }
 }
 
 .download-list-widget {
diff --git a/templates/downloads/index.html b/templates/downloads/index.html
@@ -53,6 +53,8 @@ <h1 class="call-to-action">Download the latest version of Python</h1>
                     <h2 class="widget-title">Active Python releases</h2>
                     <p class="success-quote"><a href="https://devguide.python.org/versions/#versions">For more information visit the Python Developer's Guide</a>.</p>
 
+                    <p class="release-cycle-chart"><img src="https://devguide.python.org/_static/release-cycle.svg" alt="Python release cycle"></p>
+
                     {% box 'downloads-active-releases' %}
                 </div>
 
@@ -89,9 +91,9 @@ <h2 class="widget-title">Looking for a specific release?</h2>
                     </div>
                 </div>
 
-        		<div class="row">
+                <div class="row">
 
-        		    <div class="small-widget download-widget1">
+                    <div class="small-widget download-widget1">
                         {% box 'download-widget1' %}
 
                     </div>
@@ -101,7 +103,7 @@ <h2 class="widget-title">Looking for a specific release?</h2>
 
                     </div>
 
-        		    <div class="small-widget download-widget3">
+                    <div class="small-widget download-widget3">
                         {% box 'download-widget3' %}
 
                     </div>
