From ffd6d5f29d2a6506ef3c3d324ea5f77684a609ba Mon Sep 17 00:00:00 2001 From: Kristofers Solo Date: Fri, 20 Jan 2023 00:33:01 +0200 Subject: [PATCH] Rewrite `karbs/instructions` --- static/main/css/colors.css | 6 +- static/main/css/layout.css | 8 +- static/projects/css/karbs/instructions.css | 287 ++++++++++++++++++--- templates/projects/karbs/instructions.html | 119 +++++---- 4 files changed, 316 insertions(+), 104 deletions(-) diff --git a/static/main/css/colors.css b/static/main/css/colors.css index 44e061f..c8c9559 100644 --- a/static/main/css/colors.css +++ b/static/main/css/colors.css @@ -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; } diff --git a/static/main/css/layout.css b/static/main/css/layout.css index 0ea6be9..0881af0 100644 --- a/static/main/css/layout.css +++ b/static/main/css/layout.css @@ -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 */ diff --git a/static/projects/css/karbs/instructions.css b/static/projects/css/karbs/instructions.css index 9b86b2e..52d48f6 100644 --- a/static/projects/css/karbs/instructions.css +++ b/static/projects/css/karbs/instructions.css @@ -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; } diff --git a/templates/projects/karbs/instructions.html b/templates/projects/karbs/instructions.html index c84ade3..57f48b9 100644 --- a/templates/projects/karbs/instructions.html +++ b/templates/projects/karbs/instructions.html @@ -7,67 +7,66 @@ href="{% static 'projects/css/karbs/instructions.css' %}"/> {% endblock %} {% block content %} -

Kristofers Auto-Rice Bootsrapping Script (KARBS)

-
-

- KARBS is an efficient shell script that will install a fully-featured tiling window manager-based system on any - Arch or - Artix - Linux-based system, without any of the routine of manual post-install processes and configuration. -

-

- By default, KARBS installs and deploys - my own personal dotfiles. -

-

Installation

-
-

- On any (preferably fresh) install of an - Arch or - Artix - Linux, make sure curl is installed and just run the following as the root user: -

- 
curl -LO krisrofers.xyz/karbs
-sh karbs
-

- Note that the KARBS scripts will not partition any drives or wipe anything, but when it deploys the dotfiles, it will overwrite any preexisting files: e.g. the KARBS .zshrc will replace your old .zshrc, etc. -

-

What does KARBS install?

-
-

- You can check out the programs list that KARBS parses for installation +

Kristofers Auto-Rice Bootsrapping Script (KARBS)

+

+ KARBS is an efficient shell script that will install a fully-featured tiling window manager-based system on any + Arch or + Artix + Linux-based system, without any of the routine of manual post-install processes and configuration. +

+

+ By default, KARBS installs and deploys + my own personal dotfiles. +

+

Installation

+

+ On any (preferably fresh) install of an + Arch or + Artix + Linux, make sure curl is installed and just run the following as the root user: +

+ 
curl -LO krisrofers.xyz/karbs
+sh karbs
+

+ Note that the KARBS scripts will not partition any drives or wipe anything, but when it deploys the dotfiles, it will overwrite any preexisting files: e.g. the KARBS .zshrc will replace your old .zshrc, etc. +

+

What does KARBS install?

+

+ You can check out the programs list that KARBS parses for installation right here! -

-

Here is some idea of the programs installed:

- - +

+ Note that making your own fork of KARBS is as easy as using your own dotfiles, making a programs file like the one above, and making any other direct changes to the script you want. +

+ {% endblock %}