Use code block header if copy button is enabled

Now copy button doesn't cover the code, because it's not on top of it!

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
+- 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 expose yourself to 4000° kelvin.
-- Don't take party escort submission position
+- Don't take party escort submission position.
-- Don't interact with asbestos and moon rocks
+- 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.
+> "Original content is original only for a few seconds before getting old"
->
+> > Rule #21 of the internet
-> > When something is important enough, you do it even if the odds are not in your favor.
 
 ### Heading 3
 
-```js
+```rust
-// Javascript code with syntax highlighting
+let highlight = true;
-var fun = function lang(l) {
-  dateformat.i18n = require("./lang/" + l);
-  return true;
-};
 ```
 
-```ruby
+```scss, linenos, linenostart=10, hl_lines=3-4 8-9, hide_lines=2 7
-# Ruby code with syntax highlighting
+pre mark {
-GitHubPages::Dependencies.gems.each do |gem, version|
+
-  s.add_dependency(gem, "= #{version}")
+  display: block;
-end
+
+  color: currentcolor;
+
+}
+
+pre table td:nth-of-type(1) {
+
+  color: #6b6b6b;
+
+  font-style: italic;
+
+}
 ```
 
 #### Heading 4
 
-- This is an unordered list following a header.
+- Item 1
-- This is an unordered list following a header.
+- Item 2
-- This is an unordered list following a header.
+- Item 3
+- `Item 4`
 
 ##### Heading 5
 
-1.  This is an ordered list following a header.
+1. Perform step #1
-2.  This is an ordered list following a header.
+2. Proceed to step #2
-3.  This is an ordered list following a header.
+3. Conclude with step #3
 
 ###### Heading 6
 
-| head1        | head two          | three |
+| Mare         | Rating            | Additional info |
-| :----------- | :---------------- | :---- |
+| :----------- | :---------------- | :-------------- |
-| ok           | good swedish fish | nice  |
+| Fluttershy   | Best pone         | Shy             |
-| out of stock | good and plenty   | nice  |
+| Apple Jack   | Good pone         | Honest and nice |
-| ok           | good `oreos`      | hmm   |
+| Pinke Pie    | Fun pone          | Party Horn!     |
-| ok           | good `zoute` drop | yumm  |
+| Twilight     | Decent pone       | Neeerd          |
-
+| Rainbow Dash | Annoying pone     | Looks badass    |
-## There's a horizontal rule below this.
+| Rarity       | Mixed pone        | Sometimes nice  |
-
----
-
-## Here is an unordered list:
 
 - 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

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);
+		float: inline-end;
-		position: absolute;
-		top: 0.5rem;
-		right: 0.5rem;
-		backdrop-filter: var(--blur);
 		transition: var(--transition);
 		cursor: pointer;
-		box-shadow: var(--edge-highlight);
 		border: none;
-		border-radius: 50%;
+		border-radius: var(--rounded-corner-small);
-		background-color: var(--fg-muted-1);
+		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);
 

templates/article.html

@@ -17,7 +17,7 @@
 			<time datetime="{{ page.date | date(format=' %+') }}" pubdate>
 				{{- page.date | date(format=date_format, locale=date_locale) -}}
 			</time>
-			{%- if page.authors -%}
+			{%- if page.authors %}
 				<span>•</span>
 				<span>
 					{{ macros_translate::translate(key="author", default="Author", language_strings=language_strings) }}:

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