astro-accelerator 5.10.44 → 5.10.46

package/package.json

@@ -1,5 +1,5 @@
 {
-    "version": "5.10.44",
+    "version": "5.10.46",
     "author": "Steve Fenton",
     "name": "astro-accelerator",
     "description": "A super-lightweight, accessible, SEO-friendly starter project for Astro",

package/public/css/main.css

@@ -337,35 +337,6 @@ tbody tr:nth-child(odd) {
     color: var(--fore-table-row-odd);
 }
 
-/* Skip Links */
-
-nav.skip-links {
-    position: absolute;
-}
-
-nav.skip-links a {
-    clip: rect(0 0 0 0);
-    background-color: var(--aft);
-    min-width: 20vw;
-    overflow: hidden;
-    padding: 1rem;
-    position: absolute;
-    z-index: 15;
-    text-align: center;
-    display: inline-block;
-    height: 1px;
-    margin: -1px;
-    width: 1px;
-}
-
-nav.skip-links a:focus {
-    clip: auto;
-    height: auto;
-    margin: 0.2em;
-    overflow: visible;
-    width: auto;
-}
-
 /* Breadcrumbs */
 
 .site-breadcrumbs ol {
@@ -394,130 +365,8 @@ nav.skip-links a:focus {
     text-decoration: none;
 }
 
-/* Header */
-.site-header {
-    text-align: center;
-    font-size: 2rem;
-    gap: 2rem;
-    display: grid;
-    grid-template-columns: auto 40px 40px;
-    align-items: center;
-    padding-block: 2rem;
-    width: var(--content-width);
-    margin-inline: auto;
-    max-width: calc(100vw - 2rem);
-    stroke: var(--fore);
-}
-
-a.site-title {
-    text-align: left;
-    text-decoration: none;
-}
-
-a.navigation-icon {
-    color: var(--fore-link);
-    text-decoration: none;
-    align-self: center;
-    height: 40px;
-    padding: 0.4rem 0;
-}
-
-a.site-title:hover,
-a.site-title:focus,
-a.navigation-icon:hover,
-a.navigation-icon:focus {
-    color: var(--fore-link-alt);
-    background-color: unset;
-}
-
-.site-header .site-title {
-    letter-spacing: -0.03em;
-    font-family: var(--heading-font);
-    line-height: 1.3;
-    flex-shrink: 0;
-}
-
-.site-header .header-icon {
-    --icon-width: 40px;
-    stroke: var(--fore-link);
-    width: var(--icon-width);
-    height: var(--icon-width);
-}
-
-.site-header .header-icon {
-    text-decoration: none;
-}
-
-.site-header .header-icon:hover,
-.site-header .header-icon:focus {
-    stroke: var(--fore-link-alt);
-}
-
-.site-header .header-icon[data-navigation-id='site-nav'] {
-    position: relative;
-    z-index: 100;
-}
-
 /* Navigation */
 
-.site-nav {
-    --site-nav-indent: 0.5rem;
-    font-size: var(--font-size-meta);
-}
-
-.site-nav>ul {
-    border-bottom: 1px solid var(--fore-link);
-}
-
-.site-nav li {
-    list-style: none;
-}
-
-.site-nav>ul>li {
-    border-top: 1px solid var(--fore-link);
-}
-
-.site-nav>ul>li li {
-    border-top: 1px solid color-mix(in srgb, var(--fore-link) 50%, transparent);
-}
-
-.site-nav a {
-    text-indent: var(--marker-size);
-    width: calc(100% - 2.07rem);
-    display: inline-block;
-    padding: 1rem var(--site-nav-indent);
-    text-decoration: none;
-}
-
-.site-nav a[aria-current] {
-    font-weight: bold;
-}
-
-.site-nav details summary {
-    cursor: pointer;
-}
-
-.site-nav details summary::-webkit-details-marker,
-.site-nav details summary::marker {
-    font-size: var(--marker-size);
-    width: 1em;
-}
-
-.site-nav li.has-children summary span {
-    text-indent: 0;
-    display: inline-block;
-    padding: 1rem var(--site-nav-indent);
-    text-decoration: none;
-}
-
-details.sub-nav {
-    padding: 0rem !important;
-}
-
-details.sub-nav details {
-    margin-inline-start: calc(var(--marker-size) + var(--site-nav-indent));
-}
-
 .overlay-menu .site-nav {
     font-size: 1.4em;
 
@@ -666,99 +515,6 @@ details.sub-nav details {
 
 /* Site Search */
 
-.site-search-wrapper fieldset {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    padding: 0;
-}
-
-.site-search-wrapper input {
-    background-color: var(--aft-block);
-    border-radius: var(--block-radius);
-    color: var(--fore);
-    font-size: 1.3rem;
-    padding: 0.5em;
-}
-
-.site-search-wrapper input {
-    width: calc(100% - 110px);
-}
-
-.site-search-wrapper button {
-    width: 80px;
-}
-
-.site-search-results ul.site-search-results-list {
-    list-style-type: none;
-    margin-block: 1rem;
-    margin-inline: 0;
-}
-
-.site-search-results li.site-search-results-item {
-    list-style-type: none;
-    margin: var(--block-gap-l) 0 var(--block-gap-l) 0;
-}
-
-.site-search-results-item a {
-    text-decoration: none;
-}
-
-.site-search-results .show-more {
-    margin-block-start: 1rem;
-    display: inline-block;
-    font-size: 1.2rem;
-    border-radius: 100px;
-    text-decoration: none;
-    text-align: center;
-    padding: 0.2em 0.6em 0.3em 0.6em;
-    color: var(--aft-link-alt);
-    background-color: var(--fore-link);
-    cursor: pointer;
-    width: auto;
-}
-
-.result-wrapper mark,
-.result-headings mark {
-    color: unset;
-    background-color: unset;
-    text-decoration: underline;
-}
-
-.result-path {
-    display: none;
-}
-
-.result-path-icon {
-    stroke: var(--fore);
-}
-
-.result-path-segment:last-child {
-    color: var(--fore-link);
-}
-
-.result-title {
-    color: var(--fore-link);
-    font-size: 1.5rem;
-    font-weight: 700;
-}
-
-.result-description {
-    color: var(--fore-block);
-    font-size: 1rem;
-    font-weight: 400;
-    margin: 0;
-}
-
-.result-headings {
-    list-style: none;
-    font-size: 1rem;
-}
-
-.result-headings li:not(:last-child) {
-    text-align: left;
-}
-
 /* Articles */
 
 .post-list {
@@ -1028,73 +784,6 @@ details.sub-nav details {
 
 /* Taxonomy */
 
-.footer-columns {
-    display: grid;
-    gap: var(--block-gap);
-    grid-template-columns: 1fr 1fr;
-    grid-template-areas:
-        'cat tag'
-        'quick quick';
-    justify-content: center;
-    margin-block-end: var(--block-gap-l);
-    max-width: 1000px;
-    margin-inline: auto;
-
-    @media (max-width: 680px) {
-        display: block;
-        margin-inline: 0.5rem;
-    }
-}
-
-.footer-column:nth-child(1) {
-    grid-area: cat;
-}
-
-.footer-column:nth-child(2) {
-    grid-area: tag;
-}
-
-.footer-column:nth-child(3) {
-    grid-area: quick;
-}
-
-.footer-columns h2 {
-    margin: var(--paragraph-margin) auto;
-}
-
-.footer-columns ul {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--grid-gap-s);
-    justify-content: center;
-    list-style: none;
-    margin: var(--paragraph-margin) 0;
-    width: 100%;
-}
-
-.footer-columns li {
-    flex: 0 0 auto;
-}
-
-.footer-columns a {
-    display: inline-block;
-    color: var(--fore-link);
-    background-color: var(--aft);
-    padding: 0.3em 0.7em 0.1em 0.7em;
-    text-decoration: none;
-    font-size: var(--font-size-meta);
-}
-
-.footer-columns a:hover,
-.footer-columns a:focus {
-    background-color: var(--fore-link-alt);
-    color: var(--aft);
-}
-
-.site-footer nav {
-    margin-block: var(--block-gap);
-}
-
 /* Video */
 
 .yt-video {
@@ -1176,6 +865,7 @@ pre.astro-code code {
     stroke: var(--aft);
     fill: var(--fore-link-alt);
     background-color: transparent;
+    border: none;
 }
 
 .copy-button:hover,
@@ -1198,14 +888,15 @@ pre.astro-code code {
 .magnify-button {
     border-radius: 0.2rem;
     fill: var(--aft);
-    stroke: var(--fore-link-alt);
+    stroke: var(--fore-link);
     background-color: transparent;
     opacity: 0;
+    border: none;
 }
 
 .magnify-button:hover,
 .magnify-button:focus {
-    stroke: var(--fore-link);
+    stroke: var(--aft);
     transform: rotate(4deg);
     opacity: 1;
 }
@@ -1355,87 +1046,6 @@ figure:focus .magnify-button {
     margin: 0;
 }
 
-/* Events timeline */
-
-.timeline {
-    --timeline-gap: 1rem;
-    position: relative;
-}
-
-.timeline h2,
-.timeline h3 {
-    margin: 0 0 0.5rem 0;
-    font-size: var(--font-size-h4)
-}
-
-.timeline::before {
-    background-color: var(--icon-block);
-    bottom: 0;
-    content: '';
-    left: var(--timeline-gap);
-    position: absolute;
-    top: calc(var(--block-gap) * -1);
-    width: 0.4rem;
-}
-
-.timeline-event {
-    padding-inline-start: calc(var(--timeline-gap) * 2.5);
-    position: relative;
-    margin-block-end: var(--block-gap);
-}
-
-.timeline-event::before {
-    background: var(--aft);
-    border: 3px solid var(--icon-block);
-    border-radius: 50%;
-    box-shadow: var(--box-shadow-unselected);
-    content: '';
-    height: 1rem;
-    left: calc(var(--timeline-gap) - 0.5rem);
-    position: absolute;
-    top: 1.4em;
-    width: 1rem;
-    z-index: 1;
-}
-
-.timeline-event>div {
-    background: var(--aft-block);
-    border-radius: var(--block-radius);
-    box-shadow: var(--box-shadow-unselected);
-    color: var(--fore-block);
-    padding: 1.5rem;
-    text-align: left;
-}
-
-.timeline-event.event-today>div {
-    box-shadow: var(--box-glow);
-}
-
-.timeline-event.event-past>div {
-    background: var(--aft);
-    box-shadow: none;
-    color: var(--fore);
-    opacity: 0.8;
-}
-
-.timeline-details {
-    font-size: var(--font-size-meta);
-}
-
-.timeline time {
-    display: inline-block;
-    margin-block-end: var(--grid-gap);
-}
-
-.timeline-location {
-    display: block;
-    font-size: var(--font-size-meta);
-}
-
-.timeline-event.event-past::before {
-    box-shadow: var(--box-shadow-unselected);
-}
-
 /* Animation */
 
 @media (prefers-reduced-motion: no-preference) {

package/public/js/modules/figures.js

@@ -11,7 +11,26 @@ import { qs, qsa } from './query.js';
 
 const activeClass = 'magnify-icon';
 
-const icon = `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"> <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path> <path d="M21 21l-6 -6"></path> </svg>`;
+const icon = `<!--
+version: "2.28"
+unicode: "fb79"
+-->
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="32"
+  height="32"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke-width="1"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
+  <path d="M12.597 17.981a9.467 9.467 0 0 1 -.597 .019c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6c-.205 .342 -.415 .67 -.63 .983" />
+  <path d="M16 22l5 -5" />
+  <path d="M21 21.5v-4.5h-4.5" />
+</svg>
+`;
 
 /**
  * Enables opening image in new tab
@@ -21,7 +40,7 @@ function enhanceFigures() {
         const src = node.src;
 
         const magnify = document.createElement('button');
-        //magnify.classList.add(activeClass);
+
         magnify.innerHTML = icon;
         magnify.classList.add('magnify-button');
         magnify.title = 'Enlarge';

package/src/themes/accelerator/components/Footer.astro

@@ -1,22 +1,22 @@
 ---
 // warning: This file is overwritten by Astro Accelerator
 
-import { Accelerator } from 'astro-accelerator-utils';
-import type { Frontmatter } from 'astro-accelerator-utils/types/Frontmatter';
-import { SITE } from '@config';
-import { Translations, Lang } from '@util/Languages';
-import { menu } from 'src/data/footer';
-import FooterItem from '@components/FooterItem.astro';
+import { Accelerator } from "astro-accelerator-utils";
+import type { Frontmatter } from "astro-accelerator-utils/types/Frontmatter";
+import { SITE } from "@config";
+import { Translations, Lang } from "@util/Languages";
+import { menu } from "src/data/footer";
+import FooterItem from "@components/FooterItem.astro";
 
 const accelerator = new Accelerator(SITE);
-const stats = new accelerator.statistics('accelerator/components/Footer.astro');
+const stats = new accelerator.statistics("accelerator/components/Footer.astro");
 stats.start();
 
 // Properties
 type Props = {
   lang: string;
-  frontmatter: Frontmatter
-  headings: { depth: number; slug: string; text: string; }[];
+  frontmatter: Frontmatter;
+  headings: { depth: number; slug: string; text: string }[];
 };
 const { lang } = Astro.props satisfies Props;
 
@@ -25,15 +25,89 @@ const _ = Lang(lang);
 
 // Logic
 const currentUrl = new URL(Astro.request.url);
-const pages = accelerator.navigation.footer(currentUrl, _, Translations, SITE.subfolder, menu);
+const pages = accelerator.navigation.footer(
+  currentUrl,
+  _,
+  Translations,
+  SITE.subfolder,
+  menu,
+);
 
 stats.stop();
 ---
+
 <footer class="site-footer" id="site-footer">
   <div class="footer-columns">
-  {pages.map((page) => (
-    <FooterItem lang={ lang } page={ page } />
-  ))}
+    {pages.map((page) => <FooterItem lang={lang} page={page} />)}
   </div>
   <slot />
-</footer>
+</footer>
+
+<style is:global>
+  .footer-columns {
+    display: grid;
+    gap: var(--block-gap);
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas:
+      "cat tag"
+      "quick quick";
+    justify-content: center;
+    margin-block-end: var(--block-gap-l);
+    max-width: 1000px;
+    margin-inline: auto;
+
+    @media (max-width: 680px) {
+      display: block;
+      margin-inline: 0.5rem;
+    }
+  }
+
+  .footer-column:nth-child(1) {
+    grid-area: cat;
+  }
+
+  .footer-column:nth-child(2) {
+    grid-area: tag;
+  }
+
+  .footer-column:nth-child(3) {
+    grid-area: quick;
+  }
+
+  .footer-columns h2 {
+    margin: var(--paragraph-margin) auto;
+  }
+
+  .footer-columns ul {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--grid-gap-s);
+    justify-content: center;
+    list-style: none;
+    margin: var(--paragraph-margin) 0;
+    width: 100%;
+  }
+
+  .footer-columns li {
+    flex: 0 0 auto;
+  }
+
+  .footer-columns a {
+    display: inline-block;
+    color: var(--fore-link);
+    background-color: var(--aft);
+    padding: 0.3em 0.7em 0.1em 0.7em;
+    text-decoration: none;
+    font-size: var(--font-size-meta);
+  }
+
+  .footer-columns a:hover,
+  .footer-columns a:focus {
+    background-color: var(--fore-link-alt);
+    color: var(--aft);
+  }
+
+  .site-footer nav {
+    margin-block: var(--block-gap);
+  }
+</style>

package/src/themes/accelerator/components/Header.astro

@@ -1,13 +1,13 @@
 ---
 // warning: This file is overwritten by Astro Accelerator
 
-import { Accelerator, PostFiltering } from 'astro-accelerator-utils';
-import type { Frontmatter } from 'astro-accelerator-utils/types/Frontmatter';
-import { SITE } from '@config';
-import { Translations, Lang } from '@util/Languages';
+import { Accelerator, PostFiltering } from "astro-accelerator-utils";
+import type { Frontmatter } from "astro-accelerator-utils/types/Frontmatter";
+import { SITE } from "@config";
+import { Translations, Lang } from "@util/Languages";
 
 const accelerator = new Accelerator(SITE);
-const stats = new accelerator.statistics('accelerator/components/Header.astro');
+const stats = new accelerator.statistics("accelerator/components/Header.astro");
 stats.start();
 
 // Properties
@@ -22,15 +22,72 @@ const { lang, showSearch } = Astro.props satisfies Props;
 // Language
 const _ = Lang(lang);
 
-const search = accelerator.posts.all().filter(PostFiltering.isSearch).shift() ?? null;
-const searchUrl = (search && accelerator.urlFormatter.formatAddress(search.url)) || SITE.search.fallbackUrl;
+const search =
+    accelerator.posts.all().filter(PostFiltering.isSearch).shift() ?? null;
+const searchUrl =
+    (search && accelerator.urlFormatter.formatAddress(search.url)) ||
+    SITE.search.fallbackUrl;
 
 stats.stop();
 ---
 
+<style is:global>
+    .site-header {
+        text-align: center;
+        font-size: 2rem;
+        gap: 2rem;
+        display: grid;
+        grid-template-columns: auto 40px 40px;
+        align-items: center;
+        padding-block: 2rem;
+        width: var(--content-width);
+        margin-inline: auto;
+        max-width: calc(100vw - 2rem);
+        stroke: var(--fore);
+    }
+
+    .site-header .site-title {
+        text-align: left;
+        text-decoration: none;
+        letter-spacing: -0.03em;
+        font-family: var(--heading-font);
+        line-height: 1.3;
+        flex-shrink: 0;
+    }
+
+    .site-header .site-title:hover,
+    .site-header .site-title:focus {
+        color: var(--fore-link-alt);
+        background-color: unset;
+    }
+
+    .site-header .header-icon {
+        --icon-width: 40px;
+        stroke: var(--fore-link);
+        width: var(--icon-width);
+        height: var(--icon-width);
+        text-decoration: none;
+    }
+
+    .site-header .header-icon:hover,
+    .site-header .header-icon:focus {
+        stroke: var(--fore-link-alt);
+    }
+
+    .site-header .header-icon[data-navigation-id="site-nav"] {
+        position: relative;
+        z-index: 100;
+    }
+</style>
+
 <header class="site-header">
-    <a href={(SITE.subfolder ?? '') + '/'} class="site-title" translate="no">{SITE.title}</a>
-    <a href={searchUrl} class="header-icon" title={_(Translations.header.toggle_search)}>
+    <a href={(SITE.subfolder ?? "") + "/"} class="site-title" translate="no"
+        >{SITE.title}</a
+    >
+    <a
+        href={searchUrl}
+        class="header-icon"
+        title={_(Translations.header.toggle_search)}>
         <svg
             xmlns="http://www.w3.org/2000/svg"
             width="32"
@@ -44,7 +101,11 @@ stats.stop();
             <path d="M21 21l-6 -6"></path>
         </svg>
     </a>
-    <a href="#site-nav" data-navigation-id="site-nav" class="header-icon" title={_(Translations.header.toggle_menu)}>
+    <a
+        href="#site-nav"
+        data-navigation-id="site-nav"
+        class="header-icon"
+        title={_(Translations.header.toggle_menu)}>
         <svg
             xmlns="http://www.w3.org/2000/svg"
             width="32"

package/src/themes/accelerator/components/Navigation.astro

@@ -1,14 +1,16 @@
 ---
 // warning: This file is overwritten by Astro Accelerator
 
-import { Accelerator } from 'astro-accelerator-utils';
-import { Translations, Lang } from '@util/Languages';
-import NavigationItem from '@components/NavigationItem.astro';
-import { SITE } from '@config';
-import { menu } from '@data/navigation';
+import { Accelerator } from "astro-accelerator-utils";
+import { Translations, Lang } from "@util/Languages";
+import NavigationItem from "@components/NavigationItem.astro";
+import { SITE } from "@config";
+import { menu } from "@data/navigation";
 
 const accelerator = new Accelerator(SITE);
-const stats = new accelerator.statistics('accelerator/components/Navigation.astro');
+const stats = new accelerator.statistics(
+  "accelerator/components/Navigation.astro",
+);
 stats.start();
 
 // Properties
@@ -26,11 +28,77 @@ const pages = accelerator.navigation.menu(currentUrl, SITE.subfolder, menu);
 
 stats.stop();
 ---
-<nav class="site-nav" id="site-nav" aria-label={ _(Translations.aria.site_navigation) }>
-  <h2 class="site-nav-title">{ _(Translations.navigation.title) }</h2>
+
+<nav
+  class="site-nav"
+  id="site-nav"
+  aria-label={_(Translations.aria.site_navigation)}>
+  <h2 class="site-nav-title">{_(Translations.navigation.title)}</h2>
   <ul>
-    {pages.sort((a, b) => a.order - b.order).map((page) => (
-      <NavigationItem lang={ lang } page={ page } />
-    ))}
+    {
+      pages
+        .sort((a, b) => a.order - b.order)
+        .map((page) => <NavigationItem lang={lang} page={page} />)
+    }
   </ul>
-</nav>
+</nav>
+
+<style is:global>
+  .site-nav {
+    --site-nav-indent: 0.5rem;
+    font-size: var(--font-size-meta);
+  }
+
+  .site-nav > ul {
+    border-bottom: 1px solid var(--fore-link);
+  }
+
+  .site-nav li {
+    list-style: none;
+  }
+
+  .site-nav > ul > li {
+    border-top: 1px solid var(--fore-link);
+  }
+
+  .site-nav > ul > li li {
+    border-top: 1px solid color-mix(in srgb, var(--fore-link) 50%, transparent);
+  }
+
+  .site-nav a {
+    text-indent: var(--marker-size);
+    width: calc(100% - 2.07rem);
+    display: inline-block;
+    padding: 1rem var(--site-nav-indent);
+    text-decoration: none;
+  }
+
+  .site-nav a[aria-current] {
+    font-weight: bold;
+  }
+
+  .site-nav details summary {
+    cursor: pointer;
+  }
+
+  .site-nav details summary::-webkit-details-marker,
+  .site-nav details summary::marker {
+    font-size: var(--marker-size);
+    width: 1em;
+  }
+
+  .site-nav li.has-children summary span {
+    text-indent: 0;
+    display: inline-block;
+    padding: 1rem var(--site-nav-indent);
+    text-decoration: none;
+  }
+
+  details.sub-nav {
+    padding: 0rem !important;
+  }
+
+  details.sub-nav details {
+    margin-inline-start: calc(var(--marker-size) + var(--site-nav-indent));
+  }
+</style>

package/src/themes/accelerator/components/Search.astro

@@ -34,3 +34,98 @@ const accelerator = new Accelerator(SITE);
   <script src={SITE.subfolder + "/js/search.js"} type="module" async></script>
 }
 </div>
+
+<style is:global>
+    .site-search-wrapper fieldset {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        padding: 0;
+    }
+
+    .site-search-wrapper input {
+        background-color: var(--aft-block);
+        border-radius: var(--block-radius);
+        color: var(--fore);
+        font-size: 1.3rem;
+        padding: 0.5em;
+    }
+
+    .site-search-wrapper input {
+        width: calc(100% - 110px);
+    }
+
+    .site-search-wrapper button {
+        width: 80px;
+    }
+
+    .site-search-results ul.site-search-results-list {
+        list-style-type: none;
+        margin-block: 1rem;
+        margin-inline: 0;
+    }
+
+    .site-search-results li.site-search-results-item {
+        list-style-type: none;
+        margin: var(--block-gap-l) 0 var(--block-gap-l) 0;
+    }
+
+    .site-search-results-item a {
+        text-decoration: none;
+    }
+
+    .site-search-results .show-more {
+        margin-block-start: 1rem;
+        display: inline-block;
+        font-size: 1.2rem;
+        border-radius: 100px;
+        text-decoration: none;
+        text-align: center;
+        padding: 0.2em 0.6em 0.3em 0.6em;
+        color: var(--aft-link-alt);
+        background-color: var(--fore-link);
+        cursor: pointer;
+        width: auto;
+    }
+
+    .result-wrapper mark,
+    .result-headings mark {
+        color: unset;
+        background-color: unset;
+        text-decoration: underline;
+    }
+
+    .result-path {
+        display: none;
+    }
+
+    .result-path-icon {
+        stroke: var(--fore);
+    }
+
+    .result-path-segment:last-child {
+        color: var(--fore-link);
+    }
+
+    .result-title {
+        color: var(--fore-link);
+        font-size: 1.5rem;
+        font-weight: 700;
+    }
+
+    .result-description {
+        color: var(--fore-block);
+        font-size: 1rem;
+        font-weight: 400;
+        margin: 0;
+    }
+
+    .result-headings {
+        list-style: none;
+        font-size: 1rem;
+    }
+
+    .result-headings li:not(:last-child) {
+        text-align: left;
+    }
+</style>

package/src/themes/accelerator/components/SkipLinks.astro

@@ -1,20 +1,22 @@
 ---
 // warning: This file is overwritten by Astro Accelerator
 
-import type { Frontmatter } from 'astro-accelerator-utils/types/Frontmatter';
-import { Translations, Lang } from '@util/Languages';
-import { Accelerator } from 'astro-accelerator-utils';
-import { SITE } from '@config';
+import type { Frontmatter } from "astro-accelerator-utils/types/Frontmatter";
+import { Translations, Lang } from "@util/Languages";
+import { Accelerator } from "astro-accelerator-utils";
+import { SITE } from "@config";
 
 const accelerator = new Accelerator(SITE);
-const stats = new accelerator.statistics('accelerator/components/SkipLinks.astro');
+const stats = new accelerator.statistics(
+  "accelerator/components/SkipLinks.astro",
+);
 stats.start();
 
 // Properties
 type Props = {
   lang: string;
-  frontmatter: Frontmatter
-  headings: { depth: number; slug: string; text: string; }[];
+  frontmatter: Frontmatter;
+  headings: { depth: number; slug: string; text: string }[];
 };
 const { lang } = Astro.props satisfies Props;
 
@@ -24,8 +26,41 @@ const _ = Lang(lang);
 // Logic
 stats.stop();
 ---
-<nav class="skip-links" aria-label={ _(Translations.aria.skiplinks) } id="site-top">
-  <a href="#site-nav">{ _(Translations.skiplinks.skip_to_navigation) }</a>
-  <a href="#site-main">{ _(Translations.skiplinks.skip_to_content) }</a>
-  <a href="#site-footer">{ _(Translations.skiplinks.skip_to_footer) }</a>
-</nav>
+
+<nav
+  class="skip-links"
+  aria-label={_(Translations.aria.skiplinks)}
+  id="site-top">
+  <a href="#site-nav">{_(Translations.skiplinks.skip_to_navigation)}</a>
+  <a href="#site-main">{_(Translations.skiplinks.skip_to_content)}</a>
+  <a href="#site-footer">{_(Translations.skiplinks.skip_to_footer)}</a>
+</nav>
+
+<style is:global>
+  .skip-links {
+    position: absolute;
+  }
+
+  .skip-links a {
+    clip: rect(0 0 0 0);
+    background-color: var(--aft);
+    min-width: 20vw;
+    overflow: hidden;
+    padding: 1rem;
+    position: absolute;
+    z-index: 15;
+    text-align: center;
+    display: inline-block;
+    height: 1px;
+    margin: -1px;
+    width: 1px;
+  }
+
+  .skip-links a:focus {
+    clip: auto;
+    height: auto;
+    margin: 0.2em;
+    overflow: visible;
+    width: auto;
+  }
+</style>

package/src/themes/accelerator/components/TableOfContents.astro

@@ -1,53 +1,103 @@
 ---
 // warning: This file is overwritten by Astro Accelerator
 
-import type { Frontmatter } from 'astro-accelerator-utils/types/Frontmatter';
-import { SITE } from '@config';
-import { Translations, Lang } from '@util/Languages';
-import { Accelerator } from 'astro-accelerator-utils';
+import type { Frontmatter } from "astro-accelerator-utils/types/Frontmatter";
+import { SITE } from "@config";
+import { Translations, Lang } from "@util/Languages";
+import { Accelerator } from "astro-accelerator-utils";
 
 const accelerator = new Accelerator(SITE);
-const stats = new accelerator.statistics('accelerator/components/TableOfContents.astro');
+const stats = new accelerator.statistics(
+  "accelerator/components/TableOfContents.astro",
+);
 stats.start();
 
 // Properties
 type Props = {
   lang: string;
   frontmatter: Frontmatter;
-  headings: { depth: number; slug: string; text: string; }[];
+  headings: { depth: number; slug: string; text: string }[];
   maxLevel?: number;
   expanded?: boolean | number;
 };
-let { lang, frontmatter, headings, maxLevel, expanded } = Astro.props satisfies Props;
+let { lang, frontmatter, headings, maxLevel, expanded } =
+  Astro.props satisfies Props;
 
 // Language
 const _ = Lang(lang);
 
 // Logic
-let openAttribute = null; 
+let openAttribute = null;
 let openInteraction = null;
 
-if (maxLevel == null){
+if (maxLevel == null) {
   maxLevel = 3;
 }
 
-if (typeof expanded === 'number') {
+if (typeof expanded === "number") {
   openInteraction = expanded;
 } else if (expanded === true) {
-  openAttribute = 'open';
+  openAttribute = "open";
 }
 
 stats.stop();
 ---
-{headings?.length > 0 &&
-<nav class="page-toc" aria-label={ _(Translations.aria.toc) }>
-  <details open={ openAttribute } data-openon={ openInteraction }>
-    <summary>{ _(Translations.toc.title) }</summary>
-    <ol>
-      {headings.filter(h => h.depth <= maxLevel).map((heading) =>(
-        <li class={ 'toc-lev-' + heading.depth }><a href={ '#' + heading.slug }>{ heading.text }</a></li>
-      ))}
-    </ol>
-  </details>
-</nav>
-}
+
+{
+  headings?.length > 0 && (
+    <nav class="page-toc" aria-label={_(Translations.aria.toc)}>
+      <details open={openAttribute} data-openon={openInteraction}>
+        <summary>{_(Translations.toc.title)}</summary>
+        <ol>
+          {headings
+            .filter((h) => h.depth <= maxLevel)
+            .map((heading) => (
+              <li class={"toc-lev-" + heading.depth}>
+                <a href={"#" + heading.slug}>{heading.text}</a>
+              </li>
+            ))}
+        </ol>
+      </details>
+    </nav>
+  )
+}
+
+<style is:global>
+  .page-toc {
+    margin: 0 0 var(--paragraph-margin) 0;
+    font-size: var(--font-size-meta);
+  }
+
+  .page-toc ol {
+    list-style: none;
+  }
+
+  .page-toc li a {
+    display: block;
+    padding: 0.5rem 1rem;
+  }
+
+  .page-toc li.toc-lev-2 {
+    margin-left: 0rem;
+  }
+
+  .page-toc li.toc-lev-3 a {
+    margin-left: 1rem;
+  }
+
+  .page-toc li.toc-lev-4 a {
+    margin-left: 2rem;
+  }
+
+  .page-toc li.toc-lev-5 a {
+    margin-left: 3rem;
+  }
+
+  .page-toc li.toc-lev-6 a {
+    margin-left: 4rem;
+  }
+
+  .page-toc summary {
+    cursor: pointer;
+  }
+</style>

package/src/themes/accelerator/components/TimelineEvent.astro

@@ -64,3 +64,63 @@ const displayDate = formatDate(date);
         }
     </div>
 </div>
+
+<style is:global>
+    .timeline-event {
+        padding-inline-start: calc(var(--timeline-gap) * 2.5);
+        position: relative;
+        margin-block-end: var(--block-gap);
+    }
+
+    .timeline-event::before {
+        background: var(--aft);
+        border: 3px solid var(--icon-block);
+        border-radius: 50%;
+        box-shadow: var(--box-shadow-unselected);
+        content: "";
+        height: 1rem;
+        left: calc(var(--timeline-gap) - 0.5rem);
+        position: absolute;
+        top: 1.4em;
+        width: 1rem;
+        z-index: 1;
+    }
+
+    .timeline-event > div {
+        background: var(--aft-block);
+        border-radius: var(--block-radius);
+        box-shadow: var(--box-shadow-unselected);
+        color: var(--fore-block);
+        padding: 1.5rem;
+        text-align: left;
+    }
+
+    .timeline-event.event-today > div {
+        box-shadow: var(--box-glow);
+    }
+
+    .timeline-event.event-past > div {
+        background: var(--aft);
+        box-shadow: none;
+        color: var(--fore);
+        opacity: 0.8;
+    }
+
+    .timeline-event.event-past::before {
+        box-shadow: var(--box-shadow-unselected);
+    }
+
+    .timeline-details {
+        font-size: var(--font-size-meta);
+    }
+
+    time {
+        display: inline-block;
+        margin-block-end: var(--grid-gap);
+    }
+
+    .timeline-location {
+        display: block;
+        font-size: var(--font-size-meta);
+    }
+</style>

package/src/themes/accelerator/layouts/Events.astro

@@ -81,16 +81,28 @@ const renderedYears = await (async () => {
             </Fragment>
         ))
     }
+</DefaultLayout>
 
-    {
-        isArchive ? (
-            <p>
-                <a href="/events/">Return to upcoming events</a>
-            </p>
-        ) : (
-            <p>
-                <a href="/events-archive/">View the events archive</a>
-            </p>
-        )
+<style is:global>
+    /* Events timeline */
+    .timeline {
+        --timeline-gap: 1rem;
+        position: relative;
     }
-</DefaultLayout>
+
+    .timeline h2,
+    .timeline h3 {
+        margin: 0 0 0.5rem 0;
+        font-size: var(--font-size-h4);
+    }
+
+    .timeline::before {
+        background-color: var(--icon-block);
+        bottom: 0;
+        content: "";
+        left: var(--timeline-gap);
+        position: absolute;
+        top: calc((var(--block-gap) + 1px) * -1);
+        width: 0.4rem;
+    }
+</style>