a11y speedrun · strawmelonjuice.com/homepage@28e3515

+1 -1

site.css

··· 16 16 --color-primary-content: oklch(44% 0.043 257.281); 17 17 --color-secondary: #ceddd9; 18 18 --color-secondary-content: oklch(29% 0.066 243.157); 19 - --color-accent: oklch(71% 0.203 305.504); 19 + --color-accent: #DEC4DE; 20 20 --color-accent-content: #1f3e33; 21 21 --color-neutral: #adebb3; 22 22 --color-neutral-content: oklch(28% 0.141 291.089);

+59 -26

src/homepage.gleam

··· 582 582 ), 583 583 Badge( 584 584 img_url: "/img/badges/blinkiesCafe-L1.gif", 585 - img_alt: "", 585 + img_alt: "Blinkies Cafe", 586 586 img_title: "I GOT AUTISM", 587 587 clickable_url: "self", 588 588 text_badge: "", ··· 1226 1226 "https://forge.strawmelonjuice.com/strawmelonjuice/homepage", 1227 1227 ), 1228 1228 attribute.target("_blank"), 1229 - attribute.class("link link-accent ml-1"), 1229 + attribute.class("link text-pink-700 ml-1"), 1230 1230 ], 1231 1231 [html.text("View source.")], 1232 1232 ), 1233 + ]), 1234 + html.p([], [ 1233 1235 html.text( 1234 - " -- code is licensed under MIT License, content is mine, but can be freely shared with attribution in the form of a link to the original website. AI's and LLM's are not allowed to use any content, code or data from this website or it's repository.", 1236 + " This code is licensed under MIT License, content is mine, but can be freely shared with attribution in the form of a link to the original website. AI's and LLM's are not allowed to use any content, code or data from this website or it's repository.", 1235 1237 ), 1236 1238 ]), 1237 1239 ]), ··· 1311 1313 header_links, 1312 1314 ]), 1313 1315 // Sitemap 1314 - html.a([href(Sitemap)], [ 1315 - html.button( 1316 - [ 1317 - attribute.class("btn btn-ghost btn-circle"), 1318 - ], 1319 - [ 1320 - html.img([attribute.src("/svg/map.svg")]), 1321 - ], 1322 - ), 1323 - ]), 1316 + html.a( 1317 + [ 1318 + href(Sitemap), 1319 + ], 1320 + [ 1321 + html.button( 1322 + [ 1323 + attribute.aria_label("Sitemap"), 1324 + attribute.class("btn btn-ghost btn-circle"), 1325 + ], 1326 + [ 1327 + html.img([ 1328 + attribute.src("/svg/map.svg"), 1329 + attribute.alt("Map icon"), 1330 + ]), 1331 + ], 1332 + ), 1333 + ], 1334 + ), 1324 1335 ]), 1325 1336 html.div([attribute.class("navbar-center")], [ 1326 1337 html.a([href(Index)], [ 1327 1338 html.img([ 1328 1339 attribute.class("w-[60px]"), 1329 - attribute.alt("strawmelonjuice"), 1340 + attribute.alt("logo"), 1330 1341 attribute.src("/strawmelonjuice.png"), 1331 1342 ]), 1332 1343 ]), 1333 1344 ]), 1334 1345 html.div([attribute.class("navbar-end")], [ 1335 1346 socials(collapsible: True), 1336 - html.div([attribute.class("mx-2")], []), 1347 + html.div([attribute.class("mx-1")], []), 1337 1348 html.a( 1338 1349 [ 1339 1350 href(Links), ··· 1342 1353 [ 1343 1354 html.button( 1344 1355 [ 1345 - attribute.class("btn btn-ghost btn-circle"), 1356 + attribute.aria_label("Links"), 1357 + attribute.class("btn btn-ghost btn-circle w-[26px] h-[26px]"), 1346 1358 ], 1347 1359 [ 1348 - html.img([attribute.src("/svg/links.svg")]), 1360 + html.img([ 1361 + attribute.class("w-[20px] h-[20px]"), 1362 + attribute.src("/svg/links.svg"), 1363 + attribute.alt("link icon"), 1364 + ]), 1349 1365 ], 1350 1366 ), 1351 1367 ], ··· 1533 1549 html.div( 1534 1550 [ 1535 1551 attribute.class( 1536 - "collapse collapse-arrow bg-base-100 border-base-300 border", 1552 + "collapse collapse-arrow border-base-300 border mx-auto my-0 max-w-2xl bg-accent text-accent-content md:rounded-md p-5 md:p-12", 1537 1553 ), 1538 1554 attribute("tabindex", "0"), 1539 1555 ], ··· 1557 1573 ], 1558 1574 ) 1559 1575 }), 1576 + ), 1577 + html.div( 1578 + [ 1579 + attribute.class( 1580 + "container max-w-2xl mx-auto items-center w-fit", 1581 + ), 1582 + ], 1583 + [ 1584 + prestyled_elements.paragraph( 1585 + "And this is still not all! See my code in other projects", 1586 + ), 1587 + html.br([attribute.class("mt-4")]), 1588 + codeforges_links(), 1589 + ], 1560 1590 ), 1561 1591 ]), 1562 1592 ], ··· 1633 1663 html.div( 1634 1664 [ 1635 1665 attribute.class( 1636 - "card-compact bg-base-200 shadow-xl border border-base-300 hover:border-primary transition-colors", 1666 + "card-compact bg-secondary shadow-xl border border-secondary-content/30 hover:border-secondary-content/70 transition-colors", 1637 1667 ), 1638 1668 ], 1639 1669 [ 1640 1670 html.div([attribute.class("card-body h-full")], [ 1641 1671 html.div([attribute.class("flex justify-end w-full flex-wrap")], [ 1642 - list.map(technologies, fn(tech) { 1672 + list.map(technologies, fn(tag) { 1643 1673 html.a( 1644 1674 [ 1645 - href(Tagged(tech)), 1675 + href(Tagged(tag)), 1646 1676 attribute.class( 1647 1677 "badge badge-accent uppercase text-xs font-bold m-1", 1648 1678 ), 1649 1679 ], 1650 - [html.text(tech)], 1680 + [html.text(tag)], 1651 1681 ) 1652 1682 }) 1653 1683 |> element.fragment, ··· 1655 1685 html.h2([attribute.class("card-title text-secondary-content")], [ 1656 1686 html.text(name), 1657 1687 ]), 1658 - html.p([attribute.class("text-sm opacity-80")], [ 1659 - html.text(description), 1660 - ]), 1688 + html.p( 1689 + [attribute.class("text-sm opacity-80 text-secondary-content")], 1690 + [ 1691 + html.text(description), 1692 + ], 1693 + ), 1661 1694 html.div( 1662 1695 [ 1663 1696 attribute.class("flex flex-wrap gap-2 mt-2"), ··· 2195 2228 [ 2196 2229 html.img([ 2197 2230 attribute.class("w-full h-full rounded-full object-cover"), 2198 - attribute.alt(person.0), 2231 + attribute.alt("profile icon"), 2199 2232 attribute.src(person.2), 2200 2233 ]), 2201 2234 ],

+18 -5

src/homepage/stuff/prestyled_elements.gleam

··· 80 80 html.a( 81 81 [ 82 82 attribute.class( 83 - "flex items-center justify-center p-4 w-28 md:w-64 bg-[#ff6f91] hover:bg-[#ff4f78] rounded-xl shadow-lg transition-all border-[#ff6f91] border-2 border-solid", 83 + "flex items-center justify-center p-4 w-28 md:w-64 bg-white disabled-bg-[#ff6f91] hover:bg-[#ff4f78] rounded-xl shadow-lg transition-all border-[#ff6f91] border-2 border-solid", 84 84 ), 85 85 attribute.target("_blank"), 86 86 attribute.href("https://github.com/strawmelonjuice"), ··· 88 88 [ 89 89 html.img([ 90 90 attribute.class("w-full max-h-10 p-1 rounded-sm"), 91 + attribute.alt("GitHub"), 91 92 attribute.src("/svg/GitHub_Lockup_Black.svg"), 92 93 ]), 93 94 ], ··· 129 130 html.a( 130 131 [ 131 132 attribute.class( 132 - "flex items-center justify-center gap-3 p-4 w-28 md:w-64 bg-[#ff6f91] text-white hover:bg-[#ff4f78] rounded-xl shadow-lg transition-all border-[#ff6f91] border-2 border-solid", 133 + "flex items-center justify-center gap-3 p-4 w-28 md:w-64 bg-black disabled-bg-[#ff6f91] text-white hover:bg-[#ff4f78] rounded-xl shadow-lg transition-all border-[#ff6f91] border-2 border-solid", 133 134 ), 134 135 attribute.target("_blank"), 135 136 attribute.href("https://tangled.org/strawmelonjuice.com/"), ··· 137 138 [ 138 139 html.img([ 139 140 attribute.class("h-10"), 141 + attribute.aria_labelledby("TangledLinkText"), 140 142 attribute.src("/svg/dolly.svg"), 143 + attribute.alt("Dolly"), 141 144 ]), 142 - html.span([attribute.class("font-bold text-xl hidden md:inline")], [ 143 - html.text("tangled"), 144 - ]), 145 + html.span( 146 + [ 147 + attribute.class("font-bold text-xl hidden md:inline"), 148 + attribute.id("TangledLinkText"), 149 + ], 150 + [ 151 + html.text("tangled"), 152 + ], 153 + ), 145 154 ], 146 155 ), 147 156 ] ··· 156 165 // Mastodon ================================================================================= 157 166 html.a( 158 167 [ 168 + attribute.aria_label("Mastodon"), 159 169 attribute.target("_blank"), 160 170 attribute.href("https://pony.social/@strawmelonjuice"), 161 171 attribute.class("cursor-pointer w-[26px] h-[26px] hover:text-[#5638cc]"), ··· 250 260 // Matrix ================================================================================= 251 261 html.a( 252 262 [ 263 + attribute.aria_label("Matrix"), 253 264 attribute.target("_blank"), 254 265 attribute.href("https://matrix.to/#/@mar:strawmelonjuice.com"), 255 266 attribute.class( ··· 300 311 // Email ================================================================================== 301 312 html.a( 302 313 [ 314 + attribute.aria_label("Email"), 303 315 attribute.target("_blank"), 304 316 attribute.href("mailto:web@strawmelonjuice.com"), 305 317 attribute.class("cursor-pointer w-[26px] h-[26px] hover:text-[#cc3856]"), ··· 341 353 // Bluesky ================================================================================ 342 354 html.a( 343 355 [ 356 + attribute.aria_label("Bluesky"), 344 357 attribute.target("_blank"), 345 358 attribute.href( 346 359 "https://bsky.app/profile/did:plc:jgtfsmv25thfs4zmydtbccnn",

+3 -3

written-contents/blog/devblog/lumina/2.dj

··· 4 4 5 5 Lumina is a social media platform, for those who haven't made that up from the context yet. It has gone through many iterations, and taken up some inspirations. 6 6 7 - ### "FNew/Ephew" 7 + ## "FNew/Ephew" 8 8 9 9 The original idea started as a simple pinboard, which teen me cleverly threw together in PHP and served from my raspberry pi, this could have been the end of that. 10 10 ... but of course not! I wanted moderation, but I knew how moderation went wrong sometimes (the highschool class whatsapp was pretty self-evident), I also knew my pi would ··· 16 16 was coming out, but didn't know how to properly look up the changed docs. At some point, my life took some turns and I stopped development entirely, deleting the project (grave mistake) and 17 17 focussing on social work (healthcare) and activism instead of software. 18 18 19 - ### "Lumina" 19 + ## "Lumina" 20 20 21 21 Then, 2019, news broke that Elon Musk wanted to buy Twitter. Do note that Twitter had at that point become my biggest base of operations, and that I'd never even thought about it being a company. -- let alone be a sellable company 22 22 ··· 25 25 26 26 Development in PHP stranded, this time on me burning out and PHP8... Yeah. 27 27 28 - ### "Lumina/Peonies" 28 + ## "Lumina/Peonies" 29 29 30 30 It took a little over two years until I got back into the project, now in a world that was vastly different, and with social media's around the world becoming an opposite of my ideals for digital connection. 31 31 Not just unaligned, opposites.

Configure Feed

Configure Feed