[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_190":191,"_192":193},"routes/_app.x.$handle.$name",{"_96":95,"_32":44,"_105":86,"_27":106,"_13":14,"_107":-5,"_11":108,"_109":110,"_111":112,"_113":114,"_115":116,"_20":-5,"_117":-5,"_118":-5,"_119":25,"_120":121,"_122":58,"_123":-5,"_124":-5,"_125":126},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_32":44,"_37":45,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":25},"version",14,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":20,"_34":36,"_37":38,"_39":14,"_40":41,"_24":25},"previous",{"_30":31,"_32":28,"_33":20,"_34":35},"deleted",false,"deletedHere","path","index.html","latestPath","fileId","019c2b7e-0f66-73aa-9cd7-28dbb7bc4fa1","name","fileType","content","\n\n \n Responsive Flex Template\n \n \n \n \n \n \n

Responsive Flex Layout

Intro

\n This project is a template for creating a web page based on a wrapping\n flexbox layout. This technique is an easy way to make web pages that\n scale nicely to different screen sizes without having cluttered and\n complex CSS.\n

Structure

\n In the HTML, notice that all of the main content is inside the flex-container div. This acts as the container for most or all content. Even headers, footers, and main logos can go into this container.\n

\n Inside the flex-container div are multiple flex-item divs. Each of these acts as a smaller container for one item on the page. An item can be a main image, navigation bar, photo with caption, chunk of text, etc. Think of an item as a block of the page that you want to keep together even if the overall layout changes.\n

Styling

\n \n","\n\n \n Responsive Flex Template\n \n \n \n \n \n \n

Responsive Flex Layout

Intro

Structure

Styling

\n Currently, there is no flex styling on this page. That's up to you! \n

Use display: flex; and flex-wrap: wrap; on your container.
\n

\n \n","createdAt",["D",1770258334509],"branchVersion","branchId","ffb8e8bc-0234-11f1-b359-42dde27851f2","id","ffb446b8-0234-11f1-b359-42dde27851f2","css-flexbox-practice",["D",1770256207664],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Practice in using flexbox to create responsive layouts","imageUrl","019b8c31-c867-72d0-a0f3-377b0a71335d","pinnedFileId","019c2b7e-0f66-73aa-9cd7-2fc969416095","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019b8c31-c867-72d0-a0f3-3af4d1c41815","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_96":95,"_104":100},"org",{"_96":95,"_97":98,"_99":100,"_18":54,"_101":102,"_103":25},"branch",{"_13":85,"_32":86,"_42":41,"_87":43,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":44,"_94":95},"isOwned",29,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","ceculbe","handle","displayName","Cory","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zN294dm1HMFFyZ0NhbWJUNmpBeEN3U0s1QWgifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_32":44,"_37":186,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":187,"_80":188,"_82":189,"_84":25},"tree",[169,170,171,172],"files",[169,170,171,172],"counts",{"_158":62,"_159":138,"_160":161,"_162":163,"_164":165},"contents",[127,128,129,130],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":154,"_32":28,"_30":31,"_134":-5,"_40":41,"_39":14,"_136":25,"_37":155,"_13":156,"_33":20,"_34":36,"_24":25,"_140":-5,"_27":157},{"_42":148,"_32":149,"_30":56,"_134":-5,"_40":41,"_39":138,"_136":58,"_37":150,"_13":62,"_33":151,"_34":152,"_24":25,"_140":44,"_27":153},{"_42":142,"_32":143,"_30":144,"_134":-5,"_40":41,"_39":138,"_136":58,"_37":145,"_13":62,"_33":146,"_34":106,"_24":25,"_140":-5,"_27":147},{"_42":131,"_32":132,"_30":133,"_134":-5,"_40":41,"_39":135,"_136":25,"_37":137,"_13":138,"_33":20,"_34":139,"_24":25,"_140":-5,"_27":141},"3d2b6350-0235-11f1-82c7-42dde27851f2","style.css","019c2b7e-0f66-73aa-9cd7-349ca285191e","parentId",4,"latest",["D",1770256310781],1,"* {\n box-sizing: border-box;\n margin: 0;\n}","label",[132],"ffbd731e-0234-11f1-b359-42dde27851f2","script.js","019c2b7e-0f66-73aa-9cd7-3210628cb47f",["D",1770256207664],"script",[143],"ffbd6e32-0234-11f1-b359-42dde27851f2","main.ts",["D",1770256207664],"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nexport default staticHTTPServer(import.meta.url);",[149],"f366ec26-0239-11f1-9f81-42dde27851f2",["D",1770258334509],8,[28],"pulls","branches","forks",5,"envVars",{"_166":62,"_168":62},"connections",{"_166":62,"_167":62},"count","unfilledCount","emptyCount",{"_42":154,"_32":28,"_30":31,"_134":-5,"_40":41,"_39":14,"_136":25,"_37":183,"_13":156,"_33":20,"_34":36,"_24":25,"_140":-5,"_174":184,"_27":185},{"_42":148,"_32":149,"_30":56,"_134":-5,"_40":41,"_39":138,"_136":58,"_37":180,"_13":62,"_33":151,"_34":152,"_24":25,"_140":44,"_174":181,"_27":182},{"_42":142,"_32":143,"_30":144,"_134":-5,"_40":41,"_39":138,"_136":58,"_37":177,"_13":62,"_33":146,"_34":106,"_24":25,"_140":-5,"_174":178,"_27":179},{"_42":131,"_32":132,"_30":133,"_134":-5,"_40":41,"_39":135,"_136":25,"_37":173,"_13":138,"_33":20,"_34":139,"_24":25,"_140":-5,"_174":175,"_27":176},["D",1770256310781],"children",[],[132],["D",1770256207664],[],[143],["D",1770256207664],[],[149],["D",1770258334509],[],[28],["D",1770256207664],{"_96":95,"_104":100},{"_96":95,"_97":98,"_99":100,"_18":54,"_101":102,"_103":25},{"_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,"_124":223,"_224":225,"_226":227,"_228":25,"_229":25,"_230":25,"_231":58,"_232":-5,"_233":-7,"_234":-7,"_235":62,"_236":25,"_237":25,"_238":-5,"_239":25,"_240":25,"_241":25,"_242":-5},"ENV",{"_194":195,"_196":197,"_198":86,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210,"_211":212,"_213":214,"_215":216,"_217":218,"_219":220,"_221":222},"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 · v14