diff --git a/content/demo/index.md b/content/demo/index.md index e567fbb..44ad83c 100644 --- a/content/demo/index.md +++ b/content/demo/index.md @@ -5,10 +5,10 @@ title = "Demo Page" archive = "This page is, in fact, not archived, meaning it will receive content updates." trigger = "This page contains blackjack and hookers, and bad jokes such as this one." disclaimer = """ -- All tricks in this page are performed by the lab boys, don't try this at home -- Don't expose yourself to 4000° kelvin -- Don't take party escort submission position -- Don't interact with asbestos and moon rocks +- All tricks in this page are performed by the lab boys, don't try this at home. +- Don't expose yourself to 4000° kelvin. +- Don't take party escort submission position. +- Don't interact with asbestos and moon rocks. """ +++ @@ -18,91 +18,81 @@ Text can be **bold**, _italic_, or ~~strikethrough~~. There should be whitespace between paragraphs. -We recommend including a README, or a file with information about your project. - # Heading 1 -This is a normal paragraph following a header. Codeberg is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere. +This is a normal paragraph following a header. ## Heading 2 -> This is a blockquote following a header. -> -> > When something is important enough, you do it even if the odds are not in your favor. +> "Original content is original only for a few seconds before getting old" +> > Rule #21 of the internet ### Heading 3 -```js -// Javascript code with syntax highlighting -var fun = function lang(l) { - dateformat.i18n = require("./lang/" + l); - return true; -}; +```rust +let highlight = true; ``` -```ruby -# Ruby code with syntax highlighting -GitHubPages::Dependencies.gems.each do |gem, version| - s.add_dependency(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; + +} ``` #### Heading 4 -- This is an unordered list following a header. -- This is an unordered list following a header. -- This is an unordered list following a header. +- Item 1 +- Item 2 +- Item 3 +- `Item 4` ##### Heading 5 -1. This is an ordered list following a header. -2. This is an ordered list following a header. -3. This is an ordered list following a header. +1. Perform step #1 +2. Proceed to step #2 +3. Conclude with step #3 ###### Heading 6 -| head1 | head two | three | -| :----------- | :---------------- | :---- | -| ok | good swedish fish | nice | -| out of stock | good and plenty | nice | -| ok | good `oreos` | hmm | -| ok | good `zoute` drop | yumm | - -## There's a horizontal rule below this. - ---- - -## Here is an unordered list: +| Mare | Rating | Additional info | +| :----------- | :---------------- | :-------------- | +| Fluttershy | Best pone | Shy | +| Apple Jack | Good pone | Honest and nice | +| Pinke Pie | Fun pone | Party Horn! | +| Twilight | Decent pone | Neeerd | +| Rainbow Dash | Annoying pone | Looks badass | +| Rarity | Mixed pone | Sometimes nice | - Item foo - Item bar - Item baz - Item zip -## And an ordered list: - 1. Item one 2. Item two 3. Item three 4. Item four -## And a nested list: +- Level 1 item + - Level 2 item + - Level 2 item + - Level 3 item + - Level 3 item +- Level 1 item -- level 1 item - - level 2 item - - level 2 item - - level 3 item - - level 3 item -- level 1 item - - level 2 item - - level 2 item - - level 2 item -- level 1 item - - level 2 item - - level 2 item -- level 1 item - -## Here are checkboxes: +*** - [ ] Milk - [x] Eggs diff --git a/sass/_containers.scss b/sass/_containers.scss index 5640edc..2b6f12c 100644 --- a/sass/_containers.scss +++ b/sass/_containers.scss @@ -4,30 +4,44 @@ } .pre-container { - position: relative; + margin: 1rem 0 1rem; + box-shadow: var(--edge-highlight), var(--shadow); + border-radius: var(--rounded-corner); + + .header { + border-radius: var(--rounded-corner) var(--rounded-corner) 0 0; + background-color: var(--fg-muted-1); + padding: 0.25rem; + height: 2.5rem; + + span { + vertical-align: middle; + margin-inline-start: 0.75rem; + color: var(--fg-muted-5); + font-weight: bold; + line-height: normal; + } + } + + pre { + margin: 0; + box-shadow: none; + border-radius: 0 0 var(--rounded-corner) var(--rounded-corner); + } button { - -webkit-backdrop-filter: var(--blur); - position: absolute; - top: 0.5rem; - right: 0.5rem; - backdrop-filter: var(--blur); + float: inline-end; transition: var(--transition); cursor: pointer; - box-shadow: var(--edge-highlight); border: none; - border-radius: 50%; - background-color: var(--fg-muted-1); + border-radius: var(--rounded-corner-small); + background-color: transparent; padding: 0.5rem; line-height: 0; - :root[dir*="rtl"] & { - right: unset; - left: 0.5rem; - } - &:hover { - background-color: var(--fg-muted-2); + box-shadow: var(--edge-highlight); + background-color: var(--fg-muted-1); i { background-color: var(--fg-muted-5); @@ -38,14 +52,6 @@ transform: scale(var(--active)); } - &.dark { - background-color: rgba(255, 255, 255, 0.05); - - .icon { - background-color: rgba(255, 255, 255, 0.5); - } - } - &.active { background-color: var(--primary-color-alpha); diff --git a/templates/article.html b/templates/article.html index d4d9ef8..1bf1c6f 100644 --- a/templates/article.html +++ b/templates/article.html @@ -17,7 +17,7 @@ - {%- if page.authors -%} + {%- if page.authors %} {{ macros_translate::translate(key="author", default="Author", language_strings=language_strings) }}: diff --git a/templates/partials/copy_button.html b/templates/partials/copy_button.html index 52fd9b5..f2258af 100644 --- a/templates/partials/copy_button.html +++ b/templates/partials/copy_button.html @@ -6,25 +6,40 @@ blocks.forEach((block) => { if (navigator.clipboard) { + // Code block header title + let title = document.createElement("span"); + let lang = block.getAttribute("data-lang"); + title.innerHTML = lang; + + // Copy button icon + let icon = document.createElement("i"); + icon.classList.add("icon"); + + // Copy button label (for screen readers) + let label = document.createElement("span"); + label.classList.add("hidden"); + label.innerHTML = "{{ macros_translate::translate(key='copy_code', default='Copy code', language_strings=language_strings) }}"; + + // Copy button + let button = document.createElement("button"); + button.appendChild(icon); + button.appendChild(label); + + // Code block header + let header = document.createElement("div"); + header.classList.add("header"); + header.appendChild(button); + header.appendChild(title); + + // Container that holds header and the code block itself let container = document.createElement("div"); container.classList.add("pre-container"); + container.appendChild(header); + // Move code block into the container block.parentNode.insertBefore(container, block); container.appendChild(block); - let button = document.createElement("button"); - let icon = document.createElement("i"); - let span = document.createElement("span"); - {%- if config.markdown.highlight_themes_css | length < 1 %} - button.classList.add("dark"); - {%- endif %} - icon.classList.add("icon"); - span.classList.add("hidden"); - span.innerHTML = "{{ macros_translate::translate(key='copy_code', default='Copy code', language_strings=language_strings) }}"; - button.appendChild(icon); - button.appendChild(span); - container.appendChild(button); - button.addEventListener("click", async () => { await copyCode(block, button); });