[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_232":233,"_234":235},"routes/_app.x.$handle.$name",{"_100":99,"_32":44,"_108":86,"_27":109,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_20":-5,"_120":121,"_122":123,"_124":25,"_125":126,"_127":58,"_128":-5,"_129":-5,"_130":131},"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",196,"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","bling.css","latestPath","fileId","40552ab0-0c13-11f1-8eca-42dde27851f2","name","fileType","content",":root {\n --background-color:#f0e9e1; /*tan*/\n --main-color: #E9BCB7; /*cottonrose*/\n --midtone1: #C5AFA0; /*beige*/\n --midtone2: #94A187; /*light green*/\n --midtone3: #29524A; /*forestgreen*/\n --words: #313632; /*black*/\n* {\n box-sizing: border-box;\n margin: 0vw;\n background-color: var(--background-color);\n color: var(--words);\n}\n /*col 4 means it taks up 4 colums and 3 means 3 colums ect*/\n .col-4 {\n flex:100%;\n border-radius: 25px;\n background-color: var(--main-color);\n padding: 20px;\n }\n \n \n.col-3 {\n flex:75%;\n border-radius: 25px;\n background-color: var(--midtone3);\n padding: 2px;\n }\n }\n\n .col-2 {\n flex:50%;\n border-style: solid;\n border-width: 0.6vw;\n border-color: var(--midtone3);\n }\n\n .col-1 {\n flex:25%;\n }\n\n\n@media (max-width: 600px) {\n .col-1{\n flex:100%;\n }\n .col-2{\n flex:100%;\n }\n .col-3{\n flex:100%;\n }\n .col-4{\n flex:100%;\n }\n}\n\n .gallery {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-start;\n padding: 0 15px;\n}\n\n.gallery-item {\n position: relative;\n width: calc(25% - 20px);\n height: auto;\n margin: 10px;\n cursor: pointer;\n transition: transform 0.5s ease;\n}\n\n.gallery-item:hover {\n transform: scale(1.1);\n}\n /* The Modal (background) */\n.modal {\n display: none;\n position: fixed;\n z-index: 1000;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.8);\n align-items: center;\n justify-content: center;\n transition: opacity 0.5s ease;\n}\n\n/* Modal content (image) */\n.modal-content {\n position: relative;\n width: 90%;\n height: auto;\n max-width: 90%;\n max-height: 90%;\n border-radius: 5px;\n overflow: hidden;\n animation: zoomIn 0.5s;\n}\n@keyframes zoomIn {\n from {transform: scale(0.6);}\n to {transform: scale(1);}\n}\n\n.modal.show {\n display: flex;\n opacity: 1;\n}\n\n/* Close button */\n.close {\n position: absolute;\n top: 10px;\n right: 15px;\n color: var(--midtone3);\n font-size: 35px;\n font-weight: bold;\n cursor: pointer;\n transition: transform 0.3s;\n}\n/* Caption of modal image */\n.caption {\n position: absolute;\n bottom: 15px;\n width: 100%;\n text-align: center;\n color: var(--midtone3);\n font-size: 24px;\n}\n\n@media screen and (max-width: 768px) {\n .gallery-item {\n width: calc(50% - 20px);\n }\n}\n\n@media screen and (max-width: 480px) {\n .gallery-item {\n width: calc(100% - 20px);\n }\n}\n\n p {\n background-color: var(--main-color);\n }",":root {\n --background-color:#f0e9e1; /*tan*/\n --main-color: #E9BCB7; /*cottonrose*/\n --midtone1: #C5AFA0; /*beige*/\n --midtone2: #94A187; /*light green*/\n --midtone3: #29524A; /*forestgreen*/\n --words: #313632; /*black*/\n* {\n box-sizing: border-box;\n margin: 0vw;\n background-color: var(--background-color);\n color: var(--words);\n}\n /*col 4 means it taks up 4 colums and 3 means 3 colums ect*/\n .col-4 {\n flex:100%;\n border-radius: 25px;\n background-color: var(--main-color);\n padding: 20px;\n }\n \n \n.col-3 {\n flex:75%;\n border-radius: 25px;\n background-color: var(--midtone3);\n padding: 15px;\n }\n }\n\n .col-2 {\n flex:50%;\n border-style: solid;\n border-width: 0.6vw;\n border-color: var(--midtone3);\n }\n\n .col-1 {\n flex:25%;\n }\n\n\n@media (max-width: 600px) {\n .col-1{\n flex:100%;\n }\n .col-2{\n flex:100%;\n }\n .col-3{\n flex:100%;\n }\n .col-4{\n flex:100%;\n }\n}\n\n .gallery {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-start;\n padding: 0 15px;\n}\n\n.gallery-item {\n position: relative;\n width: calc(25% - 20px);\n height: auto;\n margin: 10px;\n cursor: pointer;\n transition: transform 0.5s ease;\n}\n\n.gallery-item:hover {\n transform: scale(1.1);\n}\n /* The Modal (background) */\n.modal {\n display: none;\n position: fixed;\n z-index: 1000;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.8);\n align-items: center;\n justify-content: center;\n transition: opacity 0.5s ease;\n}\n\n/* Modal content (image) */\n.modal-content {\n position: relative;\n width: 90%;\n height: auto;\n max-width: 90%;\n max-height: 90%;\n border-radius: 5px;\n overflow: hidden;\n animation: zoomIn 0.5s;\n}\n@keyframes zoomIn {\n from {transform: scale(0.6);}\n to {transform: scale(1);}\n}\n\n.modal.show {\n display: flex;\n opacity: 1;\n}\n\n/* Close button */\n.close {\n position: absolute;\n top: 10px;\n right: 15px;\n color: var(--midtone3);\n font-size: 35px;\n font-weight: bold;\n cursor: pointer;\n transition: transform 0.3s;\n}\n/* Caption of modal image */\n.caption {\n position: absolute;\n bottom: 15px;\n width: 100%;\n text-align: center;\n color: var(--midtone3);\n font-size: 24px;\n}\n\n@media screen and (max-width: 768px) {\n .gallery-item {\n width: calc(50% - 20px);\n }\n}\n\n@media screen and (max-width: 480px) {\n .gallery-item {\n width: calc(100% - 20px);\n }\n}\n\n p {\n background-color: var(--main-color);\n }","createdAt",["D",1771350071317],"branchVersion","branchId","859c6678-036d-11f1-a637-42dde27851f2","id","8596f648-036d-11f1-a637-42dde27851f2","responsive-flex-template",["D",1770390435244],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Template for a basic HTML + CSS + JavaScript static website","imageUrl","019b8ed6-c233-751a-b2ec-3752c31a36e4","pinnedFileId","019c337e-35f8-70ae-a401-72bea80e18c3","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019b8ed6-c233-751a-b2ec-3b827708ff06","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_100":99,"_107":103},"org",{"_100":99,"_101":-5,"_102":103,"_18":54,"_104":105,"_106":25},"branch",{"_13":85,"_32":86,"_42":41,"_87":43,"_88":89,"_90":91,"_92":49,"_93":94,"_95":96,"_97":44,"_98":99},"isOwned",243,"main","projectId","forkedBranchId","ffb8e8bc-0234-11f1-b359-42dde27851f2","forkedBranchVersion",26,"forkedProjectPrivacy","forkedProjectId","ffb446b8-0234-11f1-b359-42dde27851f2","forkedProjectOrgId","019b8c31-c867-72d0-a0f3-3af4d1c41815","projectName","userHandle","chloelavazza","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zN3FRQ1VHTGtnRnpWZUhseWp1WVAyaHc3RU4ifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_32":44,"_37":228,"_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":229,"_80":230,"_82":231,"_84":25},"tree",[203,204,205,206,207,208],"files",[203,204,205,206,207,208],"counts",{"_193":62,"_194":163,"_195":163,"_196":197,"_198":199},"contents",[143,144,145,146,147,148],"upstreamProject",{"_42":94,"_32":139,"_51":140,"_53":-5,"_48":49,"_78":141},"upstreamBranch",{"_42":89,"_37":132,"_133":134,"_32":86,"_87":94,"_13":135,"_88":-5,"_90":-5,"_136":137,"_46":-5,"_84":25,"_48":49,"_98":138,"_63":96,"_97":139},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1770256207664],"updatedAt",["D",1775079721464],29,"lockfileKey","1775155826916-esm.town_v_ceculbe_css-flexbox-practice@29-main","ceculbe","css-flexbox-practice","Practice in using flexbox to create responsive layouts",{"_100":138,"_107":142},"https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zN294dm1HMFFyZ0NhbWJUNmpBeEN3U0s1QWgifQ",{"_42":189,"_32":28,"_30":31,"_152":-5,"_40":41,"_39":14,"_154":25,"_37":190,"_13":191,"_33":20,"_34":36,"_24":25,"_158":-5,"_27":192},{"_42":181,"_32":182,"_30":183,"_152":-5,"_40":41,"_39":184,"_154":25,"_37":185,"_13":186,"_33":20,"_34":187,"_24":25,"_158":-5,"_27":188},{"_42":173,"_32":174,"_30":175,"_152":-5,"_40":41,"_39":176,"_154":58,"_37":177,"_13":178,"_33":20,"_34":179,"_24":25,"_158":-5,"_27":180},{"_42":167,"_32":168,"_30":56,"_152":-5,"_40":41,"_39":163,"_154":58,"_37":169,"_13":62,"_33":170,"_34":171,"_24":25,"_158":-5,"_27":172},{"_42":160,"_32":161,"_30":162,"_152":-5,"_40":41,"_39":163,"_154":58,"_37":164,"_13":62,"_33":165,"_34":109,"_24":25,"_158":-5,"_27":166},{"_42":149,"_32":150,"_30":151,"_152":-5,"_40":41,"_39":153,"_154":58,"_37":155,"_13":156,"_33":20,"_34":157,"_24":25,"_158":-5,"_27":159},"f65d0832-0c13-11f1-a2a1-42dde27851f2","style.css","019c337e-35f8-70ae-a401-7abe5d809536","parentId",140,"latest",["D",1771341530220],118,":root {\n --background-color:#f0e9e1; /*tan*/\n --main-color: #E9BCB7; /*cottonrose*/\n --midtone1: #C5AFA0; /*beige*/\n --midtone2: #94A187; /*light green*/\n --midtone3: #29524A; /*forestgreen*/\n --words: #313632; /*black*/\n* {\n box-sizing: border-box;\n margin: 0vw;\n background-color: var(--background-color);\n color: var(--words);\n}\n\n.flex-container {\n display: flex;\n flex-wrap: wrap;\n}\n\n.flex-item {\n padding: 2vw;\n h1, h2, h3 {\n text-align: center;\n }\n}\n/*col 4 means it taks up 4 colums and 3 means 3 colums ect*/\n .col-4 {\n flex:100%;\n border-style: solid;\n border-width: 0.5vw;\n border-color: var(--midtone3);\n }\n \n \n.col-3 {\n flex:75%;\n }\n\n .col-2 {\n flex:50%;\n border-style: solid;\n border-width: 0.6vw;\n border-color: var(--midtone3);\n }\n\n .col-1 {\n flex:25%;\n }\n\n\n@media (max-width: 600px) {\n .col-1{\n flex:100%;\n }\n .col-2{\n flex:100%;\n }\n .col-3{\n flex:100%;\n }\n .col-4{\n flex:100%;\n }\n}\n\n.navbar {\n list-style-type: none; /*removes bulletpoints*/\n margin: -1.5vw;\n overflow: hidden;\n background-color: var(--midtone2);\n\n li{\n float: left\n }\n\n li a {\n display: block;\n padding: 0.5rem 2rem;\n text-align:center;\n text-decoration: none;\n font-size: 1.2rem;\n color: var(--words);\n background-color: var(--midtone2);\n }\n\n li a:hover {\n background-color: var(--midtone3);\n color: var(--midtone2);\n }","label",[150],"859f6440-036d-11f1-a637-42dde27851f2","script.js","019c337e-35f8-70ae-a401-752362c3f95c",1,["D",1770390435244],"script",[161],"859f5dba-036d-11f1-a637-42dde27851f2","main.ts",["D",1770390435244],"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nexport default staticHTTPServer(import.meta.url);",[168],"8af8a640-0c14-11f1-82df-42dde27851f2","index.html","019c337e-35f8-70ae-a401-6fc94785228e",145,["D",1771341779551],12,"\n\n \n Responsive Flex Template\n \n \n \n \n \n \n

\n \n

\n\n

Responsive Flex Layout

\n\n

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

\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 Currently, there is only minimal styling for testing on this page.\n There is no flex styling. That's up to you!\n

\n Use display: flex; and flex-wrap: wrap; on\n your container.\n
\n Set the flex-item width in pixels for initial testing. Later, it\n will be better to set this as a percent.\n
\n Set the flex-item padding to create internal blank space and give\n each flex-item more depth.\n
\n Use a media query to set a different flex-item width for smaller\n screens.\n
\n This demo is especially helpful.\n

\n \n",[174],"ebe06b5c-0c26-11f1-9988-42dde27851f2","bling.html","0e914cd4-0c13-11f1-9507-42dde27851f2",185,["D",1771349673068],38,"\n\n \n Fancy CSS Demo\n \n \n \n \n \n \n \n

Plants

\n
\n

\n Plants are the foundation of life on Earth. From towering forest trees\n to tiny succulents on a windowsill, plants provide the oxygen we\n breathe, the food we eat, and the beauty that surrounds us every day.\n Through the process of photosynthesis, they transform sunlight into\n energy, supporting entire ecosystems and sustaining all living things.\n On this website, you’ll explore different types of plants, learn how\n they grow, and discover why they are essential to our planet’s health\n and future.\n

\n
\n

\n $\"Venus$ \n $\"Jade\"$ \n $\"Aloe$ \n $\"Bamboo\"$ \n

\n\n \n\n\n\n\n\n\n \n \n\n \n",[182],"d941ee20-0c27-11f1-9bc8-42dde27851f2",["D",1771350071317],25,[28],"pulls","branches","forks","envVars",{"_200":62,"_202":62},"connections",{"_200":62,"_201":62},"count","unfilledCount","emptyCount",{"_42":189,"_32":28,"_30":31,"_152":-5,"_40":41,"_39":14,"_154":25,"_37":225,"_13":191,"_33":20,"_34":36,"_24":25,"_158":-5,"_210":226,"_27":227},{"_42":181,"_32":182,"_30":183,"_152":-5,"_40":41,"_39":184,"_154":25,"_37":222,"_13":186,"_33":20,"_34":187,"_24":25,"_158":-5,"_210":223,"_27":224},{"_42":173,"_32":174,"_30":175,"_152":-5,"_40":41,"_39":176,"_154":58,"_37":219,"_13":178,"_33":20,"_34":179,"_24":25,"_158":-5,"_210":220,"_27":221},{"_42":167,"_32":168,"_30":56,"_152":-5,"_40":41,"_39":163,"_154":58,"_37":216,"_13":62,"_33":170,"_34":171,"_24":25,"_158":-5,"_210":217,"_27":218},{"_42":160,"_32":161,"_30":162,"_152":-5,"_40":41,"_39":163,"_154":58,"_37":213,"_13":62,"_33":165,"_34":109,"_24":25,"_158":-5,"_210":214,"_27":215},{"_42":149,"_32":150,"_30":151,"_152":-5,"_40":41,"_39":153,"_154":58,"_37":209,"_13":156,"_33":20,"_34":157,"_24":25,"_158":-5,"_210":211,"_27":212},["D",1771341530220],"children",[],[150],["D",1770390435244],[],[161],["D",1770390435244],[],[168],["D",1771341779551],[],[174],["D",1771349673068],[],[182],["D",1771350071317],[],[28],["D",1770390435244],{"_100":99,"_107":103},{"_100":99,"_101":-5,"_102":103,"_18":54,"_104":105,"_106":25},{"_13":85,"_32":86,"_42":41,"_87":43,"_88":89,"_90":91,"_92":49,"_93":94,"_95":96,"_97":44,"_98":99},"ctx",{"_78":-5,"_129":265,"_266":267,"_268":269,"_270":25,"_271":25,"_272":25,"_273":58,"_274":-5,"_275":-7,"_276":-7,"_277":62,"_278":25,"_279":25,"_280":-5,"_281":25,"_282":25,"_283":25,"_284":-5},"ENV",{"_236":237,"_238":239,"_240":86,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262,"_263":264},"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 · v196