@alphacifer/slidev-addon-theme 0.0.10 → 0.0.12

package/components/pyramid/square-pyramid/{SquarePyramidStackTitle.vue → SquarePyramidStackHeading.vue}

@@ -5,21 +5,21 @@ import {
   SQUARE_PYRAMID_ROOT_KEY,
   SQUARE_PYRAMID_STACK_KEY,
 } from '../../../utils/pyramid/square-pyramid';
+import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 
 defineOptions({
-  name: 'SquarePyramidStackTitle',
+  name: 'SquarePyramidStackHeading',
+  inheritAttrs: false,
 });
 
-export interface ISquarePyramidStackTitleProps {
+export interface ISquarePyramidStackHeadingProps {
   readonly step?: string | number;
-  readonly title?: string;
   readonly color?: string;
   readonly minWidth?: number;
 }
 
-const props = withDefaults(defineProps<ISquarePyramidStackTitleProps>(), {
+const props = withDefaults(defineProps<ISquarePyramidStackHeadingProps>(), {
   step: undefined,
-  title: undefined,
   color: undefined,
   minWidth: 150,
 });
@@ -43,9 +43,11 @@ const resolvedStep = computed(() => {
   if (props.step !== undefined) {
     return props.step;
   }
+
   if (stackContext?.step.value !== undefined) {
     return stackContext.step.value;
   }
+
   return '01';
 });
 
@@ -56,71 +58,73 @@ const stackColor = computed(() => {
     props.color ??
     stackContext?.color?.value ??
     rootContext?.color.value ??
-    '#3b82f6'
+    'var(--alpha-square-pyramid-stack-heading-accent)'
   );
 });
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(() => [
+  'alpha-square-pyramid-stack-heading__pill flex items-center gap-2 px-2.5 py-1 rounded-full text-xs font-semibold tracking-tight leading-tight transition-all duration-300 border shrink-0',
+  isActive.value
+    ? 'bg-(--alpha-square-pyramid-stack-heading-border-active) text-(--alpha-square-pyramid-stack-heading-active)'
+    : 'bg-(--alpha-square-pyramid-stack-heading-border) text-(--alpha-square-pyramid-stack-heading)',
+]);
 </script>
 
 <template>
   <div
-    class="alpha-square-pyramid-stack-title relative w-full flex items-center select-none"
+    class="alpha-square-pyramid-stack-heading relative w-full flex items-center select-none"
     :class="[
       isActive
-        ? 'alpha-square-pyramid-stack-title--active'
-        : 'alpha-square-pyramid-stack-title--default',
+        ? 'alpha-square-pyramid-stack-heading--active'
+        : 'alpha-square-pyramid-stack-heading--default',
     ]"
     :style="{
-      '--title-delay': `calc(var(--square-pyramid-start-delay, 0ms) + ${460 + stepIndex * 320}ms)`,
+      '--title-delay': `calc(var(--alpha-square-pyramid-start-delay, 0ms) + ${460 + stepIndex * 320}ms)`,
     }"
   >
     <!-- Pill Badge Container -->
     <div
-      class="alpha-square-pyramid-stack-title__pill flex items-center gap-2 px-2.5 py-1 rounded-full transition-all duration-300 border flex-shrink-0"
-      :class="{
-        'alpha-square-pyramid-stack-title__pill--animated': isAnimated,
-      }"
+      v-bind="forwardedAttrs()"
+      :class="
+        className({
+          'alpha-square-pyramid-stack-heading__pill--animated': isAnimated,
+        })
+      "
       :style="{
         minWidth: `${minPillWidth}px`,
         maxWidth: 'calc(100% - 30px)',
         width: 'fit-content',
         boxSizing: 'border-box',
         borderColor: stackColor,
-        backgroundColor: isActive
-          ? 'rgba(255, 255, 255, 0.95)'
-          : 'rgba(255, 255, 255, 0.85)',
         boxShadow: isActive
-          ? `0 4px 14px ${stackColor}26`
+          ? `0 4px 14px color-mix(in srgb, ${stackColor} 15%, transparent)`
           : 'none',
       }"
     >
       <!-- Circular Step Indicator -->
       <div
-        class="w-5.5 h-5.5 rounded-full flex items-center justify-center text-[10px] font-bold tracking-tight transition-all duration-300 flex-shrink-0"
+        class="w-5.5 h-5.5 rounded-full flex items-center justify-center text-[10px] font-bold tracking-tight text-(--alpha-square-pyramid-stack-heading-number) transition-all duration-300 shrink-0"
         :style="{
           backgroundColor: stackColor,
-          color: '#ffffff',
         }"
       >
         <slot name="step">{{ resolvedStep }}</slot>
       </div>
       <!-- Title Text -->
-      <span
-        class="text-xs font-semibold tracking-tight transition-colors duration-300 pr-1 truncate flex-1 leading-tight"
-        :style="{
-          color: isActive ? '#0f172a' : '#334155',
-        }"
+      <h4
+        class="text-xs font-semibold tracking-tight leading-tight transition-colors duration-300 pr-1 truncate flex-1"
       >
-        <slot>{{ props.title }}</slot>
-      </span>
+        <slot>{{ '' }}</slot>
+      </h4>
     </div>
     <!-- Scalable Line between Title and Dot -->
     <div
-      class="alpha-square-pyramid-stack-title__connector flex-1 flex items-center min-w-[30px] pointer-events-none"
+      class="alpha-square-pyramid-stack-heading__connector flex-1 flex items-center min-w-7.5 pointer-events-none"
     >
       <div
-        class="alpha-square-pyramid-stack-title__line flex-1 h-[1px] transition-colors duration-300"
+        class="alpha-square-pyramid-stack-heading__line flex-1 h-px transition-colors duration-300"
         :class="{
-          'alpha-square-pyramid-stack-title__line--animated': isAnimated,
+          'alpha-square-pyramid-stack-heading__line--animated': isAnimated,
         }"
         :style="{
           backgroundColor: stackColor,
@@ -128,15 +132,15 @@ const stackColor = computed(() => {
         }"
       />
       <div
-        class="alpha-square-pyramid-stack-title__dot w-1.5 h-1.5 rounded-full flex-shrink-0 -ml-1 transition-all duration-300"
+        class="alpha-square-pyramid-stack-heading__dot w-1.5 h-1.5 rounded-full shrink-0 -ml-1 transition-all duration-300"
         :class="{
-          'alpha-square-pyramid-stack-title__dot--animated': isAnimated,
+          'alpha-square-pyramid-stack-heading__dot--animated': isAnimated,
         }"
         :style="{
           backgroundColor: stackColor,
           boxShadow: isActive
             ? `0 0 6px ${stackColor}`
-            : `0 0 2px ${stackColor}80`,
+            : `0 0 2px color-mix(in srgb, ${stackColor} 50%, transparent)`,
         }"
       />
     </div>
@@ -144,16 +148,18 @@ const stackColor = computed(() => {
 </template>
 
 <style scoped>
-.alpha-square-pyramid-stack-title {
+.alpha-square-pyramid-stack-heading {
   box-sizing: border-box;
 }
 
-.alpha-square-pyramid-stack-title--active .alpha-square-pyramid-stack-title__pill {
+.alpha-square-pyramid-stack-heading--active
+  .alpha-square-pyramid-stack-heading__pill {
   backdrop-filter: blur(8px);
 }
 
-.alpha-square-pyramid-stack-title__dot--animated {
-  animation: alpha-pyramid-title-dot-pop 120ms cubic-bezier(0.16, 1, 0.3, 1) var(--title-delay) both;
+.alpha-square-pyramid-stack-heading__dot--animated {
+  animation: alpha-pyramid-title-dot-pop 120ms cubic-bezier(0.16, 1, 0.3, 1)
+    var(--title-delay) both;
 }
 
 @keyframes alpha-pyramid-title-dot-pop {
@@ -167,9 +173,10 @@ const stackColor = computed(() => {
   }
 }
 
-.alpha-square-pyramid-stack-title__line--animated {
+.alpha-square-pyramid-stack-heading__line--animated {
   transform-origin: right center;
-  animation: alpha-pyramid-title-line-draw 500ms cubic-bezier(0.4, 0, 0.2, 1) calc(var(--title-delay) + 120ms) both;
+  animation: alpha-pyramid-title-line-draw 500ms cubic-bezier(0.4, 0, 0.2, 1)
+    calc(var(--title-delay) + 120ms) both;
 }
 
 @keyframes alpha-pyramid-title-line-draw {
@@ -187,8 +194,9 @@ const stackColor = computed(() => {
   }
 }
 
-.alpha-square-pyramid-stack-title__pill--animated {
-  animation: alpha-pyramid-title-pill-in 240ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--title-delay) + 380ms) both;
+.alpha-square-pyramid-stack-heading__pill--animated {
+  animation: alpha-pyramid-title-pill-in 240ms cubic-bezier(0.16, 1, 0.3, 1)
+    calc(var(--title-delay) + 380ms) both;
 }
 
 @keyframes alpha-pyramid-title-pill-in {

package/components/pyramid/square-pyramid/style.css

@@ -0,0 +1,48 @@
+/* Color defaults shared by this component family. */
+@layer alpha-theme-tokens {
+  :root {
+    --alpha-square-pyramid-accent: #3b82f6;
+    --alpha-square-pyramid-center: #0f172a;
+
+    --alpha-square-pyramid-connector-fill: #ffffff;
+    --alpha-square-pyramid-connector-highlight: rgba(255, 255, 255, 0.5);
+
+    --alpha-square-pyramid-stack-1-color: #ec4899;
+    --alpha-square-pyramid-stack-2-color: #8b5cf6;
+    --alpha-square-pyramid-stack-3-color: #3b82f6;
+    --alpha-square-pyramid-stack-4-color: #06b6d4;
+    --alpha-square-pyramid-stack-5-color: #14b8a6;
+    --alpha-square-pyramid-stack-6-color: #f59e0b;
+
+    --alpha-square-pyramid-stack-content: var(
+      --alpha-foreground-primary,
+      #475569
+    );
+    --alpha-square-pyramid-stack-content-accent: #3b82f6;
+    --alpha-square-pyramid-stack-content-active: #0f172a;
+    --alpha-square-pyramid-stack-content-border: rgba(255, 255, 255, 0.85);
+    --alpha-square-pyramid-stack-content-border-active: rgba(
+      255,
+      255,
+      255,
+      0.95
+    );
+
+    --alpha-square-pyramid-highlight: #ffffff;
+
+    --alpha-square-pyramid-stack-heading: var(
+      --alpha-foreground-primary,
+      #334155
+    );
+    --alpha-square-pyramid-stack-heading-accent: #3b82f6;
+    --alpha-square-pyramid-stack-heading-active: #0f172a;
+    --alpha-square-pyramid-stack-heading-border: rgba(255, 255, 255, 0.85);
+    --alpha-square-pyramid-stack-heading-border-active: rgba(
+      255,
+      255,
+      255,
+      0.95
+    );
+    --alpha-square-pyramid-stack-heading-number: #ffffff;
+  }
+}

package/components/style.css

@@ -0,0 +1,35 @@
+@layer alpha-theme-tokens {
+  :root {
+    --alpha-pyramid-accent: #3b82f6;
+    --alpha-pyramid-highlight: #ffffff;
+  }
+}
+
+.alpha-interaction-control {
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  color: transparent;
+  appearance: none;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+}
+
+.alpha-interaction-control:disabled {
+  cursor: default;
+}
+
+.alpha-interaction-control:focus-visible {
+  outline: 0.2rem solid var(--alpha-foreground-accent, #0284c7);
+  outline-offset: -0.3rem;
+  background: color-mix(
+    in srgb,
+    var(--alpha-foreground-accent, #0284c7) 20%,
+    transparent
+  );
+}

package/layouts/core/arc-toc.vue

@@ -22,7 +22,7 @@ import {
   calculateUniformTocArticleWidthPx,
   createTocArcPath,
   createTocConnectorPath,
-} from '../../utils/tableOfContents';
+} from '../../utils/layouts/table-of-contents';
 import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
 
 defineOptions({
@@ -49,13 +49,13 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
 );
 
 const markerColors = [
-  '#ffad21',
-  '#24b9aa',
-  '#3188e4',
-  '#59d875',
-  '#f53270',
-  '#8b5cf6',
-  '#ef4444',
+  'var(--alpha-arc-toc-marker-orange)',
+  'var(--alpha-arc-toc-marker-teal)',
+  'var(--alpha-arc-toc-marker-blue)',
+  'var(--alpha-arc-toc-marker-green)',
+  'var(--alpha-arc-toc-marker-pink)',
+  'var(--alpha-arc-toc-marker-purple)',
+  'var(--alpha-arc-toc-marker-red)',
 ] as const;
 
 interface ITocConnector {
@@ -87,7 +87,7 @@ const markerPositions = computed(() => {
 });
 const tocContentStyle = computed(() => {
   return {
-    '--toc-list-gap': `${calculateTocListGapRem(tocItemCount.value)}rem`,
+    '--alpha-arc-toc-list-gap': `${calculateTocListGapRem(tocItemCount.value)}rem`,
     left: `calc(40.4% + ${calculateTocMiddleMarkerOffsetPx(tocItemCount.value)}px)`,
   } satisfies CSSProperties;
 });
@@ -95,7 +95,7 @@ const markerStyles = computed(() => {
   return markerPositions.value.map(
     ({ offsetFromMiddlePx, rightShiftPx, topPercent }, index) => {
       return {
-        '--marker-color': markerColors[index],
+        '--alpha-arc-toc-marker-color': markerColors[index],
         left: `calc(40.4% - ${offsetFromMiddlePx}px + ${rightShiftPx}px)`,
         top: `${topPercent}%`,
       } satisfies CSSProperties;
@@ -109,6 +109,7 @@ let connectorResizeObserver: ResizeObserver | undefined;
 
 function isMiddleItem(index: number, count: number): boolean {
   const middleIndex = (count - 1) / 2;
+
   return Math.abs(index - middleIndex) < 1;
 }
 
@@ -118,6 +119,7 @@ function updateConnectors(): void {
   if (!root || root.clientWidth === 0 || root.clientHeight === 0) {
     arcPath.value = '';
     connectors.value = [];
+
     return;
   }
 
@@ -173,18 +175,20 @@ function updateConnectors(): void {
     const markerCenterY =
       middleIndices.reduce((sum, index) => {
         const rect = markers[index]?.getBoundingClientRect();
+
         return sum + (rect ? rect.top + rect.height / 2 : 0);
       }, 0) / middleIndices.length;
     const articleCenterY =
       middleIndices.reduce((sum, index) => {
         const rect = articles[index]?.getBoundingClientRect();
+
         return sum + (rect ? rect.top + rect.height / 2 : 0);
       }, 0) / middleIndices.length;
-    const offsetPx = calculateTocCenterAlignmentOffsetPx(
+    const offsetPx = calculateTocCenterAlignmentOffsetPx({
       markerCenterY,
       articleCenterY,
       scaleY,
-    );
+    });
 
     tocContent.style.transform = `translateY(${offsetPx}px)`;
   }
@@ -212,7 +216,11 @@ function updateConnectors(): void {
 
     nextConnectors.push({
       color: markerColors[index % markerColors.length] ?? markerColors[0],
-      path: createTocConnectorPath(start, end, isMiddleItem(index, count)),
+      path: createTocConnectorPath({
+        start,
+        end,
+        isMiddle: isMiddleItem(index, count),
+      }),
     });
   }
 
@@ -249,11 +257,13 @@ onMounted(async () => {
       subtree: true,
     });
   }
+
   window.addEventListener('resize', scheduleConnectorUpdate);
 });
 
 watch(tocItemCount, async () => {
   await nextTick();
+
   scheduleConnectorUpdate();
 });
 
@@ -269,11 +279,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div
-    ref="rootElement"
-    v-bind="forwardedAttrs()"
-    :class="className()"
-  >
+  <div ref="rootElement" v-bind="forwardedAttrs()" :class="className()">
     <header class="alpha-arc-toc__heading">
       <slot>
         <h1>Table of Contents</h1>
@@ -308,26 +314,25 @@ onBeforeUnmount(() => {
         :stroke="connector.color"
       />
     </svg>
-    <nav
-      class="alpha-arc-toc__content"
-      :style="tocContentStyle"
-    >
+    <nav class="alpha-arc-toc__content" :style="tocContentStyle">
       <ol class="alpha-arc-toc__list">
         <li
           v-for="(item, index) in visibleTocItems"
           :key="item.path"
           class="alpha-arc-toc__item"
           :class="{ 'alpha-arc-toc__item--active': item.active }"
-          :style="{ '--toc-color': markerColors[index % markerColors.length] }"
+          :style="{
+            '--alpha-arc-toc-marker-color':
+              markerColors[index % markerColors.length],
+          }"
         >
           <RouterLink
             :to="isPresenter ? `/presenter${item.path}` : item.path"
             @click="($event.target as HTMLElement)?.blur()"
           >
-            <span
-              v-if="props.indexed"
-              class="alpha-arc-toc__item-index"
-            >{{ index + 1 }}. </span>
+            <span v-if="props.indexed" class="alpha-arc-toc__item-index"
+              >{{ index + 1 }}.
+            </span>
             <span class="alpha-arc-toc__item-text">{{ item.title }}</span>
           </RouterLink>
         </li>
@@ -337,16 +342,6 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
-.alpha-arc-toc {
-  --toc-orange: #ffad21;
-  --toc-teal: #24b9aa;
-  --toc-blue: #3188e4;
-  --toc-green: #59d875;
-  --toc-pink: #f53270;
-  --toc-purple: #8b5cf6;
-  --toc-red: #ef4444;
-}
-
 .alpha-arc-toc.slidev-layout {
   position: relative;
   overflow: hidden;
@@ -392,7 +387,7 @@ onBeforeUnmount(() => {
 
 .alpha-arc-toc__curve path {
   fill: none;
-  stroke: #d7d7d5;
+  stroke: var(--alpha-arc-toc-curve-stroke);
   stroke-width: 2;
   vector-effect: non-scaling-stroke;
 }
@@ -402,10 +397,10 @@ onBeforeUnmount(() => {
   z-index: 2;
   width: 1rem;
   height: 1rem;
-  border: 0.23rem solid #f8f8f7;
+  border: 0.23rem solid var(--alpha-arc-toc-marker-border);
   border-radius: 50%;
-  background: var(--marker-color);
-  box-shadow: 0 0 0 2px var(--marker-color);
+  background: var(--alpha-arc-toc-marker-color);
+  box-shadow: 0 0 0 2px var(--alpha-arc-toc-marker-color);
   transform: translate(-50%, -50%);
 }
 
@@ -438,7 +433,7 @@ onBeforeUnmount(() => {
 .alpha-arc-toc__list {
   display: flex;
   flex-direction: column;
-  gap: var(--toc-list-gap);
+  gap: var(--alpha-arc-toc-list-gap);
   margin: 0;
   padding: 0;
   list-style: none;
@@ -461,9 +456,9 @@ onBeforeUnmount(() => {
   padding: 0.5rem 1.25rem;
   border: 0;
   border-radius: 999px;
-  background: var(--toc-color);
-  box-shadow: 0.45rem 0.65rem 0.85rem rgb(15 23 42 / 18%);
-  color: white;
+  background: var(--alpha-arc-toc-marker-color);
+  box-shadow: var(--alpha-arc-toc-item-shadow);
+  color: var(--alpha-arc-toc-item);
   font-family: inherit;
   font-size: 0.9rem;
   font-weight: 700;

package/layouts/core/bg-center.vue

@@ -45,16 +45,17 @@ const tocIndex = computed(() => {
 </script>
 
 <template>
-  <div
-    v-bind="forwardedAttrs()"
-    :class="className()"
-    :style="style"
-  >
+  <div v-bind="forwardedAttrs()" :class="className()" :style="style">
     <div
       v-if="indexed && tocIndex !== null"
       class="alpha-bg-center__indexed-content flex flex-col items-center gap-2"
     >
-      <span class="alpha-bg-center__index text-5xl font-extrabold leading-none text-white opacity-50 tracking-tighter">{{ tocIndex }}</span>
+      <span
+        class="alpha-bg-center__index text-5xl font-extrabold leading-none text-(--alpha-bg-center-text) opacity-50 tracking-tighter"
+        >{{
+          tocIndex
+        }}</span
+      >
       <slot />
     </div>
     <slot v-else />

package/layouts/core/references.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { handleBackground } from '@slidev/client';
+import { computed, type PropType } from 'vue';
+
+import { useMergedUnoAttrs } from '../../utils/useMergedUnoAttrs';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+export interface IReferenceItem {
+  authors: string;
+  year: number | string;
+  title: string;
+  url?: string;
+}
+
+const props = defineProps({
+  references: {
+    type: Array as PropType<IReferenceItem[]>,
+    default: () => [],
+  },
+  columns: {
+    type: [Number, String],
+    default: 2,
+  },
+  background: {
+    type: String,
+    default: '',
+  },
+});
+
+const style = computed(() =>
+  props.background ? handleBackground(props.background) : undefined,
+);
+
+const columnClass = computed(() => {
+  const cols = Number(props.columns) || 2;
+  if (cols === 1) return 'columns-1';
+  if (cols === 3) return 'columns-3';
+  return 'columns-2';
+});
+
+const { className, forwardedAttrs } = useMergedUnoAttrs(
+  'alpha-references slidev-layout h-full',
+);
+</script>
+
+<template>
+  <div v-bind="forwardedAttrs()" :class="className()" :style="style">
+    <slot />
+    <ul
+      v-if="props.references.length"
+      class="alpha-references__list list-none p-0 m-0 mt-3"
+      :class="[columnClass, 'gap-x-8']"
+    >
+      <li
+        v-for="(ref, index) in props.references"
+        :key="`${ref.authors}-${ref.year}-${index}`"
+        class="alpha-references__item break-inside-avoid mb-4 text-lg leading-snug"
+      >
+        <strong class="alpha-references__authors text-foreground-primary block">
+          {{ ref.authors }}
+          ({{ ref.year }})
+        </strong>
+        <a
+          v-if="ref.url"
+          :href="ref.url"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="alpha-references__title text-foreground-accent hover:underline block"
+        >
+          {{ ref.title }}
+        </a>
+        <span
+          v-else
+          class="alpha-references__title text-foreground-secondary block"
+        >
+          {{ ref.title }}
+        </span>
+      </li>
+    </ul>
+  </div>
+</template>

package/layouts/core/style.css

@@ -0,0 +1,47 @@
+@layer alpha-theme-tokens {
+  :root {
+    --alpha-arc-toc-curve-stroke: #d7d7d5;
+    --alpha-arc-toc-item: #ffffff;
+    --alpha-arc-toc-item-shadow: 0.45rem 0.65rem 0.85rem rgb(15 23 42 / 18%);
+    --alpha-arc-toc-marker-border: #f8f8f7;
+    --alpha-arc-toc-marker-orange: #ffad21;
+    --alpha-arc-toc-marker-teal: #24b9aa;
+    --alpha-arc-toc-marker-blue: #3188e4;
+    --alpha-arc-toc-marker-green: #59d875;
+    --alpha-arc-toc-marker-pink: #f53270;
+    --alpha-arc-toc-marker-purple: #8b5cf6;
+    --alpha-arc-toc-marker-red: #ef4444;
+
+    --alpha-bg-center-text: var(--alpha-foreground-accent, #fff);
+  }
+}
+
+.slidev-page .slidev-layout.alpha-references ul:not([class*='alpha-references__list']) {
+  columns: 2;
+  column-gap: 2rem;
+  list-style: none;
+  padding: 0;
+  margin-top: 0.75rem;
+}
+
+.slidev-page .slidev-layout.alpha-references ul:not([class*='alpha-references__list']) > li {
+  margin-bottom: 1rem;
+  font-size: 1.125rem;
+  line-height: 1.375;
+  break-inside: avoid;
+}
+
+.slidev-page .slidev-layout.alpha-references ul:not([class*='alpha-references__list']) {
+  columns: 2;
+  column-gap: 2rem;
+  list-style: none;
+  padding: 0;
+  margin-top: 0.75rem;
+}
+
+.slidev-page .slidev-layout.alpha-references ul:not([class*='alpha-references__list']) > li {
+  margin-bottom: 1rem;
+  font-size: 1.125rem;
+  line-height: 1.375;
+  break-inside: avoid;
+}