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="brookes-scarf">brooke's scarf</h1>
|
||||
@ -1241,10 +1459,69 @@ 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="/textures-unite/">
|
||||
|
||||
<img src="/img/textures-unite.jpg" alt="a largely unseen person holds up an expansive knitted shawl, built in 6 sections of different textures and colors. in the background, trees and dappled sunlight." loading="lazy" decoding="async" width="1000" height="1334">
|
||||
|
||||
<h2 id="textures-unite">textures unite</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>knit</li>
|
||||
|
||||
<li>highlight</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/sideways-canvas-shirt/">
|
||||
|
||||
<img src="/img/sideways-canvas.jpg" alt="someone's torso in a knitted short sleeve shirt. the front is teal, and the bit of back we can see is mustard yellow. looking closely, it's notable that the stitches are turned 90 degrees from a standard knit garment." loading="lazy" decoding="async" width="1000" height="1338">
|
||||
|
||||
<h2 id="sideways-canvas-shirt">sideways canvas shirt</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>knit</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/butch-hands-pattern/">
|
||||
|
||||
<img src="/img/butch-hands.jpg" alt="Hands wearing a pair of pink and grey gloves with convertable mitten tops." loading="lazy" decoding="async" width="1000" height="750">
|
||||
|
||||
<h2 id="butch-hands-pattern">butch hands pattern</h2>
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>knit</li>
|
||||
|
||||
<li>highlight</li>
|
||||
|
||||
</ul>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</heading-anchors>
|
||||
|
||||
|
||||
<hr>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
@ -1269,6 +1546,6 @@ export { HeadingAnchors }</script>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/brookes-scarf/` was built on 2026-02-20T16:02:10.551Z -->
|
||||
<!-- This page `/brookes-scarf/` was built on 2026-02-20T16:35:28.479Z -->
|
||||
<body>
|
||||
</body></body>
|
||||
Reference in New Issue
Block a user
