website-astro-stefanimhoff.de/src/styles/global.css

@import 'fonts.css';

/** Tailwind */
@tailwind base;
@tailwind components;
@tailwind utilities;

/** Base */
@layer base {
	*,
	*:before,
	*:after {
		box-sizing: inherit;
	}

	::selection {
		background-color: #a3b387;
		color: #ffffff;
	}

	/* Page Transitions */
	::view-transition-old(root),
	::view-transition-new(root) {
		animation-duration: 300ms;
	}

	/** Critic Markup */
	del {
		@apply decoration-[0.15em];
	}

	ins {
		@apply decoration-dashed decoration-[0.15em];
	}

	mark {
		@apply rounded border border-black/[0.1] bg-marked text-black/[0.75] pli-[0.3em] pbe-[0.2em] pbs-[0.3em] dark:bg-marked/[0.7];
	}

	/** Code, Sample, Abbreviation, Keyboard Shortcuts etc. */
	pre {
		@apply whitespace-pre;
	}

	.astro-code {
		@apply border-1 border-solid dark:border-white/20;
	}

	p code,
	li code,
	samp {
		@apply relative whitespace-normal rounded-[0.3em] bg-code-1 text-2 text-code-2 pli-3 pbe-1 pbs-3 -block-start-[0.2em];
	}

	kbd {
		@apply inline-block whitespace-nowrap rounded-2 border-1 border-solid border-[#ccc] bg-[#f7f7f7] !text-code font-bold leading-5 text-[#333] shadow-beveled pli-[0.4em] pbe-[0.1em] pbs-[0.1em] dark:bg-[#f7f7f7]/[0.9];
		text-shadow: 0 1px 0 #ffffff;
	}

	abbr {
		@apply small-caps;
	}

	:is(code, kbd, samp) {
		@apply font-mono !text-code;
	}

	:is(abbr, dfn) {
		@apply cursor-help;
	}

	/** Quotes */
	[lang|='en'] blockquote,
	blockquote[lang|='en'],
	[lang|='en'] q,
	q[lang|='en'] {
		quotes: '“' '”' '‘' '’';
	}

	[lang|='de'] blockquote,
	blockquote[lang|='de'],
	[lang|='de'] q,
	q[lang|='de'] {
		quotes: '»' '«' '›' '‹';
	}

	[lang|='ja'] blockquote,
	blockquote[lang|='ja'],
	[lang|='ja'] q,
	q[lang|='ja'] {
		quotes: '「' '」' '『' '』';
	}

	/** Blockquote */
	blockquote {
		& p,
		& ul,
		& ol {
			@apply text-3 font-extralight italic opacity-60 !mbe-8 mbs-0;
		}

		& p:last-child {
			@apply !mbe-0;
		}

		& > footer {
			@apply !-mbs-5;
		}

		&:nth-last-child(2) {
			@apply mbe-5;
		}

		& strong {
			@apply font-bold italic;
		}

		& sup {
			@apply font-normal;
		}
	}

	/** Inline Quotes */
	q {
		@apply italic;

		&::before {
			@apply not-italic mis-[0.1em];
		}

		&::after {
			@apply not-italic mie-[0.1em];
		}
	}

	/** Pullquote */
	.pullquote {
		&::before {
			@apply hidden;
		}

		& p {
			@apply m-0 text-4 font-extrabold leading-none;
		}

		& p:first-child::before {
			@apply font-normal content-[open-quote];
		}

		& p:nth-of-type(1):first-letter {
			@apply -mis-[0.4em];
		}

		& p:nth-last-of-type(1)::after {
			@apply font-normal content-[close-quote];
		}
	}

	.pullquote[lang|='ja'] {
		@apply font-normal;
	}

	/** Cite */
	cite {
		@apply pie-[0.1em];
	}

	/** Images */
	img.image-border {
		@apply block h-auto w-full rounded-1 border border-solid border-black/5 bg-black/5 shadow-img dark:border-white/5 dark:bg-white/5 dark:opacity-[0.87];
	}

	img.image-no-border {
		@apply border-0 bg-transparent shadow-none;
	}

	.icon {
		@apply fill-shibui-950 dark:fill-shibui-200/[0.87];
	}

	.multicolumns > h2 {
		break-inside: avoid;
		break-after: avoid;
	}

	.multicolumns > h2 + ul,
	.multicolumns > h2 + h3 {
		break-inside: avoid;
		break-after: avoid;
	}

	.multicol-span {
		column-span: all;
	}

	/** Inputs */
	input[type='text'] {
		@apply !rounded-2 border border-shibui-450 outline-none;
		@apply focus:border-shibui-700 focus:outline-2 focus:outline-offset-2 focus:outline-shibui-700;
		@apply focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-shibui-700;
		@apply dark:focus:border-shibui-200 dark:focus:outline-shibui-200 dark:focus-visible:outline-shibui-200;
	}
}

@layer components {
	.navigation .is-active {
		@apply underline !decoration-accent decoration-4;
	}

	.image-shadow {
		@apply relative transition-transform duration-500 ease-in-out;

		&::after {
			@apply absolute -z-[1] h-full w-full opacity-0 shadow-subtle transition-opacity duration-500 ease-in-out content-[''] block-start-0 inline-start-0;
		}

		&:hover,
		&:focus {
			@apply scale-[1.03];

			&::after {
				@apply opacity-100;
			}
		}
	}

	.journal-card,
	.journal-card-link {
		@apply relative col-span-2 row-span-3 inline-block overflow-hidden rounded-4 border-1 border-black/25 outline outline-2 outline-offset-2 outline-transparent hover:scale-105 focus:scale-105 dark:border-white/25 md:row-span-5;
	}

	.journal-card-link {
		@apply relative block h-full w-full focus:scale-100;
	}

	.journal-card:focus-within {
		@apply outline-current;
	}

	.journal-card img,
	.journal-card picture,
	.journal-card-link img,
	.journal-card-link picture {
		@apply !h-full w-full object-cover;
	}

	.journal-card img,
	.journal-card-link img {
		@apply !h-full scale-100 blur-0 brightness-[80%] filter transition duration-300 ease-in-out dark:brightness-[50%];
	}

	.journal-card:hover img,
	.journal-card:focus img,
	.journal-card-link:hover img,
	.journal-card-link:focus img {
		@apply scale-105 blur-sm brightness-[100%] dark:brightness-[70%];
	}

	/** YouTube Lite */
	lite-youtube {
		@apply relative aspect-video w-full !max-w-none mbe-10;

		&::before {
			@apply !bg-none;
		}
	}

	figure > .figure-content > lite-youtube {
		@apply mbe-0;
	}

	@keyframes slide-fade-in {
		from {
			opacity: 0;
			box-shadow: none;
			transform: scale(0.8) translateY(15vh);
		}
	}

	.slide {
		@media (prefers-reduced-motion: no-preference) {
			@supports (animation-timeline: view()) {
				animation: slide-fade-in both;
				animation-timeline: view();
				animation-range: contain -40% contain 50%;
			}
		}
	}
}