Move a bunch of color stuff from typography to colors
This commit is contained in:
parent
cf0fd27172
commit
c642a23ec3
3 changed files with 178 additions and 161 deletions
|
|
@ -16,17 +16,22 @@
|
|||
--lilac: 187, 121, 245;
|
||||
|
||||
--background: var(--white);
|
||||
--color: rgba(var(--black), 0.8);
|
||||
|
||||
--a-color: rgb(var(--mid-blue));
|
||||
--a-underline-color: rgb(var(--sub-lt-gray));
|
||||
--a-ruby-color: var(--color);
|
||||
|
||||
--body-code-background-color: rgb(var(--super-lt-gray));
|
||||
--box-shadow-color: rgba(var(--lt-gray), 0.8);
|
||||
|
||||
--separator-color: rgb(var(--lt-gray));
|
||||
--header-border-color: var(--separator-color);
|
||||
--footer-border-color: var(--separator-color);
|
||||
|
||||
--box-shadow-color: rgba(var(--lt-gray), 0.8);
|
||||
--header-box-shadow-color: var(--box-shadow-color);
|
||||
|
||||
--body-code-background-color: rgb(var(--super-lt-gray));
|
||||
|
||||
--header-series-arrow-foreground-color: rgb(var(--sub-dk-gray));
|
||||
--heading-color: rgb(var(--black));
|
||||
|
||||
--html-background-color: rgb(var(--background));
|
||||
|
||||
|
|
@ -34,6 +39,8 @@
|
|||
--platter-background-opacity: 0.6;
|
||||
--platter-backdrop-filter: blur(10px);
|
||||
|
||||
--site-nav-link-color: var(--a-color);
|
||||
|
||||
--tag-foreground-color: rgb(var(--super-dk-gray));
|
||||
--tag-background-color: rgb(var(--super-lt-gray));
|
||||
--tag-spacer-foreground-color: rgb(var(--super-dk-gray));
|
||||
|
|
@ -43,12 +50,14 @@
|
|||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: var(--black);
|
||||
--color: rgba(var(--white), 0.8);
|
||||
|
||||
--separator-color: rgb(var(--dk-gray));
|
||||
--box-shadow-color: rgba(var(--dk-gray), 0.8);
|
||||
--body-code-background-color: rgb(var(--dk-gray));
|
||||
|
||||
--header-series-arrow-foreground-color: rgb(var(--super-dk-gray));
|
||||
--heading-color: rgb(var(--white));
|
||||
|
||||
--html-background-color: rgb(var(--background));
|
||||
|
||||
|
|
@ -64,6 +73,11 @@
|
|||
}
|
||||
|
||||
@layer root {
|
||||
a rt,
|
||||
a:hover rt {
|
||||
color: var(--a-ruby-color);
|
||||
}
|
||||
|
||||
a[href] {
|
||||
color: var(--a-color);
|
||||
}
|
||||
|
|
@ -74,6 +88,12 @@
|
|||
|
||||
a.hover-only {
|
||||
color: var(--color);
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
a.hover-only:hover {
|
||||
color: var(--a-color);
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
code {
|
||||
|
|
@ -92,8 +112,77 @@
|
|||
border: 1px solid var(--separator-color);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: var(--heading-color);
|
||||
}
|
||||
|
||||
h1.gradient {
|
||||
--site-title-color1: rgb(103, 128, 229);
|
||||
--site-title-color2: rgb(130, 90, 227);
|
||||
--site-title-color3: rgb(135, 101, 228);
|
||||
--site-title-color4: rgb(125, 115, 229);
|
||||
--site-title-color5: rgb(107, 130, 230);
|
||||
--site-title-color6: rgb(77, 153, 232);
|
||||
--site-title-color7: rgb(74, 136, 230);
|
||||
--site-title-color8: rgb(71, 128, 228);
|
||||
--site-title-color9: rgb(65, 80, 224);
|
||||
--site-title-color10: rgb(61, 58, 223);
|
||||
|
||||
color: rgb(var(--mid-blue));
|
||||
}
|
||||
|
||||
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
|
||||
h1.gradient span:nth-child(10n + 1) { color: var(--site-title-color1); }
|
||||
h1.gradient span:nth-child(10n + 2) { color: var(--site-title-color2); }
|
||||
h1.gradient span:nth-child(10n + 3) { color: var(--site-title-color3); }
|
||||
h1.gradient span:nth-child(10n + 4) { color: var(--site-title-color4); }
|
||||
h1.gradient span:nth-child(10n + 5) { color: var(--site-title-color5); }
|
||||
h1.gradient span:nth-child(10n + 6) { color: var(--site-title-color6); }
|
||||
h1.gradient span:nth-child(10n + 7) { color: var(--site-title-color7); }
|
||||
h1.gradient span:nth-child(10n + 8) { color: var(--site-title-color8); }
|
||||
h1.gradient span:nth-child(10n + 9) { color: var(--site-title-color9); }
|
||||
h1.gradient span:nth-child(10n) { color: var(--site-title-color10); }
|
||||
}
|
||||
@supports (background-clip: text) or (-webkit-background-clip: text) {
|
||||
h1.gradient {
|
||||
background:
|
||||
radial-gradient(circle at 20% 70%, rgb(var(--purple)), transparent 40%),
|
||||
radial-gradient(circle at 30% 30%, rgb(var(--lt-blue)), rgb(var(--mid-blue)) 20%, transparent 80%),
|
||||
radial-gradient(ellipse at 95% 20%, rgb(var(--dk-blue)), rgb(var(--mid-blue)) 70%, transparent 80%),
|
||||
radial-gradient(circle at 100% 100%, rgb(var(--purple)), rgb(var(--lilac)) 100%),
|
||||
radial-gradient(circle at 45% 100%, rgb(var(--lilac)), rgb(var(--purple)) 60%),
|
||||
radial-gradient(ellipse at 50% 50%, rgb(var(--dk-blue)), transparent 80%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
header.site nav > li {
|
||||
color: var(--site-nav-link-color);
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: var(--html-background-color);
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
nav.bulleted > li:first-child::before {
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
nav.bulleted > li::before {
|
||||
color: var(--heading-color);
|
||||
}
|
||||
|
||||
ruby:hover rt {
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
rt {
|
||||
color: rgba(var(--white), 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
|
|
@ -103,4 +192,13 @@
|
|||
td, th {
|
||||
border: 1px solid var(--separator-color);
|
||||
}
|
||||
|
||||
.title, .title a {
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
.post header a,
|
||||
.post header a:visited {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
:root {
|
||||
--body-item-spacing: 4rem;
|
||||
--content-width: 80rem;
|
||||
--content-columns: 5;
|
||||
--gutter-width: 3rem;
|
||||
--list-item-block-gap: var(--body-item-spacing);
|
||||
--margin-min-width: var(--body-item-spacing);
|
||||
--margin-max-width: 1fr;
|
||||
|
|
@ -9,9 +11,6 @@
|
|||
|
||||
@layer root {
|
||||
main {
|
||||
--content-columns: 5;
|
||||
--gutter-width: 3rem;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
[margin-left]
|
||||
|
|
@ -74,19 +73,6 @@
|
|||
[gutter-right-end gutter-end wide-content-right-start wide-content-right-end wide-content-end margin-right];
|
||||
}
|
||||
}
|
||||
|
||||
main > * {
|
||||
grid-column: content-start / content-end;
|
||||
}
|
||||
|
||||
main > figure,
|
||||
main > a.to-photo-post {
|
||||
grid-column: wide-content-start / wide-content-end;
|
||||
}
|
||||
|
||||
p, ul {
|
||||
grid-column: content-start / content-end;
|
||||
}
|
||||
}
|
||||
|
||||
@layer layout {
|
||||
|
|
@ -140,6 +126,19 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
main > * {
|
||||
grid-column: content-start / content-end;
|
||||
}
|
||||
|
||||
main > figure,
|
||||
main > a.to-photo-post {
|
||||
grid-column: wide-content-start / wide-content-end;
|
||||
}
|
||||
|
||||
p, ul {
|
||||
grid-column: content-start / content-end;
|
||||
}
|
||||
|
||||
nav.bulleted>li:first-child::before {
|
||||
margin-inline: 0;
|
||||
}
|
||||
|
|
@ -175,6 +174,60 @@
|
|||
padding-inline: 1rem;
|
||||
}
|
||||
|
||||
.list .post header {
|
||||
grid-column: wide-content-start / content-end;
|
||||
}
|
||||
@supports (grid-template-columns: subgrid) {
|
||||
.list .post header {
|
||||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
}
|
||||
}
|
||||
|
||||
.list .post time {
|
||||
grid-column: wide-content-start;
|
||||
justify-self: end;
|
||||
}
|
||||
@media (max-width: 960px) {
|
||||
.list .post time {
|
||||
grid-column: content-start / content-end;
|
||||
justify-self: start;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
gap: var(--list-item-block-gap) 0;
|
||||
}
|
||||
|
||||
.list > h1,
|
||||
.list > header {
|
||||
grid-column: content-start / content-end;
|
||||
}
|
||||
|
||||
.list > .post {
|
||||
grid-column: wide-content-start / wide-content-end;
|
||||
}
|
||||
|
||||
@supports (grid-template-columns: subgrid) {
|
||||
.list > .post {
|
||||
--body-item-spacing: 2rem;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
gap: var(--body-item-spacing) 0;
|
||||
}
|
||||
}
|
||||
|
||||
.list .post time {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.list .post time {
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
}
|
||||
|
||||
.page {
|
||||
gap: var(--body-item-spacing) 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,19 +30,6 @@
|
|||
--heading-line-height: 1;
|
||||
/* A little extra line height so the descenders don't get clipped */
|
||||
--site-heading-line-height: 1.1;
|
||||
|
||||
--color: rgba(var(--black), 0.8);
|
||||
--a-color: rgb(var(--mid-blue));
|
||||
--a-underline-color: rgb(var(--sub-lt-gray));
|
||||
--a-ruby-color: var(--color);
|
||||
--heading-color: rgb(var(--black));
|
||||
--site-nav-link-color: var(--a-color);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color: rgba(var(--white), 0.8);
|
||||
--heading-color: rgb(var(--white));
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -58,26 +45,13 @@
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a.hover-only {
|
||||
color: var(--color);
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
a.hover-only:hover {
|
||||
color: var(--a-color);
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
a rt,
|
||||
a:hover rt {
|
||||
color: var(--a-ruby-color);
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: var(--font-size);
|
||||
}
|
||||
|
||||
code { font-family: var(--font-family-monospace); }
|
||||
code {
|
||||
font-family: var(--font-family-monospace);
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-size: 80%;
|
||||
|
|
@ -98,7 +72,6 @@
|
|||
h5, h6 { font-family: var(--font-family-body); }
|
||||
|
||||
header.site nav > .active { font-weight: bold; }
|
||||
header.site nav > li { color: var(--site-nav-link-color); }
|
||||
|
||||
main:has(header > .post-title > h1) h1 { font-size: 244%; }
|
||||
main:has(header > .post-title > h1) h2 { font-size: 195%; }
|
||||
|
|
@ -106,10 +79,12 @@
|
|||
main:has(header > .post-title > h1) h4 { font-size: 125%; }
|
||||
main:has(header > .post-title > h1) h5 { font-size: 100%; }
|
||||
main:has(header > .post-title > h1) h6 { font-size: 100%; }
|
||||
main:has(header > .post-title > h1) :is(h5, h6) { font-family: var(--font-family-body); }
|
||||
|
||||
main:has(header > .post-title > h1) :is(h5, h6) {
|
||||
font-family: var(--font-family-body);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: var(--heading-color);
|
||||
font-family: var(--font-family-heading);
|
||||
font-weight: 600;
|
||||
letter-spacing: 1pt;
|
||||
|
|
@ -117,49 +92,11 @@
|
|||
}
|
||||
|
||||
h1.gradient {
|
||||
--site-title-color1: rgb(103, 128, 229);
|
||||
--site-title-color2: rgb(130, 90, 227);
|
||||
--site-title-color3: rgb(135, 101, 228);
|
||||
--site-title-color4: rgb(125, 115, 229);
|
||||
--site-title-color5: rgb(107, 130, 230);
|
||||
--site-title-color6: rgb(77, 153, 232);
|
||||
--site-title-color7: rgb(74, 136, 230);
|
||||
--site-title-color8: rgb(71, 128, 228);
|
||||
--site-title-color9: rgb(65, 80, 224);
|
||||
--site-title-color10: rgb(61, 58, 223);
|
||||
|
||||
color: rgb(var(--mid-blue));
|
||||
font-family: var(--font-family-site-heading);
|
||||
}
|
||||
|
||||
h1.gradient > a { color: inherit; }
|
||||
|
||||
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
|
||||
h1.gradient span:nth-child(10n + 1) { color: var(--site-title-color1); }
|
||||
h1.gradient span:nth-child(10n + 2) { color: var(--site-title-color2); }
|
||||
h1.gradient span:nth-child(10n + 3) { color: var(--site-title-color3); }
|
||||
h1.gradient span:nth-child(10n + 4) { color: var(--site-title-color4); }
|
||||
h1.gradient span:nth-child(10n + 5) { color: var(--site-title-color5); }
|
||||
h1.gradient span:nth-child(10n + 6) { color: var(--site-title-color6); }
|
||||
h1.gradient span:nth-child(10n + 7) { color: var(--site-title-color7); }
|
||||
h1.gradient span:nth-child(10n + 8) { color: var(--site-title-color8); }
|
||||
h1.gradient span:nth-child(10n + 9) { color: var(--site-title-color9); }
|
||||
h1.gradient span:nth-child(10n) { color: var(--site-title-color10); }
|
||||
}
|
||||
@supports (background-clip: text) or (-webkit-background-clip: text) {
|
||||
h1.gradient {
|
||||
background:
|
||||
radial-gradient(circle at 20% 70%, rgb(var(--purple)), transparent 40%),
|
||||
radial-gradient(circle at 30% 30%, rgb(var(--lt-blue)), rgb(var(--mid-blue)) 20%, transparent 80%),
|
||||
radial-gradient(ellipse at 95% 20%, rgb(var(--dk-blue)), rgb(var(--mid-blue)) 70%, transparent 80%),
|
||||
radial-gradient(circle at 100% 100%, rgb(var(--purple)), rgb(var(--lilac)) 100%),
|
||||
radial-gradient(circle at 45% 100%, rgb(var(--lilac)), rgb(var(--purple)) 60%),
|
||||
radial-gradient(ellipse at 50% 50%, rgb(var(--dk-blue)), transparent 80%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
header.site h1.site {
|
||||
font-size: var(--site-header-font-size);
|
||||
|
|
@ -193,90 +130,19 @@
|
|||
}
|
||||
|
||||
html {
|
||||
color: var(--color);
|
||||
font-family: var(--font-family);
|
||||
font-size: clamp(var(--font-size-min), var(--font-size-scale-factor), var(--font-size-max));
|
||||
}
|
||||
|
||||
nav.bulleted > li:first-child::before {
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
nav.bulleted > li::before {
|
||||
color: var(--heading-color);
|
||||
font-size: 60%;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
p { line-height: var(--line-height); }
|
||||
|
||||
ruby:hover rt { color: var(--color); }
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
rt { color: rgba(var(--white), 0.5); }
|
||||
}
|
||||
|
||||
.list {
|
||||
gap: var(--list-item-block-gap) 0;
|
||||
}
|
||||
|
||||
.list > h1,
|
||||
.list > header {
|
||||
grid-column: content-start / content-end;
|
||||
}
|
||||
|
||||
.list > .post {
|
||||
grid-column: wide-content-start / wide-content-end;
|
||||
}
|
||||
|
||||
@supports (grid-template-columns: subgrid) {
|
||||
.list > .post {
|
||||
--body-item-spacing: 2rem;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
gap: var(--body-item-spacing) 0;
|
||||
}
|
||||
}
|
||||
|
||||
.list .post header {
|
||||
grid-column: wide-content-start / content-end;
|
||||
}
|
||||
|
||||
@supports (grid-template-columns: subgrid) {
|
||||
.list .post header {
|
||||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
}
|
||||
}
|
||||
|
||||
.list .post time {
|
||||
grid-column: wide-content-start;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.list .post time {
|
||||
grid-column: content-start / content-end;
|
||||
justify-self: start;
|
||||
}
|
||||
}
|
||||
|
||||
.list .post time {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.list .post time {
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: var(--h5-size);
|
||||
}
|
||||
|
||||
.title, .title a {
|
||||
color: var(--color);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue