hexo-theme-gnix 9.0.0 → 10.0.0

package/layout/common/article_info.jsx

@@ -0,0 +1,339 @@
+const { Component } = require("../../include/util/common");
+
+function getTranslatedValue(helper, key, fallback) {
+  const translated = helper.__(key);
+  return translated === key ? fallback : translated;
+}
+
+function getTranslationMethodLabel(method, helper) {
+  if (!method) return "";
+  const key = `article.translation_methods.${method}`;
+  return getTranslatedValue(helper, key, method);
+}
+
+function getOriginalWorkValue(page, helper) {
+  const value = page.i18n?.original ?? page.original;
+  if (typeof value !== "boolean") return null;
+  return value ? helper.__("article.yes") : helper.__("article.no");
+}
+
+function getTranslationNote(page, helper) {
+  const translation = page.i18n?.translation || page.translation;
+  if (!translation) return null;
+  if (typeof translation === "string") return translation;
+
+  const parts = [];
+  const method = getTranslationMethodLabel(translation.method, helper);
+  if (method) parts.push(method);
+  if (typeof translation.reviewed === "boolean") {
+    parts.push(helper.__(translation.reviewed ? "article.translation_reviewed" : "article.translation_not_reviewed"));
+  }
+  if (translation.note) parts.push(translation.note);
+
+  return parts.length ? parts.join(" · ") : null;
+}
+
+function LanguageIcon({ title }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label={title}>
+      <title>{title}</title>
+      <path d="m5 8 6 6" />
+      <path d="m4 14 6-6 2-3" />
+      <path d="M2 5h12" />
+      <path d="M7 2h1" />
+      <path d="m22 22-5-10-5 10" />
+      <path d="M14 18h6" />
+    </svg>
+  );
+}
+
+module.exports = class extends Component {
+  render() {
+    const { page, config, helper } = this.props;
+    const { article } = config;
+    const originalWorkValue = getOriginalWorkValue(page, helper);
+    const translationNote = getTranslationNote(page, helper);
+
+    const markdownSourceUrl = page.markdown_path ? helper.url_for(page.markdown_path) : null;
+    const markdownSourceLabel = helper.__("article.markdown_source");
+    const markdownSourceType = "text/markdown; charset=utf-8";
+
+    return (
+      <div id="article-info-popover" popover="auto" class="article-popover article-info-popover">
+        <div class="article-popover-header">
+          <h3>{helper.__("article.article_info")}</h3>
+          <button type="button" class="article-popover-close" popovertarget="article-info-popover" popovertargetaction="hide" aria-label={helper.__("article.close")}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="18"
+              height="18"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              role="img"
+              aria-label="Close"
+            >
+              <title>Close</title>
+              <path d="M18 6 6 18" />
+              <path d="m6 6 12 12" />
+            </svg>
+          </button>
+        </div>
+        <div class="article-popover-body">
+          <div class="article-info-list">
+            {(page.author || config.author) && (
+              <div class="article-info-item">
+                <div class="article-info-icon">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    role="img"
+                    aria-label="Author"
+                  >
+                    <title>Author</title>
+                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+                    <circle cx="12" cy="7" r="4" />
+                  </svg>
+                </div>
+                <div class="article-info-content">
+                  <span class="article-info-label">{helper.__("article.author")}</span>
+                  <span class="article-info-value">{page.author || config.author}</span>
+                </div>
+              </div>
+            )}
+            {page.title && (
+              <div class="article-info-item">
+                <div class="article-info-icon">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    role="img"
+                    aria-label="Title"
+                  >
+                    <title>Title</title>
+                    <path d="M4 20h16" />
+                    <path d="M6 16h6" />
+                    <path d="M6 12h12" />
+                    <path d="M6 8h10" />
+                  </svg>
+                </div>
+                <div class="article-info-content">
+                  <span class="article-info-label">{helper.__("article.article_title")}</span>
+                  <span class="article-info-value">{page.title}</span>
+                </div>
+              </div>
+            )}
+            {page.permalink && (
+              <div class="article-info-item">
+                <div class="article-info-icon">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    role="img"
+                    aria-label="URL"
+                  >
+                    <title>URL</title>
+                    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+                    <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+                  </svg>
+                </div>
+                <div class="article-info-content">
+                  <span class="article-info-label">{helper.__("article.url")}</span>
+                  <span class="article-info-value">
+                    <a href={page.permalink} target="_blank" rel="noopener">
+                      {decodeURI(page.permalink)}
+                    </a>
+                  </span>
+                </div>
+              </div>
+            )}
+            {originalWorkValue && (
+              <div class="article-info-item">
+                <div class="article-info-icon">
+                  <LanguageIcon title={helper.__("article.original_work")} />
+                </div>
+                <div class="article-info-content">
+                  <span class="article-info-label">{helper.__("article.original_work")}</span>
+                  <span class="article-info-value">{originalWorkValue}</span>
+                </div>
+              </div>
+            )}
+            {translationNote && (
+              <div class="article-info-item">
+                <div class="article-info-icon">
+                  <LanguageIcon title={helper.__("article.translation_note")} />
+                </div>
+                <div class="article-info-content">
+                  <span class="article-info-label">{helper.__("article.translation_note")}</span>
+                  <span class="article-info-value">{translationNote}</span>
+                </div>
+              </div>
+            )}
+            {markdownSourceUrl && (
+              <div class="article-info-item">
+                <div class="article-info-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 640 512" role="img" aria-label={markdownSourceLabel}>
+                    <title>{markdownSourceLabel}</title>
+                    <path
+                      fill="currentColor"
+                      d="M593.8 59.1H46.2C20.7 59.1 0 79.8 0 105.2v301.5c0 25.5 20.7 46.2 46.2 46.2h547.7c25.5 0 46.2-20.7 46.1-46.1V105.2c0-25.4-20.7-46.1-46.2-46.1M338.5 360.6H277v-120l-61.5 76.9l-61.5-76.9v120H92.3V151.4h61.5l61.5 76.9l61.5-76.9h61.5v209.2zm135.3 3.1L381.5 256H443V151.4h61.5V256H566z"
+                    />
+                  </svg>
+                </div>
+                <div class="article-info-content">
+                  <span class="article-info-label">{markdownSourceLabel}</span>
+                  <span class="article-info-value">
+                    <a href={markdownSourceUrl} target="_blank" rel="noopener" type={markdownSourceType}>
+                      {decodeURI(markdownSourceUrl)}
+                    </a>
+                  </span>
+                </div>
+              </div>
+            )}
+            {page.date && (
+              <div class="article-info-item">
+                <div class="article-info-icon">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    role="img"
+                    aria-label="Created time"
+                  >
+                    <title>Created time</title>
+                    <circle cx="12" cy="12" r="10" />
+                    <polyline points="12 6 12 12 16 14" />
+                  </svg>
+                </div>
+                <div class="article-info-content">
+                  <span class="article-info-label">{helper.__("article.created_time")}</span>
+                  <span class="article-info-value">{helper.date(page.date, "YYYY-MM-DD HH:mm")}</span>
+                </div>
+              </div>
+            )}
+            {page.updated && (
+              <div class="article-info-item">
+                <div class="article-info-icon">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    role="img"
+                    aria-label="Updated time"
+                  >
+                    <title>Updated time</title>
+                    <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+                    <path d="M3 3v5h5" />
+                  </svg>
+                </div>
+                <div class="article-info-content">
+                  <span class="article-info-label">{helper.__("article.updated_time")}</span>
+                  <span class="article-info-value">{helper.date(page.updated, "YYYY-MM-DD HH:mm")}</span>
+                </div>
+              </div>
+            )}
+            {article?.licenses && Object.keys(article.licenses).length > 0 && (
+              <div class="article-info-item">
+                <div class="article-info-icon">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    role="img"
+                    aria-label="License"
+                  >
+                    <title>License</title>
+                    <path fill="none" d="M15 21H6a3 3 0 0 1-3-3v-1h10v2a2 2 0 0 0 4 0V5a2 2 0 1 1 2 2h-2m2-4H8a3 3 0 0 0-3 3v11M9 7h4m-4 4h4" />
+                    <polyline points="14 2 14 8 20 8" />
+                  </svg>
+                </div>
+                <div class="article-info-content">
+                  <span class="article-info-label">{helper.__("article.license")}</span>
+                  <span class="article-info-value">
+                    {Object.keys(article.licenses).map((name, i) => (
+                      <span key={name}>
+                        {i > 0 && <span>, </span>}
+                        <a href={article.licenses[name]} target="_blank" rel="noopener">
+                          {name}
+                        </a>
+                      </span>
+                    ))}
+                  </span>
+                </div>
+              </div>
+            )}
+            {page.location && (
+              <div class="article-info-item">
+                <div class="article-info-icon">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    role="img"
+                    aria-label="Location"
+                  >
+                    <title>Location</title>
+                    <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
+                    <circle cx="12" cy="10" r="3" />
+                  </svg>
+                </div>
+                <div class="article-info-content">
+                  <span class="article-info-label">{helper.__("article.location")}</span>
+                  <span class="article-info-value">{page.location}</span>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+};

package/layout/common/article_media.jsx

@@ -1,18 +1,25 @@
 /**
  * Article media component, used in article lists such as archive page and recent posts widget
  */
-const { Component, dateFormatters, parseISO } = require("../../include/util/common");
+const { Component, dateFormatters, isValidDate, parseISO } = require("../../include/util/common");
+
+function formatDate(date, dateXml) {
+  if (date) return date;
+
+  const parsedDate = parseISO(dateXml);
+  return isValidDate(parsedDate) ? dateFormatters.shortDay.format(parsedDate) : "";
+}
 
 module.exports = class extends Component {
   render() {
-    const { url, title, date } = this.props;
-    const formattedDate = dateFormatters.shortDay.format(parseISO(date));
+    const { url, title, date, dateXml } = this.props;
+    const formattedDate = formatDate(date, dateXml);
 
     return (
       <article class="archive-item">
         <div>
           <p class="article-meta">
-            <span>{formattedDate}</span>
+            <time dateTime={dateXml || null}>{formattedDate}</time>
           </p>
           <a class="archive-title" href={url}>
             {title}

package/layout/common/comment.jsx

@@ -2,20 +2,28 @@ const { Component, loadComponent } = require("../../include/util/common");
 
 module.exports = class extends Component {
   render() {
-    const { config, page, helper } = this.props;
+    const { config, page, helper, embedded = false } = this.props;
     const { comment } = config;
     if (!comment || typeof comment.type !== "string") {
       return null;
     }
 
+    const content = (() => {
+      const Comment = loadComponent(`comment/${comment.type}`);
+      return <Comment config={config} page={page} helper={helper} comment={comment} />;
+    })();
+
+    if (embedded) {
+      return (
+        <div class="article-comment-panel" id="comments">
+          {content}
+        </div>
+      );
+    }
+
     return (
       <div class="card" id="comments">
-        <div class="card-content">
-          {(() => {
-            const Comment = loadComponent(`comment/${comment.type}`);
-            return <Comment config={config} page={page} helper={helper} comment={comment} />;
-          })()}
-        </div>
+        <div class="card-content">{content}</div>
       </div>
     );
   }

package/layout/common/footer.jsx

@@ -66,7 +66,7 @@ class Footer extends Component {
 
     const footer_subdomains = (
       <div class="footer-column footer-subdomains">
-        <p class="footer-heading">Sub Domains</p>
+        <p class="footer-heading">Quick Links</p>
         <div class="footer-links">
           {Object.keys(subdomains).length
             ? Object.keys(subdomains).map((name) => {
@@ -95,9 +95,10 @@ class Footer extends Component {
 }
 
 module.exports = cacheComponent(Footer, "common.footer", (props) => {
-  const { config, helper, site } = props;
+  const { config, helper, page, site } = props;
   const { url_for, _p, date } = helper;
   const { title, author, footer, plugins } = config;
+  const langKey = helper.language_key(page);
 
   const links = {};
   if (footer?.links) {
@@ -116,7 +117,7 @@ module.exports = cacheComponent(Footer, "common.footer", (props) => {
       const link = footer.subdomains[name];
       const targetUrl = typeof link === "string" ? link : link.url;
       subdomains[name] = {
-        url: url_for(targetUrl),
+        url: helper.localized_url_for(targetUrl, langKey),
       };
     });
   }
@@ -139,11 +140,11 @@ module.exports = cacheComponent(Footer, "common.footer", (props) => {
 
     archives = Object.keys(byYear)
       .sort((a, b) => Number(b) - Number(a))
-      .map((year) => ({ year, url: url_for(`${archiveDir}/${year}/`) }));
+      .map((year) => ({ year, url: helper.localized_url_for(`${archiveDir}/${year}/`, langKey) }));
   }
 
   return {
-    siteUrl: url_for("/"),
+    siteUrl: helper.localized_url_for("/", langKey),
     siteTitle: title,
     siteYear: date(new Date(), "YYYY"),
     author,

package/layout/common/head.jsx

@@ -3,6 +3,11 @@ const MetaTags = require("../../layout/misc/meta");
 const OpenGraph = require("../../layout/misc/open_graph");
 const StructuredData = require("../../layout/misc/structured_data");
 const Plugins = require("./plugins");
+const { getArticleFontInitScript } = require("../../include/util/article_font");
+const { getThemeInitScript } = require("../../include/util/theme");
+const { getDefaultLanguageKey, getI18nKey, getLanguage, getPageLanguageKey, getPageLocale, isI18nEnabled, normalizeLocale, toArray } = require("../../include/util/i18n");
+const fs = require("node:fs");
+const path = require("node:path");
 
 function getPageTitle(page, siteTitle, helper) {
   let title = page.title;
@@ -23,16 +28,111 @@ function getPageTitle(page, siteTitle, helper) {
   return [title, siteTitle].filter((str) => typeof str !== "undefined" && str.trim() !== "").join(" - ");
 }
 
+function getTermName(term) {
+  if (!term) return undefined;
+  if (typeof term === "string") return term;
+
+  return term.name || term.slug || term.path;
+}
+
+function getArticleSection(page) {
+  if (page.category) return getTermName(page.category);
+
+  const categories = page.categories;
+  if (!categories) return undefined;
+  if (typeof categories.first === "function") return getTermName(categories.first());
+  if (Array.isArray(categories.data)) return getTermName(categories.data[0]);
+  if (Array.isArray(categories)) return getTermName(categories[0]);
+
+  return undefined;
+}
+
+function toAbsoluteUrl(href, helper, config) {
+  if (!href || typeof href !== "string") return null;
+  if (/^https?:\/\//i.test(href)) return href;
+  if (typeof helper.full_url_for === "function") return helper.full_url_for(href);
+
+  const localUrl = typeof helper.url_for === "function" ? helper.url_for(href) : href;
+  if (/^https?:\/\//i.test(localUrl)) return localUrl;
+
+  const siteUrl = String(config.url || "").replace(/\/+$/, "");
+  const path = localUrl.startsWith("/") ? localUrl : `/${localUrl}`;
+  return `${siteUrl}${path}`;
+}
+
+function addAlternateLink(links, hreflang, href, helper, config) {
+  const normalizedHreflang = hreflang === "x-default" ? "x-default" : normalizeLocale(hreflang);
+  const absoluteHref = toAbsoluteUrl(href, helper, config);
+  if (!normalizedHreflang || !absoluteHref) return;
+  links.set(normalizedHreflang.toLowerCase(), {
+    hreflang: normalizedHreflang,
+    href: absoluteHref,
+  });
+}
+
+function addExplicitAlternates(links, alternates, helper, config) {
+  if (!alternates || typeof alternates !== "object") return;
+
+  Object.keys(alternates).forEach((key) => {
+    const value = alternates[key];
+    const href = typeof value === "string" ? value : value?.href || value?.url;
+    const language = getLanguage(config, key);
+    const hreflang = key === "x-default" ? "x-default" : language?.key === key ? language.locale : key;
+    addAlternateLink(links, hreflang, href, helper, config);
+  });
+}
+
+function collectDocuments(site) {
+  return [...toArray(site?.posts), ...toArray(site?.pages)];
+}
+
+function getHreflangLinks(site, page, config, helper) {
+  if (!isI18nEnabled(config)) return [];
+
+  const links = new Map();
+  const pageKey = getI18nKey(page);
+  const langKey = getPageLanguageKey(page, config);
+  const locale = getPageLocale(page, config);
+
+  addAlternateLink(links, locale, page.permalink || page.path, helper, config);
+  addExplicitAlternates(links, page.i18n?.alternates || page.alternates || page.hreflang, helper, config);
+
+  if (pageKey) {
+    collectDocuments(site).forEach((item) => {
+      if (!item || getI18nKey(item) !== pageKey) return;
+      addAlternateLink(links, getPageLocale(item, config), item.permalink || item.path, helper, config);
+    });
+  }
+
+  if (links.size > 1 && !links.has("x-default")) {
+    const defaultLanguage = getLanguage(config, getDefaultLanguageKey(config));
+    const defaultLink = Array.from(links.values()).find((link) => link.hreflang.toLowerCase() === defaultLanguage.locale.toLowerCase());
+    if (defaultLink) addAlternateLink(links, "x-default", defaultLink.href, helper, config);
+  }
+
+  return Array.from(links.values()).sort((a, b) => {
+    if (a.hreflang === "x-default") return 1;
+    if (b.hreflang === "x-default") return -1;
+    if (a.hreflang === getLanguage(config, langKey).locale) return -1;
+    if (b.hreflang === getLanguage(config, langKey).locale) return 1;
+    return a.hreflang.localeCompare(b.hreflang);
+  });
+}
+
 module.exports = class extends Component {
   render() {
     const { site, config, helper, page } = this.props;
     const { url_for, is_post } = helper;
     const { url, head = {}, article } = config;
-    const { meta = [], open_graph = {}, structured_data = {}, canonical_url = page.permalink, favicon } = head;
+    const { meta = [], open_graph = {}, structured_data = {}, canonical_url: headCanonicalUrl = page.permalink, favicon } = head;
+    const markdownSourceUrl = page.markdown_path ? url_for(page.markdown_path) : null;
+    const markdownSourceType = "text/markdown; charset=utf-8";
 
     const noIndex = helper.is_archive() || helper.is_tag();
 
-    const language = page.lang || page.language || config.language;
+    const language = getPageLocale(page, config) || page.lang || page.language || config.language;
+    const canonicalUrl = toAbsoluteUrl(page.canonical_url || page.canonical || page.i18n?.canonical || headCanonicalUrl, helper, config);
+    const hreflangLinks = getHreflangLinks(site, page, config, helper);
 
     let images;
     if (typeof page.og_image === "string") {
@@ -68,31 +168,15 @@ module.exports = class extends Component {
       structuredImages = page.photos;
     }
 
-    const themeInitScript = `
-(function() {
-  var THEME_MAP = {
-    mocha: "night",
-    macchiato: "night",
-    nord: "light",
-    nord_night: "night",
-    rose_pine: "night",
-    tokyo_night: "night",
-    latte: "light"
-  };
-  var stored = localStorage.getItem("themePreference");
-  var theme = stored && stored in THEME_MAP ? stored : "system";
-  var html = document.documentElement;
-  var resolvedTheme = theme === "system"
-    ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "mocha" : "nord"
-    : theme;
-  html.setAttribute("data-theme", resolvedTheme);
-  html.classList.add(THEME_MAP[resolvedTheme]);
-})();
-`;
+    const themeInitScript = getThemeInitScript();
+    const articleFontInitScript = getArticleFontInitScript();
+    const articleFontUtilsScript = fs.readFileSync(path.join(__dirname, "../../source/js/article-font-utils.js"), "utf8");
 
     return (
       <head>
         <script dangerouslySetInnerHTML={{ __html: themeInitScript }}></script>
+        <script dangerouslySetInnerHTML={{ __html: articleFontUtilsScript }}></script>
+        <script dangerouslySetInnerHTML={{ __html: articleFontInitScript }}></script>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         {noIndex ? <meta name="robots" content="noindex" /> : null}
@@ -109,7 +193,11 @@ module.exports = class extends Component {
             keywords={(page.tags?.length ? page.tags : undefined) || config.keywords}
             url={open_graph.url || page.permalink || url}
             images={openGraphImages}
+            imageAlt={open_graph.image_alt || page.og_image_alt || page.cover_alt || page.title || config.title}
+            imageWidth={open_graph.image_width}
+            imageHeight={open_graph.image_height}
             siteName={open_graph.site_name || config.title}
+            section={open_graph.section || getArticleSection(page)}
             language={language}
             twitterId={open_graph.twitter_id}
             twitterCard={open_graph.twitter_card}
@@ -132,18 +220,19 @@ module.exports = class extends Component {
             images={structuredImages}
           />
         ) : null}
-        {canonical_url ? <link rel="canonical" href={canonical_url} /> : null}
-        {favicon ? <link rel="icon" href={url_for(favicon)} /> : null}
+        {canonicalUrl ? <link rel="canonical" href={canonicalUrl} /> : null}
+        {hreflangLinks.map((link) => (
+          <link rel="alternate" hreflang={link.hreflang} href={link.href} />
+        ))}
+        {is_post(page) && markdownSourceUrl ? <link rel="alternate" type={markdownSourceType} title={helper.__("article.markdown_source")} href={markdownSourceUrl} /> : null}
+        <link rel="icon" href={url_for(favicon || "/img/favicon.svg")} />
         <link rel="stylesheet" href={url_for("/css/default.css")} />
-        <link rel="stylesheet" href={url_for("/css/responsive/mobile.css")} media="screen and (max-width:768px)" />
-        <link rel="stylesheet" href={url_for("/css/responsive/tablet.css")} media="screen and (min-width:769px)" />
-        <link rel="stylesheet" href={url_for("/css/responsive/touch.css")} media="screen and (max-width:1023px)" />
-        <link rel="stylesheet" href={url_for("/css/responsive/desktop.css")} media="screen and (min-width:1024px)" />
-        <link rel="preload" as="style" href={url_for("/css/callout_blocks.css")} onload="this.onload=null;this.rel='stylesheet'" />
+        <link rel="stylesheet" href={url_for("/css/responsive.css")} />
+        <link rel="stylesheet" href={url_for("/css/callout_blocks.css")} media="print" onload="this.media='all'" />
         <link rel="preload" href={url_for("/css/font/woff2/HomemadeApple.woff2")} as="font" type="font/woff2" crossorigin />
         <link rel="preconnect" href="https://fontsapi.zeoseven.com" />
-        <link rel="preload" as="style" href="https://fontsapi.zeoseven.com/285/main/result.css" onload="this.onload=null;this.rel='stylesheet'" />
-        <link rel="preload" as="style" href="https://fontsapi.zeoseven.com/442/main/result.css" onload="this.onload=null;this.rel='stylesheet'" />
+        <link rel="stylesheet" href="https://fontsapi.zeoseven.com/5/main/result.css" media="print" onload="this.media='all'" />
+        <link rel="stylesheet" href="https://fontsapi.zeoseven.com/442/main/result.css" media="print" onload="this.media='all'" />
         <link rel="preload" as="style" href="/css/shiki/shiki.css" onload="this.onload=null;this.rel='stylesheet'" />
         {page.encrypt ? <link rel="stylesheet" href={url_for("/css/encrypt.css")} /> : null}
         <Plugins site={site} config={config} helper={helper} page={page} head={true} />