From 5d330d543c46ea825eda44595f4b142c102ab6eb Mon Sep 17 00:00:00 2001 From: daudix-UFO Date: Sun, 15 Oct 2023 20:01:21 +0000 Subject: [PATCH] feat: Redo code blocks --- config.toml | 1 - content/demo/index.md | 34 ++++++++--- sass/_main.scss | 130 +++++++++++++++++++++++++----------------- 3 files changed, 103 insertions(+), 62 deletions(-) diff --git a/config.toml b/config.toml index c0a24ed..2b81a78 100644 --- a/config.toml +++ b/config.toml @@ -3,7 +3,6 @@ base_url = "https://duckquill.exozy.me" description = "Modern, pretty, and clean theme" compile_sass = true -minify_html = true generate_feed = true feed_filename = "atom.xml" build_search_index = false diff --git a/content/demo/index.md b/content/demo/index.md index 8d4743c..79d792a 100644 --- a/content/demo/index.md +++ b/content/demo/index.md @@ -47,6 +47,24 @@ GitHubPages::Dependencies.gems.each do |gem, version| end ``` +```scss, linenos, linenostart=10, hl_lines=3-4 8-9, hide_lines=2 7 +pre mark { + + display: block; + + color: currentcolor; + +} + +pre table td:nth-of-type(1) { + + color: #6b6b6b; + + font-style: italic; + +} +``` + #### Header 4 - This is an unordered list following a header. @@ -163,7 +181,7 @@ Available variables are: Variables should be comma-separated and be inside the brackets. -``` +```jinja2 {{/* image(url="image.png", alt="This is an image" no_hover=true) */}} ``` @@ -173,7 +191,7 @@ Variables should be comma-separated and be inside the brackets. Same as images, but with a few differences: `no_hover` and `url_min` are not available. -``` +```jinja2 {{/* video(url="video.webm", alt="This is a video") */}} ``` @@ -183,7 +201,7 @@ Same as images, but with a few differences: `no_hover` and `url_min` are not ava Alright, this one doesn't simplify anything, it just adds a CRT-like effect around Markdown code blocks. -``` +```jinja2 {%/* crt() */%} -> Markdown code block <- {%/* end */%} @@ -218,7 +236,7 @@ Alright, this one doesn't simplify anything, it just adds a CRT-like effect arou Media can have additional text description using the `
` HTML tag. -``` +```markdown ![Image](image.pmg)
The image caption
``` @@ -247,7 +265,7 @@ The ASCII⌘ Super + Space ``` @@ -259,7 +277,7 @@ You know what? I'm gonna say some very important stuff, so im ## Link to page (rightwards arrow) -``` +```html Link to page ``` @@ -267,7 +285,7 @@ You know what? I'm gonna say some very important stuff, so im ## Link to site (up-rightwards arrow) -``` +```html Link to site ``` @@ -275,7 +293,7 @@ You know what? I'm gonna say some very important stuff, so im ## Buttons -``` +```html.j2

Go to top File an issue diff --git a/sass/_main.scss b/sass/_main.scss index f7caa9f..c14cca1 100644 --- a/sass/_main.scss +++ b/sass/_main.scss @@ -62,7 +62,7 @@ body { } } -// LAYOUT +// Layout .container { width: 80%; margin-left: auto; @@ -71,7 +71,7 @@ body { } @media only screen and (max-device-width: 480px) { - // MOBILE + // Mobile .container { width: 90%; } @@ -201,15 +201,13 @@ details { } } -// TABLES +// Tables table { border-collapse: collapse; border-spacing: 0; } table { - display: block; - width: 100%; overflow: auto; word-break: normal; word-break: keep-all; @@ -230,12 +228,12 @@ th { padding: 0; } -// MAKE TABLES VERTICALLY ALIGNED TO THE TOP +// Make tables vertically aligned to the top tbody td { vertical-align: top; } -/* Media */ +// Media img, video { display: block; @@ -256,7 +254,7 @@ img:not(.no-hover):hover { } @media only screen and (max-device-width: 480px) { - // MOBILE + // Mobile img:not(.no-hover):hover { transform: scale(110%); } @@ -267,7 +265,7 @@ img:not(.no-hover):hover { } .pixels { - image-rendering: crisp-edges; /* older firefox browsers */ + image-rendering: crisp-edges; // older firefox browsers image-rendering: pixelated; } @@ -276,7 +274,7 @@ img:not(.no-hover):hover { box-shadow: none; } -// NAVBAR +// Navbar .site-nav { position: sticky; top: 1rem; @@ -355,7 +353,7 @@ img:not(.no-hover):hover { } } -/* Footer */ +// Footer .site-footer { text-align: center; padding: 3rem 0 3rem; @@ -369,7 +367,7 @@ img:not(.no-hover):hover { } } -// LINK ARROWS +// Link arrows .link-page::after { content: " →"; } @@ -378,14 +376,14 @@ img:not(.no-hover):hover { content: " ↗"; } -// CENTER LINK ICONS VERTICALLY +// Center link icons vertically .link-icon { height: 1rem; width: 1rem; vertical-align: middle; } -// BUTTONS +// Buttons .dialog-buttons { display: flex; flex-direction: row; @@ -403,6 +401,70 @@ img:not(.no-hover):hover { color: var(--text); } +// Code +code { + font-family: "JetBrains Mono", monospace; + padding: 2px 6px; + border-radius: var(--border-radius-small); + background-color: var(--fg-07); + color: var(--red-fg); +} + +pre code { + background-color: unset; + border-radius: unset; + color: unset; + padding: unset; +} + +pre * { + font-family: "JetBrains Mono", monospace; +} + +pre { + line-height: normal; + padding: 1rem; + margin: 1rem 0 1rem; + border-radius: var(--border-radius); + max-width: 100vw; + box-shadow: var(--shadow); + overflow: auto; +} + +// The line numbers already provide some kind of left/right padding +pre[data-linenos] { + padding: 1rem 0; +} + +pre table td { + padding: 0; + border: none; +} + +// The line number cells +pre table td:nth-of-type(1) { + text-align: center; + user-select: none; +} + +pre mark { + // If you want your highlights to take the full width. + display: block; + // The default background colour of a mark is bright yellow + background-color: var(--fg-07); + // Set color from accent color to text color + color: var(--text); + // Unset code block border radius + border-radius: 0; + // Unset mark padding + padding: 0; +} + +pre table { + width: 100%; + border-collapse: collapse; +} + // CRT .crt { margin: 1rem 0 1rem; @@ -416,9 +478,6 @@ img:not(.no-hover):hover { padding: 1rem 1rem; margin: unset; background-color: unset; - background-image: unset; - background-size: unset; - background-position: unset; box-shadow: unset; } @@ -444,42 +503,7 @@ img:not(.no-hover):hover { } } -// CODE -pre, -code { - font-family: "JetBrains Mono", monospace; -} - -pre { - line-height: normal; - margin: 1rem 0 1rem; - padding: 1rem 1rem; - border-radius: var(--border-radius); - max-width: 100vw; - overflow-x: auto; - box-shadow: var(--shadow); - background-image: linear-gradient(var(--fg-03) 1px, transparent 1px), - linear-gradient(90deg, var(--fg-03) 1px, transparent 1px); - background-size: 10px 10px, 10px 10px; - background-position: -1px -1px, -1px -1px; -} - -pre code { - background-color: unset; - border-radius: unset; - color: unset; - padding: unset; -} - -code { - padding: 2px 6px; - border-radius: var(--border-radius-small); - background-color: var(--fg-05); - color: var(--red-fg); - box-shadow: none; -} - -// STATEMENTS +// Statements .statement-container { margin: 1rem 0 1rem; padding: 1rem 1rem;