run build
This commit is contained in:
@ -232,6 +232,224 @@ pre[class*=language-]::selection {
|
||||
.token.selector {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
#postlist,
|
||||
#taglist {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#postlist, .post,
|
||||
#taglist, .tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Odd-numbered posts & tag layout/coloration */
|
||||
.post:nth-child(odd) .postlink,
|
||||
.tag:nth-child(odd) .taglink {
|
||||
grid-template-areas:
|
||||
'img h2'
|
||||
'img info'
|
||||
'img .';
|
||||
grid-template-columns: 45% auto;;
|
||||
--color-primary: var(--color-teal);
|
||||
--color-accent: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Even-numbered posts & tags layout/coloration */
|
||||
.post:nth-child(even) .postlink,
|
||||
.tag:nth-child(even) .taglink {
|
||||
grid-template-areas:
|
||||
'h2 img'
|
||||
'info img'
|
||||
'. img';
|
||||
grid-template-columns: auto 45%;
|
||||
--color-primary: var(--color-pink);
|
||||
--color-accent: var(--color-teal);
|
||||
}
|
||||
|
||||
/* Layout for all posts on mobile */
|
||||
@media (max-width: 650px) {
|
||||
.post:nth-child(n) .postlink,
|
||||
.tag:nth-child(n) .taglink {
|
||||
grid-template-areas:
|
||||
'img'
|
||||
'h2'
|
||||
'info';
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Link */
|
||||
.postlink,
|
||||
.taglink {
|
||||
display: grid;
|
||||
border: .25rem solid var(--color-primary);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: .35rem .35rem var(--color-shadow);
|
||||
margin: 2rem 0;
|
||||
text-decoration: none;
|
||||
/* Click animation handling */
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: top .05s ease-in, left .05s ease-in;
|
||||
}
|
||||
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
background-color: var(--color-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Forced colors */
|
||||
@media (forced-colors: active) {
|
||||
.postlink:focus-visible,
|
||||
.taglink:focus-visible {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover,
|
||||
.taglink:hover {
|
||||
outline-offset: .25rem;
|
||||
outline: .25rem solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Click animation */
|
||||
.postlink:active,
|
||||
.taglink:active {
|
||||
box-shadow: none;
|
||||
top: .2rem;
|
||||
left: .2rem;
|
||||
box-shadow: .15rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Post & tag elements */
|
||||
.post h2, .post img,
|
||||
.post ul, .post li,
|
||||
.tag h2, .tag p,
|
||||
.tag img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post h2,
|
||||
.tag h2 {
|
||||
grid-area: h2;
|
||||
padding: .25rem .5rem;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
border-bottom: .25rem solid var(--color-accent);
|
||||
}
|
||||
|
||||
.post:nth-child(even) h2,
|
||||
.tag:nth-child(even) h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.postlink:focus-visible h2,
|
||||
.taglink:focus-visible h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover h2,
|
||||
.taglink:hover h2 {
|
||||
color: var(--color-bg);
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.post img,
|
||||
.tag-imgs {
|
||||
grid-area: img;
|
||||
}
|
||||
|
||||
.tag-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: .15rem;
|
||||
}
|
||||
|
||||
.tag-imgs img {
|
||||
aspect-ratio: 3 / 2;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.missing-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-color: var(--color-bg-alt);
|
||||
border-radius: calc(1rem);
|
||||
}
|
||||
|
||||
.taglink:focus-visible .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.taglink:hover .missing-image {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
/* Post tags */
|
||||
.postlist-tags {
|
||||
grid-area: info;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: .5rem;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.post:nth-child(odd) .postlist-tags {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.postlist-tags li,
|
||||
.tagcount {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-bg);
|
||||
padding: 0 .5rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.postlink:focus-visible .postlist-tags li,
|
||||
.taglink:focus-visible .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
.postlink:hover .postlist-tags li,
|
||||
.taglink:hover .tagcount {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Tag count */
|
||||
.tag p {
|
||||
grid-area: info;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.tag:nth-child(odd) p {
|
||||
text-align: right;
|
||||
}
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
@ -283,8 +501,6 @@ pre[class*=language-]::selection {
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-grey: light-dark(var(--color-grey-dark), var(--color-grey-light));
|
||||
|
||||
--header-offset: 3.1rem;
|
||||
}
|
||||
|
||||
/* Base */
|
||||
@ -305,7 +521,7 @@ main {
|
||||
width: 60vw;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
scroll-margin-top: var(--header-offset);
|
||||
scroll-margin-top: 7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
@ -324,7 +540,6 @@ main {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.25;
|
||||
color: var(--color-teal);
|
||||
scroll-margin-top: var(--header-offset);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -333,6 +548,10 @@ h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2rem;
|
||||
font-size: 2.2rem;
|
||||
@ -494,13 +713,9 @@ time {
|
||||
|
||||
/* Horizontal rules */
|
||||
hr {
|
||||
color: var(--color-teal);
|
||||
border: .25rem solid var(--color-teal);
|
||||
border: .25rem solid var(--color-pink);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
hr:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Used on home, reference, gallery pages */
|
||||
.centered {
|
||||
@ -516,9 +731,10 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-bg);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
padding: .75rem 0;
|
||||
z-index: 10;
|
||||
border-bottom: .5rem solid var(--color-teal);
|
||||
box-shadow: 0 .25rem .15rem var(--color-shadow);
|
||||
}
|
||||
|
||||
/* Header links, pagination links */
|
||||
@ -711,6 +927,7 @@ header li {
|
||||
footer {
|
||||
padding: 1rem 0;
|
||||
font-size: .9rem;
|
||||
border-top: .5rem solid var(--color-pink);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
@ -1175,6 +1392,7 @@ export { HeadingAnchors }</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
|
||||
<article>
|
||||
<h1 id="lupine">lupine</h1>
|
||||
@ -1251,10 +1469,71 @@ export { HeadingAnchors }</script>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="related-posts">
|
||||
<h2 id="related-posts">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/euphorbia/">
|
||||
|
||||
<img src="/img/euphorbia-print.jpg" alt="A print in black ink on brown paper. It depicts a stem of euphorbia, a plant with long, thin leaves and many clustered flowers." loading="lazy" decoding="async" width="1000" height="1333">
|
||||
|
||||
<h2 id="euphorbia">euphorbia</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/happy-bihrtday/">
|
||||
|
||||
<img src="/img/happy-bihrtday-card-print.jpg" alt="A card and print in the same design - a bouncy, cheery font reading 'happy biHRTday'" loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="happy-bihrtday">happy biHRTday</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
<li>gender</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/killdeer/">
|
||||
|
||||
<img src="/img/killdeer-print.jpg" alt="A print of a killdeer in black ink." loading="lazy" decoding="async" width="1000" height="1333">
|
||||
|
||||
<h2 id="killdeer">killdeer</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>print</li>
|
||||
|
||||
<li>card</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1279,6 +1558,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/lupine/` was built on 2026-02-20T16:02:10.536Z -->
|
||||
<!-- This page `/lupine/` was built on 2026-02-20T16:35:28.454Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
Reference in New Issue
Block a user
