Hello from Hono on Val Town!

This content is from index.html.

\n \n \n\n",[159],"535d6900-0b25-11f0-aeda-569c3dd06744","baraja.html","17c0e6f6-0b25-11f0-b16b-569c3dd06744",12,["D",1743091538867],"\n\n\n\n\n \n \n \n Baraja: Card Deck with Focus Spread\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n\n\n

Card Deck with Focus Spread

\n\n

\n \n \n

\n \n

\n\n \n \n \n \n\n\n",[166],"92e7e32a-0b25-11f0-ae7b-569c3dd06744","js","92e7e406-0b25-11f0-ae7b-569c3dd06744",15,["D",1743091645459],"directory",[173],"8eb27702-0b25-11f0-9cb8-569c3dd06744","css","8eb277b6-0b25-11f0-9cb8-569c3dd06744",14,["D",1743091638418],[180],"pulls","branches","forks","envVars",{"_192":62,"_194":62},"connections",{"_192":62,"_193":62},"count","unfilledCount","emptyCount",{"_42":179,"_32":180,"_30":181,"_135":-5,"_40":41,"_39":182,"_137":57,"_37":253,"_13":62,"_34":177,"_35":-5,"_23":24,"_141":-5,"_207":254,"_26":255},{"_42":245,"_32":246,"_30":247,"_135":181,"_40":41,"_39":248,"_137":57,"_37":249,"_13":139,"_34":20,"_35":250,"_23":24,"_141":-5,"_207":251,"_26":252},{"_42":237,"_32":238,"_30":239,"_135":181,"_40":41,"_39":240,"_137":57,"_37":241,"_13":139,"_34":20,"_35":242,"_23":24,"_141":-5,"_207":243,"_26":244},{"_42":229,"_32":230,"_30":231,"_135":181,"_40":41,"_39":232,"_137":57,"_37":233,"_13":139,"_34":20,"_35":234,"_23":24,"_141":-5,"_207":235,"_26":236},{"_42":172,"_32":173,"_30":174,"_135":-5,"_40":41,"_39":175,"_137":57,"_37":226,"_13":62,"_34":177,"_35":-5,"_23":24,"_141":-5,"_207":227,"_26":228},{"_42":222,"_32":33,"_30":31,"_135":174,"_40":41,"_39":14,"_137":24,"_37":223,"_13":62,"_34":20,"_35":36,"_23":24,"_141":-5,"_207":224,"_26":225},{"_42":165,"_32":166,"_30":167,"_135":-5,"_40":41,"_39":168,"_137":57,"_37":219,"_13":161,"_34":20,"_35":170,"_23":24,"_141":-5,"_207":220,"_26":221},{"_42":158,"_32":159,"_30":160,"_135":-5,"_40":41,"_39":161,"_137":57,"_37":216,"_13":139,"_34":20,"_35":163,"_23":24,"_141":-5,"_207":217,"_26":218},{"_42":151,"_32":152,"_30":153,"_135":-5,"_40":41,"_39":154,"_137":57,"_37":213,"_13":139,"_34":20,"_35":156,"_23":24,"_141":-5,"_207":214,"_26":215},{"_42":143,"_32":144,"_30":55,"_135":-5,"_40":41,"_39":145,"_137":24,"_37":210,"_13":147,"_34":148,"_35":149,"_23":24,"_141":-5,"_207":211,"_26":212},{"_42":132,"_32":133,"_30":134,"_135":-5,"_40":41,"_39":136,"_137":57,"_37":206,"_13":139,"_34":20,"_35":140,"_23":24,"_141":-5,"_207":208,"_26":209},["D",1743091133644],"children",[],[133],["D",1743091612293],[],[144],["D",1743091143193],[],[152],["D",1743091117111],[],[159],["D",1743091538867],[],[166],"b87a1360-0b25-11f0-b421-569c3dd06744",["D",1743091708505],[],[173,33],["D",1743091645459],[200],[173],"a84c7cc6-0b25-11f0-8b05-569c3dd06744","demo.css","a7490aa6-0b25-11f0-a923-569c3dd06744",20,["D",1743091681363],"/* General Demo Style */\n@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);\n\n*,\n*:after,\n*:before {\n\t-webkit-box-sizing: border-box;\n\t-moz-box-sizing: border-box;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}\n\nhtml { \n\theight: 100%; \n\tfont-size: 62.5%;\n}\n\n/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */\n.clearfix:before,\n.clearfix:after {\n\tcontent: \" \";\n\tdisplay: table;\n}\n\n.clearfix:after {\n\tclear: both;\n}\n\n.clearfix {\n\t*zoom: 1;\n}\n\nbody {\n\tfont-family: 'Lato', Calibri, Arial, sans-serif;\n\tbackground: #fff url(../images/bg.jpg);\n\tfont-weight: 300;\n\tfont-size: 14px; \n\tfont-size: 1.4rem;\n\tcolor: #333;\n\t-webkit-font-smoothing: antialiased;\n\toverflow-y: scroll;\n\toverflow-x: hidden;\n}\n\na {\n\tcolor: #555;\n\ttext-decoration: none;\n}\n\n.container {\n\twidth: 100%;\n\tposition: relative;\n}\n\n.clr {\n\tclear: both;\n\tpadding: 0;\n\theight: 0;\n\tmargin: 0;\n}\n\n.container > header,\n.main {\n\twidth: 80%;\n\tmax-width: 960px;\n\tmargin: 0 auto;\n\tpadding: 0 30px;\n}\n\n.container > header {\n\tpadding: 30px;\n}\n\n.container > header h1 {\n\tmargin: 0;\n\tfont-weight: 700;\n\tcolor: #333;\n\tfloat: left;\n\tfont-size: 36px; \n\tfont-size: 3.6rem;\n\tline-height: 46px; \n\tline-height: 4.6rem;\n}\n\n.container > header h1 span {\n\tdisplay: block;\n\tcolor: #444;\n\tfont-size: 20px;\n\tline-height: 28px;\n\tline-height: 2.8rem;\n\tfont-weight: 300;\n\ttext-shadow: 0 1px 0 rgba(255,255,255,0.5);\n}\n\n/* Header Style */\n.codrops-top {\n\tfont-size: 11px; \n\tfont-size: 1.1rem;\n\tline-height: 24px; \n\tline-height: 2.4rem;\n\tbackground: #fff;\n\tbackground: rgba(255, 255, 255, 0.5);\n\ttext-transform: uppercase;\n\tz-index: 9999;\n\tposition: relative;\n\tbox-shadow: 1px 0px 2px rgba(0,0,0,0.2);\n}\n\n.codrops-top a {\n\tpadding: 0px 10px;\n\tletter-spacing: 1px;\n\tcolor: #333;\n\tfont-weight: 400;\n\ttext-shadow: 0 -1px 0 #fff;\n\tdisplay: inline-block;\n}\n\n.codrops-top a:hover {\n\tbackground: rgba(255,255,255,0.8);\n\tcolor: #000;\n}\n\n.codrops-top span.right {\n\tfloat: right;\n}\n\n.codrops-top span.right a {\n\tfloat: left;\n\tdisplay: block;\n}\n\n.support-note {\n\tclear: both;\n}\n\n.support-note span{\n\tcolor: #ac375d;\n\tfont-size: 16px;\n\tfont-size: 1.6rem;\n\tdisplay: none;\n\tfont-weight: bold;\n\ttext-align: center;\n\tpadding: 5px 0;\n}\n\n.actions {\n\twidth: 100%;\n\tpadding: 0 0 20px 0;\n}\n\n.actions span {\n\tbox-shadow: 0 1px 1px rgba(0,0,0,0.2);\n\tbackground: #fff;\n\tcolor: #888;\n\tfont-weight: 700;\n\tfont-size: 12px;\n\tfont-size: 1.2rem;\n\ttext-align: center;\n\tdisplay: inline-block;\n\tcursor: pointer;\n\tpadding: 5px 10px;\n\ttext-transform: uppercase;\n\tmargin: 3px;\n\tborder-radius: 3px;\n\n}\n\n.actions span:hover {\n\tbackground: #f7f7f7;\n}\n\n.actions span:active {\n\tbackground: #aaa;\n\tcolor: #fff;\n\tbox-shadow: 0 1px 1px rgba(255,255,255,0.5);\n}\n\n.actions span.disabled {\n\topacity: 0.8;\n\tcolor: #ddd;\n}\n\n.light {\n\tpadding: 60px 0 250px;\n}\n\n.light span {\n\tbackground: #aaa;\n\tcolor: #fff;\n\ttext-shadow: 0 1px 1px rgba(0,0,0,0.3);\n\tbox-shadow: inset 0 1px 1px rgba(0,0,0,0.2), 0 1px 1px rgba(255,255,255,0.8);\n}\n\n.light span:hover {\n\tbackground: #444;\n}\n\n#nav-prev, #nav-next {\n\twidth: 30px;\n\theight: 30px;\n\tfont-size: 18px;\n\tline-height: 20px;\n}\n\n#close {\n\tfloat: right;\n}",[],[180,230],"ad179312-0b25-11f0-b791-569c3dd06744","custom.css","a3187fd4-0b25-11f0-9721-569c3dd06744",21,["D",1743091689408],".baraja-demo {\n\twidth: 200px;\n\tmargin: 30px auto;\n\tcolor: #aaa;\n}\n\n.no-js .baraja-demo {\n\twidth: auto;\n}\n\n.baraja-demo h4 {\n\tcolor: #666;\n\tfont-size: 14px;\n\tpadding: 8px 10px 5px;\n\tmargin: 20px 3px 5px;\n\tborder-bottom: 1px solid #f0f0f0;\n}\n\n.baraja-demo p {\n\tfont-size: 12px;\n\tfont-weight: 700;\n\tpadding: 0 10px;\n\tmargin: 0px 3px 0;\n}\n\n/* .baraja-demo ul.baraja-container li {\n\tborder-radius: 10px;\n\tpadding: 5px;\n\tbox-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);\n\t-webkit-user-select: none;\n\t-khtml-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n} */\n\n/* .baraja-demo li img {\n\tdisplay: block;\n\tmargin: 0 auto;\n\twidth: 100%;\n\tborder-radius: 10px 10px 0 0;\n} */",[],[180,238],"9cf1f09a-0b25-11f0-8b05-569c3dd06744","baraja.css","9a805e46-0b25-11f0-8642-569c3dd06744",17,["D",1743091662318],"ul.baraja-container {\n\twidth: 200px;\n\theight: 310px;\n\tmargin: 0 auto 30px;\n\tposition: relative;\n\tpadding: 0;\n\tlist-style-type: none;\n}\n\nul.baraja-container li {\n\twidth: 100%;\n\theight: 100%;\n\tmargin: 0;\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tcursor: pointer;\n\tbackground: transparent;\n\tpointer-events: auto;\n\tbox-shadow: none;\n}\n\n/* ul.baraja-container li:hover .card-inner {\n box-shadow: 0 5px 15px rgba(0,0,0,0.3);\n} */\n\nul.baraja-container li.focused .card-inner {\n box-shadow: 0 10px 25px rgba(0,0,0,0.35);\n}\n\n.no-js ul.baraja-container {\n\twidth: auto;\n\theight: auto;\n\ttext-align: center;\n}\n\n.no-js ul.baraja-container li {\n\tposition: relative;\n\tdisplay: inline-block;\n\twidth: 200px;\n\theight: 310px;\n\tmargin: 10px;\n}\n\n/* Add styles for the new inner wrapper */\n.card-inner {\n position: relative;\n width: 100%;\n height: 100%;\n transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n transform-style: preserve-3d;\n perspective: 1000px;\n background: #fff;\n box-shadow: 0 1px 5px rgba(0,0,0,0.2);\n border-radius: 6px;\n}\n\n/* Add these new styles for card flipping */\n.card-front,\n.card-back {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n border-radius: inherit;\n}\n\n.card-front {\n z-index: 2; /* Front side is above back side by default */\n transform: rotateY(0deg);\n background: white;\n}\n\n.card-back {\n z-index: 1; /* Back side below front by default */\n transform: rotateY(180deg);\n background: white;\n display: block !important;\n padding: 20px;\n box-sizing: border-box;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n max-height: 100%;\n}\n\n/* Apply flip rotation to the inner wrapper */\nli.flipped .card-inner {\n transform: rotateY(180deg);\n}\n\n/* Scrollbar styling for the back of the card */\n.card-back::-webkit-scrollbar {\n width: 8px;\n}\n\n.card-back::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 4px;\n}\n\n.card-back::-webkit-scrollbar-thumb {\n background: #888;\n border-radius: 4px;\n}\n\n.card-back::-webkit-scrollbar-thumb:hover {\n background: #555;\n}\n\n/* Allow text selection and interaction on card content */\n.card-content,\n.card-back-content {\n user-select: text;\n -webkit-user-select: text;\n pointer-events: auto;\n}\n\n/* Make images on the back interactive */\n.card-back img {\n cursor: pointer !important;\n pointer-events: auto !important;\n transition: opacity 0.2s;\n}\n\n.card-back img:hover {\n opacity: 0.9;\n}",[],[180,246],["D",1743091638418],[196,197,198],[180],["D",1743023426975],{"_96":95,"_103":99},{"_96":95,"_97":-5,"_98":99,"_18":53,"_100":101,"_102":24},{"_13":85,"_32":86,"_42":41,"_87":43,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":44,"_94":95},"ctx",{"_78":-5,"_122":293,"_294":295,"_296":297,"_298":24,"_299":24,"_300":24,"_301":57,"_302":-5,"_303":-7,"_304":-7,"_305":62,"_306":24,"_307":24,"_308":-5,"_309":24,"_310":24,"_311":24,"_312":-5},"ENV",{"_264":265,"_266":267,"_268":86,"_269":270,"_271":272,"_273":274,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286,"_287":288,"_289":290,"_291":292},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v22