\u003C/mask>\u003Cg mask=\"url(#a)\">\u003Cpath fill=\"#EA9E44\" d=\"M116.94 88.1c-13.344 1.552-20.436-2.019-24.706 10.71 0 0 14.336 21.655 52.54 21.112-2.135 8.848-1.144 15.368-1.144 23.207 0 26.079-20.589 48.821-65.961 48.821-23.03 0-51.015 4.191-72.367 15.911-15.175 8.305-27.048 20.336-32.302 37.023l5.956 8.461 11.4.155v47.889l-13.91 21.966L-19.556 387h13.192l1.144-51.227c6.558-3.881 21.58-13.971 34.391-29.494 17.386-20.879 30.731-51.227 15.022-88.793l11.744-5.045c12.887 30.814 8.388 57.514-2.898 79.013 21.58-.698 40.11-2.095 55.819-4.734l-3.584-43.698 12.659-1.087L129.98 387h13.116l2.212-94.459c10.447-4.502 34.239-21.034 45.372-78.47 1.372-6.986 2.135-12.885 2.516-17.93 1.754-12.806 2.745-27.243 3.051-43.698l-18.683-5.976h57.42l5.567-12.807c-5.414.233-11.896-2.639-11.896-2.639l1.297-6.209H242l-65.199-34.384c-7.244 2.794-14.87 6.442-20.208 10.866-4.27-3.105-19.063-12.807-39.653-13.195Z\"/>\u003Cpath fill=\"#C16929\" d=\"M6.217 24.493 18.494 21c5.948 21.577 13.345 33.375 22.648 39.352 8.388 5.099 19.75 5.239 31.799 4.579-3.508-1.164-6.787-2.794-9.837-5.045-6.787-5.045-12.582-13.428-16.929-28.64l12.201-3.649c3.279 11.488 7.092 18.085 12.201 21.888 5.11 3.726 11.286 4.657 18.606 5.433 13.726 1.553 30.884 2.174 52.312 12.264 2.898 1.086 5.872 2.483 8.769 4.036-.381-.776-.762-1.553-1.296-2.406-3.66-5.822-10.828-11.953-24.097-16.92l4.27-12.109c21.581 7.917 30.121 19.171 33.553 28.097 3.965 10.168 1.525 18.124 1.525 18.124-3.05 1.009-6.1 2.406-9.608 3.492-6.634-4.579-12.887-8.033-18.835-10.75-21.962-8.304-43.466-2.638-62.53-.853-14.336 1.32-27.452.698-38.814-6.598-11.21-7.14-21.047-20.8-28.215-46.802Z\"/>\u003Cpath fill=\"#C16929\" d=\"M90.098 45.294c-2.516-5.744-4.041-12.807-3.355-21.5l12.659.932c-.763 10.555 2.897 17.696 7.015 22.353-5.338-.931-10.447-1.04-16.319-1.785ZM170.167 43.974l8.312-9.702c21.58 19.094 8.159 46.415 8.159 46.415l-11.819-1.32c-.382-6.24-1.144-17.836-6.635-24.371 3.584 1.84 6.635 3.865 9.99 6.908 0-5.666-1.754-12.341-8.007-17.93Z\"/>\u003C/g>\u003C/svg>';\r\n// Retrieve or set new colors based on current theme\r\nconst primaryColor = document.documentElement.style.getPropertyValue('--theme-color-name');\r\nconst secondaryColor = primaryColor;\r\n// Replace original colors with theme colors\r\nconst themedSvg = sourceSvg\r\n .replace(/#C16929/g, primaryColor)\r\n .replace(/#EA9E44/g, secondaryColor);\r\n// Clean SVG before encoding it\r\nconst cleanSvg = themedSvg\r\n .replace(/[\\t\\n\\r]/gim, '') // Strip newlines and tabs\r\n .replace(/\\s\\s+/g, ' ') // Condense multiple spaces\r\n .replace(/'/gim, '\\\\i'); // Normalize quotes\r\n// Encode the SVG for a data URI\r\nconst encodedSvg = encodeURIComponent(cleanSvg)\r\n .replace(/\\(/g, '%28') // Encode brackets\r\n .replace(/\\)/g, '%29');\r\n// Build the data URI\r\nconst dataUri = `data:image/svg+xml;charset=UTF-8,${encodedSvg}`;\r\n\r\nfunction updateFavicons() {\r\n const favicons = document.querySelectorAll('link[rel*=\"icon\"][type*=\"svg\"]');\r\n [...favicons].forEach((favicon) => {\r\n favicon.setAttribute('href', dataUri);\r\n });\r\n}\r\n\r\nupdateFavicons();\r\n\r\n// App loads multiple favicons for some reason, wait to try again\r\nsetTimeout(updateFavicons, 5 * 1000);\r\n```\r\n\r\n\u003C/p>\r\n\u003C/details>\r\n\r\nWhile I'm happy to have my favicon themed, it'd be even nicer to have this feature built in! (I also think it'd be nicer to keep the value of the antlers differentiated, I was just impatient. 🙂)",[2001],{"name":1988,"color":1989},1477,"Colorize favicon to match theme","2023-01-26T20:46:28Z","https://github.com/elk-zone/elk/issues/1477",0.75011784,{"description":2008,"labels":2009,"number":2014,"owner":1991,"repository":1992,"state":1993,"title":2015,"updated_at":2016,"url":2017,"score":2018},"I am using a 1440p display with 125% scaling on Windows 11, using Google Chrome v110.0.5481.178. Using Elk v0.7.4\r\n\r\nI've noticed that occasionally the fonts will become blurry depending on the size of my window. It's inconsistent as well. Some posts will render sharp, others will be blurry. \r\n\r\nHere is an example where the top post is blurry, but the bottom post is sharp.\r\n\r\n",[2010,2011],{"name":1985,"color":1986},{"name":2012,"color":2013},"help wanted","008672",1863,"Blurry font rendering at some scaling intervals ","2023-03-11T21:38:14Z","https://github.com/elk-zone/elk/issues/1863",0.75435877,{"description":2020,"labels":2021,"number":2023,"owner":1991,"repository":1992,"state":1993,"title":2024,"updated_at":2025,"url":2026,"score":2027},"It would be nice if the Elk pwa had a monochrome icon variant so it could support the themed icons feature on Android.\r\n\r\n\r\n",[2022],{"name":1988,"color":1989},2901,"Add monochrome icon to support themed icons on Android","2024-07-04T22:03:20Z","https://github.com/elk-zone/elk/issues/2901",0.75465804,{"description":2029,"labels":2030,"number":2032,"owner":1991,"repository":1992,"state":1993,"title":2033,"updated_at":2034,"url":2035,"score":2036},"Hello there, I came across a little UX \"issue\" (not sure if that's the right word, but basically something that might be confusing to the end-user) in regards to the back button and especially where it's positioned.\r\n\r\nAlso, I'd like to add that I currently don't have any better idea on how to solve this, but maybe someone on here can come up with something?\r\n\r\nThe problem(s) I have with its current position:\r\n- The UI of Elk is visually separated into three columns (see image below) The back button primarily changes the content of the middle column but is positioned in the left column.\r\n- While a left-pointing arrow positioned on the left of a UI element is often associated with going back or undo, a left-pointing arrow on the right of a UI element is often considered with collapsing something, especially when used on the right of a sidebar. Before I understood what this button does, my first intuition was that it's for collapsing the sidebar to be icons only\r\n\r\n",[2031],{"name":1988,"color":1989},1750,"Back button/arrow UX issue","2023-02-15T15:31:47Z","https://github.com/elk-zone/elk/issues/1750",0.7562786,{"description":2038,"labels":2039,"number":2044,"owner":1991,"repository":1992,"state":1993,"title":2045,"updated_at":2046,"url":2047,"score":2048},"Hi, thanks for your work, enjoy using Elk!\r\n\r\nI'd like to request a bigger body text size for the posts themselves. While there is a font size option (thanks!)\r\nif you make it much bigger, other parts of the ui start to have issues rendering - for example the main menu on the left gets too big and doesn't fit in the window any more. If the body font was a bit bigger this would be less of an issue, and would be a better more accessible default size.",[2040,2041],{"name":1985,"color":1986},{"name":2042,"color":2043},"c: a11y","553F0B",1537,"Use a larger body text","2023-01-31T18:14:04Z","https://github.com/elk-zone/elk/issues/1537",0.7586224,{"description":2050,"labels":2051,"number":2053,"owner":1991,"repository":1992,"state":1993,"title":2054,"updated_at":2055,"url":2056,"score":2057},"### Clear and concise description of the problem\r\n\r\n*Partially copied from Discord*\r\n\r\nBack in the days Twitter has removed most of the borders or made them really faded, and it became really hard for neurodivergent folks like me, because it essentially made the app a mishmash of incoherent elements, creating a condition where my eyes are all over the place and I can't just comprehend any information on the page. Gladly they have a high contrast mode that introduced most of the borders back or made them more prominent, it also made all primary colours darker.\r\n\r\nUnfortunately, Elk suffers from the same issue, perhaps to a worse degree, even. For folks like me Elk is simply unusable: it's hard to keep my attention at any particular part of the site — I cannot focus on anything and constantly feeling lost. This is not my experience on Mastodon — with or without a custom theme.\r\n\r\n| | |\r\n|:--:|:--:|\r\n|  |  |\r\n| Regular Mastodon | Mastodon with [Modern](https://userstyles.world/style/4773/mastodon-modern) theme by Freeplay |\r\n\r\nThe reason is simple: lack of contrast and visual boundaries (via borders or backgrounds) to clearly separate the elements into their own ‘baskets’.\r\n\r\n### Suggested solution\r\n\r\nI think one of the solutions will be having a high contrast preference, which would to add borders or make them more prominent, as well as make the colours more contrast-y (darker in light mode, brighter in dark mode).\r\n\r\nHere's what Elk looks like for me after playing with CSS in DevTools for a bit (hover state locked for buttons for demonstration reasons):\r\n\r\n\r\n\r\nHere's what I did:\r\n- Changed font to Inter (Roboto also works). It already made a huge difference making text ever so slightly bolder.\r\n- The primary colours are now much darker (or lighter, where needed, like search) and prominent on slightly grey background that Elk uses.\r\n- Borders introduced to a main (feed) column. Unfortunately I wasn't able to figure out why there's a border at the top.\r\n- Borders themselves now use much darker colours.\r\n- Added on-hover backgrounds to posts and embed cards.\r\n- Added borders to embed cards and removed their default grey background.\r\n\r\nAnd here's video of me doing various stuff on the page:\r\n\r\nhttps://user-images.githubusercontent.com/10401817/213188712-949e4a50-8526-48d1-b393-671902534b71.mp4\r\n\r\n### Alternative\r\n\r\n- Total change of design? Seems too radical.\r\n- Manually fixing styles with UserStyles? This would only work for me then, while others like me have to face the same issues.\r\n- Not using Elk. This what I kinda do already... Sadly. I want to test it like all other cool kids do.\r\n\r\n### Additional context\r\n\r\nImportant note must be made that high contrast mode would not be aimed strictly at the neurodivergent folks *like me*, but primarily at the people with vision issues. Twitter does more stuff for high contrast mode, like adding underlines to every link on the site, but this would not be useful for me (maybe it can be its own toggle like in Discord).",[2052],{"name":2042,"color":2043},1295,"High contrast mode","2023-02-03T03:16:51Z","https://github.com/elk-zone/elk/issues/1295",0.7637881,{"description":2059,"labels":2060,"number":2063,"owner":1991,"repository":1992,"state":1993,"title":2064,"updated_at":2065,"url":2066,"score":2067},"\u003Cimg width=\"698\" alt=\"image\" src=\"https://github.com/elk-zone/elk/assets/649392/d1730895-084a-42ed-98ac-0ae0e03d1109\">\r\n",[2061,2062],{"name":1985,"color":1986},{"name":1988,"color":1989},2893,"Aspect ratio avatars when a lot of people favorite your post is wrong","2024-06-24T17:09:40Z","https://github.com/elk-zone/elk/issues/2893",0.76418215,{"description":2069,"labels":2070,"number":2073,"owner":1991,"repository":1992,"state":1993,"title":2074,"updated_at":2075,"url":2076,"score":2077},"[here is an example post in a thread](https://mastodon.online/@alexxkittle/110152387841009521) from someone who posts work from an artist every day.\r\n\r\nIf you go to that message with elk, elk appears to load every image in the thread every time.\r\n\r\nThen, if you try to respond to the most recent message, the app is so slow that you can't even type in the text box - it takes ~30s for a character to echo to the screen.",[2071,2072],{"name":1985,"color":1986},{"name":1988,"color":1989},1954,"Very slow text entry on Safari in long image threads","2023-04-27T14:32:25Z","https://github.com/elk-zone/elk/issues/1954",0.76479995,{"description":2079,"labels":2080,"number":2081,"owner":1991,"repository":1992,"state":1993,"title":2082,"updated_at":2083,"url":2084,"score":2085},"I have been trying to find the rationale behind the profile metadata design, and I couldn't find any, so here are some thoughts.\r\n\r\n- Elk currently treats profile metadata in two ways, some items are shown as a list, while others are inlined and iconified in a separate block. This creates two classes of metadata items, one that belongs to a recognized category, identified by their distinct icon, and the rest.\r\n\r\n- Profile metadata is quite a remarkable space of expression. Customizable tabular information is unique in a social media profile, and we're already [seeing](https://elk.zone/assemblag.es/@evemassacre) [many](https://elk.zone/typo.social/@FontsInUse) [creative](https://elk.zone/hachyderm.io/@danhon@dan.mastohon.com) [uses](https://elk.zone/assemblag.es/@timelfen). We should rather encourage and promote this chaotic space rather than codify and dismantle.\r\n\r\n- A metadata field is [iconified](https://github.com/elk-zone/elk/blob/main/components/account/AccountHeader.vue#L63) depending on its label. This enforces a certain format but also raises some further questions. The list of acceptable labels will likely be non-exhaustive, and may be misinterpreted. Why does \"website\" has an icon, but neither \"web\" nor \"homepage\"? Why does service X has an icon, but not service Y? Is the list of icon labels language-agnostic?\r\n\r\n- As the ordering of the items follows the metadata order, the icons themselves are shown in an inconsistent fashion, varying from profile to profile, making it difficult to follow and predict. Transforming tabular data into a list of inline items also makes it harder to read, and parse.\r\n\r\n- Having iconified items also raises the [question](https://github.com/elk-zone/elk/issues/155) of verified items. Should another icon be added in this flow of icons, which could make the list harder to parse?\r\n\r\nI can see Twitter's inspiration, but the design that works with a single link and a rigid structure doesn't necessarily function with free and unpredictable information.\r\n\r\n## Proposition\r\n\r\nMy suggestion would be to entirely remove the iconified metadata list, and keep the labelled items, without substitution, as is. The \"joined at\" may either be left on its own, or moved elsewhere (top right?, in the dropdown menu?).\r\n\r\nThis being said, icons are valuable as they help recognition of a link source, especially since profile metadata are dense, and often contain multiple links.\r\n\r\nWe could add a favicon of the target website, after the link content, helping to quickly identify the source, without changing the nature of the metadata. Following these icons, we can also imagine verified links, which are currently not differentiated, to also have a check icon added, following the mentioned favicon. This configuration would allow recognition of the verification at a quick glance, the tick symbol, the favicon, and the link content being located alongside each other, something like: `[label] | [link][favicon][verified-check]`.\r\n\r\nAs there might be some icon overload, so it might preferred to only show favicons when the associated link is verified.\r\nAnother question is the credibility of favicons. Favicons are however trivially spoofable. Do we consider the combination URL/favicon/verification to be sufficient? An answer could be the use of [Google Safe Browsing](https://safebrowsing.google.com/) to exclude printing favicons for unsafe pages?\r\n\r\nWhat are your thoughts?",[],1101,"Profile metadata design","2023-03-03T05:18:24Z","https://github.com/elk-zone/elk/issues/1101",0.76746345,["Reactive",2087],{},["Set"],["ShallowReactive",2090],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"fKOuCT0Utm_Mx5QvJ9t_KHbcJfcZuKh_6w_t3fsO6Xo":-1},"/elk-zone/elk/1890"]