Added logos and font support for multiple browsers

medialab · Jan 16, 2025 · 8940ccb · 8940ccb
1 parent 26b15a2
commit 8940ccb
Show file tree

Hide file tree

Showing 23 changed files with 124 additions and 53 deletions.
diff --git a/.svelte-kit/.DS_Store b/.svelte-kit/.DS_Store
diff --git a/.svelte-kit/generated/.DS_Store b/.svelte-kit/generated/.DS_Store
diff --git a/.svelte-kit/generated/server/internal.js b/.svelte-kit/generated/server/internal.js
@@ -22,7 +22,7 @@ export const options = {
 		app: ({ head, body, assets, nonce, env }) => "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <link rel=\"icon\" href=\"" + assets + "/favicon.png\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    " + head + "\n\n    <noscript>\n      <style>\n        /**\n          * Reinstate scrolling for non-JS clients\n          */\n        .simplebar-content-wrapper {\n          scrollbar-width: auto;\n          -ms-overflow-style: auto;\n        }\n\n        .simplebar-content-wrapper::-webkit-scrollbar,\n        .simplebar-hide-scrollbar::-webkit-scrollbar {\n          display: initial;\n          width: initial;\n          height: initial;\n        }\n      </style>\n    </noscript>\n  </head>\n  <body data-sveltekit-preload-data=\"hover\">\n    <div class=\"major_div\" style=\"display: contents\">" + body + "</div>\n  </body>\n</html>\n\n<style></style>\n",
 		error: ({ status, message }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>" + message + "</title>\n\n\t\t<style>\n\t\t\tbody {\n\t\t\t\t--bg: white;\n\t\t\t\t--fg: #222;\n\t\t\t\t--divider: #ccc;\n\t\t\t\tbackground: var(--bg);\n\t\t\t\tcolor: var(--fg);\n\t\t\t\tfont-family:\n\t\t\t\t\tsystem-ui,\n\t\t\t\t\t-apple-system,\n\t\t\t\t\tBlinkMacSystemFont,\n\t\t\t\t\t'Segoe UI',\n\t\t\t\t\tRoboto,\n\t\t\t\t\tOxygen,\n\t\t\t\t\tUbuntu,\n\t\t\t\t\tCantarell,\n\t\t\t\t\t'Open Sans',\n\t\t\t\t\t'Helvetica Neue',\n\t\t\t\t\tsans-serif;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\theight: 100vh;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t.error {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tmax-width: 32rem;\n\t\t\t\tmargin: 0 1rem;\n\t\t\t}\n\n\t\t\t.status {\n\t\t\t\tfont-weight: 200;\n\t\t\t\tfont-size: 3rem;\n\t\t\t\tline-height: 1;\n\t\t\t\tposition: relative;\n\t\t\t\ttop: -0.05rem;\n\t\t\t}\n\n\t\t\t.message {\n\t\t\t\tborder-left: 1px solid var(--divider);\n\t\t\t\tpadding: 0 0 0 1rem;\n\t\t\t\tmargin: 0 0 0 1rem;\n\t\t\t\tmin-height: 2.5rem;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t}\n\n\t\t\t.message h1 {\n\t\t\t\tfont-weight: 400;\n\t\t\t\tfont-size: 1em;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t@media (prefers-color-scheme: dark) {\n\t\t\t\tbody {\n\t\t\t\t\t--bg: #222;\n\t\t\t\t\t--fg: #ddd;\n\t\t\t\t\t--divider: #666;\n\t\t\t\t}\n\t\t\t}\n\t\t</style>\n\t</head>\n\t<body>\n\t\t<div class=\"error\">\n\t\t\t<span class=\"status\">" + status + "</span>\n\t\t\t<div class=\"message\">\n\t\t\t\t<h1>" + message + "</h1>\n\t\t\t</div>\n\t\t</div>\n\t</body>\n</html>\n"
 	},
-	version_hash: "iw2be"
+	version_hash: "fr4e1k"
 };
 
 export async function get_hooks() {

diff --git a/.svelte-kit/output/server/.vite/manifest.json b/.svelte-kit/output/server/.vite/manifest.json
@@ -362,6 +362,10 @@
     "file": "_app/immutable/assets/logo_complete.SEqfJBG_.svg",
     "src": "src/lib/media/logo_complete.svg"
   },
+  "src/lib/media/logo_condensed.svg": {
+    "file": "_app/immutable/assets/logo_condensed.Cwwx0yWm.svg",
+    "src": "src/lib/media/logo_condensed.svg"
+  },
   "src/routes/+page.server.js": {
     "file": "entries/pages/_page.server.js",
     "name": "entries/pages/_page.server",
@@ -374,13 +378,14 @@
       "_app/immutable/assets/Dot_background.C7u_RcRU.webp",
       "_app/immutable/assets/Dot_background.B3sYNgA-.png",
       "_app/immutable/assets/Dot_background.CvoK4E8a.png",
-      "_app/immutable/assets/logo_complete.SEqfJBG_.svg",
       "_app/immutable/assets/enhanced_logoImage.BVKc8-Qg.avif",
       "_app/immutable/assets/enhanced_logoImage.Qfmesbrl.avif",
       "_app/immutable/assets/enhanced_logoImage.Cbf4PYtl.webp",
       "_app/immutable/assets/enhanced_logoImage.JrAXU7cP.webp",
       "_app/immutable/assets/enhanced_logoImage.D_eIIOoz.png",
       "_app/immutable/assets/enhanced_logoImage.Cvtx-yvb.png",
+      "_app/immutable/assets/logo_condensed.Cwwx0yWm.svg",
+      "_app/immutable/assets/logo_complete.SEqfJBG_.svg",
       "_app/immutable/assets/img1.DB1WrWcd.avif",
       "_app/immutable/assets/img1.DwgMpDkg.avif",
       "_app/immutable/assets/img1.fGjxAbni.webp",
@@ -525,7 +530,7 @@
       "_escaping.js"
     ],
     "css": [
-      "_app/immutable/assets/_page.BOYj_pOf.css"
+      "_app/immutable/assets/_page.DgDRaCjP.css"
     ]
   }
 }
diff --git a/.svelte-kit/output/server/chunks/internal.js b/.svelte-kit/output/server/chunks/internal.js
@@ -1491,7 +1491,7 @@ const options = {
 		<div class="error">
 			<span class="status">` + status + '</span>\n			<div class="message">\n				<h1>' + message + "</h1>\n			</div>\n		</div>\n	</body>\n</html>\n"
   },
-  version_hash: "iw2be"
+  version_hash: "fr4e1k"
 };
 async function get_hooks() {
   let handle;

diff --git a/.svelte-kit/output/server/entries/pages/_page.server.js b/.svelte-kit/output/server/entries/pages/_page.server.js
@@ -11,7 +11,6 @@ const backgroundImage = {
     h: 982
   }
 };
-const logoImage = "/EL2MP/_app/immutable/assets/logo_complete.SEqfJBG_.svg";
 const enhanced_logoImage = {
   sources: {
     avif: "/EL2MP/_app/immutable/assets/enhanced_logoImage.BVKc8-Qg.avif 2607w, /EL2MP/_app/immutable/assets/enhanced_logoImage.Qfmesbrl.avif 5213w",
@@ -24,6 +23,8 @@ const enhanced_logoImage = {
     h: 2259
   }
 };
+const condensed_logo = "/EL2MP/_app/immutable/assets/logo_condensed.Cwwx0yWm.svg";
+const logoImage = "/EL2MP/_app/immutable/assets/logo_complete.SEqfJBG_.svg";
 const image_1 = {
   sources: {
     avif: "/EL2MP/_app/immutable/assets/img1.DB1WrWcd.avif 3012w, /EL2MP/_app/immutable/assets/img1.DwgMpDkg.avif 6024w",
@@ -590,7 +591,8 @@ function load({ params }) {
     logoImage,
     cardsDb,
     floatersDb,
-    projectDescription
+    projectDescription,
+    condensed_logo
   };
 }
 export {

diff --git a/.svelte-kit/output/server/entries/pages/_page.svelte.js b/.svelte-kit/output/server/entries/pages/_page.svelte.js
@@ -24,13 +24,15 @@ function Capitols($$payload, $$props) {
   let bringToFront = $$props["bringToFront"];
   let suppressCover = $$props["suppressCover"];
   let simplebarContainer = $$props["simplebarContainer"];
+  let condensed_logo = $$props["condensed_logo"];
   let isProjCover = data.isProjCover;
   if (isProjCover === false) {
     $$payload.out += "<!--[-->";
     const each_array_1 = ensure_array_like(data.Content);
-    $$payload.out += `<section class="card_container svelte-o3sz5s" draggable="true" aria-label="Draggable Card"${attr("data-section", data.Title)}><p class="h0 svelte-o3sz5s" style="z-index: 7;">${escape_html(data.Title)}</p> <p class="caption svelte-o3sz5s">BLOCK ${escape_html(data.IndexNum)}</p> <img data-sveltekit-preload-data="" class="card_corner_logo svelte-o3sz5s"${attr("src", data.logoImage)} alt="EL2MP Logo"> <div class="description_container svelte-o3sz5s"${attr("style", `background-color: ${stringify(data.bgColor)}; border: 5px solid ${stringify(data.bgColor)};`)}><p class="h4 svelte-o3sz5s" id="description">${escape_html(data.Description)}</p></div> <div class="card_scrollable_container svelte-o3sz5s" data-simplebar="" data-simplebar-auto-hide="false"${attr("data-section", data.Title)}><div class="card_scroll_flex svelte-o3sz5s"${attr("data-section", data.Title)}>`;
+    $$payload.out += `<section class="card_container svelte-f08zeo" draggable="true" aria-label="Draggable Card"${attr("data-section", data.Title)}><p class="h0 svelte-f08zeo" style="z-index: 7;">${escape_html(data.Title)}</p> <p class="caption svelte-f08zeo">BLOCK ${escape_html(data.IndexNum)}</p> <img data-sveltekit-preload-data="" class="card_corner_logo svelte-f08zeo"${attr("src", condensed_logo)} alt="EL2MP Logo"> <div class="description_container svelte-f08zeo"${attr("style", `background-color: ${stringify(data.bgColor)}; border: 5px solid ${stringify(data.bgColor)};`)}><p class="h4 svelte-f08zeo" id="description">${escape_html(data.Description)}</p></div> <div class="card_scrollable_container svelte-f08zeo" data-simplebar="" data-simplebar-auto-hide="false"${attr("data-section", data.Title)}><div class="card_scroll_flex svelte-f08zeo"${attr("data-section", data.Title)}>`;
     if (data.CoverImg) {
       $$payload.out += "<!--[-->";
+      $$payload.out += `<div class="duotone_container">`;
       if (typeof data.CoverImg === "string") {
         $$payload.out += "<!--[-->";
         $$payload.out += `<img data-sveltekit-preload-data=""${attr("src", data.CoverImg.img.src)} alt="CoverImg" class="duotone_image"${attr("width", data.CoverImg.img.w)}${attr("height", data.CoverImg.img.h)}>`;
@@ -44,7 +46,7 @@ function Capitols($$payload, $$props) {
         }
         $$payload.out += `<!--]--> <img data-sveltekit-preload-data=""${attr("src", data.CoverImg.img.src)} alt="CoverImg" class="duotone_image"${attr("width", data.CoverImg.img.w)}${attr("height", data.CoverImg.img.h)}></picture>`;
       }
-      $$payload.out += `<!--]-->`;
+      $$payload.out += `<!--]--> <div class="duotone_overlay"${attr("style", `background-color: ${stringify(data.bgColor)};`)}></div></div>`;
     } else {
       $$payload.out += "<!--[!-->";
     }
@@ -53,7 +55,7 @@ function Capitols($$payload, $$props) {
       $$payload.out += "<!--[-->";
       for (let index = 0, $$length = each_array_1.length; index < $$length; index++) {
         let section = each_array_1[index];
-        $$payload.out += `<div class="section_container svelte-o3sz5s" data-sveltekit-preload-data=""${attr("data-section", `Ex ${index + 1}`)}>`;
+        $$payload.out += `<div class="section_container svelte-f08zeo" data-sveltekit-preload-data=""${attr("data-section", `Ex ${index + 1}`)}>`;
         if (section.subtitle) {
           $$payload.out += "<!--[-->";
           $$payload.out += `<p class="h4">${escape_html(section.subtitle)}</p>`;
@@ -65,7 +67,7 @@ function Capitols($$payload, $$props) {
           $$payload.out += "<!--[-->";
           if (typeof section.picture === "string") {
             $$payload.out += "<!--[-->";
-            $$payload.out += `<img data-sveltekit-preload-data="" class="article_image svelte-o3sz5s"${attr("src", section.picture.img.src)} alt="image"${attr("width", section.picture.img.w)}${attr("height", section.picture.img.h)}>`;
+            $$payload.out += `<img data-sveltekit-preload-data="" class="article_image svelte-f08zeo"${attr("src", section.picture.img.src)} alt="People"${attr("width", section.picture.img.w)}${attr("height", section.picture.img.h)}>`;
           } else {
             $$payload.out += "<!--[!-->";
             const each_array_2 = ensure_array_like(Object.entries(section.picture.sources));
@@ -74,7 +76,7 @@ function Capitols($$payload, $$props) {
               let [format, srcset] = each_array_2[$$index_1];
               $$payload.out += `<source${attr("srcset", srcset)}${attr("type", "image/" + format)}>`;
             }
-            $$payload.out += `<!--]--> <img data-sveltekit-preload-data="" class="article_image svelte-o3sz5s"${attr("src", section.picture.img.src)} alt="image"${attr("width", section.picture.img.w)}${attr("height", section.picture.img.h)}></picture>`;
+            $$payload.out += `<!--]--> <img data-sveltekit-preload-data="" class="article_image svelte-f08zeo"${attr("src", section.picture.img.src)} alt="People"${attr("width", section.picture.img.w)}${attr("height", section.picture.img.h)}></picture>`;
           }
           $$payload.out += `<!--]-->`;
         } else {
@@ -96,14 +98,15 @@ function Capitols($$payload, $$props) {
     $$payload.out += `<!--]--></div></div></section>`;
   } else {
     $$payload.out += "<!--[!-->";
-    $$payload.out += `<section class="card_container svelte-o3sz5s" id="cover_description" draggable="true" style="color: white;"><p class="h0 svelte-o3sz5s">${escape_html(data.Title)}</p> <img class="card_corner_logo svelte-o3sz5s" style="position: absolute; left: 0; bottom: 0; width: 25%; opacity: 1;"${attr("src", data.logoImage)} alt="EL2MP Logo"> <div class="card_scrollable_container svelte-o3sz5s"><div class="card_scroll_flex svelte-o3sz5s"><p class="h4">${escape_html(data.Description)}</p></div></div> <a class="x_arrow svelte-o3sz5s"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21" fill="none"><path d="M1 1L20 20M1 20L20 1" stroke="white" stroke-width="2"></path></svg></a></section>`;
+    $$payload.out += `<section class="card_container svelte-f08zeo" id="cover_description" draggable="true" style="color: white;"><p class="h0 svelte-f08zeo">${escape_html(data.Title)}</p> <img class="card_corner_logo svelte-f08zeo" style="position: absolute; left: 0; bottom: 0; width: 25%; opacity: 1;"${attr("src", condensed_logo)} alt="EL2MP Logo"> <div class="card_scrollable_container svelte-f08zeo"><div class="card_scroll_flex svelte-f08zeo"><p class="h4">${escape_html(data.Description)}</p></div></div> <a class="x_arrow svelte-f08zeo"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21" fill="none"><path d="M1 1L20 20M1 20L20 1" stroke="white" stroke-width="2"></path></svg></a></section>`;
   }
   $$payload.out += `<!--]-->`;
   bind_props($$props, {
     data,
     bringToFront,
     suppressCover,
-    simplebarContainer
+    simplebarContainer,
+    condensed_logo
   });
   pop();
 }
@@ -317,7 +320,7 @@ function _page($$payload, $$props) {
   const each_array_1 = ensure_array_like(Object.values(data.floatersDb));
   $$payload.out += `<div class="content_container">`;
   Logo_button($$payload, { data, switch_sidebar });
-  $$payload.out += `<!----> <section class="host"><button class="closing_icon svelte-nr1g7n"><svg width="50px" height="50px" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M480-154.15 328.62-305.54l26.3-26.31L480-206.77l125.08-125.08 26.3 26.31L480-154.15ZM354.92-628.46l-26.3-26.31L480-806.15l151.38 151.38-26.3 26.31L480-753.54 354.92-628.46Z"></path></svg></button> `;
+  $$payload.out += `<!----> <section class="host"><button class="closing_icon svelte-b5cb45"><svg width="50px" height="50px" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M480-154.15 328.62-305.54l26.3-26.31L480-206.77l125.08-125.08 26.3 26.31L480-154.15ZM354.92-628.46l-26.3-26.31L480-806.15l151.38 151.38-26.3 26.31L480-753.54 354.92-628.46Z"></path></svg></button> `;
   Position_marker_button($$payload, {
     data,
     selectedCardTitle: activeMarker,
@@ -334,7 +337,8 @@ function _page($$payload, $$props) {
       data: card,
       bringToFront,
       suppressCover,
-      simplebarContainer
+      simplebarContainer,
+      condensed_logo: data.condensed_logo
     });
   }
   $$payload.out += `<!--]--> <!--[-->`;
@@ -346,7 +350,7 @@ function _page($$payload, $$props) {
       color: currentCardColor
     });
   }
-  $$payload.out += `<!--]--> <div class="mobile_desc_container svelte-nr1g7n"><div class="mobile_text svelte-nr1g7n"><p class="s1">This website is meant to be seen from a desktop device. <br> Meanwhile, if you need informations on what EL2MP is, read below:</p></div> <div class="mobile_description svelte-nr1g7n"><p class="p2">${html(data.projectDescription)}</p></div></div></section></div> `;
+  $$payload.out += `<!--]--> <div class="mobile_desc_container svelte-b5cb45"><div class="mobile_text svelte-b5cb45"><p class="s1">This website is meant to be seen from a desktop device. <br> Meanwhile, if you need informations on what EL2MP is, read below:</p></div> <div class="mobile_description svelte-b5cb45"><p class="p2">${html(data.projectDescription)}</p></div></div></section></div> `;
   if (typeof data.backgroundImage === "string") {
     $$payload.out += "<!--[-->";
     $$payload.out += `<img class="background_image"${attr("src", data.backgroundImage.img.src)} alt="DotsDotsDots?"${attr("width", data.backgroundImage.img.w)}${attr("height", data.backgroundImage.img.h)}>`;