mirror of
https://github.com/jbowdre/runtimeterror.git
synced 2024-11-21 22:42:19 +00:00
544 lines
No EOL
10 KiB
CSS
544 lines
No EOL
10 KiB
CSS
/* define fonts */
|
|
:root {
|
|
--font-monospace: 'Berkeley Mono', 'IBM Plex Mono', 'Cascadia Mono', 'Roboto Mono', 'Source Code Pro', 'Fira Mono', 'Courier New', monospace;
|
|
}
|
|
|
|
/* dark/light theming */
|
|
:root{
|
|
/* Default dark theme */
|
|
--bg: var(--dark-base00);
|
|
--code: var(--dark-base06);
|
|
--fg: var(--dark-base05);
|
|
--highlight: var(--dark-base0A);
|
|
--hover: var(--dark-base0C);
|
|
--inner-bg: var(--dark-base02);
|
|
--link: var(--dark-base0D);
|
|
--logo-text: var(--dark-base09);
|
|
--logo: var(--dark-base0B);
|
|
--muted: var(--dark-base03);
|
|
--off-bg: var(--dark-base01);
|
|
--off-fg: var(--dark-base04);
|
|
--root-prompt: var(--dark-base08);
|
|
--user-prompt: var(--dark-base07);
|
|
}
|
|
|
|
:root[data-theme="light"] {
|
|
--bg: var(--light-base00);
|
|
--off-bg: var(--light-base01);
|
|
--inner-bg: var(--light-base02);
|
|
--muted: var(--light-base03);
|
|
--off-fg: var(--light-base04);
|
|
--fg: var(--light-base05);
|
|
--code: var(--light-base06);
|
|
--user-prompt: var(--light-base07);
|
|
--root-prompt: var(--light-base08);
|
|
--logo-text: var(--light-base09);
|
|
--highlight: var(--light-base0A);
|
|
--logo: var(--light-base0B);
|
|
--hover: var(--light-base0C);
|
|
--link: var(--light-base0D);
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
:root:not([data-theme="dark"]) {
|
|
--bg: var(--light-base00);
|
|
--off-bg: var(--light-base01);
|
|
--inner-bg: var(--light-base02);
|
|
--muted: var(--light-base03);
|
|
--off-fg: var(--light-base04);
|
|
--fg: var(--light-base05);
|
|
--code: var(--light-base06);
|
|
--user-prompt: var(--light-base07);
|
|
--root-prompt: var(--light-base08);
|
|
--logo-text: var(--light-base09);
|
|
--highlight: var(--light-base0A);
|
|
--logo: var(--light-base0B);
|
|
--hover: var(--light-base0C);
|
|
--link: var(--light-base0D);
|
|
}
|
|
}
|
|
|
|
body {
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
.theme-toggle {
|
|
position: absolute;
|
|
top: 1rem;
|
|
right: 1rem;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
z-index: 1000;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.theme-toggle__icon {
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.theme-toggle__icon svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
fill: var(--off-fg);
|
|
transition: fill 0.3s ease;
|
|
}
|
|
|
|
.theme-toggle:hover .theme-toggle__icon svg {
|
|
fill: var(--hover);
|
|
}
|
|
|
|
.theme-toggle__icon--sun,
|
|
[data-theme="dark"] .theme-toggle__icon--moon {
|
|
display: none;
|
|
}
|
|
|
|
[data-theme="dark"] .theme-toggle__icon--sun,
|
|
.theme-toggle__icon--moon {
|
|
display: block;
|
|
}
|
|
|
|
.theme-toggle:hover {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.theme-toggle:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.theme-toggle:focus-visible {
|
|
outline: 2px solid var(--hover);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.theme-toggle:hover .theme-toggle__icon {
|
|
fill: var(--hover);
|
|
}
|
|
|
|
.page__nav ul {
|
|
padding-right: 3rem;
|
|
}
|
|
|
|
/* load preferred font */
|
|
@font-face {
|
|
font-family: 'Berkeley Mono';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: fallback;
|
|
src: local('Berkeley Mono'),
|
|
url('https://cdn.runtimeterror.dev/fonts/BerkeleyMono-Regular.woff2') format('woff2'),
|
|
}
|
|
|
|
/* minor layout tweaks */
|
|
.page {
|
|
max-width: 72rem;
|
|
}
|
|
|
|
.page__body {
|
|
margin: 1rem;
|
|
}
|
|
|
|
.page__aside {
|
|
margin: 0 1rem 0 0;
|
|
}
|
|
|
|
|
|
/* logo tweaks */
|
|
.page__logo {
|
|
color: var(--logo-text);
|
|
}
|
|
|
|
.page__logo-inner {
|
|
opacity: 0.80;
|
|
}
|
|
|
|
/* Footer tweaks */
|
|
.footer_slashes {
|
|
font-size: 14px;
|
|
line-height: 1.1rem;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.footer_slashes a:link, .footer_slashes a:visited {
|
|
color: var(--link);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.footer_links, .copyright {
|
|
font-size: 12px;
|
|
line-height: 1.1rem;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.footer_links a:link, .footer_links a:visited,
|
|
.copyright a:link, .copyright a:visited{
|
|
color: var(--off-fg);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.footer_links a:hover,
|
|
.footer_slashes a:hover,
|
|
.copyright a:hover {
|
|
color: var(--hover);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Notice CSS Built on hugo-notice by Nicolas Martignoni: https://github.com/martignoni/hugo-notice */
|
|
.notice {
|
|
--notice-title-color: #fff;
|
|
--notice-warn-color: #c33;
|
|
--notice-info-color: #fb7;
|
|
--notice-note-color: #6be;
|
|
--notice-tip-color: #5a5;
|
|
|
|
--notice-padding: 18px;
|
|
--notice-line-height: 24px;
|
|
--notice-margin-bottom: 24px;
|
|
--notice-border-radius: 4px;
|
|
--notice-title-margin: 12px;
|
|
--notice-bg-opacity: 10%;
|
|
|
|
padding: var(--notice-padding);
|
|
line-height: var(--notice-line-height);
|
|
margin-bottom: var(--notice-margin-bottom);
|
|
border-radius: var(--notice-border-radius);
|
|
color: var(--fg);
|
|
}
|
|
|
|
.notice p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.notice-title {
|
|
margin: calc(-1 * var(--notice-padding));
|
|
margin-bottom: var(--notice-title-margin);
|
|
padding: 4px var(--notice-padding);
|
|
border-radius: var(--notice-border-radius) var(--notice-border-radius) 0 0;
|
|
font-weight: 700;
|
|
color: var(--notice-title-color);
|
|
}
|
|
|
|
.notice.warning .notice-title { background: var(--notice-warning-color); }
|
|
.notice.info .notice-title { background: var(--notice-info-color); }
|
|
.notice.note .notice-title { background: var(--notice-note-color); }
|
|
.notice.tip .notice-title { background: var(--notice-tip-color); }
|
|
|
|
.notice.warning { background: color-mix(in srgb, var(--notice-warning-color) var(--notice-bg-opacity), transparent); }
|
|
.notice.info { background: color-mix(in srgb, var(--notice-info-color) var(--notice-bg-opacity), transparent); }
|
|
.notice.note { background: color-mix(in srgb, var(--notice-note-color) var(--notice-bg-opacity), transparent); }
|
|
.notice.tip { background: color-mix(in srgb, var(--notice-tip-color) var(--notice-bg-opacity), transparent); }
|
|
|
|
.icon-notice {
|
|
display: inline-flex;
|
|
align-self: center;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.icon-notice img,
|
|
.icon-notice svg {
|
|
height: 1em;
|
|
width: 1em;
|
|
fill: currentColor;
|
|
}
|
|
|
|
.icon-notice img,
|
|
.icon-notice.baseline svg {
|
|
top: 0.125em;
|
|
position: relative;
|
|
}
|
|
|
|
/* pagination overrides */
|
|
ul.pagination li::marker {
|
|
content:'';
|
|
}
|
|
|
|
ul.pagination li {
|
|
margin: 0 0.25rem;
|
|
}
|
|
|
|
.pagination {
|
|
display:flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* statuslol overrides */
|
|
.statuslol {
|
|
background: var(--off-bg) !important;
|
|
flex-direction:column
|
|
}
|
|
|
|
.statuslol_emoji_container {
|
|
font-size: 1.5em !important;
|
|
}
|
|
|
|
.statuslol_content p,
|
|
.statuslol_content li,
|
|
.statuslol_content em,
|
|
.statuslol_content strong {
|
|
overflow-wrap: inherit;
|
|
font-size: 0.8em;
|
|
line-height:normal;
|
|
margin: 0.8em auto;
|
|
color: var(--fg);
|
|
}
|
|
|
|
.statuslol_time a:link,
|
|
.statuslol_time a:visited {
|
|
color: var(--link) !important;
|
|
}
|
|
|
|
.statuslol_time a:hover,
|
|
.statuslol_time a:active {
|
|
color: var(--hover) !important;
|
|
}
|
|
|
|
small[style^="opacity: .5"] {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* theme song styling */
|
|
.theme-song {
|
|
background: var(--off-bg) !important;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-radius: 0.5rem;
|
|
padding: 0.7rem;
|
|
font-size: 0.9rem;
|
|
line-height: 0.9rem;
|
|
}
|
|
|
|
.theme-song img {
|
|
width: 14rem;
|
|
height: auto;
|
|
object-fit: cover;
|
|
}
|
|
|
|
@media (min-width: 45rem) {
|
|
.theme-song img {
|
|
max-width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
/* code overrides */
|
|
pre,
|
|
code,
|
|
kbd,
|
|
samp {
|
|
color: var(--code);
|
|
}
|
|
|
|
/* search box styling */
|
|
form {
|
|
display: flex;
|
|
flex-direction: row;
|
|
border-radius: 0.25rem;
|
|
outline: 0.25rem solid var(--bg);
|
|
width: 240px;
|
|
transition: width .2s ease-in-out, outline .2s ease-in-out;
|
|
}
|
|
|
|
input {
|
|
flex-grow: 2;
|
|
border: none;
|
|
background-color: var(--off-bg);
|
|
color: var(--off-fg);
|
|
height: 1.5rem;
|
|
border-radius: 0.25rem 0 0 0.25rem;
|
|
padding-left: 0.5rem;
|
|
font-family: var(--font-monospace);
|
|
}
|
|
|
|
form {
|
|
width:auto;
|
|
}
|
|
|
|
input:focus {
|
|
outline: none;
|
|
}
|
|
|
|
form:focus-within {
|
|
outline: 1px solid var(--logo);
|
|
width: 100%;
|
|
}
|
|
|
|
form button {
|
|
outline: none;
|
|
border: none;
|
|
background-color: var(--off-bg);
|
|
color: var(--link);
|
|
}
|
|
|
|
/* tags list styling */
|
|
.tagsArchive {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
|
|
grid-gap: 0.5rem;
|
|
margin: 0.5rem 0;
|
|
}
|
|
|
|
.tagsArchive sup {
|
|
font-size: 0.75rem;
|
|
margin-left: 0.2rem;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.date {
|
|
font-size: 0.8rem;
|
|
color: var(--off-fg);
|
|
}
|
|
|
|
/* blockquote styling */
|
|
blockquote {
|
|
font-style: italic;
|
|
border-left: 0.25rem solid var(--logo);
|
|
padding-left: 0.25rem;
|
|
}
|
|
|
|
/* post front matter styling*/
|
|
.frontmatter hr {
|
|
margin-bottom: 0rem;
|
|
margin-top: 0rem;
|
|
}
|
|
|
|
.frontmatter h1 {
|
|
margin-top: 0rem;
|
|
}
|
|
|
|
.frontmatter .label {
|
|
color: var(--off-fg);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.frontmatter .title {
|
|
color: var(--fg);
|
|
font-weight: 600;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.frontmatter table {
|
|
overflow-wrap: break-word;
|
|
margin-bottom: 0rem;
|
|
}
|
|
|
|
.frontmatter_tags {
|
|
font-size: 0.8rem;
|
|
color: var(--off-fg);
|
|
}
|
|
|
|
/* back-to-top styling */
|
|
#back-to-top {
|
|
background: var(--inner-bg);
|
|
height: 56px;
|
|
width: 56px;
|
|
}
|
|
|
|
#back-to-top svg {
|
|
fill: var(--link);
|
|
}
|
|
|
|
/* footnote link styling */
|
|
.footnote-backref {
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* hr override */
|
|
hr {
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
/* no extra space for paragraphs with lists */
|
|
p:not(:has(+ ol)),
|
|
p:not(:has(+ ul)) {
|
|
margin-bottom: 1.5em;
|
|
}
|
|
|
|
p:has(+ ol),
|
|
p:has(+ ul) {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* tagline tweaks */
|
|
#tagline_container {
|
|
height: 3rem;
|
|
}
|
|
|
|
#tagline {
|
|
font-size: 0.8rem;
|
|
line-height: 0.8rem;
|
|
}
|
|
|
|
#tagline::after {
|
|
content: "";
|
|
width: 0.5rem;
|
|
height: 1rem;
|
|
background: var(--muted);
|
|
display: inline-block;
|
|
margin-left: 0.2rem;
|
|
vertical-align: text-bottom;
|
|
animation: cursor-blink 1.5s steps(2) infinite;
|
|
}
|
|
|
|
@keyframes cursor-blink {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* Cabin kudos styling */
|
|
.kudos-container {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.kudos-button {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 1.2rem;
|
|
padding: 0;
|
|
margin-right: 0.25rem;
|
|
}
|
|
|
|
.kudos-button:disabled {
|
|
cursor: default;
|
|
color: var(--fg);
|
|
}
|
|
|
|
.kudos-button .emoji {
|
|
display: inline-block;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.kudos-button.clicked .emoji {
|
|
transform: rotate(360deg);
|
|
}
|
|
|
|
.kudos-text {
|
|
transition: font-style 0.3s ease;
|
|
}
|
|
|
|
.kudos-text.thanks {
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Header anchor links */
|
|
.hlink {
|
|
opacity: 0.4;
|
|
color: var(--muted) !important;
|
|
}
|
|
|
|
h1:hover .hlink,
|
|
h2:hover .hlink,
|
|
h3:hover .hlink,
|
|
h4:hover .hlink,
|
|
h5:hover .hlink,
|
|
h6:hover .hlink {
|
|
opacity: 0.8;
|
|
color: var(--link) !important;
|
|
} |