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);
});