Skip to content

fix(duckduckgo): prevent header logo from tiling on mobile #2267

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

Open
SakethKanchi wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix(duckduckgo): prevent header logo from tiling on mobile #2267

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4584cfb
fix(duckduckgo): prevent header logo from tiling on mobile
SakethKanchi Jul 2, 2026
de09085
fix(duckduckgo): theme header logo on .header__logo-icon so it inheri…
SakethKanchi Jul 4, 2026
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
1 change: 1 addition & 0 deletions styles/duckduckgo/catppuccin.user.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1081,6 +1081,7 @@
'<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 120 120"><g clip-path="url(#logo_header_v109_svg__a)"><path fill="@{peach}" fill-rule="evenodd" d="M60.186 120.373c33.24 0 60.187-26.947 60.187-60.187S93.426 0 60.186 0 0 26.946 0 60.186s26.946 60.187 60.186 60.187" clip-rule="evenodd"/><path fill="#DDD" fill-rule="evenodd" d="M68.65 105.091c0-.47.115-.578-1.38-3.557-3.972-7.954-7.964-19.17-6.148-26.402.33-1.314-3.742-48.66-6.62-50.185-3.2-1.705-7.138-4.41-10.739-5.012-1.827-.292-4.223-.154-6.096.098-.332.045-.346.643-.028.751 1.23.417 2.722 1.14 3.602 2.233.167.207-.057.533-.322.543-.83.03-2.334.378-4.32 2.064-.229.195-.038.557.257.499 4.267-.844 8.623-.428 11.191 1.906.167.151.08.423-.137.482-22.283 6.055-17.872 25.438-11.94 49.224 5.284 21.188 7.272 28.017 7.899 30.097a.67.67 0 0 0 .398.439c7.67 3.055 24.383 3.19 24.383-2.005z" clip-rule="evenodd"/><path fill="#fff" d="M71.706 109.558c-2.703 1.058-7.993 1.528-11.05 1.528-4.48 0-10.932-.705-13.283-1.763-1.452-4.469-5.797-18.32-10.088-35.91l-.42-1.718-.004-.014c-5.101-20.836-9.267-37.854 13.568-43.2.208-.05.31-.3.172-.463-2.62-3.108-7.528-4.127-13.734-1.986-.255.088-.476-.169-.318-.387 1.217-1.677 3.596-2.967 4.77-3.532.242-.117.228-.473-.03-.553a26 26 0 0 0-3.546-.846c-.348-.056-.38-.652-.03-.7 8.798-1.183 17.986 1.459 22.596 7.266a.3.3 0 0 0 .175.108c16.883 3.625 18.092 30.314 16.147 31.53-.384.239-1.612.102-3.233-.08-6.57-.735-19.578-2.19-8.842 17.818.106.198-.034.46-.256.494-6.054.941 1.704 19.912 7.406 32.408"/><path fill="#3CA82B" d="M79.258 85.293c-1.285-.595-6.227 2.949-9.507 5.67-.686-.97-1.978-1.675-4.894-1.168-2.551.443-3.96 1.058-4.589 2.12-4.027-1.528-10.803-3.884-12.44-1.608-1.79 2.487.447 14.257 2.824 15.785 1.24.798 7.175-3.017 10.275-5.648.5.705 1.305 1.108 2.96 1.069 2.503-.058 6.563-.64 7.193-1.806a1.3 1.3 0 0 0 .099-.25c3.186 1.191 8.792 2.451 10.045 2.263 3.264-.49-.455-15.726-1.966-16.427"/><path fill="@{green}" d="M70.051 91.31c.135.242.244.496.337.754.454 1.27 1.194 5.31.634 6.309-.56.998-4.194 1.48-6.436 1.519s-2.746-.782-3.2-2.052c-.364-1.016-.542-3.405-.538-4.773-.092-2.028.65-2.742 4.076-3.296 2.535-.41 3.876.067 4.65.883 3.6-2.686 9.606-6.478 10.192-5.785 2.92 3.455 3.29 11.68 2.657 14.99-.207 1.082-9.879-1.072-9.879-2.239 0-4.844-1.257-6.174-2.493-6.31m-21.187-1.512c.792-1.254 7.216.305 10.743 1.874 0 0-.725 3.284.429 7.151.337 1.132-8.113 6.167-9.216 5.301-1.275-1.001-3.621-11.691-1.956-14.326"/><path fill="@{yellow}" fill-rule="evenodd" d="M51.975 64.33c.52-2.26 2.941-6.519 11.587-6.415 4.371-.018 9.801-.002 13.4-.411a48.2 48.2 0 0 0 11.969-2.91c3.742-1.428 5.07-1.11 5.536-.256.512.939-.091 2.56-1.399 4.052-2.498 2.85-6.989 5.06-14.92 5.715-7.93.655-13.185-1.472-15.446 1.991-.976 1.494-.222 5.015 7.448 6.124 10.364 1.496 18.876-1.803 19.928.19 1.052 1.991-5.007 6.044-15.388 6.129s-16.865-3.635-19.164-5.484c-2.918-2.346-4.223-5.766-3.55-8.725Z" clip-rule="evenodd"/><g fill="@{blue}" opacity=".8"><path d="M65.196 39.617c.579-.948 1.863-1.68 3.964-1.68s3.09.836 3.774 1.768c.14.19-.071.413-.287.32l-.158-.069c-.769-.336-1.712-.748-3.329-.77-1.729-.025-2.819.408-3.505.781-.232.126-.596-.125-.46-.35ZM41.539 40.83c2.04-.853 3.644-.743 4.777-.474.24.056.405-.2.214-.355-.88-.71-2.85-1.59-5.418-.633-2.29.854-3.37 2.63-3.377 3.796-.002.276.564.299.71.066.396-.63 1.053-1.547 3.094-2.4"/><path fill-rule="evenodd" d="M70.945 52.588a3.263 3.263 0 0 1-3.267-3.255 3.263 3.263 0 0 1 3.267-3.255 3.26 3.26 0 0 1 3.267 3.255 3.26 3.26 0 0 1-3.267 3.255m2.301-4.334a.845.845 0 0 0-1.692 0 .845.845 0 0 0 1.692 0M49.3 51.585a3.8 3.8 0 0 1-3.809 3.796c-2.1 0-3.808-1.7-3.808-3.796a3.804 3.804 0 0 1 3.808-3.796c2.1 0 3.809 1.7 3.809 3.796m-1.123-1.258a.987.987 0 0 0-1.972 0c0 .54.44.982.986.982a.985.985 0 0 0 .986-.982" clip-rule="evenodd"/></g><path fill="#fff" fill-rule="evenodd" d="M60.186 110.733c27.917 0 50.548-22.63 50.548-50.547S88.103 9.639 60.186 9.639C32.27 9.64 9.64 32.27 9.64 60.186c0 27.917 22.631 50.547 50.547 50.547Zm0 4.702c30.514 0 55.25-24.735 55.25-55.249 0-30.513-24.736-55.249-55.25-55.249S4.937 29.673 4.937 60.187s24.736 55.248 55.25 55.248Z" clip-rule="evenodd"/></g></svg>'
);
background-image: url("data:image/svg+xml,@{svg}") !important;
background-repeat: no-repeat !important;

@uncenter uncenter Jul 3, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This works, but I think we are missing a better solution. Look at where the original Duckduckgo styles set background-image — they do it on .header__logo-icon, whereas we are setting it here on .header__logo/.js-logo-ddg. The element we are setting the background image on is the parent of .header__logo-icon, and so we don't inherit the background-repeat: no-repeat; line that Duckduckgo's default styles already give us!

}

.yhccgqM_FdvJ79N6Jm6c {
Expand Down
Loading