mirror of
https://github.com/kristoferssolo/kristofersxyz.git
synced 2026-03-22 00:26:20 +00:00
Rewrite karbs/instructions
This commit is contained in:
Kristofers Solo
@@ -16,6 +16,7 @@
|
||||
--color-scale-gray-9: #0d1117;
|
||||
|
||||
--color-scale-gray-0-transparent-10: #f0f6fc1a;
|
||||
--color-scale-gray-4-transparent-40: #6e768166;
|
||||
--color-scale-gray-8-transparent-50: #161b2280;
|
||||
--color-scale-gray-9-transparent-0: #0d111700;
|
||||
|
||||
@@ -35,8 +36,10 @@
|
||||
--color-canvas-default: var(--color-scale-gray-9);
|
||||
--color-canvas-default-transparent: var(--color-scale-gray-9-transparent-0);
|
||||
--color-canvas-subtle: var(--color-scale-gray-8);
|
||||
--color-canvas-subtle-transparent: var(--color-scale-gray-4-transparent-40);
|
||||
|
||||
--color-border-default: var(--color-scale-gray-6);
|
||||
--color-border-muted: var(--color-scale-gray-7);
|
||||
|
||||
--color-header-bg-default: var(--color-scale-gray-8);
|
||||
--color-header-bg-transparent: var(--color-scale-gray-8-transparent-5);
|
||||
@@ -58,7 +61,8 @@
|
||||
--color-accent-fg: var(--color-scale-purple-4);
|
||||
|
||||
--color-text-link: var(--color-accent-fg);
|
||||
|
||||
--base-text-weight-semibold: 600;
|
||||
--font-monospace: "JetBrains Mono", Menlo, Consolas, monospace;
|
||||
font-family: "Roboto", arial, sans-serif;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@@ -20,8 +20,14 @@ body {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
b,
|
||||
strong,
|
||||
.bold {
|
||||
font-weight: 700;
|
||||
font-weight: var(--base-text-weight-semibold);
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Navigation bar */
|
||||
|
||||
@@ -1,72 +1,275 @@
|
||||
main {
|
||||
border: var(--border);
|
||||
border-radius: var(--border-radius);
|
||||
max-width: 700px;
|
||||
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
|
||||
|
||||
.markdown-body {
|
||||
font-size: 16px;
|
||||
border: 1px solid var(--color-border-default);
|
||||
border-radius: 1rem;
|
||||
max-width: 50rem;
|
||||
color: var(--text-color);
|
||||
padding: 50px;
|
||||
margin: 100px auto 100px auto;
|
||||
padding: 2rem;
|
||||
margin: 8rem auto 8rem auto;
|
||||
line-height: 1.5;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
hr {
|
||||
color: var(--hr-color);
|
||||
.markdown-body > * {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
.markdown-body > :last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.markdown-body::before {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.markdown-body::after {
|
||||
display: table;
|
||||
clear: both;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.markdown-body h1,
|
||||
.markdown-body h2 {
|
||||
padding-bottom: 0.5em;
|
||||
border-bottom: 1px solid var(--color-border-muted);
|
||||
}
|
||||
|
||||
.markdown-body h2,
|
||||
.markdown-body h3,
|
||||
.markdown-body h4,
|
||||
.markdown-body h5,
|
||||
.markdown-body h6 {
|
||||
margin-top: 1.5em;
|
||||
font-weight: var(--base-text-weight-semibold);
|
||||
}
|
||||
|
||||
.markdown-body p,
|
||||
.markdown-body blockquote,
|
||||
.markdown-body ul,
|
||||
.markdown-body ol,
|
||||
.markdown-body dl,
|
||||
.markdown-body table,
|
||||
.markdown-body pre,
|
||||
.markdown-body details {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.markdown-body h1 {
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
font-size: 2rem;
|
||||
font-weight: var(--base-text-weight-semibold);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 40px 0 0 0;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
.markdown-body h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 18px;
|
||||
margin: 10px 0;
|
||||
.markdown-body h3 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
a {
|
||||
.markdown-body h4 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.markdown-body h5 {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.markdown-body h6 {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.markdown-body p {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.markdown-body a {
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
color: var(--link-text-color);
|
||||
color: var(--color-accent-fg);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
.markdown-body a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: Consolas, "courier new";
|
||||
color: var(--text-color);
|
||||
background-color: var(--code-bg-color);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 3px;
|
||||
.markdown-body code {
|
||||
padding: 0.2rem 0.4rem;
|
||||
font-family: var(--font-monospace);
|
||||
background-color: var(--color-canvas-subtle-transparent);
|
||||
white-space: break-spaces;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
pre code {
|
||||
background-color: var(--bg);
|
||||
display: block;
|
||||
padding: 20px;
|
||||
.markdown-body pre {
|
||||
font-family: var(--font-monospace);
|
||||
padding: 1rem;
|
||||
overflow: auto;
|
||||
font-size: 85%;
|
||||
line-height: 1.45;
|
||||
background-color: var(--color-canvas-subtle);
|
||||
border-radius: 0.5rem;
|
||||
word-wrap: normal;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
aside {
|
||||
color: #8b949e;
|
||||
font-size: 12px;
|
||||
margin: 10px 0;
|
||||
font-style: italic;
|
||||
.markdown-body ul ul,
|
||||
.markdown-body ul ol,
|
||||
.markdown-body ol ul,
|
||||
.markdown-body ol ol {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.list {
|
||||
margin: 10px 40px;
|
||||
.markdown-body ul,
|
||||
.markdown-body ol {
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
.upper {
|
||||
.markdown-body li > p {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.markdown-body li + li {
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
|
||||
.markdown-body ul li {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
.markdown-body ul li li {
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
.sub {
|
||||
list-style-type: disc;
|
||||
.markdown-body ul li li li {
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
.markdown-body ol li {
|
||||
list-style-type: normal;
|
||||
}
|
||||
|
||||
.markdown-body ol li li {
|
||||
list-style-type: upper-roman;
|
||||
}
|
||||
|
||||
.markdown-body ol li li li {
|
||||
list-style-type: lower-alpha;
|
||||
}
|
||||
|
||||
.markdown-body img {
|
||||
max-width: 100%;
|
||||
box-sizing: content-box;
|
||||
background-color: var(--color-canvas-default);
|
||||
}
|
||||
|
||||
.markdown-body table {
|
||||
display: block;
|
||||
width: 100%;
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.markdown-body table tr {
|
||||
background-color: var(--color-canvas-default);
|
||||
border-top: 1px solid var(--color-border-muted);
|
||||
}
|
||||
|
||||
.markdown-body table th,
|
||||
.markdown-body table td {
|
||||
padding: 0.5rem 1rem;
|
||||
border-top: 1px solid var(--color-border-default);
|
||||
}
|
||||
|
||||
.markdown-body table th {
|
||||
font-weight: var(--base-text-weight-semibold);
|
||||
}
|
||||
|
||||
.markdown-body table tr {
|
||||
background-color: var(--color-canvas-default);
|
||||
border-top: 1px solid var(--color-border-muted);
|
||||
}
|
||||
|
||||
.markdown-body table tr:nth-child(2n) {
|
||||
background-color: var(--color-canvas-subtle);
|
||||
}
|
||||
|
||||
.contains-task-list {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.task-list-item {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.task-list-item-checkbox {
|
||||
margin: 0 0em 0.25em -1.4em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
[type="checkbox"] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.markdown-body del {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.markdown-body sub,
|
||||
.markdown-body sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.markdown-body sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
.markdown-body sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
.markdown-body hr {
|
||||
height: 0.25em;
|
||||
padding: 0;
|
||||
margin: 1.5em 0;
|
||||
background-color: var(--color-border-default);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.markdown-body [data-footnote-ref]::before {
|
||||
content: "[";
|
||||
}
|
||||
|
||||
.markdown-body [data-footnote-ref]::after {
|
||||
content: "]";
|
||||
}
|
||||
|
||||
.markdown-body .emoji {
|
||||
max-width: none;
|
||||
vertical-align: text-top;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.markdown-body .footnotes {
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-fg-muted);
|
||||
border-top: 1px solid var(--color-border-default);
|
||||
}
|
||||
|
||||
.markdown-body .footnotes ol {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.markdown-body .footnotes li {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user