Remove assets/styles
This commit is contained in:
parent
187bc15a6f
commit
3766168bea
20 changed files with 0 additions and 1973 deletions
|
|
@ -1,9 +0,0 @@
|
|||
/* Eryn Wells <eryn@erynwells.me> */
|
||||
|
||||
article > :is(h1, h2, h3, h4, h5, h6) {
|
||||
grid-column: content-start / content-end;
|
||||
}
|
||||
|
||||
.blog.list {
|
||||
gap: 4rem 0;
|
||||
}
|
||||
|
|
@ -1,105 +0,0 @@
|
|||
/* Eryn Wells <eryn@erynwells.me> */
|
||||
|
||||
details:has(.photo-params.debug) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.draft {
|
||||
color: red;
|
||||
display: inline-block;
|
||||
font-family: 'SF Pro', sans-serif;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.draft:before {
|
||||
content: "[";
|
||||
}
|
||||
|
||||
.draft:after {
|
||||
content: "]";
|
||||
}
|
||||
|
||||
#debug-page-info {
|
||||
background-color: var(--background-color);
|
||||
border: 1px solid var(--separator-color);
|
||||
border-radius: 6px;
|
||||
box-shadow: 4px 5px 5px var(--box-shadow-color);
|
||||
box-sizing: border-box;
|
||||
font-size: 12px;
|
||||
padding: 0.5rem;
|
||||
position: fixed;
|
||||
left: 12px;
|
||||
bottom: 12px;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
#debug-page-info > details {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
#debug-page-info > summary {
|
||||
font-family: var(--font-family-heading);
|
||||
}
|
||||
|
||||
#debug-page-info h4 {
|
||||
margin-block: 1rem;
|
||||
margin-inline-start: 2rem;
|
||||
}
|
||||
|
||||
#debug-page-info table {
|
||||
border: 0;
|
||||
border-color: rgb(var(--dk-gray));
|
||||
display: block;
|
||||
margin-inline-start: 2rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#debug-page-info table > tbody {
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
#debug-page-info table > tbody + tbody {
|
||||
border-top: 1px solid;
|
||||
}
|
||||
|
||||
#debug-page-info td {
|
||||
border: 1px dotted;
|
||||
border-left: 1px solid;
|
||||
padding: 0.3em;
|
||||
}
|
||||
|
||||
#debug-page-info table > tbody > tr:nth-child(even) {
|
||||
background-color: var(--separator-color);
|
||||
}
|
||||
|
||||
table.photo-params.debug {
|
||||
--inline-start-padding: 2rem;
|
||||
|
||||
box-sizing: border-box;
|
||||
width: calc(100% - var(--inline-start-padding));
|
||||
margin-block-start: 1rem;
|
||||
margin-inline-start: var(--inline-start-padding);
|
||||
}
|
||||
|
||||
.photo-params.debug > thead {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
border-bottom: 2px solid rgb(var(--dk-gray));
|
||||
}
|
||||
|
||||
.photo-params.debug > tbody > tr > td {
|
||||
border: 1px solid var(--photo-params-border-color);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.photo-params.debug > tbody > tr > td:first-of-type {
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.photo-params.debug > tbody > tr > td:last-of-type {
|
||||
word-wrap: anywhere;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
|
@ -1,207 +0,0 @@
|
|||
@layer page {
|
||||
:root {
|
||||
--animation-offset: 6px;
|
||||
--font-size-max: 12px;
|
||||
--line-height: 1.85;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
font-size: 2rem;
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 5rem;
|
||||
line-height: 1.3;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 599px) {
|
||||
h1 {
|
||||
font-size: 4.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
header.site h1 { white-space: normal; }
|
||||
|
||||
@media (max-width: 599px) {
|
||||
html {
|
||||
--font-size-scale-factor: 1.33vmax;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
display: block;
|
||||
line-height: var(--landing-line-height);
|
||||
margin-block-start: 10vh;
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
main header {
|
||||
align-items: first baseline;
|
||||
display: grid;
|
||||
gap: 0 2rem;
|
||||
grid-template-columns: minmax(min-content, 1fr) minmax(min-content, 2fr);
|
||||
grid-template-rows: repeat(2, max-content);
|
||||
grid-template-areas:
|
||||
"title blurb"
|
||||
"title nav";
|
||||
padding-inline: 1em;
|
||||
margin-inline: 2rem;
|
||||
max-width: 40rem;
|
||||
}
|
||||
@media (max-width: 599px) {
|
||||
main header {
|
||||
gap: 1rem 0;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: repeat(3, max-content);
|
||||
grid-template-areas:
|
||||
"title"
|
||||
"blurb"
|
||||
"nav";
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
main h1 {
|
||||
letter-spacing: 0.025em;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
@media (max-width: 599px) {
|
||||
main h1 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
align-items: baseline;
|
||||
justify-self: center;
|
||||
display: flex;
|
||||
font-size: 90%;
|
||||
list-style: none;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
nav > li::before {
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
||||
h1 {
|
||||
grid-area: title;
|
||||
}
|
||||
|
||||
#content {
|
||||
grid-area: blurb
|
||||
}
|
||||
|
||||
nav {
|
||||
grid-area: nav
|
||||
}
|
||||
|
||||
h1,
|
||||
#content>p,
|
||||
nav {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
h1 {
|
||||
animation: left-fade-in var(--transition-duration) ease-in-out;
|
||||
}
|
||||
@media (max-width: 599px) {
|
||||
h1 {
|
||||
animation: top-fade-in var(--transition-duration) ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
#content>p,
|
||||
nav {
|
||||
animation: right-fade-in var(--transition-duration) ease-in-out;
|
||||
}
|
||||
@media (max-width: 599px) {
|
||||
#content>p,
|
||||
nav {
|
||||
animation: bottom-fade-in var(--transition-duration) ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes left-fade-in {
|
||||
from {
|
||||
opacity: 0%;
|
||||
left: var(--animation-offset);
|
||||
}
|
||||
|
||||
33% {
|
||||
opacity: 0%;
|
||||
left: var(--animation-offset);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 100%;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes right-fade-in {
|
||||
from {
|
||||
opacity: 0%;
|
||||
left: calc(-1 * var(--animation-offset));
|
||||
}
|
||||
|
||||
33% {
|
||||
opacity: 0%;
|
||||
left: calc(-1 * var(--animation-offset));
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 100%;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes top-fade-in {
|
||||
from {
|
||||
opacity: 0%;
|
||||
bottom: calc(-1 * var(--animation-offset));
|
||||
}
|
||||
|
||||
33% {
|
||||
opacity: 0%;
|
||||
bottom: calc(-1 * var(--animation-offset));
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 100%;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bottom-fade-in {
|
||||
from {
|
||||
opacity: 0%;
|
||||
bottom: var(--animation-offset);
|
||||
}
|
||||
|
||||
33% {
|
||||
opacity: 0%;
|
||||
bottom: var(--animation-offset);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 100%;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.platter {
|
||||
padding: 1.5rem 3rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,198 +0,0 @@
|
|||
:root {
|
||||
--highlight-background-color: rgb(250, 250, 250);
|
||||
--highlight-foreground-color: var(--foreground-body-color);
|
||||
}
|
||||
|
||||
.chroma {
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
||||
.bg {
|
||||
color: var(--highlight-foreground-color);
|
||||
background-color: var(--highlight-background-color);
|
||||
}
|
||||
|
||||
.chroma {
|
||||
color: var(--highlight-foreground-color);
|
||||
background-color: var(--highlight-background-color);
|
||||
}
|
||||
|
||||
/* Other */ .chroma .x { }
|
||||
/* Error */ .chroma .err { color: #960050; background-color: #1e0010 }
|
||||
/* CodeLine */ .chroma .cl { }
|
||||
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
|
||||
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
|
||||
/* LineHighlight */ .chroma .hl { background-color: #ffffcc }
|
||||
/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
|
||||
/* LineNumbers */
|
||||
.chroma .ln {
|
||||
color: #7f7f7f;
|
||||
background-color: var(--background-color);
|
||||
padding: 0 0.4em 0 0.4em;
|
||||
user-select: none;
|
||||
white-space: pre;
|
||||
}
|
||||
.chroma .ln a[href] {
|
||||
color: inherit;
|
||||
}
|
||||
/* Keyword */ .chroma .k { color: #00a8c8 }
|
||||
/* KeywordConstant */ .chroma .kc { color: #00a8c8 }
|
||||
/* KeywordDeclaration */ .chroma .kd { color: #00a8c8 }
|
||||
/* KeywordNamespace */ .chroma .kn { color: #f92672 }
|
||||
/* KeywordPseudo */ .chroma .kp { color: #00a8c8 }
|
||||
/* KeywordReserved */ .chroma .kr { color: #00a8c8 }
|
||||
/* KeywordType */ .chroma .kt { color: #00a8c8 }
|
||||
/* Name */ .chroma .n { color: #111111 }
|
||||
/* NameAttribute */ .chroma .na { color: #75af00 }
|
||||
/* NameBuiltin */ .chroma .nb { color: #111111 }
|
||||
/* NameBuiltinPseudo */ .chroma .bp { color: #111111 }
|
||||
/* NameClass */ .chroma .nc { color: #75af00 }
|
||||
/* NameConstant */ .chroma .no { color: #00a8c8 }
|
||||
/* NameDecorator */ .chroma .nd { color: #75af00 }
|
||||
/* NameEntity */ .chroma .ni { color: #111111 }
|
||||
/* NameException */ .chroma .ne { color: #75af00 }
|
||||
/* NameFunction */ .chroma .nf { color: #75af00 }
|
||||
/* NameFunctionMagic */ .chroma .fm { color: #111111 }
|
||||
/* NameLabel */ .chroma .nl { color: #111111 }
|
||||
/* NameNamespace */ .chroma .nn { color: #111111 }
|
||||
/* NameOther */ .chroma .nx { color: #75af00 }
|
||||
/* NameProperty */ .chroma .py { color: #111111 }
|
||||
/* NameTag */ .chroma .nt { color: #f92672 }
|
||||
/* NameVariable */ .chroma .nv { color: #111111 }
|
||||
/* NameVariableClass */ .chroma .vc { color: #111111 }
|
||||
/* NameVariableGlobal */ .chroma .vg { color: #111111 }
|
||||
/* NameVariableInstance */ .chroma .vi { color: #111111 }
|
||||
/* NameVariableMagic */ .chroma .vm { color: #111111 }
|
||||
/* Literal */ .chroma .l { color: #ae81ff }
|
||||
/* LiteralDate */ .chroma .ld { color: #d88200 }
|
||||
/* LiteralString */ .chroma .s { color: #d88200 }
|
||||
/* LiteralStringAffix */ .chroma .sa { color: #d88200 }
|
||||
/* LiteralStringBacktick */ .chroma .sb { color: #d88200 }
|
||||
/* LiteralStringChar */ .chroma .sc { color: #d88200 }
|
||||
/* LiteralStringDelimiter */ .chroma .dl { color: #d88200 }
|
||||
/* LiteralStringDoc */ .chroma .sd { color: #d88200 }
|
||||
/* LiteralStringDouble */ .chroma .s2 { color: #d88200 }
|
||||
/* LiteralStringEscape */ .chroma .se { color: #8045ff }
|
||||
/* LiteralStringHeredoc */ .chroma .sh { color: #d88200 }
|
||||
/* LiteralStringInterpol */ .chroma .si { color: #d88200 }
|
||||
/* LiteralStringOther */ .chroma .sx { color: #d88200 }
|
||||
/* LiteralStringRegex */ .chroma .sr { color: #d88200 }
|
||||
/* LiteralStringSingle */ .chroma .s1 { color: #d88200 }
|
||||
/* LiteralStringSymbol */ .chroma .ss { color: #d88200 }
|
||||
/* LiteralNumber */ .chroma .m { color: #ae81ff }
|
||||
/* LiteralNumberBin */ .chroma .mb { color: #ae81ff }
|
||||
/* LiteralNumberFloat */ .chroma .mf { color: #ae81ff }
|
||||
/* LiteralNumberHex */ .chroma .mh { color: #ae81ff }
|
||||
/* LiteralNumberInteger */ .chroma .mi { color: #ae81ff }
|
||||
/* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff }
|
||||
/* LiteralNumberOct */ .chroma .mo { color: #ae81ff }
|
||||
/* Operator */ .chroma .o { color: #f92672 }
|
||||
/* OperatorWord */ .chroma .ow { color: #f92672 }
|
||||
/* Punctuation */ .chroma .p { color: #111111 }
|
||||
/* Comment */ .chroma .c { color: #75715e }
|
||||
/* CommentHashbang */ .chroma .ch { color: #75715e }
|
||||
/* CommentMultiline */ .chroma .cm { color: #75715e }
|
||||
/* CommentSingle */ .chroma .c1 { color: #75715e }
|
||||
/* CommentSpecial */ .chroma .cs { color: #75715e }
|
||||
/* CommentPreproc */ .chroma .cp { color: #75715e }
|
||||
/* CommentPreprocFile */ .chroma .cpf { color: #75715e }
|
||||
/* Generic */ .chroma .g { }
|
||||
/* GenericDeleted */ .chroma .gd { }
|
||||
/* GenericEmph */ .chroma .ge { font-style: italic }
|
||||
/* GenericError */ .chroma .gr { }
|
||||
/* GenericHeading */ .chroma .gh { }
|
||||
/* GenericInserted */ .chroma .gi { }
|
||||
/* GenericOutput */ .chroma .go { }
|
||||
/* GenericPrompt */ .chroma .gp { }
|
||||
/* GenericStrong */ .chroma .gs { font-weight: bold }
|
||||
/* GenericSubheading */ .chroma .gu { }
|
||||
/* GenericTraceback */ .chroma .gt { }
|
||||
/* GenericUnderline */ .chroma .gl { }
|
||||
/* TextWhitespace */ .chroma .w { }
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
/* Background */ .bg { color: #f8f8f2; background-color: #272822 }
|
||||
/* PreWrapper */ .chroma { color: #f8f8f2; background-color: #272822; }
|
||||
/* Other */ .chroma .x { }
|
||||
/* Error */ .chroma .err { color: #960050; background-color: #1e0010 }
|
||||
/* CodeLine */ .chroma .cl { }
|
||||
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
|
||||
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
|
||||
/* LineHighlight */ .chroma .hl { background-color: #ffffcc }
|
||||
/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
|
||||
/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
|
||||
/* Keyword */ .chroma .k { color: #66d9ef }
|
||||
/* KeywordConstant */ .chroma .kc { color: #66d9ef }
|
||||
/* KeywordDeclaration */ .chroma .kd { color: #66d9ef }
|
||||
/* KeywordNamespace */ .chroma .kn { color: #f92672 }
|
||||
/* KeywordPseudo */ .chroma .kp { color: #66d9ef }
|
||||
/* KeywordReserved */ .chroma .kr { color: #66d9ef }
|
||||
/* KeywordType */ .chroma .kt { color: #66d9ef }
|
||||
/* Name */ .chroma .n { }
|
||||
/* NameAttribute */ .chroma .na { color: #a6e22e }
|
||||
/* NameBuiltin */ .chroma .nb { color: inherit; }
|
||||
/* NameBuiltinPseudo */ .chroma .bp { }
|
||||
/* NameClass */ .chroma .nc { color: #a6e22e }
|
||||
/* NameConstant */ .chroma .no { color: #66d9ef }
|
||||
/* NameDecorator */ .chroma .nd { color: #a6e22e }
|
||||
/* NameEntity */ .chroma .ni { }
|
||||
/* NameException */ .chroma .ne { color: #a6e22e }
|
||||
/* NameFunction */ .chroma .nf { color: #a6e22e }
|
||||
/* NameFunctionMagic */ .chroma .fm { }
|
||||
/* NameLabel */ .chroma .nl { }
|
||||
/* NameNamespace */ .chroma .nn { }
|
||||
/* NameOther */ .chroma .nx { color: #a6e22e }
|
||||
/* NameProperty */ .chroma .py { }
|
||||
/* NameTag */ .chroma .nt { color: #f92672 }
|
||||
/* NameVariable */ .chroma .nv { color: inherit; }
|
||||
/* NameVariableClass */ .chroma .vc { }
|
||||
/* NameVariableGlobal */ .chroma .vg { }
|
||||
/* NameVariableInstance */ .chroma .vi { }
|
||||
/* NameVariableMagic */ .chroma .vm { }
|
||||
/* Literal */ .chroma .l { color: #ae81ff }
|
||||
/* LiteralDate */ .chroma .ld { color: #e6db74 }
|
||||
/* LiteralString */ .chroma .s { color: #e6db74 }
|
||||
/* LiteralStringAffix */ .chroma .sa { color: #e6db74 }
|
||||
/* LiteralStringBacktick */ .chroma .sb { color: #e6db74 }
|
||||
/* LiteralStringChar */ .chroma .sc { color: #e6db74 }
|
||||
/* LiteralStringDelimiter */ .chroma .dl { color: #e6db74 }
|
||||
/* LiteralStringDoc */ .chroma .sd { color: #e6db74 }
|
||||
/* LiteralStringDouble */ .chroma .s2 { color: #e6db74 }
|
||||
/* LiteralStringEscape */ .chroma .se { color: #ae81ff }
|
||||
/* LiteralStringHeredoc */ .chroma .sh { color: #e6db74 }
|
||||
/* LiteralStringInterpol */ .chroma .si { color: #e6db74 }
|
||||
/* LiteralStringOther */ .chroma .sx { color: #e6db74 }
|
||||
/* LiteralStringRegex */ .chroma .sr { color: #e6db74 }
|
||||
/* LiteralStringSingle */ .chroma .s1 { color: #e6db74 }
|
||||
/* LiteralStringSymbol */ .chroma .ss { color: #e6db74 }
|
||||
/* LiteralNumber */ .chroma .m { color: #ae81ff }
|
||||
/* LiteralNumberBin */ .chroma .mb { color: #ae81ff }
|
||||
/* LiteralNumberFloat */ .chroma .mf { color: #ae81ff }
|
||||
/* LiteralNumberHex */ .chroma .mh { color: #ae81ff }
|
||||
/* LiteralNumberInteger */ .chroma .mi { color: #ae81ff }
|
||||
/* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff }
|
||||
/* LiteralNumberOct */ .chroma .mo { color: #ae81ff }
|
||||
/* Operator */ .chroma .o { color: #f92672 }
|
||||
/* OperatorWord */ .chroma .ow { color: #f92672 }
|
||||
/* Punctuation */ .chroma .p { color: inherit; }
|
||||
/* Comment */ .chroma .c { color: #75715e }
|
||||
/* CommentHashbang */ .chroma .ch { color: #75715e }
|
||||
/* CommentMultiline */ .chroma .cm { color: #75715e }
|
||||
/* CommentSingle */ .chroma .c1 { color: #75715e }
|
||||
/* CommentSpecial */ .chroma .cs { color: #75715e }
|
||||
/* CommentPreproc */ .chroma .cp { color: #75715e }
|
||||
/* CommentPreprocFile */ .chroma .cpf { color: #75715e }
|
||||
/* Generic */ .chroma .g { }
|
||||
/* GenericDeleted */ .chroma .gd { color: #f92672 }
|
||||
/* GenericEmph */ .chroma .ge { font-style: italic }
|
||||
/* GenericError */ .chroma .gr { }
|
||||
/* GenericHeading */ .chroma .gh { }
|
||||
/* GenericInserted */ .chroma .gi { color: #a6e22e }
|
||||
/* GenericOutput */ .chroma .go { }
|
||||
/* GenericPrompt */ .chroma .gp { }
|
||||
/* GenericStrong */ .chroma .gs { font-weight: bold }
|
||||
/* GenericSubheading */ .chroma .gu { color: #75715e }
|
||||
/* GenericTraceback */ .chroma .gt { }
|
||||
/* GenericUnderline */ .chroma .gl { }
|
||||
/* TextWhitespace */ .chroma .w { }
|
||||
}
|
||||
|
|
@ -1,113 +0,0 @@
|
|||
/* Eryn Wells <eryn@erynwells.me> */
|
||||
|
||||
:root {
|
||||
--logentry-background-color: var(--tag-background-color);
|
||||
--logentry-foreground-color: var(--tag-text-color);
|
||||
|
||||
--separator-color: rgb(var(--dk-gray));
|
||||
--box-shadow-color: rgba(var(--dk-gray), 0.8);
|
||||
--body-code-background-color: rgb(var(--dk-gray));
|
||||
|
||||
--heading-color: rgb(var(--white));
|
||||
--header-series-arrow-foreground-color: rgb(var(--super-dk-gray));
|
||||
|
||||
--html-background-color: rgb(var(--black));
|
||||
--color: rgba(var(--white), 0.8);
|
||||
|
||||
--platter-background-color: rgba(var(--black), var(--platter-background-opacity));
|
||||
--platter-backdrop-filter: brightness(0.66) blur(10px);
|
||||
|
||||
--tag-foreground-color: rgb(var(--sub-lt-gray));
|
||||
--tag-background-color: rgb(var(--dk-gray));
|
||||
--tag-spacer-foreground-color: rgb(var(--super-dk-gray));
|
||||
--tag-hover-background-color: rgb(var(--super-dk-gray));
|
||||
--tag-hover-foreground-color: rgb(var(--mid-gray));
|
||||
}
|
||||
|
||||
main {
|
||||
background: rgba(var(--black), 0.6);
|
||||
}
|
||||
|
||||
#dungeon-background {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
filter: brightness(0.3);
|
||||
}
|
||||
|
||||
.logfile {
|
||||
margin-block-start: 0;
|
||||
margin-inline-start: 0;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
|
||||
.logfile > li {
|
||||
align-items: first baseline;
|
||||
color: var(--logentry-foreground-color);
|
||||
background-color: var(--logentry-background-color);
|
||||
border-radius: 6px;
|
||||
display: grid;
|
||||
grid-template-columns: 32px auto auto;
|
||||
row-gap: 1rem;
|
||||
margin-block-start: 2rem;
|
||||
margin-inline-start: 0;
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
.logfile > li > .date {
|
||||
grid-column-start: 2;
|
||||
grid-row-start: 1;
|
||||
}
|
||||
|
||||
.logfile > li > h4.date {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.logfile > li > .character-descriptor {
|
||||
color: #aaa;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
grid-column-start: 3;
|
||||
grid-row-start: 1;
|
||||
text-align: right;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.logfile > li > p {
|
||||
grid-column-start: 2;
|
||||
grid-column-end: 4;
|
||||
grid-row-start: 2;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.logfile > li > table.stats {
|
||||
border: 0;
|
||||
grid-column-start: 2;
|
||||
grid-column-end: 4;
|
||||
grid-row-start: 3;
|
||||
margin-block-end: 0;
|
||||
width: 100%;
|
||||
-webkit-border-horizontal-spacing: 0;
|
||||
-webkit-border-vertical-spacing: 0;
|
||||
}
|
||||
|
||||
.logfile > li > table.stats > tbody > tr > td {
|
||||
border: 0;
|
||||
color: #aaa;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
padding: 0;
|
||||
text-transform: uppercase;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.logfile > li > table.stats > tbody > tr > td.score,
|
||||
.logfile > li > table.stats > tbody > tr > td.hp,
|
||||
.logfile > li > table.stats > tbody > tr > td.level {
|
||||
width: 16rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
{{ $gridSize := site.Params.photos.gridSize }}
|
||||
:root {
|
||||
--date-item-background-color: rgb(var(--lt-gray));
|
||||
|
||||
--photo-params-background-color: rgb(var(--lt-gray));
|
||||
--photo-params-container-background-color: rgb(var(--super-lt-gray));
|
||||
--photo-params-color: rgb(var(--sub-dk-gray));
|
||||
--photo-params-border-color: rgb(var(--super-lt-gray));
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--date-item-background-color: rgb(var(--dk-gray));
|
||||
|
||||
--photo-params-background-color: rgb(var(--dk-gray));
|
||||
--photo-params-container-background-color: rgb(var(--sub-dk-gray));
|
||||
--photo-params-color: rgb(var(--super-lt-gray));
|
||||
--photo-params-border-color: rgb(var(--sub-dk-gray));
|
||||
}
|
||||
}
|
||||
|
||||
.photos.list {
|
||||
box-sizing: border-box;
|
||||
max-width: none;
|
||||
padding: 0 var(--body-item-spacing);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.photos.list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax({{ printf "%dpx" $gridSize }}, 1fr));
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.photos.list > * {
|
||||
margin-block-end: 0;
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
.photos.list > a {
|
||||
display: block;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.photos.list > a > img {
|
||||
image-orientation: from-image;
|
||||
}
|
||||
|
||||
.photos.list > div {
|
||||
background-color: var(--date-item-background-color);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.photos.list > div > h6 {
|
||||
display: block;
|
||||
font-size: 5rem;
|
||||
margin: 0 auto;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.photos.list > div > h6 > span {
|
||||
text-align: end;
|
||||
width: min-content;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding-inline-end: 20px;
|
||||
}
|
||||
|
||||
.photos.list > div > h6 > span::after {
|
||||
top: 6px;
|
||||
right: 0px;
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "⏵︎";
|
||||
font-size: 80%;
|
||||
}
|
||||
@media (max-width: calc(24px + 400px + 4px)) {
|
||||
.photos.list > div > h6 > span {
|
||||
width: max-content;
|
||||
padding-block: calc(0.25 * var(--body-item-spacing));
|
||||
}
|
||||
.photos.list > div > h6 > span::after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
@layer section {
|
||||
.photos.page {
|
||||
gap: var(--body-item-spacing) 0;
|
||||
}
|
||||
|
||||
.photos.page > article > :not(:last-child) {
|
||||
margin-block-end: var(--body-item-spacing);
|
||||
}
|
||||
|
||||
.photos.page > article > h1 {
|
||||
font-size: var(--h3-size);
|
||||
}
|
||||
|
||||
.photos.page > nav {
|
||||
margin-block-end: var(--body-item-spacing);
|
||||
}
|
||||
|
||||
.photos.page > :not(figure) {
|
||||
grid-column: content-start / content-end;
|
||||
}
|
||||
|
||||
.photos.page > figure {
|
||||
grid-column: wide-content-start / wide-content-end;
|
||||
}
|
||||
@media (max-width: 960px) {
|
||||
figure, img {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.photos.page :is(figure, figure > img) {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
.photo-params {
|
||||
padding-inline: calc(var(--body-item-spacing) / 2);
|
||||
}
|
||||
|
||||
.photo-params > .container {
|
||||
display: block;
|
||||
background-color: var(--photo-params-container-background-color);
|
||||
border-radius: 10px;
|
||||
margin: auto;
|
||||
padding: calc(var(--body-item-spacing) / 2);
|
||||
max-width: calc(0.66 * var(--content-width));
|
||||
}
|
||||
|
||||
.photo-params > .container > table {
|
||||
background-color: var(--photo-params-background-color);
|
||||
color: var(--photo-params-color);
|
||||
border-collapse: collapse;
|
||||
border-radius: 6px;
|
||||
table-layout: fixed;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.photo-params thead td {
|
||||
border-bottom: 1px solid var(--photo-params-border-color);
|
||||
font-size: 80%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.photo-params tbody tr > td {
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--photo-params-border-color);
|
||||
}
|
||||
|
||||
.photo-params tr.exposure-attributes > td {
|
||||
border: none;
|
||||
border-top: 1px solid var(--photo-params-border-color);
|
||||
border-left: 1px solid var(--photo-params-border-color);
|
||||
}
|
||||
|
||||
.photo-params tr.exposure-attributes > td:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.photo-params td {
|
||||
font-size: 75%;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.photo-params td:last-child {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.photo-params td:first-child {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.photo-params .make-model {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.photo-params .size {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.photo-params .location {
|
||||
border-right: 0;
|
||||
}
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
:root {
|
||||
--rect-fill: rgba(var(--mid-blue), 0.1);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--rect-fill: rgb(var(--mid-blue), 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
svg.railroad-diagram path {
|
||||
stroke-width: 2;
|
||||
stroke: var(--color);
|
||||
fill: none;
|
||||
}
|
||||
|
||||
svg.railroad-diagram text {
|
||||
font-family: var(--font-family-monospace);
|
||||
text-anchor: middle;
|
||||
white-space: pre;
|
||||
fill: var(--color);
|
||||
}
|
||||
|
||||
svg.railroad-diagram text.diagram-text {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
svg.railroad-diagram text.diagram-arrow {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
svg.railroad-diagram text.label {
|
||||
text-anchor: start;
|
||||
}
|
||||
|
||||
svg.railroad-diagram text.comment {
|
||||
font: italic 12px var(--font-family-monospace);
|
||||
}
|
||||
|
||||
svg.railroad-diagram g.non-terminal text {
|
||||
/*font-style: italic;*/
|
||||
}
|
||||
|
||||
svg.railroad-diagram rect {
|
||||
stroke-width: 2;
|
||||
stroke: var(--color);
|
||||
fill: var(--rect-fill);
|
||||
}
|
||||
|
||||
svg.railroad-diagram rect.group-box {
|
||||
stroke: gray;
|
||||
stroke-dasharray: 10 5;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
svg.railroad-diagram path.diagram-text {
|
||||
stroke-width: 2;
|
||||
stroke: var(--color);
|
||||
fill: var(--html-background-color);
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
svg.railroad-diagram g.diagram-text:hover path.diagram-text {
|
||||
fill: var(--rect-fill);
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
@layer reset, typography, root, layout, section, page, utility;
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
@layer reset {
|
||||
body, button, h1, h2, h3, h4, h5, h6, input, ol, ul, p, pre, textarea {
|
||||
padding: 0; margin: 0;
|
||||
}
|
||||
|
||||
figure, figure .youtube { line-height: 1; }
|
||||
}
|
||||
|
|
@ -1,224 +0,0 @@
|
|||
:root {
|
||||
--black: 0, 0, 0;
|
||||
--sub-dk-gray: 16, 16, 16;
|
||||
--dk-gray: 32, 32, 32;
|
||||
--super-dk-gray: 80, 80, 80;
|
||||
--mid-gray: 128, 128, 128;
|
||||
--sub-lt-gray: 175, 175, 175;
|
||||
--lt-gray: 223, 223, 223;
|
||||
--super-lt-gray: 240, 240, 240;
|
||||
--white: 255, 255, 255;
|
||||
|
||||
--lt-blue: 69, 212, 243;
|
||||
--mid-blue: 26, 169, 239;
|
||||
--dk-blue: 63, 46, 231;
|
||||
--purple: 161, 49, 232;
|
||||
--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);
|
||||
|
||||
--header-anchor-link-color: rgb(var(--sub-lt-gray));
|
||||
--header-box-shadow-color: var(--box-shadow-color);
|
||||
--header-series-arrow-foreground-color: rgb(var(--sub-dk-gray));
|
||||
--heading-color: rgb(var(--black));
|
||||
|
||||
--html-background-color: rgb(var(--background));
|
||||
|
||||
--platter-background-color: rgba(var(--white), var(--platter-background-opacity));
|
||||
--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));
|
||||
--tag-hover-background-color: rgb(var(--sub-lt-gray));
|
||||
}
|
||||
|
||||
@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-anchor-link-color: rgb(var(--super-dk-gray));
|
||||
--header-series-arrow-foreground-color: rgb(var(--super-dk-gray));
|
||||
--heading-color: rgb(var(--white));
|
||||
|
||||
--html-background-color: rgb(var(--background));
|
||||
|
||||
--platter-background-color: rgba(var(--black), var(--platter-background-opacity));
|
||||
--platter-backdrop-filter: brightness(0.66) blur(10px);
|
||||
|
||||
--tag-foreground-color: rgb(var(--sub-lt-gray));
|
||||
--tag-background-color: rgb(var(--dk-gray));
|
||||
--tag-spacer-foreground-color: rgb(var(--super-dk-gray));
|
||||
--tag-hover-background-color: rgb(var(--super-dk-gray));
|
||||
--tag-hover-foreground-color: rgb(var(--mid-gray));
|
||||
}
|
||||
}
|
||||
|
||||
@layer root {
|
||||
a rt,
|
||||
a:hover rt {
|
||||
color: var(--a-ruby-color);
|
||||
}
|
||||
|
||||
a[href] {
|
||||
color: var(--a-color);
|
||||
}
|
||||
|
||||
a[href]:visited {
|
||||
color: var(--a-color);
|
||||
}
|
||||
|
||||
a.hover-only {
|
||||
color: var(--color);
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
a.hover-only:hover {
|
||||
color: var(--a-color);
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: var(--body-code-background-color);
|
||||
}
|
||||
|
||||
code.nobg {
|
||||
background: none;
|
||||
}
|
||||
|
||||
details:has(#TableOfContents) {
|
||||
border: 1px solid var(--separator-color);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
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;
|
||||
}
|
||||
|
||||
h1.gradient a[href] {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
header.site nav > li {
|
||||
color: var(--site-nav-link-color);
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: var(--html-background-color);
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
main > :is(h1, h2, h3, h4, h5, h6) > a[href],
|
||||
main > :is(h1, h2, h3, h4, h5, h6) > a[href]:visited {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
nav.bulleted > li:first-child::before {
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
nav.bulleted > li::before {
|
||||
color: var(--heading-color);
|
||||
opacity: 80%;
|
||||
}
|
||||
|
||||
ruby:hover rt {
|
||||
color: var(--color);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
rt {
|
||||
color: rgba(var(--white), 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
border: 1px solid var(--separator-color);
|
||||
}
|
||||
|
||||
td, th {
|
||||
border: 1px solid var(--separator-color);
|
||||
}
|
||||
|
||||
figure.code code {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.post header a,
|
||||
.post header a:visited {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.social > li + li:before {
|
||||
color: var(--dark);
|
||||
}
|
||||
|
||||
.title, .title a {
|
||||
color: var(--color);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,456 +0,0 @@
|
|||
:root {
|
||||
--body-item-spacing: 2rem;
|
||||
--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;
|
||||
--menu-icon-size: 20px;
|
||||
--nav-bulleted-spacing: 0.75rem;
|
||||
}
|
||||
|
||||
@layer root {
|
||||
main {
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
[margin-left]
|
||||
minmax(var(--margin-min-width), var(--margin-max-width))
|
||||
[wide-content-start wide-content-left-start]
|
||||
1fr
|
||||
[wide-content-left-end gutter-start gutter-left-start]
|
||||
var(--gutter-width)
|
||||
[gutter-left-end content-start]
|
||||
repeat(var(--content-columns),
|
||||
[column-start]
|
||||
min(
|
||||
calc((100% - 2 * var(--gutter-width)) / var(--content-columns)),
|
||||
calc(var(--content-width) / var(--content-columns))
|
||||
)
|
||||
[column-end]
|
||||
)
|
||||
[content-end gutter-right-start]
|
||||
var(--gutter-width)
|
||||
[gutter-right-end gutter-end wide-content-right-start]
|
||||
1fr
|
||||
[wide-content-right-end wide-content-end]
|
||||
minmax(var(--margin-min-width), var(--margin-max-width))
|
||||
[margin-right];
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
main {
|
||||
--margin-min-width: 0;
|
||||
--margin-max-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 519px) {
|
||||
/* Collapse the margin and wide content tracks */
|
||||
main {
|
||||
--content-columns: 3;
|
||||
|
||||
grid-template-columns:
|
||||
[margin-left wide-content-start wide-content-left-start wide-content-left-end gutter-start gutter-left-start]
|
||||
var(--gutter-width)
|
||||
[gutter-left-end content-start]
|
||||
repeat(
|
||||
var(--content-columns),
|
||||
[column-start]
|
||||
min(
|
||||
calc((100% - 2 * var(--gutter-width)) / var(--content-columns)),
|
||||
calc(var(--content-width) / var(--content-columns))
|
||||
)
|
||||
[column-end]
|
||||
)
|
||||
[content-end gutter-right-start]
|
||||
var(--gutter-width)
|
||||
[gutter-right-end gutter-end wide-content-right-start wide-content-right-end wide-content-end margin-right];
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 415px) {
|
||||
main {
|
||||
--content-columns: 1;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
[margin-left wide-content-start wide-content-left-start wide-content-left-end gutter-start gutter-left-start]
|
||||
var(--gutter-width)
|
||||
[gutter-left-end content-start]
|
||||
calc(100% - 2 * var(--gutter-width))
|
||||
[content-end gutter-right-start]
|
||||
var(--gutter-width)
|
||||
[gutter-right-end gutter-end wide-content-right-start wide-content-right-end wide-content-end margin-right];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@layer root {
|
||||
main > .grid2 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@layer layout {
|
||||
aside#table-of-contents {
|
||||
grid-column: content-start / content-end;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
--line-width: 4px;
|
||||
|
||||
border-inline-start: var(--line-width) solid var(--separator-color);
|
||||
padding-inline-start: calc(3rem - var(--line-width));
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p code {
|
||||
padding-block-start: 0.1em;
|
||||
padding-inline: 0.25em;
|
||||
}
|
||||
|
||||
code.nobg {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
details {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
details:has(#TableOfContents) {
|
||||
box-sizing: border-box;
|
||||
padding: var(--body-item-spacing);
|
||||
}
|
||||
|
||||
details > summary + #TableOfContents {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
box-sizing: border-box;
|
||||
padding: var(--body-item-spacing);
|
||||
padding-top: calc(var(--body-item-spacing) / 10);
|
||||
}
|
||||
|
||||
figcaption:not(:empty) {
|
||||
margin-block-start: 0.2em;
|
||||
}
|
||||
|
||||
figure {
|
||||
grid-column: gutter-start / gutter-end;
|
||||
margin: 0;
|
||||
margin-inline: 0;
|
||||
min-width: fit-content;
|
||||
overflow: hidden;
|
||||
}
|
||||
@media (max-width: 415px) {
|
||||
figure {
|
||||
grid-column: wide-content-start / wide-content-end;
|
||||
}
|
||||
}
|
||||
|
||||
figure.code {
|
||||
grid-column: content-start / content-end;
|
||||
}
|
||||
|
||||
figure.code pre {
|
||||
overflow: auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
figure > .container {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: var(--body-item-spacing);
|
||||
justify-content: center;
|
||||
min-width: fit-content;
|
||||
}
|
||||
|
||||
figure img {
|
||||
display: block;
|
||||
}
|
||||
@media (max-width: 414px) {
|
||||
figure img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
figure svg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
figure .youtube {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
header.site {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
header.site h1 {
|
||||
margin: 0;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
header.site > .grid {
|
||||
align-items: baseline;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0 0.5em;
|
||||
margin: 0 auto;
|
||||
max-width: var(--content-width);
|
||||
padding: 1.5rem 3rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
header.site > .grid > nav {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
header.site nav > li { display: block; }
|
||||
|
||||
header.site nav:first-of-type {
|
||||
justify-content: start;
|
||||
order: 2;
|
||||
}
|
||||
@media (max-width: 435px) {
|
||||
header.site nav:first-of-type { order: 5; }
|
||||
}
|
||||
|
||||
header.site nav:last-of-type {
|
||||
justify-content: end;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
@media (max-width: 516px) {
|
||||
header.site > .platter {
|
||||
border-left: none;
|
||||
border-radius: 0;
|
||||
border-right: none;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
header.site > .grid { max-width: none; }
|
||||
}
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
main {
|
||||
box-sizing: border-box;
|
||||
margin-block-start: var(--body-item-spacing);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
main > * {
|
||||
grid-column: content-start / content-end;
|
||||
}
|
||||
|
||||
main > figure:not(.code),
|
||||
main > a.to-photo-post {
|
||||
grid-column: wide-content-start / wide-content-end;
|
||||
}
|
||||
|
||||
.content-header > .series {
|
||||
margin-inline-start: 0.5em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content-header > .series::before {
|
||||
margin-inline-end: 0.25em;
|
||||
}
|
||||
|
||||
main > :is(h1, h2, h3, h4, h5, h6):not(:first-child) {
|
||||
padding-block-start: 0.5em;
|
||||
}
|
||||
|
||||
nav.bulleted > li:not(:first-child)::before {
|
||||
margin-inline-start: var(--nav-bulleted-spacing);
|
||||
}
|
||||
|
||||
nav.social > li {
|
||||
margin-inline-start: var(--nav-bulleted-spacing);
|
||||
}
|
||||
|
||||
nav.social > li:first-child {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
section.flow {
|
||||
display: block flow;
|
||||
}
|
||||
|
||||
main ul, ol {
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
main ul,
|
||||
main ol,
|
||||
main dl,
|
||||
main :is(ul, ol) > li {
|
||||
margin-inline-start: var(--body-item-spacing);
|
||||
}
|
||||
|
||||
main dl {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
main dd {
|
||||
line-height: var(--line-height);
|
||||
margin-inline-start: calc(2 * var(--body-item-spacing));
|
||||
}
|
||||
|
||||
main :is(ul, ol) > li:not(:last-child),
|
||||
main dd:has(+ dt) {
|
||||
margin-block-end: calc(var(--body-item-spacing) / 2);
|
||||
}
|
||||
|
||||
main :is(ul, ol) > li > :is(ul, ol) {
|
||||
margin-inline-start: 0;
|
||||
margin-block-start: calc(var(--body-item-spacing) / 2);
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
margin-inline: auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
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 header h1 {
|
||||
grid-column: content-start / content-end;
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
.p5-sketch {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page {
|
||||
gap: var(--body-item-spacing) 0;
|
||||
}
|
||||
|
||||
.page > header,
|
||||
.page > footer {
|
||||
grid-column: content-start / content-end;
|
||||
}
|
||||
|
||||
.page > article > * {
|
||||
grid-column: gutter-start / gutter-end;
|
||||
}
|
||||
|
||||
.page > article > :not(:last-child) {
|
||||
margin-block-end: var(--body-item-spacing);
|
||||
}
|
||||
|
||||
.post {
|
||||
grid-column: gutter-start / gutter-end;
|
||||
}
|
||||
|
||||
.post > * {
|
||||
grid-column: content-start / content-end;
|
||||
}
|
||||
|
||||
.social {
|
||||
display: block flex;
|
||||
margin-left: auto;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.social > li > a {
|
||||
display: block;
|
||||
height: var(--menu-icon-size);
|
||||
width: var(--menu-icon-size);
|
||||
}
|
||||
|
||||
.social > li > a > span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.social > li + li:before {
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
.youtube iframe {
|
||||
aspect-ratio: 16 / 9;
|
||||
margin-bottom: -3px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utility {
|
||||
.grid-item {
|
||||
grid-column: unset;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
/* Eryn Wells <eryn@erynwells.me> */
|
||||
|
||||
:root {
|
||||
--transition-duration: 0.7s;
|
||||
}
|
||||
|
||||
@layer root {
|
||||
figure.code .ln a {
|
||||
-webkit-user-select: none;
|
||||
-moz-use-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
@layer root {
|
||||
body:has(ruby-switch[value=none]) rt {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* When the ruby switch is set to "hidden", hide the ruby base and only show the <rt>. */
|
||||
body:has(ruby-switch[value=hidden]) ruby > span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body:has(ruby-switch[value=hidden]) rt {
|
||||
color: inherit;
|
||||
display: inline;
|
||||
font-size: inherit;
|
||||
white-space: inherit;
|
||||
}
|
||||
|
||||
body:has(ruby-switch[value=hidden]) :is(h1, h2, h3, h4, h5, h6) rt {
|
||||
font-family: var(--font-family-heading);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
rt { transition: color 0.3s; }
|
||||
ruby:hover rt { transition: color 0.3s; }
|
||||
}
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
@layer root {
|
||||
footer.site {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 0.25rem;
|
||||
margin-block: var(--body-item-spacing);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer.site > ul {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
footer.site > .slogans {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
footer.site > .slogans > li {
|
||||
margin-block-end: 0;
|
||||
margin-inline-start: 0.5em;
|
||||
}
|
||||
|
||||
footer.site > p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
footer.site p + p {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
@media (max-width: 740px) {
|
||||
footer.site .slogans span {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
@layer root {
|
||||
:root {
|
||||
--mastodon-icon: url(/icons/mastodon.svg);
|
||||
--github-icon: url(/icons/github.svg);
|
||||
--instagram-icon: url(/icons/instagram.svg);
|
||||
--feed-icon: url(/icons/feed.svg);
|
||||
|
||||
--social-menu-padding: 1rem;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--mastodon-icon: url(/icons/mastodon-dark.svg);
|
||||
--github-icon: url(/icons/github-dark.svg);
|
||||
--instagram-icon: url(/icons/instagram-dark.svg);
|
||||
--feed-icon: url(/icons/feed-dark.svg);
|
||||
}
|
||||
}
|
||||
|
||||
#social-menu-mastodon img { content: var(--mastodon-icon); }
|
||||
#social-menu-github img { content: var(--github-icon); }
|
||||
#social-menu-instagram img { content: var(--instagram-icon); }
|
||||
#social-menu-feed img { content: var(--feed-icon); }
|
||||
|
||||
#social-menu-mastodon img {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
.taxonomies {
|
||||
align-items: first baseline;
|
||||
display: flex;
|
||||
grid-column: content-start / content-end;
|
||||
height: min-content;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
ul.tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem 1rem;
|
||||
height: min-content;
|
||||
margin-inline-start: 0;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
|
||||
ul.tags > li {
|
||||
background-color: var(--tag-background-color);
|
||||
color: var(--tag-foreground-color);
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
font-size: 75%;
|
||||
letter-spacing: 1px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul.tags > li:hover {
|
||||
background-color: var(--tag-hover-background-color);
|
||||
}
|
||||
|
||||
ul.tags > li > a {
|
||||
color: inherit;
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0.6rem 1rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul.tags > li > a:hover {
|
||||
color: var(--tag-hover-foreground-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul.tags > li + li { margin-inline-start: 0; }
|
||||
|
||||
.taxonomies > .chevron {
|
||||
align-items: center;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
color: var(--tag-spacer-foreground-color);
|
||||
background-color: inherit;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-inline-start: 0;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
width: 2rem;
|
||||
}
|
||||
|
|
@ -1,188 +0,0 @@
|
|||
@font-face {
|
||||
font-family: "Museo_Slab";
|
||||
src: url("{{ `/fonts/Museo_Slab_500.woff2` | relURL }}") format("woff2"),
|
||||
url("{{ `/fonts/Museo_Slab_500.woff` | relURL }}") format("woff");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@layer typography {
|
||||
:root {
|
||||
--font-family: Verdana, Helvetica, sans-serif;
|
||||
--font-family-heading: Museo_Slab, Tahoma, "Hiragino Mincho ProN", serif;
|
||||
--font-family-monospace: "Courier New", Courier, monospace;
|
||||
--font-family-site-heading: Museo_Slab, Tahoma, sans-serif;
|
||||
|
||||
--font-size: 2rem;
|
||||
--font-size-max: 8px;
|
||||
--font-size-min: 6px;
|
||||
--font-size-scale-factor: 1vmax;
|
||||
--site-header-font-size: 200%;
|
||||
|
||||
--h1-size: 212%;
|
||||
--h2-size: 178%;
|
||||
--h3-size: 135%;
|
||||
--h4-size: 121%;
|
||||
--h5-size: 100%;
|
||||
--h6-size: 100%;
|
||||
|
||||
--line-height: 1.5;
|
||||
--heading-line-height: 1;
|
||||
/* A little extra line height so the descenders don't get clipped */
|
||||
--site-heading-line-height: 1.1;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a[href]:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration-style: solid;
|
||||
}
|
||||
|
||||
a.hover-only:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: var(--font-size);
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: var(--font-family-monospace);
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-size: 80%;
|
||||
line-height: var(--line-height);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
figure.code .cl {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
footer.site {
|
||||
font-size: 80%;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
h1 { font-size: var(--h1-size); }
|
||||
h2 { font-size: var(--h2-size); }
|
||||
h3 { font-size: var(--h3-size); }
|
||||
h4 { font-size: var(--h4-size); }
|
||||
h5 { font-size: var(--h5-size); }
|
||||
h6 { font-size: var(--h6-size); }
|
||||
h5, h6 { font-family: var(--font-family-body); }
|
||||
|
||||
header > span.series::before {
|
||||
content: "↳";
|
||||
}
|
||||
|
||||
header.site h1 > a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
header.site nav {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
header.site nav > .active {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--font-family-heading);
|
||||
font-weight: bold;
|
||||
letter-spacing: 1pt;
|
||||
line-height: var(--heading-line-height);
|
||||
}
|
||||
|
||||
h1.gradient {
|
||||
font-family: var(--font-family-site-heading);
|
||||
}
|
||||
|
||||
h1.gradient > a { color: inherit; }
|
||||
|
||||
header.site h1.site {
|
||||
font-size: var(--site-header-font-size);
|
||||
line-height: var(--site-heading-line-height);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
header.site nav {
|
||||
font-size: max(1.5rem, 80%);
|
||||
letter-spacing: 0.10em;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
header.site nav > li {
|
||||
color: var(--site-nav-link-color);
|
||||
}
|
||||
|
||||
:is(h1, h2, h3, h4, h5, h6) rt {
|
||||
font-family: var(--font-family);
|
||||
font-weight: normal;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
header > span.series {
|
||||
font-size: 1.75rem;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
header > span.series::before {
|
||||
color: var(--header-series-arrow-foreground-color);
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: var(--font-family);
|
||||
font-size: clamp(var(--font-size-min), var(--font-size-scale-factor), var(--font-size-max));
|
||||
}
|
||||
|
||||
main:has(header > .post-title > h1) h1 { font-size: 244%; }
|
||||
main:has(header > .post-title > h1) h2 { font-size: 195%; }
|
||||
main:has(header > .post-title > h1) h3 { font-size: 156%; }
|
||||
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);
|
||||
}
|
||||
|
||||
nav.bulleted>li:first-child::before {
|
||||
content: "";
|
||||
}
|
||||
|
||||
nav.bulleted > li::before {
|
||||
content: "•";
|
||||
font-size: 60%;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
||||
p > code {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
#TableOfContents ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.social {
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: var(--h5-size);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
@layer utility {
|
||||
.centered { text-align: center; }
|
||||
|
||||
.content-width { grid-column: content-start / content-end; }
|
||||
|
||||
.float-right {
|
||||
float: right;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.nobreak { white-space: nowrap; }
|
||||
|
||||
.noselect {
|
||||
cursor: default;
|
||||
-webkit-user-select: none;
|
||||
-moz-use-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.platter {
|
||||
-webkit-backdrop-filter: var(--platter-backdrop-filter);
|
||||
backdrop-filter: var(--platter-backdrop-filter);
|
||||
background-color: var(--platter-background-color);
|
||||
border: 1px solid var(--header-border-color);
|
||||
border-radius: 12px;
|
||||
box-shadow: 3px 4px 4px var(--header-box-shadow-color);
|
||||
}
|
||||
|
||||
.visible { visibility: visible; }
|
||||
|
||||
article.two-column { columns: 2; }
|
||||
|
||||
img.circular {
|
||||
shape-outside: circle(50%);
|
||||
-webkit-clip-path: circle(50%);
|
||||
clip-path: circle(50%);
|
||||
}
|
||||
|
||||
.column5 {
|
||||
grid-column: span content-start 4;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue