523 lines
8.5 KiB
CSS
523 lines
8.5 KiB
CSS
:root {
|
||
--main-placeholder-color: #b14242;
|
||
--main-text-color: #b4b4b4;
|
||
--main-text-opaque-color: rgba(180, 180, 180, 0.8);
|
||
--main-bg-color: #121212;
|
||
--main-link-color: #df6464;
|
||
--main-heading-color: #df6464;
|
||
--main-bullet-color: #d87c4a;
|
||
--orange-rgb: rgba(216, 124, 74, 0.6);
|
||
--main-transparent: rgba(255, 255, 255, 0.15);
|
||
--main-small-text-color: rgba(255, 255, 255, 0.45);
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
line-height: 1.6;
|
||
font-size: 18px;
|
||
font-family: sans-serif;
|
||
background: var(--main-bg-color);
|
||
color: var(--main-text-color);
|
||
padding-left: calc(100vw - 100%);
|
||
}
|
||
|
||
header {
|
||
padding-top: -1rem;
|
||
margin-top: -1rem;
|
||
font-family: monospace;
|
||
text-transform: lowercase;
|
||
}
|
||
|
||
.post-nav {
|
||
font-family: monospace;
|
||
font-size: 0.95em;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.post-nav .bar {
|
||
position: relative;
|
||
bottom: 0.05em;
|
||
display: inline-block;
|
||
width: 1px;
|
||
height: 0.8em;
|
||
background-color: currentColor;
|
||
vertical-align: middle;
|
||
margin: 0 0.3em;
|
||
}
|
||
|
||
.post-nav .placeholder {
|
||
color: var(--main-placeholder-color);
|
||
}
|
||
|
||
.post-nav .symbol {
|
||
color: var(--main-bullet-color);
|
||
margin: 0;
|
||
padding: 0;
|
||
display: inline;
|
||
}
|
||
|
||
.site-logo.hover-symbol::before {
|
||
content: "~/";
|
||
}
|
||
|
||
.title.hover-symbol::before {
|
||
content: "$";
|
||
}
|
||
|
||
.hover-symbol {
|
||
color: inherit;
|
||
position: relative;
|
||
font-weight: bold;
|
||
text-decoration: none;
|
||
transition: color 0.15s ease;
|
||
}
|
||
|
||
.hover-symbol::before {
|
||
font-family: monospace;
|
||
content: "#";
|
||
position: absolute;
|
||
right: 100%;
|
||
margin-right: 0.25em;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
opacity: 0;
|
||
transition: opacity 0.15s ease, color 0.15s ease;
|
||
color: var(--main-text-color);
|
||
}
|
||
|
||
.hover-symbol:hover::before {
|
||
opacity: 1;
|
||
color: var(--main-placeholder-color);
|
||
}
|
||
.hover-symbol:hover {
|
||
background-color: transparent;
|
||
}
|
||
|
||
.toc ul {
|
||
font-family: monospace;
|
||
text-transform: lowercase;
|
||
margin: auto;
|
||
width: 50%;
|
||
}
|
||
|
||
.toc ul ul {
|
||
padding-left: 1em;
|
||
margin-left: 1em;
|
||
/* list-style-type: "–– ";*/
|
||
}
|
||
.toc ul ul ul {
|
||
padding-left: 1em;
|
||
margin-left: 1em;
|
||
/* list-style-type: "-- ";*/
|
||
}
|
||
|
||
.toclink {
|
||
position: relative;
|
||
text-decoration: none;
|
||
color: inherit;
|
||
transition: color 0.15s ease;
|
||
text-transform: lowercase;
|
||
font-family: monospace;
|
||
}
|
||
.post-list a {
|
||
position: relative;
|
||
text-decoration: none;
|
||
transition: color 0.15s ease;
|
||
text-transform: lowercase;
|
||
font-family: monospace;
|
||
}
|
||
|
||
.toclink::before {
|
||
content: "#";
|
||
position: absolute;
|
||
right: 100%;
|
||
margin-right: 0.25em;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
opacity: 0;
|
||
transition: opacity 0.15s ease, color 0.15s ease;
|
||
color: var(--main-link-color);
|
||
}
|
||
|
||
.toclink:hover::before {
|
||
opacity: 1;
|
||
color: var(--main-placeholder-color);
|
||
}
|
||
.toclink:hover {
|
||
background-color: transparent;
|
||
}
|
||
|
||
h1 .toclink::before {
|
||
content: "#";
|
||
}
|
||
|
||
h2 .toclink::before {
|
||
content: "#";
|
||
}
|
||
|
||
h3 .toclink::before {
|
||
content: "##";
|
||
}
|
||
|
||
h4 .toclink::before {
|
||
content: "###";
|
||
}
|
||
|
||
/* h1, */
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6 {
|
||
color: var(--main-heading-color);
|
||
}
|
||
|
||
h1 {
|
||
margin-block-start: 0.67rem;
|
||
margin-block-end: 0.67rem;
|
||
font-size: 2rem;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.title {
|
||
text-transform: lowercase;
|
||
font-family: monospace;
|
||
}
|
||
|
||
.title a {
|
||
color: inherit;
|
||
text-decoration: none;
|
||
}
|
||
|
||
article h1:first-of-type {
|
||
margin-block-start: 1.67rem;
|
||
}
|
||
|
||
h2 {
|
||
margin-block-start: 0.83rem;
|
||
margin-block-end: 0.83rem;
|
||
font-size: 1.5rem;
|
||
font-weight: bold;
|
||
}
|
||
|
||
h3 {
|
||
margin-block-start: 1rem;
|
||
margin-block-end: 1rem;
|
||
font-size: 1.17em;
|
||
font-weight: bold;
|
||
}
|
||
|
||
h4 {
|
||
margin-block-start: 1.33rem;
|
||
margin-block-end: 1.33rem;
|
||
font-size: 1rem;
|
||
font-weight: bold;
|
||
}
|
||
|
||
article h1 + h4:first-of-type {
|
||
margin-block-start: 0rem;
|
||
}
|
||
|
||
h5 {
|
||
margin-block-start: 1.67rem;
|
||
margin-block-end: 1.67rem;
|
||
font-size: 0.83rem;
|
||
font-weight: bold;
|
||
}
|
||
|
||
h6 {
|
||
margin-block-start: 2.33rem;
|
||
margin-block-end: 2.33rem;
|
||
font-size: 0.67rem;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/*ul {*/
|
||
/* list-style-type: disc;*/
|
||
/*}*/
|
||
|
||
ul {
|
||
list-style-type: "– ";
|
||
}
|
||
ul ul {
|
||
padding-left: 1em;
|
||
margin-left: 1em;
|
||
list-style-type: "+ ";
|
||
}
|
||
ul ul ul {
|
||
list-style-type: "~ ";
|
||
}
|
||
ul ul ul ul {
|
||
list-style-type: "• ";
|
||
}
|
||
ul ul ul ul ul {
|
||
list-style-type: "– ";
|
||
}
|
||
ul ul ul ul ul ul {
|
||
list-style-type: "+ ";
|
||
}
|
||
ul ul ul ul ul ul ul {
|
||
list-style-type: "~ ";
|
||
}
|
||
ul ul ul ul ul ul ul ul {
|
||
list-style-type: "• ";
|
||
}
|
||
|
||
li::marker {
|
||
color: var(--main-bullet-color);
|
||
}
|
||
|
||
a {
|
||
color: var(--main-link-color);
|
||
text-decoration: underline;
|
||
text-decoration-color: rgba(0, 0, 0, 0);
|
||
text-underline-offset: 2px;
|
||
}
|
||
|
||
a {
|
||
transition: color 0.15s ease, text-decoration-color 0.15s ease;
|
||
}
|
||
|
||
a:hover {
|
||
text-decoration-color: var(--main-placeholder-color);
|
||
color: var(--main-bullet-color);
|
||
}
|
||
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
img {
|
||
display: block;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
width: auto;
|
||
height: auto;
|
||
}
|
||
|
||
blockquote {
|
||
color: var(--main-text-opaque-color);
|
||
border-left: 3px solid var(--orange-rgb);
|
||
padding: 0 1rem;
|
||
margin-left: 0;
|
||
margin-right: 0;
|
||
}
|
||
|
||
hr {
|
||
border: none;
|
||
height: 1px;
|
||
background: var(--main-small-text-color);
|
||
opacity: 0.5;
|
||
}
|
||
|
||
time {
|
||
color: var(--main-bullet-color);
|
||
font-family: monospace;
|
||
}
|
||
|
||
.post-list-date {
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
code {
|
||
background: var(--main-transparent);
|
||
border-radius: 0.1875rem;
|
||
/* padding: .0625rem .1875rem; */
|
||
/* margin: 0 .1875rem; */
|
||
}
|
||
|
||
code,
|
||
pre {
|
||
white-space: pre;
|
||
word-wrap: break-word;
|
||
overflow-wrap: break-word;
|
||
font-family:
|
||
ui-monospace,
|
||
SFMono-Regular,
|
||
SF Mono,
|
||
Menlo,
|
||
Consolas,
|
||
Liberation Mono,
|
||
monospace;
|
||
font-size: 0.95em;
|
||
}
|
||
|
||
pre {
|
||
background-color: #1d1d1d;
|
||
color: #d5d5d5;
|
||
padding: 1em;
|
||
border-radius: 5px;
|
||
line-height: 1.5;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
/* Inline code styling */
|
||
:not(pre) > code {
|
||
padding: 0.2em 0.4em;
|
||
font-size: 0.85em;
|
||
line-height: 1;
|
||
background-color: #1d1d1d;
|
||
border-radius: 6px;
|
||
vertical-align: middle;
|
||
font-family:
|
||
ui-monospace,
|
||
SFMono-Regular,
|
||
SF Mono,
|
||
Menlo,
|
||
Consolas,
|
||
Liberation Mono,
|
||
monospace;
|
||
}
|
||
|
||
/* Block code styling (inherits from pre) */
|
||
pre code {
|
||
padding: 0;
|
||
border-radius: 0;
|
||
background: none;
|
||
}
|
||
|
||
small {
|
||
font-size: 0.95rem;
|
||
color: var(--main-small-text-color);
|
||
}
|
||
|
||
small a {
|
||
color: inherit;
|
||
/* Inherit the color of the surrounding <small> text */
|
||
text-decoration: underline;
|
||
/* Optional: Keep the underline to indicate a link */
|
||
}
|
||
|
||
.title-container {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
text-align: center;
|
||
}
|
||
|
||
.title-container h1 {
|
||
margin: 0;
|
||
}
|
||
|
||
.image-container {
|
||
text-align: center;
|
||
margin: 20px 0;
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
/* Optional: add some spacing around the image container */
|
||
}
|
||
|
||
.image-container img {
|
||
max-width: 100%;
|
||
width: auto;
|
||
max-height: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.fixed .image-container img {
|
||
max-width: 308px;
|
||
max-height: 308px;
|
||
}
|
||
|
||
.image-container small {
|
||
display: block;
|
||
/* Ensure the caption is on a new line */
|
||
margin-top: 5px;
|
||
/* Optional: adjust spacing between image and caption */
|
||
}
|
||
|
||
.image-container small a {
|
||
color: inherit;
|
||
/* Ensure the link color matches the small text */
|
||
text-decoration: underline;
|
||
/* Optional: underline to indicate a link */
|
||
}
|
||
|
||
#header ul {
|
||
list-style-type: none;
|
||
padding-left: 0;
|
||
}
|
||
|
||
#header li {
|
||
display: inline;
|
||
font-size: 1.2rem;
|
||
margin-right: 1.2rem;
|
||
}
|
||
|
||
#container {
|
||
margin: 2.5rem auto;
|
||
width: 90%;
|
||
max-width: 60ch;
|
||
}
|
||
|
||
#postlistdiv ul {
|
||
list-style-type: none;
|
||
padding-left: 0;
|
||
}
|
||
|
||
.moreposts {
|
||
font-size: 0.95rem;
|
||
padding-left: 0.5rem;
|
||
}
|
||
|
||
#nextprev {
|
||
text-align: center;
|
||
margin-top: 1.4rem;
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
#footer {
|
||
color: var(--main-small-text-color);
|
||
}
|
||
table {
|
||
border-collapse: collapse;
|
||
margin: 1.5rem auto;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
font-size: 0.85rem;
|
||
text-align: left; /* Use center if you prefer */
|
||
}
|
||
|
||
th, td {
|
||
border: 1px solid var(--main-transparent);
|
||
/*border: 1px solid var(--main-bullet-color);*/
|
||
padding: 0.4rem 0.8rem;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
thead th {
|
||
font-weight: bold;
|
||
background-color: rgba(255, 255, 255, 0.05);
|
||
color: var(--main-text-color);
|
||
}
|
||
|
||
tbody tr:nth-child(even) {
|
||
background-color: rgba(255, 255, 255, 0.02);
|
||
}
|
||
|
||
tbody tr:hover {
|
||
background-color: rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
table code {
|
||
font-family:
|
||
ui-monospace,
|
||
SFMono-Regular,
|
||
SF Mono,
|
||
Menlo,
|
||
Consolas,
|
||
Liberation Mono,
|
||
monospace;
|
||
font-size: 0.85em;
|
||
background: #1d1d1d;
|
||
padding: 0.1em 0.25em;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
caption {
|
||
margin-top: 0.5rem;
|
||
font-size: 0.8rem;
|
||
color: var(--main-small-text-color);
|
||
}
|