the home site for me: also iteration 3 or 4 of my site

feat: fix code blocks when js is disabled

dunkirk.sh 9a5b42c4 776844d6

verified
Changed files
+115 -1
content
sass
+1 -1
content/verify.md
···
# keys
-
* SSH
+
> SSH
```ssh
ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABgQCzEEjvbL/ttqmYoDjxYQmDIq36BabROJoXgQKeh9liBxApwp+2PmgxROzTg42UrRc9pyrkq5kVfxG5hvkqCinhL1fMiowCSEs2L2/Cwi40g5ZU+QwdcwI8a4969kkI46PyB19RHkxg54OUORiIiso/WHGmqQsP+5wbV0+4riSnxwn/JXN4pmnE//stnyAyoiEZkPvBtwJjKb3Ni9n3eNLNs6gnaXrCtaygEZdebikr9kS2g9mM696HvIFgM6cdR/wZ7DcLbG3IdTXuHN7PC3xxL+Y4ek5iMreQIPmuvs4qslbthPGYoYbYLUQiRa9XO5s/ksIj5Z14f7anHE6cuTQVpvNWdGDOigyIVS5qU+4ZF7j+rifzOXVL48gmcAvw/uV68m5Wl/p0qsC/d8vI3GYwEsWG/EzpAlc07l8BU2LxWgN+d7uwBFaJV9VtmUDs5dcslsh8IbzmtC9gq3OLGjklxTfIl6qPiL8U33oc/UwqzvZUrI2BlbagvIZYy6rP+q0= me@dunkirk.sh
```
+42
sass/css/_copy-button.scss
···
border: none;
}
}
+
+
blockquote:not(.pre-container blockquote):has(+ pre) {
+
margin-bottom: 0;
+
background-color: var(--accent);
+
border-radius: 7px 7px 0 0;
+
padding: 0.25rem;
+
display: flex;
+
justify-content: space-between;
+
align-items: center;
+
+
p {
+
margin: 0;
+
padding: 0.25rem 0.75rem;
+
color: var(--purple-gray);
+
font-weight: bold;
+
line-height: 1;
+
}
+
}
+
+
pre.z-code:not(.pre-container):not(.pre-container pre) {
+
position: relative;
+
border-radius: 7px;
+
border: none;
+
background-color: var(--accent);
+
padding: 0.4em;
+
border-bottom: 5px solid var(--bg-light);
+
+
code {
+
border-radius: 0.3rem;
+
display: block;
+
overflow-x: auto;
+
padding: 1em;
+
background-color: var(--bg-light);
+
margin: 0;
+
border: none;
+
box-shadow: none;
+
}
+
}
+
+
blockquote:not(.pre-container blockquote) + pre.z-code {
+
border-radius: 0 7px 7px 7px;
+
}
+72
test-code-blocks.html
···
+
<!DOCTYPE html>
+
<html lang="en">
+
<head>
+
<meta charset="UTF-8">
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
<title>Code Block Test</title>
+
<link rel="stylesheet" href="sass/css/reset.css">
+
<link rel="stylesheet" href="sass/css/suCSS.css">
+
<link rel="stylesheet" href="sass/css/mods.css">
+
<link rel="stylesheet" href="sass/css/syntax-theme.css">
+
<link rel="stylesheet" href="sass/css/code-blocks.css">
+
<style>
+
body {
+
padding: 20px;
+
}
+
h1 {
+
margin-bottom: 30px;
+
}
+
.test-section {
+
margin-bottom: 40px;
+
}
+
</style>
+
</head>
+
<body>
+
<h1>Code Block Styling Test</h1>
+
+
<div class="test-section">
+
<h2>With JavaScript (Copy Button)</h2>
+
<blockquote>A comment about this code</blockquote>
+
<pre class="language-javascript" data-lang="javascript">
+
<code>// This is some JavaScript code
+
function sayHello() {
+
console.log("Hello, world!");
+
}
+
+
// Call the function
+
sayHello();</code></pre>
+
</div>
+
+
<div class="test-section">
+
<h2>Without JavaScript (No Copy Button)</h2>
+
<blockquote>A comment about this CSS</blockquote>
+
<pre class="language-css" data-lang="css">
+
<code>/* This is some CSS code */
+
.container {
+
display: flex;
+
flex-direction: column;
+
justify-content: center;
+
}
+
+
.item {
+
color: var(--accent);
+
margin: 10px;
+
}</code></pre>
+
</div>
+
+
<div class="test-section">
+
<h2>Regular Pre Tag (No Language)</h2>
+
<pre>
+
<code>This is a regular code block
+
with no language specified
+
and no copy button.</code></pre>
+
</div>
+
+
<div class="test-section">
+
<h2>Inline Code Example</h2>
+
<p>Here's some <code>inline code</code> that should be styled differently.</p>
+
</div>
+
+
<script src="static/js/copy-button.js"></script>
+
</body>
+
</html>