jekyll-theme-merida 0.0.1

data/assets/css/app.css

@@ -0,0 +1,213 @@
+/* Overrides of Tailwind Theme */
+@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Gilda+Display&display=swap');
+
+@import "tailwindcss";
+
+@plugin "@tailwindcss/typography";
+
+@theme {
+  --font-sans: "Source Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+  "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-gilda: "Gilda Display";
+  --font-main: var(--font-sans);
+  --color-border-main: var(--color-gray-400);
+  --color-primary: var(--color-blue-600);
+}
+
+.max-w-theme {
+  @apply max-w-6xl;
+}
+
+/* ************************************************************** */
+
+/* Styles of basic HTML elements */
+html {
+  @apply overflow-y-scroll;
+}
+
+em:not(li *) {
+  @apply block text-center
+}
+
+img:has(+ em) {
+  @apply mb-0;
+}
+
+
+.manual-h1 {
+  @apply text-2xl sm:text-4xl md:text-5xl lg:text-6xl;
+}
+
+/* Task List Styling — checkboxes visible, bullets removed, checked items green */
+ul.task-list {
+  @apply list-none p-0 m-0 space-y-2;
+  /* remove bullets, vertical spacing */
+}
+
+ul.task-list li {
+  @apply flex items-center;
+  /* align checkbox and text */
+}
+
+ul.task-list li input[type="checkbox"] {
+  @apply mr-2;
+  /* spacing between checkbox and text */
+}
+
+/* Make checked tasks green */
+ul.task-list li input[type="checkbox"]:checked + * {
+  @apply text-green-600 font-medium;
+}
+
+.main a {
+  @apply text-primary;
+  @apply no-underline;
+}
+
+/* All tables except ones inside .highlight */
+
+.main table:not(.highlight table) {
+  @apply border-collapse border border-gray-200 text-left mb-4 min-w-full;
+
+  caption {
+    @apply text-sm font-semibold mb-2;
+  }
+
+  thead {
+    @apply bg-gray-100;
+  }
+
+  th {
+    @apply px-4 py-2 border-b border-gray-300 font-medium text-gray-700;
+  }
+
+  td {
+    @apply px-4 py-2 border-b border-gray-200 text-gray-600;
+  }
+
+  tbody tr:hover {
+    @apply bg-gray-50;
+  }
+
+  /* Optional: for color swatches or inner divs */
+
+  td div[data-theme] {
+    @apply w-12 aspect-square border border-gray-300;
+  }
+}
+
+.table-wrapper {
+  @apply overflow-x-auto mb-4;
+}
+
+/* ************************************************************** */
+
+/* Code Highlighting styles */
+:not(pre) > code {
+  @apply text-gray-600;
+  @apply bg-blue-50;
+  @apply px-1.5;
+  @apply py-0.5;
+  @apply rounded;
+  @apply font-light;
+  @apply font-main;
+}
+
+/* ************************************************************** */
+
+/* Code Highlighting styles */
+:not(pre) > code {
+  @apply text-gray-600;
+  @apply bg-blue-50;
+  @apply px-1.5;
+  @apply py-0.5;
+  @apply rounded;
+  @apply font-light;
+  @apply font-main;
+}
+
+/*
+    adds rounded corners, padding syntax and horizontal scroll bar to the code block
+    author: epigone707
+*/
+pre.highlight {
+  padding: 7px;
+  /* cause a scrolling mechanism to be provided for overflowing boxes */
+  overflow-x: auto;
+}
+
+figure.highlight > pre {
+  padding: 7px;
+  overflow-x: auto;
+}
+
+/* Default highlight spacing */
+.highlight {
+  border-radius: 5px;
+  @apply mb-2;
+  margin-top: 1rem; /* default */
+}
+
+/* Remove top margin if the highlight's parent is inside highlighter-rouge
+   AND the highlighter-rouge div is immediately after a paragraph */
+p + .highlighter-rouge .highlight {
+  @apply mt-0;
+}
+
+.rouge-gutter {
+  @apply border-r border-gray-300 pr-2;
+}
+
+.rouge-code pre {
+  @apply pl-2;
+  /* optional: spacing so code doesn’t touch line */
+}
+
+.language-plaintext.highlighter-rouge {
+  position: relative; /* make outer div relative */
+}
+
+.language-plaintext.highlighter-rouge pre.highlight {
+  position: static; /* remove relative from inner pre */
+}
+
+/* for making copy button accessible in mobile and tablet */
+.copy-button {
+  touch-action: manipulation; /* ensures the tap is recognized */
+  z-index: 10; /* above everything */
+}
+
+/* ************************************************************** */
+
+/* Styles for Bibliography */
+.bibliography {
+  @apply pl-0!;
+}
+
+.bibliography li {
+  @apply list-none!;
+}
+
+/* ************************************************************** */
+
+/* Search utility styles */
+
+@keyframes modal-overshoot {
+  0% {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+  70% {
+    transform: scale(1.03);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.modal-animate {
+  animation: modal-overshoot 150ms ease-out;
+}
+

data/assets/css/github-dark.css

@@ -0,0 +1,116 @@
+.highlight table td { padding: 5px; }
+.highlight table pre { margin: 0; }
+.highlight, .highlight .w {
+  color: #c9d1d9;
+  background-color: #161b22;
+}
+.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kv {
+  color: #ff7b72;
+}
+.highlight .gr {
+  color: #f0f6fc;
+}
+.highlight .gd {
+  color: #ffdcd7;
+  background-color: #67060c;
+}
+.highlight .nb {
+  color: #ffa657;
+}
+.highlight .nc {
+  color: #ffa657;
+}
+.highlight .no {
+  color: #ffa657;
+}
+.highlight .nn {
+  color: #ffa657;
+}
+.highlight .sr {
+  color: #7ee787;
+}
+.highlight .na {
+  color: #7ee787;
+}
+.highlight .nt {
+  color: #7ee787;
+}
+.highlight .gi {
+  color: #aff5b4;
+  background-color: #033a16;
+}
+.highlight .ges {
+  font-weight: bold;
+  font-style: italic;
+}
+.highlight .kc {
+  color: #79c0ff;
+}
+.highlight .l, .highlight .ld, .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
+  color: #79c0ff;
+}
+.highlight .sb {
+  color: #79c0ff;
+}
+.highlight .bp {
+  color: #79c0ff;
+}
+.highlight .ne {
+  color: #79c0ff;
+}
+.highlight .nl {
+  color: #79c0ff;
+}
+.highlight .py {
+  color: #79c0ff;
+}
+.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm {
+  color: #79c0ff;
+}
+.highlight .o, .highlight .ow {
+  color: #79c0ff;
+}
+.highlight .gh {
+  color: #1f6feb;
+  font-weight: bold;
+}
+.highlight .gu {
+  color: #1f6feb;
+  font-weight: bold;
+}
+.highlight .s, .highlight .sa, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .sx, .highlight .s1, .highlight .ss {
+  color: #a5d6ff;
+}
+.highlight .nd {
+  color: #d2a8ff;
+}
+.highlight .nf, .highlight .fm {
+  color: #d2a8ff;
+}
+.highlight .err {
+  color: #f0f6fc;
+  background-color: #8e1519;
+}
+.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cp, .highlight .cpf, .highlight .c1, .highlight .cs {
+  color: #8b949e;
+}
+.highlight .gl {
+  color: #8b949e;
+}
+.highlight .gt {
+  color: #8b949e;
+}
+.highlight .ni {
+  color: #c9d1d9;
+}
+.highlight .si {
+  color: #c9d1d9;
+}
+.highlight .ge {
+  color: #c9d1d9;
+  font-style: italic;
+}
+.highlight .gs {
+  color: #c9d1d9;
+  font-weight: bold;
+}

data/assets/favicon/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

data/assets/scripts/copy-code.js

@@ -0,0 +1,104 @@
+// Adds a copy button to code blocks.
+// It finds the code blocks and adds a button with capibility to copy the code into clipboard.
+
+window.addEventListener("DOMContentLoaded", () => {
+
+  // Select all relevant code blocks
+  document.querySelectorAll(
+    "pre:has(table.rouge-table), figure.highlight > pre"
+  ).forEach(pre => {
+    // prevent duplicates
+    if (pre.querySelector(":scope > .copy-button")) return;
+
+    pre.classList.add("relative");
+
+    const button = document.createElement("button");
+    button.type = "button";
+    button.textContent = "Copy";
+    button.className =
+      "copy-button absolute top-2 right-2 px-2 py-1 text-xs " +
+      "bg-gray-600 text-white border-white border-1 rounded hover:bg-gray-700 cursor-pointer";
+
+    pre.appendChild(button);
+
+    button.addEventListener("click", async () => {
+      let text = "";
+
+      // Case 1 & 2: table inside pre/code
+      const table = pre.querySelector("table.rouge-table");
+      if (table) {
+        const codeCell = table.querySelector("td.code > pre, td.rouge-code > pre");
+        if (codeCell) text = codeCell.textContent;
+      }
+
+      // Case 3: plain code inside pre > code
+      if (!text) {
+        const code = pre.querySelector("code");
+        if (code) text = code.textContent;
+      }
+
+      if (!text) return;
+
+      try {
+        await navigator.clipboard.writeText(text);
+        button.textContent = "Copied!";
+        setTimeout(() => (button.textContent = "Copy"), 2000);
+      } catch (err) {
+        console.error("Failed to copy:", err);
+      }
+    });
+  });
+});
+
+
+window.addEventListener("DOMContentLoaded", () => {
+  document.querySelectorAll(".bibtex-toggle").forEach(button => {
+    button.addEventListener("click", () => {
+      const container = button.closest(".bib-entry");
+      if (!container) return;
+
+      const details = container.querySelector(".bibtex-details");
+      if (!details) return;
+
+      details.open = !details.open;
+    });
+  });
+});
+
+// Adds a copy button to BibTeX pre blocks inside details
+window.addEventListener("DOMContentLoaded", () => {
+
+  // Select all pre blocks inside details (BibTeX)
+  document.querySelectorAll("details > pre").forEach(pre => {
+
+    // Prevent duplicates
+    if (pre.querySelector(":scope > .copy-button")) return;
+
+    pre.classList.add("relative");
+
+    // Create button
+    const button = document.createElement("button");
+    button.type = "button";
+    button.textContent = "Copy";
+    button.className =
+      "copy-button absolute top-2 right-2 px-2 py-1 text-xs " +
+      "bg-gray-600 text-white border-white border-1 rounded hover:bg-gray-700 cursor-pointer";
+
+    pre.appendChild(button);
+
+    // Copy event
+    button.addEventListener("click", async () => {
+      const text = pre.textContent; // grab all text inside pre
+      if (!text) return;
+
+      try {
+        await navigator.clipboard.writeText(text);
+        button.textContent = "Copied!";
+        setTimeout(() => (button.textContent = "Copy"), 2000);
+      } catch (err) {
+        console.error("Failed to copy:", err);
+      }
+    });
+  });
+
+});

data/assets/scripts/mathjax-config.js

@@ -0,0 +1,12 @@
+/* configures MathJax */
+
+window.MathJax = {
+  tex: {
+    inlineMath: [['$', '$'], ['\\(', '\\)']],
+    displayMath: [['$$', '$$'], ['\\[', '\\]']],
+    processEscapes: true
+  },
+  svg: {
+    fontCache: 'global'
+  }
+};

data/assets/scripts/navbar.js

@@ -0,0 +1,9 @@
+// Opening and closing the sandwich menu
+document.addEventListener("DOMContentLoaded", function () {
+  const btn = document.getElementById("menu-btn");
+  const menu = document.getElementById("mobile-menu");
+
+  btn.addEventListener("click", function () {
+    menu.classList.toggle("hidden");
+  });
+});

data/assets/scripts/search.js

@@ -0,0 +1,99 @@
+let pagefind;
+
+// Helper: Load Pagefind
+async function initPagefind() {
+  const mod = await import("/pagefind/pagefind.js");
+  await mod.init();
+  return mod;
+}
+
+// Helper: Show Centered Message (Placeholder or No Results)
+function showPlaceholder(container, message = "Start typing to search...") {
+  container.classList.remove("space-y-4", "block");
+  container.classList.add("flex", "items-center", "justify-center", "h-full");
+  container.innerHTML = `<p class="text-sm text-gray-500 text-center">${message}</p>`;
+}
+
+// Helper: Render the Search Results
+function renderResults(results, container) {
+  container.innerHTML = "";
+
+  if (results.length === 0) {
+    showPlaceholder(container, "No results found.");
+    return;
+  }
+
+  // Restore normal top-aligned layout
+  container.classList.remove("flex", "items-center", "justify-center", "h-full");
+  container.classList.add("space-y-4", "block");
+
+  results.forEach(result => {
+    const el = document.createElement("a");
+    el.href = result.url;
+    el.className = "block p-2 -mx-2 rounded hover:bg-gray-100 transition-colors";
+    el.innerHTML = `
+      <h3 class="text-blue-600 font-semibold hover:underline">${result.meta.title || "Untitled"}</h3>
+      <p class="text-sm text-gray-600">${result.excerpt}</p>
+    `;
+    container.appendChild(el);
+  });
+}
+
+// MAIN INITIALIZATION
+document.addEventListener("DOMContentLoaded", async () => {
+  // 1. Grab all elements
+  const modal = document.getElementById("search-modal");
+  const openButtons = document.querySelectorAll(".search-open");
+  const input = document.getElementById("search-input");
+  const clearBtn = document.getElementById("search-clear");
+  const resultsContainer = document.getElementById("search-results");
+
+  // 2. Initialize Pagefind
+  pagefind = await initPagefind();
+
+  // 3. Modal Toggle Logic
+  openButtons.forEach(btn => {
+    btn.addEventListener("click", () => {
+      modal.classList.remove("hidden");
+      input.focus();
+    });
+  });
+
+  const closeModal = () => modal.classList.add("hidden");
+
+  modal.addEventListener("click", (e) => {
+    if (e.target === modal) closeModal();
+  });
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") closeModal();
+  });
+
+  // 4. Search & Clear Button Logic
+  input.addEventListener("input", async (e) => {
+    const query = e.target.value.trim();
+
+    // Toggle "X" button visibility
+    clearBtn.classList.toggle("hidden", query === "");
+
+    if (!query) {
+      showPlaceholder(resultsContainer);
+      return;
+    }
+
+    // Perform Search
+    const search = await pagefind.search(query);
+    const results = await Promise.all(
+      search.results.slice(0, 10).map(r => r.data())
+    );
+
+    renderResults(results, resultsContainer);
+  });
+
+  // 5. Clear Button Click
+  clearBtn.addEventListener("click", () => {
+    input.value = "";
+    input.focus();
+    clearBtn.classList.add("hidden");
+    showPlaceholder(resultsContainer);
+  });
+});

data/assets/scripts/table-wrapper.js

@@ -0,0 +1,15 @@
+// Wrap tables in a scrollable container to fix right-side gap
+window.addEventListener("DOMContentLoaded", () => {
+  document.querySelectorAll(".main table:not(.highlight table)").forEach(table => {
+    // skip if already wrapped
+    if (table.parentElement.classList.contains("table-wrapper")) return;
+
+    // create wrapper div
+    const wrapper = document.createElement("div");
+    wrapper.className = "table-wrapper overflow-x-auto mb-4";
+
+    // insert wrapper before the table and move table inside
+    table.parentNode.insertBefore(wrapper, table);
+    wrapper.appendChild(table);
+  });
+});

data/assets/scripts/without-prose.js

@@ -0,0 +1,9 @@
+// queries all elements that should not get prose attributes and adds a not-prose class to them.
+// this is for elements who we don't have direct access to them
+document.addEventListener("DOMContentLoaded", function () {
+  const preElements = document.querySelectorAll("pre");
+
+  preElements.forEach(function (pre) {
+    pre.classList.add("not-prose");
+  });
+});