runtimeterror/static/css/custom.css

407 lines
6.8 KiB
CSS
Raw Normal View History

2024-04-25 01:09:17 +00:00
/* color and font overrides */
:root {
--code: var(--base06);
2024-04-25 01:09:17 +00:00
--font-monospace: 'Berkeley Mono', 'IBM Plex Mono', 'Cascadia Mono', 'Roboto Mono', 'Source Code Pro', 'Fira Mono', 'Courier New', monospace;
2024-04-20 21:30:54 +00:00
}
2024-04-25 01:09:17 +00:00
/* load preferred font */
2024-04-20 21:30:54 +00:00
@font-face {
font-family: 'Berkeley Mono';
font-style: normal;
font-weight: 400;
2024-04-23 21:38:42 +00:00
font-display: fallback;
2024-04-20 21:30:54 +00:00
src: local('Berkeley Mono'),
2024-04-23 17:26:18 +00:00
url('https://cdn.runtimeterror.dev/fonts/BerkeleyMono-Regular.woff2') format('woff2'),
url('https://cdn.runtimeterror.dev/fonts/BerkeleyMono-Regular.woff') format('woff')
2024-04-20 21:30:54 +00:00
}
2023-08-16 21:53:17 +00:00
/* override page max-width */
.page {
max-width: 72rem;
}
/* logo tweaks */
.page__logo {
color: var(--off-fg);
}
.page__logo-inner {
opacity: 0.80;
}
2023-11-06 21:23:24 +00:00
/* Footer tweaks */
.copyright {
font-size: 14px;
line-height: 1.3rem;
}
.powered_by {
font-size: 12px;
line-height: 1.1rem;
color: var(--muted);
}
.powered_by a:link, .powered_by a:visited {
color: var(--off-fg);
text-decoration: none;
}
.powered_by a:hover {
color: var(--hover);
text-decoration: underline;
}
2023-08-16 01:27:46 +00:00
/* Notice CSS Built on hugo-notice by Nicolas Martignoni: https://github.com/martignoni/hugo-notice */
.notice {
--root-color: #444;
--root-background: #eff;
--title-color: #fff;
--title-background: #7bd;
--warning-title: #c33;
--warning-content: #fee;
--info-title: #fb7;
--info-content: #fec;
--note-title: #6be;
--note-content: #e7f2fa;
--tip-title: #5a5;
--tip-content: #efe;
}
@media (prefers-color-scheme: dark) {
.notice {
--root-color: #ddd;
--root-background: #eff;
--title-color: #fff;
--title-background: #7bd;
--warning-title: #800;
--warning-content: #400;
--info-title: #a50;
--info-content: #420;
--note-title: #069;
--note-content: #023;
--tip-title: #363;
--tip-content: #121;
}
}
body.dark .notice {
--root-color: #ddd;
--root-background: #eff;
--title-color: #fff;
--title-background: #7bd;
--warning-title: #800;
--warning-content: #400;
--info-title: #a50;
--info-content: #420;
--note-title: #069;
--note-content: #023;
--tip-title: #363;
--tip-content: #121;
}
.notice {
padding: 18px;
line-height: 24px;
margin-bottom: 24px;
border-radius: 4px;
color: var(--root-color);
background: var(--root-background);
}
.notice p:last-child {
margin-bottom: 0;
}
.notice-title {
margin: -18px -18px 12px;
padding: 4px 18px;
border-radius: 4px 4px 0 0;
font-weight: 700;
color: var(--title-color);
background: var(--title-background);
}
.notice.warning .notice-title {
background: var(--warning-title);
}
.notice.warning {
background: var(--warning-content);
}
.notice.info .notice-title {
background: var(--info-title);
}
.notice.info {
background: var(--info-content);
}
.notice.note .notice-title {
background: var(--note-title);
}
.notice.note {
background: var(--note-content);
}
.notice.tip .notice-title {
background: var(--tip-title);
}
.notice.tip {
background: var(--tip-content);
}
.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;
}
2023-11-13 16:05:14 +00:00
/* pagination overrides */
ul.pagination li::marker {
content:'';
}
ul.pagination li {
margin: 0 0.25rem;
}
2023-11-13 16:05:14 +00:00
.pagination {
display:flex;
justify-content: center;
}
/* statuslol overrides */
2023-12-23 23:00:24 +00:00
.statuslol {
background: var(--off-bg) !important;
2023-12-29 14:49:53 +00:00
flex-direction:column
}
.statuslol_emoji_container {
font-size: 1.5em !important;
2023-12-23 23:00:24 +00:00
}
.statuslol_content p,
.statuslol_content li,
.statuslol_content em,
.statuslol_content strong {
2023-12-29 14:49:53 +00:00
overflow-wrap: inherit;
2023-12-23 23:00:24 +00:00
font-size: 0.8em;
line-height:normal;
2023-12-29 14:49:53 +00:00
margin: 0.8em auto;
2023-12-23 23:00:24 +00:00
color: var(--fg);
}
.statuslol_time a:link,
.statuslol_time a:visited {
color: var(--link) !important;
}
.statuslol_time a:hover,
.statuslol_time a:active {
2023-12-23 23:00:24 +00:00
color: var(--hover) !important;
}
small[style^="opacity: .5"] {
opacity: 1 !important;
}
/* code overrides */
pre,
code,
kbd,
samp {
color: var(--code);
2024-01-15 23:07:23 +00:00
}
/* search box styling */
form {
display: flex;
flex-direction: row;
border-radius: 0.25rem;
2024-01-16 00:12:56 +00:00
outline: 0.25rem solid var(--bg);
2024-01-16 17:24:35 +00:00
width: 240px;
transition: width .2s ease-in-out, outline .2s ease-in-out;
2024-01-15 23:07:23 +00:00
}
input {
flex-grow: 2;
border: none;
background-color: var(--off-bg);
color: var(--off-fg);
2024-01-16 00:12:56 +00:00
height: 1.5rem;
border-radius: 0.25rem;
padding-left: 0.5rem;
font-family: var(--font-monospace);
2024-01-15 23:07:23 +00:00
}
input:focus {
outline: none;
}
form:focus-within {
outline: 1px solid var(--logo);
2024-01-16 17:24:35 +00:00
width: 100%;
2024-01-15 23:07:23 +00:00
}
form button {
outline: none;
border: none;
background-color: var(--off-bg);
2024-01-16 00:12:56 +00:00
color: var(--link);
2024-01-19 02:43:00 +00:00
}
/* 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;
2024-01-19 04:07:51 +00:00
}
.date {
font-size: 0.8rem;
color: var(--off-fg);
2024-01-19 20:38:35 +00:00
}
/* blockquote styling */
blockquote {
font-style: italic;
border-left: 0.25rem solid var(--logo);
padding-left: 0.25rem;
2024-01-19 23:14:18 +00:00
}
2024-01-23 21:22:08 +00:00
/* tinylytics styling*/
2024-01-19 23:14:18 +00:00
.post_kudos {
display: flex;
}
button.tinylytics_kudos {
border: 0;
background-color: transparent;
cursor: pointer;
display: flex;
color: var(--off-fg);
font-size: 1.2rem;
padding: 0;
transition: all .2s ease-in-out;
}
button.tinylytics_kudos:hover {
transform: scale(1.1);
text-shadow: var(--off-fg) 0 0 1px;
}
2024-01-23 21:22:08 +00:00
img.tinylytics_webring_avatar {
2024-01-23 22:00:30 +00:00
border-radius: 100%;
2024-01-23 21:22:08 +00:00
height: 2rem;
2024-01-23 22:00:30 +00:00
width: 2rem;
vertical-align:middle;
2024-01-24 00:16:27 +00:00
}
a.tinylytics_webring {
text-decoration: none;
font-size: 1.5rem;
2024-01-23 21:22:08 +00:00
}
2024-04-15 16:16:41 +00:00
/* shoutouts styling */
.shoutout .shoutout__container .shoutout__title {
font-size: 1rem;
margin: 0;
margin-bottom: 0.5rem;
2024-04-15 17:58:38 +00:00
font-weight: bold;
2024-04-15 16:16:41 +00:00
}
.shoutout .shoutout__container .shoutout__content {
font-style: italic;
font-size: 0.9rem;
line-height: 1.2rem;
}
/* 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);
2024-01-22 03:16:15 +00:00
}
/* back-to-top styling */
#back-to-top {
background: var(--inner-bg);
height: 56px;
width: 56px;
}
#back-to-top svg {
fill: var(--link);
2024-01-22 03:21:30 +00:00
}
/* footnote link styling */
.footnote-backref {
text-decoration: none;
2024-01-23 21:22:08 +00:00
}
/* hr override */
hr {
margin-top: 1.5rem;
2024-04-27 19:08:35 +00:00
}
/* summary styling */
details {
cursor: pointer;
}
details.comments_widget summary::before {
2024-04-27 19:08:35 +00:00
content: 'Load ';
}
details[open].comments_widget summary::before {
2024-04-27 19:08:35 +00:00
content: 'Hide ';
}