drone build Sun Sep 20 18:46:44 PDT 2026
This commit is contained in:
@@ -43,9 +43,9 @@
|
||||
<style>#toc {
|
||||
float: right;
|
||||
margin: 1rem 0 1.5rem 1.5rem;
|
||||
/* 23rem is the width of the words 'table of contents' in my header font */
|
||||
/* yes, it's a bit hacky */
|
||||
width: min(calc(100% - 1.5rem), 23rem);
|
||||
/* 23rem is the width of the words 'table of contents' in my header font */
|
||||
/* yes, it's a bit hacky */
|
||||
}
|
||||
|
||||
@media (max-width: 850px) {
|
||||
@@ -70,6 +70,7 @@
|
||||
width: fit-content;
|
||||
background: var(--color-bg);
|
||||
border-radius: .5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#toc summary:focus-visible {
|
||||
@@ -91,27 +92,46 @@
|
||||
top: -1.25rem;
|
||||
}
|
||||
|
||||
/* my baby my child my `tree` list styling */
|
||||
#toc ol,
|
||||
#toc li {
|
||||
margin-block: .45rem 0;
|
||||
margin-block: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
#toc nav > ol {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
#toc ol {
|
||||
margin-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* basically we want to style this `ol` as a `ul` */
|
||||
#toc ol > li {
|
||||
list-style: disc;
|
||||
#toc li {
|
||||
border-left: .095rem solid var(--color-pink);
|
||||
line-height: 1.2;
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
#toc ol > li > ol > li {
|
||||
list-style: circle;
|
||||
#toc li::before {
|
||||
content: '├─';
|
||||
color: var(--color-pink);
|
||||
position: relative;
|
||||
left: -.34rem;
|
||||
}
|
||||
|
||||
#toc ol > li > ol > li > ol > li {
|
||||
list-style: square;
|
||||
#toc li:last-child {
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
#toc li:last-child::before {
|
||||
/* Technically, we could use this content for all of them, but doing the full
|
||||
bar for the non-last-childs keeps the border a *smidge* more consistent for
|
||||
different levels of magnification */
|
||||
content: '└─';
|
||||
}
|
||||
|
||||
/* underlines are unnecessary in this context */
|
||||
#toc a {
|
||||
text-decoration: none;
|
||||
color: var(--color-blue);
|
||||
font-weight: bold;
|
||||
}
|
||||
.post-metadata {
|
||||
display: flex;
|
||||
@@ -2068,22 +2088,6 @@ switch (currentThemeValue) {
|
||||
<h2 data-ha-exclude="">related posts</h2>
|
||||
<ol id="postlist">
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/core-css/">
|
||||
<h2 data-ha-exclude="">core CSS </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>software</li>
|
||||
|
||||
<li>highlight</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/core-css.png" alt="A website mockup in dark mode with light pink accents. Everything is filler text such as the title 'This is my cool website', headers reading things like 'This is an h1', nav items 'Nav item 1', etc. There is a paragraph block - the opening of the Bee Movie - and part of an image visible - a screencap of the music video for Never Gonna Give You Up by Rick Astley." loading="lazy" decoding="async" width="1000" height="447">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/intro-to-wireframing/">
|
||||
<h2 data-ha-exclude="">intro to wireframing </h2>
|
||||
@@ -2099,15 +2103,31 @@ switch (currentThemeValue) {
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/an-intro-to-git/">
|
||||
<h2 data-ha-exclude="">an intro to git </h2>
|
||||
<a class="postlink" href="/designing-a-bag/">
|
||||
<h2 data-ha-exclude="">designing a bag </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>leather</li>
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/shoelace-bag.jpg" alt="a 3-image collage showcasing a leather crossbody bag. the leather body is brown and fairly simple. up the narrow sides, rope is laced through grommets in a style resembling a shoe lacing. the rope forms the handle and loops seamlessly through the other side of the bag, joining in one point in a figure-8 follow-through knot. At the bottom corners, there are small diagonal lines of stitching to give the bag a small lip around the base and ensure small objects don't slide out." loading="lazy" decoding="async" width="1000" height="1777">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="post">
|
||||
<a class="postlink" href="/accessible-image-modals/">
|
||||
<h2 data-ha-exclude="">accessible image modals </h2>
|
||||
|
||||
<ul class="postlist-tags">
|
||||
|
||||
<li>software</li>
|
||||
|
||||
</ul>
|
||||
<img src="/img/goldeneye-tail.jpg" alt="Image unrelated to post. The tail of a diving duck pokes out from the water with a small splash." loading="lazy" decoding="async" width="1000" height="666">
|
||||
<img src="/img/snacking-seagull.jpg" alt="Image unrelated to post. A seagull floating in the water with a starfish hanging out of eir mouth." loading="lazy" decoding="async" width="1000" height="666">
|
||||
|
||||
</a>
|
||||
</li>
|
||||
@@ -2164,6 +2184,6 @@ switch (currentThemeValue) {
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- This page `/domain-and-site-setup/` was built on 2026-09-20T22:13:39.370Z -->
|
||||
<!-- This page `/domain-and-site-setup/` was built on 2026-09-21T01:46:30.893Z -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user