stylesheets: Refactor header imprint styles #28
Merged
+20
−9
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
anarchivist
approved these changes
Jan 13, 2026
Before this change, the containing `a` element was using a `display` of `contents`, which caused the elements to be inaccessible via the keyboard. Changing the `a` to be a simple flex item caused various other layout issues that were corrected: * `vertical-align` was set to `middle` for both the image and text, allowing them to look mostly the same as before. * Added `text-align: center` to ensure the elements are centred on mobile-sized viewports in column layout mode. * On mobile, the image remains a `block` element so that it causes a hard break in the flex grid (otherwise, on larger mobile/tablet screen sizes, it is undersized and the "Audio/Video" appears next to the logo element). On desktop, they are no longer required to be `block` elements. * Additionally, the fixed width size of the logo is now set as the `max-width`, and a `width` of `100%` is used. This allows the logo to shrink on very small viewports, such as an iPhone 11 in 2x zoom mode. The iPhone 11 @ 2x has an effective viewport of 305px, which is smaller than the 315px width and caused the logo to be cut off with the current rules. Closes: ADA-669
awilfox
force-pushed
the
awilfox/ADA-669
branch
from
1bdb8e5 to
9ece7f0
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Before this change, the containing
aelement was using adisplayofcontents, which caused the elements to be inaccessible via the keyboard. Changing theato be a simple flex item caused various other layout issues that were corrected:vertical-alignwas set tomiddlefor both the image and text, allowing them to look mostly the same as before.Added
text-align: centerto ensure the elements are centred on mobile-sized viewports in column layout mode.On mobile, the image remains a
blockelement so that it causes a hard break in the flex grid (otherwise, on larger mobile/tablet screen sizes, it is undersized and the "Audio/Video" appears next to the logo element). On desktop, they are no longer required to beblockelements.Additionally, the fixed width size of the logo is now set as the
max-width, and awidthof100%is used. This allows the logo to shrink on very small viewports, such as an iPhone 11 in 2x zoom mode. The iPhone 11 @ 2x has an effective viewport of 305px, which is smaller than the 315px width and caused the logo to be cut off with the current rules.Closes: ADA-669
Comparison of before and after on small mobile viewport (Safari 18.6, responsive design mode, 300x600 viewport, 100% @ 2x):
Present:
With these changes: