Skip to content

Adjust standalone release chart CSS #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Dec 3, 2025
Merged

Adjust standalone release chart CSS #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d36cf00
Adjust standalone release chart CSS
encukou Dec 1, 2025
2f0db0b
Draw outlines and text separately
encukou Dec 2, 2025
29c0602
Set background color explicitly
encukou Dec 2, 2025
eabf2f0
Fix
encukou Dec 2, 2025
fb4e66e
Avoid :root
encukou Dec 2, 2025
4bdcd0d
Responsive colours for years
encukou Dec 2, 2025
53a698c
Light only; add background
encukou Dec 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 0 additions & 28 deletions _static/devguide_overrides.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,34 +6,6 @@
height: 110px;
}

/* Release cycle chart */
.release-cycle-chart .release-cycle-year-line {
stroke: var(--color-foreground-primary);
}

.release-cycle-chart .release-cycle-year-text {
fill: var(--color-foreground-primary);
}

.release-cycle-chart .release-cycle-today-line {
stroke: var(--color-brand-primary);
}

.release-cycle-chart .release-cycle-row-shade {
fill: var(--color-background-item);
}

.release-cycle-chart .release-cycle-version-label {
fill: var(--color-foreground-primary);
}

.release-cycle-chart .release-cycle-blob-label.release-cycle-status-end-of-life,
.release-cycle-chart .release-cycle-blob-label.release-cycle-status-prerelease,
.release-cycle-chart .release-cycle-blob-label.release-cycle-status-feature {
/* and FG when it's not in a blob */
fill: var(--color-foreground-primary);
}

.good pre {
border-left: 3px solid rgba(74, 182, 93, 1);
}
Expand Down
220 changes: 121 additions & 99 deletions _tools/release_cycle_template.svg.jinja
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,93 +7,99 @@
<style>
/* Embedded styles for standalone viewing */
.release-cycle-chart {
font-family: Arial, sans-serif;
color-scheme: light;

{# Copy vars from Furo theme if present #}
{% for varname, default in {
'color-foreground-primary': 'light-dark(#333, #fff)',
'color-background-primary': 'light-dark(#fff, #333)',
'color-brand-primary': '#4B8BBE',
'color-background-item': '#e0e0e0',
}.items() %}
--svg-{{varname}}: var(--{{varname}}, {{default}});
{% endfor %}

font-family: var(
--font-stack,
-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji);
width: 100%;

--blob-border-width: 1.6px;
}
.background {
fill: var(--svg-color-background-primary);
}
.release-cycle-year-line {
stroke: #333;
stroke: var(--svg-color-foreground-primary);
stroke-width: 0.8px;
opacity: 75%;
}
.release-cycle-year-text {
fill: #333;
}
.release-cycle-today-line {
stroke: #4B8BBE;
stroke-width: 1.6px;
stroke: var(--svg-color-brand-primary);
stroke-width: var(--blob-border-width);
}
.release-cycle-row-shade {
fill: #e0e0e0;
fill: var(--svg-color-background-item);
opacity: 50%;
}
.release-cycle-version-label {
fill: #333;
}
.release-cycle-blob {
stroke-width: 1.6px;
stroke-width: var(--blob-border-width);
}
.release-cycle-blob-label {
/* white looks good on both light and dark */
fill: white;
.text-main {
fill: var(--svg-color-foreground-primary);

/* use specific colours on known backgrounds */
&amp;.release-cycle-status-security,
&amp;.release-cycle-status-bugfix {
fill: black;
}
}
.release-cycle-blob-label.release-cycle-status-security,
.release-cycle-blob-label.release-cycle-status-bugfix {
/* but use black to improve contrast for lighter backgrounds */
fill: black;
.text-outline {
/* an outline of the background color, in case it's not set
correctly */
fill: transparent;
stroke: var(--svg-color-background-primary);
stroke-width: var(--blob-border-width);

/* use specific colours on known backgrounds */
&amp;.release-cycle-status-security,
&amp;.release-cycle-status-bugfix {
stroke: var(--status-bg-color);
}
}
.release-cycle-blob-label.release-cycle-status-end-of-life,
.release-cycle-blob-label.release-cycle-status-prerelease,
.release-cycle-blob-label.release-cycle-status-feature {
fill: #333;
.release-cycle-status-end-of-life {
--status-bg-color: #DD2200;
--status-border-color: #FF8888;
}
.release-cycle-status-end-of-life .release-cycle-blob,
.release-cycle-blob.release-cycle-status-end-of-life {
fill: #DD2200;
stroke: #FF8888;
.release-cycle-status-security {
--status-bg-color: #FFDD44;
--status-border-color: #FF8800;
}
.release-cycle-status-security .release-cycle-blob,
.release-cycle-blob.release-cycle-status-security {
fill: #FFDD44;
stroke: transparent;
.release-cycle-status-bugfix {
--status-bg-color: #00DD22;
--status-border-color: #008844;
}
.release-cycle-status-bugfix .release-cycle-blob,
.release-cycle-blob.release-cycle-status-bugfix {
fill: #00DD22;
stroke: transparent;
.release-cycle-status-prerelease {
--status-bg-color: teal;
--status-border-color: darkgreen;
}
.release-cycle-status-prerelease .release-cycle-blob,
.release-cycle-blob.release-cycle-status-prerelease {
fill: teal;
stroke: transparent;
.release-cycle-status-feature {
--status-bg-color: #2222EE;
--status-border-color: #008888;
}
.release-cycle-status-feature .release-cycle-blob,
.release-cycle-blob.release-cycle-status-feature {
fill: #2222EE;
.release-cycle-blob {
fill: var(--status-bg-color);
stroke: transparent;
}
.release-cycle-blob-full.release-cycle-status-end-of-life {
fill: #DD2200;
stroke: #FF8888;
}
.release-cycle-border.release-cycle-status-security {
fill: transparent;
stroke: #FF8800;
stroke-width: 1.6px;
}
.release-cycle-border.release-cycle-status-bugfix {
fill: transparent;
stroke: #008844;
stroke-width: 1.6px;
.release-cycle-blob-full {
fill: var(--status-bg-color);
stroke: var(--status-border-color);
}
.release-cycle-border.release-cycle-status-prerelease {
.release-cycle-border {
fill: transparent;
stroke: darkgreen;
stroke-width: 1.6px;
}
.release-cycle-border.release-cycle-status-feature {
fill: transparent;
stroke: #008888;
stroke-width: 1.6px;
stroke: var(--status-border-color);
stroke-width: var(--blob-border-width);
}
</style>
<defs>
Expand All @@ -103,9 +109,16 @@
</linearGradient>
</defs>

<rect
class="background"
x="0"
y="0"
width="{{ diagram_width }}"
height="{{ diagram_height }}"
/>

{% for version in versions %}
{% set y = version.y * line_height %}

{% if version.y % 2 %}
<!-- Row shading -->
<rect
Expand All @@ -120,7 +133,7 @@

{% for year in years %}
<text
class="release-cycle-year-text"
class="release-cycle-year-text text-main"
x="{{ (year_to_x(year) + year_to_x(year + 1)) / 2 }}"
y="{{ diagram_height - line_height }}"
font-size="{{ SCALE * 0.75 }}"
Expand Down Expand Up @@ -166,16 +179,14 @@
</mask>

{% for version in versions %}
<!-- Colourful blob with a label. -->
<!-- Colourful blob. -->

{% set top_y = version.y * line_height - 1 * SCALE %}
{% set height = 1.25 * SCALE %}
{% set start_x = date_to_x(version.first_release_date) %}
{% set end_x = date_to_x(version.end_of_life_date) %}
{% set radius = 0.25 * SCALE %}

{% set small_text_y = version.y * line_height - 0.1 * SCALE %}

<!-- bugfix/security blobs need to be split between the two phases.
Draw the rectangle with two path elements instead.
Thanks Claude.ai for the initial conversion.
Expand Down Expand Up @@ -243,47 +254,58 @@
mask="url(#release-cycle-mask-{{ id_key }})"
/>
{% endif %}
{% endfor %}

<!-- A line for today -->
<line
class="release-cycle-today-line"
x1="{{ date_to_x(today) }}"
x2="{{ date_to_x(today) }}"
y1="0"
y2="{{ diagram_height - line_height }}"
font-size="{{ SCALE }}"
/>

{% for version in versions %}
<!-- Label for colourful blob -->

{% set start_x = date_to_x(version.first_release_date) %}
{% set end_x = date_to_x(version.end_of_life_date) %}
{% set middle_x = ([end_x, date_to_x(version.start_security_date)]|min) %}
{% set small_text_y = version.y * line_height - 0.1 * SCALE %}

<!-- Add text before/after/inside the blob -->
<text
class="release-cycle-blob-label release-cycle-status-{{ version.status }}"
font-size="{{ SCALE * 0.75 }}"
y="{{ small_text_y }}"
{% if version.status == "bugfix" %}
x="{{ (start_x + middle_x) / 2 }}"
text-anchor="middle"
{% elif version.status == "security" %}
x="{{ (middle_x + end_x) / 2 }}"
text-anchor="middle"
{% elif version.status == "end-of-life" %}
x="{{ end_x + (0.25 * SCALE) }}"
text-anchor="start"
{% else %}
x="{{ start_x - (0.25 * SCALE) }}"
text-anchor="end"
{% endif %}
>
{{ version.status }}
</text>
{% for cls in ('text-outline', 'text-main') %}
<text
class="release-cycle-blob-label {{cls}} release-cycle-status-{{ version.status }}"
font-size="{{ SCALE * 0.75 }}"
y="{{ small_text_y }}"
{% if version.status == "bugfix" %}
x="{{ (start_x + middle_x) / 2 }}"
text-anchor="middle"
{% elif version.status == "security" %}
x="{{ (middle_x + end_x) / 2 }}"
text-anchor="middle"
{% elif version.status == "end-of-life" %}
x="{{ end_x + (0.25 * SCALE) }}"
text-anchor="start"
{% else %}
x="{{ start_x - (0.25 * SCALE) }}"
text-anchor="end"
{% endif %}
>
{{ version.status }}
</text>
{% endfor %}

<!-- Legend on the left -->
<text
class="release-cycle-version-label"
class="release-cycle-version-label text-main"
x="{{ 0.5 * SCALE }}"
y="{{ version.y * line_height }}"
font-size="{{ SCALE }}"
>
Python {{ version.key }}
</text>
{% endfor %}

<!-- A line for today -->
<line
class="release-cycle-today-line"
x1="{{ date_to_x(today) }}"
x2="{{ date_to_x(today) }}"
y1="0"
y2="{{ diagram_height - line_height }}"
font-size="{{ SCALE }}"
/>
</svg>
Loading