<p dir="auto">This is related to <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2222900604" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/4645" data-hovercard-type="pull_request" data-hovercard-url="/openstreetmap/openstreetmap-website/pull/4645/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/pull/4645">#4645</a> where I wanted to make the background of one element to match exactly the heading background in order to make other element below it invisible. Then I discovered that the heading background color is not a standard Bootstrap color and therefore I'd have to do more custom css if I wanted to reproduce this color.</p>
<p dir="auto">Why not pick some standard color for the heading background? One advantage for it can be seen here: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="473706005" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/2332" data-hovercard-type="issue" data-hovercard-url="/openstreetmap/openstreetmap-website/issues/2332/hovercard?comment_id=1728044333&comment_type=issue_comment" href="https://github.com/openstreetmap/openstreetmap-website/issues/2332#issuecomment-1728044333">#2332 (comment)</a>. If dark mode is enabled, the current color doesn't match the theme and you'd have to come up with another custom background color for heading sections. Standard colors have dark mode versions predefined.</p>
<p dir="auto">Which <a href="https://getbootstrap.com/docs/5.3/utilities/background/#background-color" rel="nofollow">standard color</a> is it better to use? The closest one seems to be <code class="notranslate">bg-body-secondary</code> but I'm using here <code class="notranslate">bg-body-tertiary</code> which is noticeably lighter. That's because there's another problem with the current color which becomes worse with <code class="notranslate">bg-body-secondary</code>.</p>
<p dir="auto">Sometimes we display tabs over the heading background. Those tabs have a border when hovered. However the color of that border is very close to the background color, making it difficult to see it:<br>
<a href="https://github.com/openstreetmap/openstreetmap-website/assets/4158490/91cbdf85-b695-41c2-ab56-51b2731811a6">image.png (view on web)</a></p>
<p dir="auto">With <code class="notranslate">bg-body-secondary</code> you won't be able to see the border at all. But with a lighter background that I set in this PR it's easier to see the border:<br>
<a href="https://github.com/openstreetmap/openstreetmap-website/assets/4158490/ddeaee50-914d-46d4-80a8-f4cba35d08db">image.png (view on web)</a></p>
<hr>
<h4>You can view, comment on, or merge this pull request online at:</h4>
<p> <a href='https://github.com/openstreetmap/openstreetmap-website/pull/4651'>https://github.com/openstreetmap/openstreetmap-website/pull/4651</a></p>
<h4>Commit Summary</h4>
<ul>
<li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/4651/commits/5f14e8606b6c73a4a7f82ef5210609f43ba7ba99" class="commit-link">5f14e86</a> Change content heading background to bg-body-tertiary</li>
</ul>
<h4 style="display: inline-block">File Changes </h4> <p style="display: inline-block">(<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4651/files">2 files</a>)</p>
<ul>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4651/files#diff-e86a39e6d0b163f152db8843fc7d647a3f5d648de4a74f1732bef4474b6e5bc8">app/assets/stylesheets/common.scss</a>
(4)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4651/files#diff-8b8c462d0fcdd66c2a5a7e750cf4512c0b9f71dda5c04fc3cf4c5183454b9f38">app/views/layouts/_content.html.erb</a>
(2)
</li>
</ul>
<h4>Patch Links:</h4>
<ul>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/4651.patch'>https://github.com/openstreetmap/openstreetmap-website/pull/4651.patch</a></li>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/4651.diff'>https://github.com/openstreetmap/openstreetmap-website/pull/4651.diff</a></li>
</ul>
<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/pull/4651">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLM6RZ7SXFLBRQIIZHDY37P5FAVCNFSM6AAAAABF2MKTK6VHI2DSMVQWIX3LMV43ASLTON2WKOZSGIZDSMRRGI3TSOA">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLMZTKEVQZOC7H2H7ULY37P5FA5CNFSM6AAAAABF2MKTK6WGG33NNVSW45C7OR4XAZNFJFZXG5LFVJRW63LNMVXHIX3JMTHIJXYWPY.gif" height="1" width="1" alt="" /><span style="color: transparent; font-size: 0; display: none; visibility: hidden; overflow: hidden; opacity: 0; width: 0; height: 0; max-width: 0; max-height: 0; mso-hide: all">Message ID: <span><openstreetmap/openstreetmap-website/pull/4651</span><span>@</span><span>github</span><span>.</span><span>com></span></span></p>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/pull/4651",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/4651",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>