/tags/alert/ Recent content in Alert on Avadhoot Dandekar Hugo en-US Sun, 01 Jun 2025 10:00:00 +0800 /posts/test-alert/ Sun, 01 Jun 2025 10:00:00 +0800 /posts/test-alert/ <h1 id="github-style-alert-testing">GitHub Style Alert Testing</h1> <p>This article is used to test the new GitHub-style Alert feature and folding functionality.</p> <h2 id="alert-syntax">Alert Syntax</h2> <h3 id="note-alert">Note Alert</h3> <div class="alert alert-note my-6 overflow-hidden rounded-lg transition-all duration-200 ease-out hover:-translate-y-0.5 hover:shadow-md" style="background-color: color-mix(in srgb, var(--color-note) 10%, transparent); border-left-color: var(--color-note); --hover-bg: color-mix(in srgb, var(--color-note) 15%, transparent);" onmouseover="this.style.backgroundColor = this.style.getPropertyValue('--hover-bg')" onmouseout="this.style.backgroundColor = 'color-mix(in srgb, var(--color-note) 10%, transparent)'" role="alert" aria-labelledby="alert-0-title"> <div class=" flex items-center justify-between px-6 py-6" > <div class="flex items-center gap-3"> <h4 id="alert-0-title" class="m-0 font-semibold text-foreground/90"> Note </h4> </div> </div> <div id="alert-0-content" class="alert-content px-6 pb-6"> <div class="prose prose-sm text-foreground/90 max-w-none"> <p>This is a note alert box. Used to display useful information that users should be aware of, even when quickly browsing the content.</p>