build
This commit is contained in:
@ -457,6 +457,90 @@ pre[class*=language-]::selection {
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
img[tabindex="0"]:focus-visible {
|
||||
outline: .15rem solid var(--color-teal);
|
||||
}
|
||||
|
||||
dialog {
|
||||
margin: auto;
|
||||
flex-flow: column;
|
||||
background: transparent;
|
||||
border: none;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
dialog[open] {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
dialog::backdrop {
|
||||
background-color: rgba(from var(--color-bg) r g b / .8);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
body:has(dialog[open]) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.close-dialog {
|
||||
background-color: rgba(from var(--color-teal) r g b / .2);
|
||||
font-size: 1.5rem;
|
||||
padding: 0 .5rem .15rem;
|
||||
border-radius: 1rem;
|
||||
color: var(--color-teal);
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
border: .08rem solid var(--color-teal);
|
||||
align-self: flex-end;
|
||||
justify-self: flex-start;
|
||||
margin: 0 .1rem;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 1rem;
|
||||
left: -.15rem;
|
||||
transition: top .1s ease-in, left .1s ease-in;
|
||||
}
|
||||
|
||||
.close-dialog:focus-visible {
|
||||
outline: none;
|
||||
background-color: var(--color-teal);
|
||||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.close-dialog:hover {
|
||||
outline: none;
|
||||
background-color: var(--color-teal);
|
||||
color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.close-dialog:focus-visible {
|
||||
outline-offset: .08rem;
|
||||
outline: .08rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.close-dialog:hover {
|
||||
outline-offset: .08rem;
|
||||
outline: .08rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.close-dialog:active {
|
||||
top: 1.1rem;
|
||||
left: -.05rem;
|
||||
box-shadow: .05rem .05rem var(--color-shadow);
|
||||
}
|
||||
|
||||
.modal-img {
|
||||
max-height: calc(90vh - 2rem);
|
||||
object-fit: contain;
|
||||
width: auto;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -637,7 +721,6 @@ span.ha-placeholder {
|
||||
opacity: .55;
|
||||
}
|
||||
|
||||
|
||||
/* Lists */
|
||||
::marker {
|
||||
color: var(--color-pink);
|
||||
@ -1351,7 +1434,29 @@ class HeadingAnchors extends HTMLElement {
|
||||
|
||||
HeadingAnchors.register();
|
||||
|
||||
export { HeadingAnchors }</script>
|
||||
export { HeadingAnchors }
|
||||
/* don't even bother on mobile */
|
||||
if (window.innerWidth > 650) {
|
||||
const dialog = document.querySelector("dialog");
|
||||
const closeButton = document.querySelector(".close-dialog");
|
||||
const hero = document.querySelector(".hero");
|
||||
|
||||
hero.addEventListener("click", (e) => dialog.showModal());
|
||||
hero.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
dialog.showModal();
|
||||
}
|
||||
});
|
||||
|
||||
closeButton.addEventListener("click", (e) => dialog.close());
|
||||
closeButton.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
dialog.close();
|
||||
}
|
||||
});
|
||||
}</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
@ -1411,6 +1516,8 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="spotted-towhee">spotted towhee</h1>
|
||||
@ -1440,7 +1547,11 @@ export { HeadingAnchors }</script>
|
||||
</div>
|
||||
|
||||
|
||||
<img src="/img/spotted-towhee-print.jpg" alt="A block print of a spotted towhee mid-leap." loading="lazy" decoding="async" width="1000" height="750">
|
||||
<dialog closedby="any" aria-label="image modal" tabindex="-1">
|
||||
<button class="close-dialog" autofocus="" aria-label="close the image modal">×</button>
|
||||
<img class="modal-img" src="/img/spotted-towhee-print.jpg" alt="A block print of a spotted towhee mid-leap." loading="lazy" decoding="async" width="1000" height="750">
|
||||
</dialog>
|
||||
<img tabindex="0" class="hero" src="/img/spotted-towhee-print.jpg" alt="A block print of a spotted towhee mid-leap." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
|
||||
<p>A spotted towhee mid-leap.</p>
|
||||
@ -1493,8 +1604,8 @@ export { HeadingAnchors }</script>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/nonbinary-flag/">
|
||||
<h2 data-ha-exclude="" id="nonbinary-flag">nonbinary flag </h2>
|
||||
<a class="postlink" href="/trans-rights-skull/">
|
||||
<h2 data-ha-exclude="" id="trans-rights-skull">trans rights skull </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
@ -1502,33 +1613,21 @@ export { HeadingAnchors }</script>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>sticker</li>
|
||||
|
||||
<li>pin</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/nonbinary-flag-print.jpg" alt="A print of a nonbinary flag waving, with yellow, white (uninked), purple, and black stripes." loading="lazy" decoding="async" width="1000" height="750">
|
||||
<img src="/img/trans-rights-print.jpg" alt="A print in mostly black ink of a smiling skull with a speech bubble. In pink and blue, the speech bubble reads 'trans rights!'" loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/luminescent/">
|
||||
<h2 data-ha-exclude="" id="luminescent-mature">luminescent (mature)</h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/luminescent-print.jpg" alt="A print of a tattooed woman in bright highlighter yellow underwear." class="blur" loading="lazy" decoding="async" width="900" height="1200">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/hummingbird-become-ungovernable/">
|
||||
<h2 data-ha-exclude="" id="hummingbird-become-ungovernable">hummingbird become ungovernable </h2>
|
||||
<a class="postlink" href="/heron/">
|
||||
<h2 data-ha-exclude="" id="heron">heron </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
@ -1539,7 +1638,25 @@ export { HeadingAnchors }</script>
|
||||
<li>shirt</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/hummingbird-ungovernable-print.jpg" alt="A block print in black and orange ink of a rufous hummingbird, tail flared, hovering in midair. Clutched in eir tiny claws is a banner that waves in the wind and reads 'become ungovernable'" loading="lazy" decoding="async" width="1000" height="750">
|
||||
<img src="/img/heron-print.jpg" alt="A print in black ink of a great blue heron, leaning downwards so that eir beak is level with eir feet." loading="lazy" decoding="async" width="1000" height="1333">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/booby-congrats-on-the-top-surgery/">
|
||||
<h2 data-ha-exclude="" id="booby-congrats-on-the-top-surgery">booby (congrats on the top surgery) </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/booby-card.jpg" alt="A landscape-oriented white card with a two-color print of a blue-footed booby." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
@ -1575,6 +1692,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/spotted-towhee/` was built on 2026-05-06T18:04:11.569Z -->
|
||||
<!-- This page `/spotted-towhee/` was built on 2026-05-14T03:43:28.012Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user
