tak-dcxi

---

---

<return-button class="scoping-root">
	<a href="#top" class="button">
		<span class="visually-hidden">本文上部へ戻る</span>
	</a>
</return-button>

tak-dcxi

// @sample https://codepen.io/tak-dcxi/pen/dyBbBgd

export type CarouselSelectors = {
  scrollerSelector: string | undefined;
  dirButtonSelector: string | undefined;
  progressSelector: string | undefined;
};

const DEFAULT_MOVE = 1;
const DEFAULT_GAP = 0;

tak-dcxi

const resizeMasonryItem = (
  element: HTMLElement,
  itemWrapper: HTMLElement
): void => {
  const item = itemWrapper.firstChild;
  if (!(item instanceof HTMLElement)) return;

  const rowSize = parseInt(getComputedStyle(element).gridAutoRows, 10);
  const gapSize = parseInt(getComputedStyle(element).rowGap, 10);
  const itemSize = isWritingModeVertical(element)

tak-dcxi

// View Transitions API は TypeScript の型定義に含まれていないため自身で定義する
declare global {
  interface ViewTransition {
    finished: Promise<void>
    ready: Promise<void>
    updateCallbackDone: Promise<void>
  }

  interface Document {
    startViewTransition(updateCallback: () => Promise<void> | void): ViewTransition

tak-dcxi

---
import { load } from 'cheerio'
import Image from 'astro/components/Image.astro'
import { writeFileSync, readFileSync } from 'node:fs'
import BaseIcon from '@/components/BaseIcon.astro'

type Props = {
	href: string
}

tak-dcxi

:is(body, body *) {
	&,
	&::before,
	&::after {
		--font-size-clamp-min: calc(var(--font-size-min) * pow(var(--font-size-ratio-min), var(--font-size-level)));
		--font-size-clamp-max: calc(var(--font-size-max) * pow(var(--font-size-ratio-max), var(--font-size-level)));
		--font-size-clamp-preferred: calc(
			(var(--font-size-clamp-max) - var(--font-size-clamp-min)) / (var(--layout-width-max) - var(--layout-width-min))
		);
		--font-size-clamp: clamp(

tak-dcxi

const backfaceFixed = (fixed: boolean): void => {
  const scrollBarWidth = getScrollBarSize()
  const scrollPosition = getScrollPosition(fixed)

  document.body.style.borderInlineEnd = fixed ? `${scrollBarWidth}px solid transparent` : ''
  applyStyles(scrollPosition, fixed)
  if (!fixed) restorePosition(scrollPosition)
}

const isWritingModeVertical = (): boolean => {

tak-dcxi

const backfaceFixed = (fixed: boolean): void => {
  const scrollBarWidth = getScrollBarSize()
  const scrollPosition = getScrollPosition(fixed)

  document.body.style.borderInlineEnd = fixed ? `${scrollBarWidth}px solid transparent` : ''
  applyStyles(scrollPosition, fixed)
  if (!fixed) restorePosition(scrollPosition)
}

const isWritingModeVertical = (): boolean => {

tak-dcxi

export type AccordionOptions = {
  buttonSelector: string | undefined
  panelSelector: string | undefined
  duration?: number
  easing?: string
  printAll?: boolean
}

const defaultOptions: AccordionOptions = {
  buttonSelector: undefined,

tak-dcxi

export type AccordionOptions = {
  duration?: number
  easing?: string
  printAll?: boolean
}

const defaultOptions: AccordionOptions = {
  duration: 300,
  easing: 'ease-in-out',
  printAll: false,