[{"_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",243,"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","019c337b-d1b3-7580-8c99-7c61f845081f","name","fileType","content","\n\n \n Flex Layout Template\n \n \n \n \n \n \n \n

\n \n

Flex Layout Template

\n\n

\n \n

Introduction

\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

\n\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\n content. Even headers, footers, and main logos can go into this\n container.\n

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

\n \n

Styling

\n The key CSS statements for this page are split among the container, the items, and some custom rules for creating column widths.\n

flexbox-container

\n display: flex; to tell the browser to use flex layout rules\n
\n flex-wrap: wrap; to set the behavior that flex items will fill a row, then wrap to another row\n

flexbox-item

\n padding: 1em; for internal whitespacw in each flex-item box, with units relative to text size. \n
\n text-align: center; on headings. Other styles can be added to headings, paragraphs, images, as needed. \n

Custom utility classes to set column width. This page uses a 4-column layout, so there are four util.ity classes. For example:
\n .col-2 { flex: 50%;}
\n to set the flex width of any 2-column item to 50% of the screen width.

\n\n

\n \n

\n \n","\n\n \n Flex Layout Template\n \n \n \n \n \n \n \n

\n \n

Flex Layout Template

\n\n

\n \n

Introduction

\n\n

Structure

\n \n

Styling

\n The key CSS statements for this page are split among the container, the items, and some custom rules for creating column widths.\n

flexbox-container

\n display: flex; to tell the browser to use flex layout rules\n
\n flex-wrap: wrap; to set the behavior that flex items will fill a row, then wrap to another row\n

flexbox-item

\n padding: 1em; for internal whitespacw in each flex-item box, with units relative to text size. \n
\n text-align: center; on headings. Other styles can be added to headings, paragraphs, images, as needed. \n

\n\n

\n \n

\n \n","createdAt",["D",1770762390657],"branchVersion","branchId","282bf350-036d-11f1-8f16-42dde27851f2","id","2827bde4-036d-11f1-8f16-42dde27851f2","responsive-flex-template",["D",1770390278509],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Template for a responsive web page using flexbox","imageUrl","019b8c31-c867-72d0-a0f3-377b0a71335d","pinnedFileId","019c337b-d1b3-7580-8c99-812f4c2089a0","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",268,"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",{"_159":62,"_160":145,"_161":145,"_162":163,"_164":165},"contents",[127,128,129,130],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":155,"_32":28,"_30":31,"_134":-5,"_40":41,"_39":14,"_136":25,"_37":156,"_13":157,"_33":20,"_34":36,"_24":25,"_140":-5,"_27":158},{"_42":149,"_32":150,"_30":56,"_134":-5,"_40":41,"_39":145,"_136":58,"_37":151,"_13":62,"_33":152,"_34":153,"_24":25,"_140":44,"_27":154},{"_42":142,"_32":143,"_30":144,"_134":-5,"_40":41,"_39":145,"_136":58,"_37":146,"_13":62,"_33":147,"_34":106,"_24":25,"_140":-5,"_27":148},{"_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},"ac6c14c4-06ce-11f1-8d84-42dde27851f2","style.css","019c337b-d1b3-7580-8c99-8aafd93d47a6","parentId",241,"latest",["D",1770762015086],212,":root {\n --background-color: #eeeeee; /* platinum */\n --main-color: #326273; /* blue slate */\n --midtone1: #5c9ead; /* pacific blue */\n --midtone2: #cd5334; /* rosy copper */\n --midtone3: #e39774; /* tangerine dream */\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n color: var(--main-color);\n}\n\nbody {\n background-color: var(--background-color);\n margin-left: 1em;\n margin-right: 1em;\n font-family: \"Lato\", sans-serif;\n}\n\nh1 {\n margin: 1em;\n color: var(--midtone2);\n text-align: center;\n font-weight: 900;\n}\n\nh2, h3 {\n margin: 1em 1em 0em;\n text-align: center;\n color: var(--midtone2);\n}\n\np {\n margin: 1em;\n color: var(--main-color);\n font-weight: 400;\n}\n\nhr {\n width: 90%;\n margin: 1em;\n border: 0.2em solid var(--midtone1);\n border-radius: 0.1em;\n}\n\n.flex-container {\n display: flex;\n flex-wrap: wrap;\n gap: 1vw;\n justify-content: center;\n}\n\n.flex-item {\n border: 0px solid grey;\n border-radius: 0.5em;\n background-color: white;\n box-shadow: 0.2vw 0.2vw 0.5vw #22222244;\n}\n\n.to-edge {\n width: 100%;\n}\n\n.full {\n width: 96%;\n}\n\n.twothirds {\n width: 64vw;\n}\n\n.onethird {\n width: 32vw;\n}\n\n@media (max-width: 600px) {\n .col-3 {\n flex: 100%;\n }\n .col-2 {\n flex: 100%;\n }\n .col-1 {\n flex: 45%;\n }\n}\n\n.navbar {\n overflow: hidden;\n list-style-type: none;\n background-color: var(--main-color);\n\n li {\n float: left;\n }\n\n li a {\n display: block;\n padding: 0.5em 2em;\n text-align: center;\n text-decoration: none;\n font-size: 1.2em;\n background-color: var(--main-color);\n color: var(--background-color);\n }\n\n li a:hover {\n background-color: var(--midtone3);\n }\n}","label",[132],"2833aa78-036d-11f1-8f16-42dde27851f2","script.js","019c337b-d1b3-7580-8c99-841d26f02688",1,["D",1770390278509],"script",[143],"2833a366-036d-11f1-8f16-42dde27851f2","main.ts",["D",1770390278509],"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nexport default staticHTTPServer(import.meta.url);",[150],"8c4707b6-06cf-11f1-9d60-42dde27851f2",["D",1770762390657],30,[28],"pulls","branches","forks","envVars",{"_166":62,"_168":62},"connections",{"_166":62,"_167":62},"count","unfilledCount","emptyCount",{"_42":155,"_32":28,"_30":31,"_134":-5,"_40":41,"_39":14,"_136":25,"_37":183,"_13":157,"_33":20,"_34":36,"_24":25,"_140":-5,"_174":184,"_27":185},{"_42":149,"_32":150,"_30":56,"_134":-5,"_40":41,"_39":145,"_136":58,"_37":180,"_13":62,"_33":152,"_34":153,"_24":25,"_140":44,"_174":181,"_27":182},{"_42":142,"_32":143,"_30":144,"_134":-5,"_40":41,"_39":145,"_136":58,"_37":177,"_13":62,"_33":147,"_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",1770762015086],"children",[],[132],["D",1770390278509],[],[143],["D",1770390278509],[],[150],["D",1770762390657],[],[28],["D",1770390278509],{"_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 · v243