More AI
This commit is contained in:
parent
f3fc893675
commit
bb5b4c4cf3
43 changed files with 585 additions and 524 deletions
|
|
@ -39,14 +39,14 @@
|
|||
--color-link: light-dark(#285f74, #8ab8c8);
|
||||
--color-link-hover: light-dark(
|
||||
color-mix(in oklch, #285f74 70%, black 30%),
|
||||
color-mix(in oklch, #8ab8c8 70%, black 30%)
|
||||
color-mix(in oklch, #8ab8c8 70%, white 30%)
|
||||
);
|
||||
--color-link-visited: var(--color-link);
|
||||
--color-accent: light-dark(oklch(55% 0.13 15), oklch(72% 0.13 15));
|
||||
--color-rule: light-dark(#d9d5ca, #39352f);
|
||||
--color-rule-medium: light-dark(#7a7466, #6c655c);
|
||||
--color-rule-medium: light-dark(#7a7466, #8a8478);
|
||||
--color-rule-strong: light-dark(#4a4340, #d0c5b7);
|
||||
--color-code-bg: light-dark(#efede6, #24221f);
|
||||
--color-code-bg: light-dark(#efede6, #2f2c27);
|
||||
--color-callout-bg: light-dark(#f4f1e8, #211f1c);
|
||||
--color-selection-bg: light-dark(#ecddd0, #4a3a2e);
|
||||
|
||||
|
|
@ -173,6 +173,7 @@
|
|||
color: var(--color-fg);
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--fs-body);
|
||||
line-height: var(--leading-snug);
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow-wrap: break-word;
|
||||
|
|
@ -181,6 +182,10 @@
|
|||
color 200ms ease;
|
||||
}
|
||||
|
||||
address {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-link);
|
||||
text-decoration-thickness: 0.08em;
|
||||
|
|
@ -198,7 +203,7 @@
|
|||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--color-rule-strong);
|
||||
outline: 2px solid var(--color-accent);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
|
|
@ -228,17 +233,6 @@
|
|||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.shell {
|
||||
width: min(100% - 2 * var(--gutter), var(--page));
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.tap-target {
|
||||
min-height: 44px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
|
|
@ -246,20 +240,12 @@
|
|||
========================================================================= */
|
||||
|
||||
@layer layout {
|
||||
:where(
|
||||
.site-header,
|
||||
.site-footer,
|
||||
.home-intro,
|
||||
.home-section,
|
||||
.page-shell,
|
||||
.post,
|
||||
.post-footer-shell
|
||||
) {
|
||||
:where(.site-header, .site-footer, .home-intro, .home-section, .page-shell, .post) {
|
||||
width: min(100% - 2 * var(--gutter), var(--page));
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
:where(.post, .post-footer-shell) {
|
||||
.post {
|
||||
width: min(100% - 2 * var(--gutter), var(--measure-wide));
|
||||
}
|
||||
|
||||
|
|
@ -271,7 +257,10 @@
|
|||
transform: translateY(-150%);
|
||||
background: var(--color-fg);
|
||||
color: var(--color-bg);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
min-block-size: 44px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
transition: transform 150ms ease;
|
||||
}
|
||||
|
|
@ -294,7 +283,9 @@
|
|||
|
||||
.site-title {
|
||||
color: var(--color-fg);
|
||||
font-weight: var(--weight-semibold);
|
||||
font-size: var(--fs-lg);
|
||||
font-weight: var(--weight-bold);
|
||||
letter-spacing: -0.005em;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -302,6 +293,10 @@
|
|||
color: var(--color-fg);
|
||||
}
|
||||
|
||||
.site-title[aria-current='page'] {
|
||||
color: var(--color-fg);
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -337,17 +332,11 @@
|
|||
text-underline-offset: 0.25em;
|
||||
}
|
||||
|
||||
.site-nav a[aria-current='page'] {
|
||||
.site-nav a[aria-current='page'],
|
||||
.site-nav a[aria-current='true'] {
|
||||
color: var(--color-fg);
|
||||
}
|
||||
|
||||
.theme-control {
|
||||
cursor: pointer;
|
||||
min-height: 44px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
border-top: 1px solid var(--color-rule);
|
||||
margin-top: var(--space-16);
|
||||
|
|
@ -370,16 +359,24 @@
|
|||
font-size: var(--fs-caption);
|
||||
}
|
||||
|
||||
.footer-links a,
|
||||
.footer-meta a,
|
||||
.footer-meta span {
|
||||
min-height: 44px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer-links a,
|
||||
.footer-meta a {
|
||||
padding-inline: var(--space-1);
|
||||
margin-inline: calc(-1 * var(--space-1));
|
||||
}
|
||||
|
||||
/* Page header (shared by .home-intro, .page-header, .post-header) */
|
||||
.home-intro {
|
||||
max-width: var(--measure-wide);
|
||||
padding-block: clamp(2rem, 5vw, 4rem) var(--space-10);
|
||||
padding-block: clamp(2rem, 5vw, 4rem) var(--space-6);
|
||||
}
|
||||
|
||||
.home-intro h1,
|
||||
|
|
@ -545,8 +542,23 @@
|
|||
color: var(--color-rule-medium);
|
||||
}
|
||||
|
||||
.tag-list .tag-more::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.tag-list .tag-count {
|
||||
margin-inline-start: 0.35em;
|
||||
padding: 0 0.4em;
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--color-code-bg);
|
||||
color: var(--color-fg);
|
||||
font-size: var(--fs-caption);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.tag-list a:hover,
|
||||
.tag-list a[aria-current='page'] {
|
||||
.tag-list a[aria-current='page'],
|
||||
.tag-list a[aria-current='true'] {
|
||||
color: var(--color-fg);
|
||||
}
|
||||
|
||||
|
|
@ -584,10 +596,10 @@
|
|||
|
||||
.article-list > li {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(5rem, auto) minmax(0, 1fr) minmax(6rem, 8rem);
|
||||
grid-template-columns: 4.5rem minmax(0, 1fr) minmax(6rem, 8rem);
|
||||
grid-template-areas: 'date content thumb';
|
||||
align-items: center;
|
||||
gap: var(--space-5);
|
||||
gap: var(--space-4);
|
||||
padding-block: var(--space-6);
|
||||
border-top: 1px solid var(--color-rule);
|
||||
}
|
||||
|
|
@ -611,6 +623,9 @@
|
|||
|
||||
.article-list .entry-title,
|
||||
.project-list h3 a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 28px;
|
||||
color: var(--color-fg);
|
||||
font-weight: var(--weight-semibold);
|
||||
text-decoration: none;
|
||||
|
|
@ -734,9 +749,10 @@
|
|||
.project-card .project-meta {
|
||||
color: var(--color-muted);
|
||||
font-size: var(--fs-sm);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.project-essay-badge {
|
||||
|
|
@ -778,6 +794,11 @@
|
|||
color: var(--color-link);
|
||||
}
|
||||
|
||||
.project-links a:hover,
|
||||
.project-links a:focus-visible {
|
||||
color: var(--color-link-hover);
|
||||
}
|
||||
|
||||
.project-links a .download-indicator {
|
||||
margin-left: 0.25em;
|
||||
color: var(--color-muted);
|
||||
|
|
@ -838,6 +859,12 @@
|
|||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
.about-links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-1) var(--space-4);
|
||||
}
|
||||
|
||||
.post > .prose {
|
||||
margin-top: var(--space-8);
|
||||
}
|
||||
|
|
@ -864,6 +891,11 @@
|
|||
margin-top: 1.05em;
|
||||
}
|
||||
|
||||
.prose > h2:first-child,
|
||||
.prose > h3:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.prose p {
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
|
@ -902,19 +934,24 @@
|
|||
font-weight: var(--weight-regular);
|
||||
font-size: 0.85em;
|
||||
text-decoration: none;
|
||||
opacity: 0;
|
||||
opacity: 0.25;
|
||||
transition: opacity 150ms ease;
|
||||
}
|
||||
|
||||
.prose .heading-anchor::before {
|
||||
content: '#';
|
||||
}
|
||||
|
||||
.prose h2:hover .heading-anchor,
|
||||
.prose h3:hover .heading-anchor,
|
||||
.prose .heading-anchor:hover,
|
||||
.prose .heading-anchor:focus-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (hover: none) {
|
||||
.prose .heading-anchor {
|
||||
opacity: 0.4;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1043,10 +1080,17 @@
|
|||
|
||||
.at-a-glance dl,
|
||||
.facts dl {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
margin: var(--space-4) 0 0;
|
||||
}
|
||||
|
||||
.at-a-glance__row,
|
||||
.facts dl > div {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
|
||||
gap: var(--space-2) var(--space-4);
|
||||
margin: var(--space-4) 0 0;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.at-a-glance dt,
|
||||
|
|
@ -1089,24 +1133,23 @@
|
|||
|
||||
.post > .at-a-glance {
|
||||
grid-column: 2;
|
||||
grid-row: span 5;
|
||||
margin-top: var(--space-8);
|
||||
position: sticky;
|
||||
top: var(--space-6);
|
||||
align-self: start;
|
||||
}
|
||||
}
|
||||
|
||||
/* -- Post media (formerly EvidenceMedia) ----------------------------- */
|
||||
/* -- Post media ------------------------------------------------------- */
|
||||
|
||||
.post-media,
|
||||
.evidence-media {
|
||||
.post-media {
|
||||
max-inline-size: min(100%, var(--measure-wide));
|
||||
margin: var(--space-8) 0 0;
|
||||
}
|
||||
|
||||
.post-media img,
|
||||
.post-media video,
|
||||
.evidence-media img,
|
||||
.evidence-media video {
|
||||
.post-media video {
|
||||
border: 1px solid var(--color-rule);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-code-bg);
|
||||
|
|
@ -1114,7 +1157,6 @@
|
|||
}
|
||||
|
||||
.post-media figcaption,
|
||||
.evidence-media figcaption,
|
||||
.media-transcript {
|
||||
max-width: var(--measure);
|
||||
margin-top: var(--space-2);
|
||||
|
|
@ -1126,14 +1168,24 @@
|
|||
/* -- Post nav --------------------------------------------------------- */
|
||||
|
||||
.post-nav {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
|
||||
gap: var(--space-4);
|
||||
margin-top: var(--space-12);
|
||||
padding-top: var(--space-6);
|
||||
border-top: 1px solid var(--color-rule);
|
||||
}
|
||||
|
||||
.post-nav__list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
|
||||
gap: var(--space-4);
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post-nav__next {
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.post-nav a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -1170,6 +1222,67 @@
|
|||
font-weight: var(--weight-semibold);
|
||||
}
|
||||
|
||||
/* -- Post TOC --------------------------------------------------------- */
|
||||
|
||||
.post-toc {
|
||||
margin-top: var(--space-6);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border-inline-start: 2px solid var(--color-rule);
|
||||
font-size: var(--fs-caption);
|
||||
color: var(--color-muted);
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.post-toc .post-nav__title,
|
||||
.post-header h1,
|
||||
.post-nav .post-nav__title,
|
||||
.project-card h3 {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.post-toc ol {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.post-toc a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-block-size: 24px;
|
||||
padding-block: 2px;
|
||||
color: var(--color-muted);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.post-toc a:hover,
|
||||
.post-toc a:focus-visible {
|
||||
color: var(--color-fg);
|
||||
}
|
||||
|
||||
/* -- Post media gallery ----------------------------------------------- */
|
||||
|
||||
.post-gallery {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: var(--space-8) 0 0;
|
||||
display: grid;
|
||||
gap: var(--space-6);
|
||||
}
|
||||
|
||||
/* -- External link affordance ----------------------------------------- */
|
||||
|
||||
.external-link-icon {
|
||||
display: inline-block;
|
||||
margin-inline-start: 0.25em;
|
||||
vertical-align: -0.125em;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
/* -- Related ---------------------------------------------------------- */
|
||||
|
||||
.related-posts {
|
||||
|
|
@ -1187,36 +1300,27 @@
|
|||
/* -- Empty state (e.g. 404) ----------------------------------------- */
|
||||
|
||||
.empty-state {
|
||||
min-height: 50vh;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
text-align: center;
|
||||
max-width: var(--measure);
|
||||
margin-inline: auto;
|
||||
padding-block: var(--space-10);
|
||||
}
|
||||
|
||||
.empty-state .prose {
|
||||
margin-inline: auto;
|
||||
padding-block: var(--space-6);
|
||||
}
|
||||
|
||||
/* -- Theme switcher --------------------------------------------------- */
|
||||
|
||||
.theme-switcher {
|
||||
--switcher-w: 2.5rem;
|
||||
--switcher-h: 1.25rem;
|
||||
--switcher-icon: 0.85rem;
|
||||
--switcher-mask: 0.68rem;
|
||||
--switcher-gap: 0.2rem;
|
||||
--switcher-mask-offset: 0.28rem;
|
||||
--switcher-w: 2.75rem;
|
||||
--switcher-h: 1.5rem;
|
||||
--switcher-icon: 1.05rem;
|
||||
--switcher-mask: 0.78rem;
|
||||
--switcher-gap: 0.22rem;
|
||||
--switcher-mask-offset: 0.32rem;
|
||||
|
||||
position: relative;
|
||||
display: block;
|
||||
display: inline-block;
|
||||
width: var(--switcher-w);
|
||||
height: var(--switcher-h);
|
||||
margin: 0;
|
||||
margin: var(--space-2) 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--color-rule);
|
||||
border: 1px solid var(--color-rule-medium);
|
||||
border-radius: var(--radius-pill);
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
|
|
@ -1225,9 +1329,7 @@
|
|||
transition:
|
||||
background-color 200ms ease,
|
||||
border-color 150ms ease;
|
||||
box-shadow:
|
||||
inset 0 0 10px 2px rgb(0 0 0 / 17.5%),
|
||||
inset 0 0 1px rgb(0 0 0 / 40%);
|
||||
box-shadow: inset 0 1px 2px rgb(0 0 0 / 18%);
|
||||
}
|
||||
|
||||
.theme-switcher:hover {
|
||||
|
|
@ -1329,8 +1431,8 @@
|
|||
padding-block: var(--space-8) var(--space-6);
|
||||
}
|
||||
|
||||
.at-a-glance dl,
|
||||
.facts dl {
|
||||
.at-a-glance__row,
|
||||
.facts dl > div {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
|
@ -1357,7 +1459,7 @@
|
|||
}
|
||||
|
||||
.project-card .project-meta {
|
||||
white-space: normal;
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
|
||||
.project-card__summary {
|
||||
|
|
@ -1377,10 +1479,14 @@
|
|||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.post-nav {
|
||||
.post-nav__list {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.post-nav__next {
|
||||
justify-self: stretch;
|
||||
}
|
||||
|
||||
.post-nav a.next {
|
||||
text-align: start;
|
||||
}
|
||||
|
|
@ -1402,6 +1508,14 @@
|
|||
scroll-behavior: auto;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
|
||||
::view-transition-group(*),
|
||||
::view-transition-old(*),
|
||||
::view-transition-new(*) {
|
||||
|
|
@ -1430,10 +1544,17 @@
|
|||
line-height: 1.4;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
print-color-adjust: economy;
|
||||
-webkit-print-color-adjust: economy;
|
||||
}
|
||||
|
||||
.site-header,
|
||||
.site-footer,
|
||||
.skip-link,
|
||||
.theme-control,
|
||||
.theme-switcher,
|
||||
.tag-filter,
|
||||
.post-nav,
|
||||
.related-posts,
|
||||
|
|
@ -1465,8 +1586,7 @@
|
|||
.prose pre,
|
||||
.prose code,
|
||||
.post-thumbnail img,
|
||||
.post-media img,
|
||||
.evidence-media img {
|
||||
.post-media img {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue