strawmelonjuice.com / homepage
My personal website, in gleam+lustre!
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Make some more stuff fit on mobile

MLC Bloeiman 37ad5893 f301901a

+73 -62
+73 -62
src/homepage.gleam
··· 1320 1320 ]), 1321 1321 ]), 1322 1322 html.div([attribute.class("navbar-end")], [ 1323 - socials(), 1323 + socials(collapsible: True), 1324 1324 html.div([attribute.class("mx-2")], []), 1325 - html.a([href(Links), attribute.class("hidden md:block")], [ 1326 - html.button( 1327 - [ 1328 - attribute.class("btn btn-ghost btn-circle"), 1329 - ], 1330 - [ 1331 - svg.svg( 1332 - [ 1333 - attribute("xmlns", "http://www.w3.org/2000/svg"), 1334 - attribute("viewBox", "0 0 15.36 15.36"), 1335 - attribute("version", "1.1"), 1336 - attribute("fill", "currentColor"), 1337 - attribute("height", "24"), 1338 - attribute("width", "24"), 1339 - ], 1340 - [ 1341 - svg.g( 1342 - [ 1343 - attribute( 1344 - "transform", 1345 - "matrix(.03 0 0 .03 -.00016582 -.00038274)", 1346 - ), 1347 - attribute.id("_40_Hyperlink"), 1348 - ], 1349 - [ 1350 - svg.g([attribute("fill-rule", "evenodd")], [ 1351 - svg.path([ 1352 - attribute("data-name", "Path 51"), 1353 - attribute( 1354 - "d", 1355 - "m503.47 132.27-123.73-123.73a29.17 29.17 0 0 0-41.234 0l-123.73 123.73a29.15 29.15 0 0 0 0 41.265l20.6 20.6 123.73-123.73 82.5 82.5-123.73 123.73 20.633 20.632a29.169 29.169 0 0 0 41.234 0l123.73-123.73a29.207 29.207 0 0 0 1e-3 -41.265z", 1356 - ), 1325 + html.a( 1326 + [ 1327 + href(Links), 1328 + // attribute.class("hidden md:block") 1329 + ], 1330 + [ 1331 + html.button( 1332 + [ 1333 + attribute.class("btn btn-ghost btn-circle"), 1334 + ], 1335 + [ 1336 + svg.svg( 1337 + [ 1338 + attribute("xmlns", "http://www.w3.org/2000/svg"), 1339 + attribute("viewBox", "0 0 15.36 15.36"), 1340 + attribute("version", "1.1"), 1341 + attribute("fill", "currentColor"), 1342 + attribute("height", "24"), 1343 + attribute("width", "24"), 1344 + ], 1345 + [ 1346 + svg.g( 1347 + [ 1348 + attribute( 1349 + "transform", 1350 + "matrix(.03 0 0 .03 -.00016582 -.00038274)", 1351 + ), 1352 + attribute.id("_40_Hyperlink"), 1353 + ], 1354 + [ 1355 + svg.g([attribute("fill-rule", "evenodd")], [ 1356 + svg.path([ 1357 + attribute("data-name", "Path 51"), 1358 + attribute( 1359 + "d", 1360 + "m503.47 132.27-123.73-123.73a29.17 29.17 0 0 0-41.234 0l-123.73 123.73a29.15 29.15 0 0 0 0 41.265l20.6 20.6 123.73-123.73 82.5 82.5-123.73 123.73 20.633 20.632a29.169 29.169 0 0 0 41.234 0l123.73-123.73a29.207 29.207 0 0 0 1e-3 -41.265z", 1361 + ), 1362 + ]), 1363 + svg.path([ 1364 + attribute("data-name", "Path 52"), 1365 + attribute( 1366 + "d", 1367 + "m276.63 317.87-123.73 123.73-82.5-82.5 123.73-123.73-20.633-20.632a29.167 29.167 0 0 0-41.233 0l-123.73 123.73a29.208 29.208 0 0 0 0 41.265l123.73 123.73a29.169 29.169 0 0 0 41.233 0l123.73-123.73a29.152 29.152 0 0 0 0-41.265z", 1368 + ), 1369 + ]), 1370 + svg.path([ 1371 + attribute("data-name", "Path 53"), 1372 + attribute( 1373 + "d", 1374 + "m173.5 338.47a29.153 29.153 0 0 0 41.266 0l123.73-123.73a29.157 29.157 0 0 0-41.265-41.2l-123.74 123.73a29.133 29.133 0 0 0 0 41.203z", 1375 + ), 1376 + ]), 1357 1377 ]), 1358 - svg.path([ 1359 - attribute("data-name", "Path 52"), 1360 - attribute( 1361 - "d", 1362 - "m276.63 317.87-123.73 123.73-82.5-82.5 123.73-123.73-20.633-20.632a29.167 29.167 0 0 0-41.233 0l-123.73 123.73a29.208 29.208 0 0 0 0 41.265l123.73 123.73a29.169 29.169 0 0 0 41.233 0l123.73-123.73a29.152 29.152 0 0 0 0-41.265z", 1363 - ), 1364 - ]), 1365 - svg.path([ 1366 - attribute("data-name", "Path 53"), 1367 - attribute( 1368 - "d", 1369 - "m173.5 338.47a29.153 29.153 0 0 0 41.266 0l123.73-123.73a29.157 29.157 0 0 0-41.265-41.2l-123.74 123.73a29.133 29.133 0 0 0 0 41.203z", 1370 - ), 1371 - ]), 1372 - ]), 1373 - ], 1374 - ), 1375 - ], 1376 - ), 1377 - ], 1378 - ), 1379 - ]), 1378 + ], 1379 + ), 1380 + ], 1381 + ), 1382 + ], 1383 + ), 1384 + ], 1385 + ), 1380 1386 ]), 1381 1387 ], 1382 1388 ) ··· 1573 1579 html.div([attribute.class("collapse-content text-sm")], [ 1574 1580 html.div( 1575 1581 [ 1576 - attribute.class("carousel rounded-box"), 1582 + attribute.class("carousel rounded-box gap-3 p-6 w-full"), 1577 1583 ], 1578 1584 other_projects 1579 1585 |> list.map(fn(card) { 1580 - html.div([attribute.class("carousel-item w-2/5")], [ 1581 - card, 1582 - ]) 1586 + html.div( 1587 + [attribute.class("carousel-item w-4/5 md:w-2/5 ")], 1588 + [ 1589 + card, 1590 + ], 1591 + ) 1583 1592 }), 1584 1593 ), 1585 1594 ]), ··· 1781 1790 ] 1782 1791 } 1783 1792 1784 - fn socials() -> Element(Msg) { 1793 + fn socials(collapsible small: Bool) -> Element(Msg) { 1785 1794 html.div([attribute.class("grid grid-flow-col gap-4")], [ 1786 1795 // Mastodon ================================================================================= 1787 1796 html.a( ··· 1789 1798 attribute.target("_blank"), 1790 1799 attribute.href("https://pony.social/@strawmelonjuice"), 1791 1800 attribute.class("cursor-pointer w-[26px] h-[26px] hover:text-[#5638cc]"), 1801 + attribute.classes([#("hidden md:block", small)]), 1792 1802 ], 1793 1803 [ 1794 1804 svg.svg( ··· 1975 1985 "https://witchsky.app/profile/did:plc:jgtfsmv25thfs4zmydtbccnn", 1976 1986 ), 1977 1987 attribute.class("cursor-pointer w-[26px] h-[26px] hover:text-[#006aff]"), 1988 + attribute.classes([#("hidden md:block", small)]), 1978 1989 ], 1979 1990 [ 1980 1991 svg.svg( ··· 2447 2458 fn view_me() -> List(Element(Msg)) { 2448 2459 [ 2449 2460 html.nav([attribute.class("social-media-icons mx-auto w-fit")], [ 2450 - socials(), 2461 + socials(collapsible: False), 2451 2462 ]), 2452 2463 html.hr([attribute.class("my-8")]), 2453 2464 title("Me"), ··· 2475 2486 [ 2476 2487 html.div([attribute.class("link-list-container")], [ 2477 2488 html.nav([attribute.class("social-media-icons mx-auto w-fit")], [ 2478 - socials(), 2489 + socials(collapsible: False), 2479 2490 ]), 2480 2491 html.hr([attribute.class("my-8")]), 2481 2492 // html.a(