Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

scoped style #97

Merged
merged 1 commit into from
Dec 8, 2024
+89 −88
Merged

scoped style #97

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Loading
Loading status checks…
scoped style
@gkorland
gkorland committed Dec 8, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode
commit 4754d018344aff7b70264cb52f89d1f1e14e9f24
177 changes: 89 additions & 88 deletions _includes/code_tabs.html
View file
Original file line number Diff line number Diff line change
@@ -1,98 +1,99 @@
<style>
.tabs input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}

.tabs label {
display: inline-block;
padding: 10px;
cursor: pointer;
}

.tabs label:hover {
background: #31343f;
}

.tabs input[type="radio"]:checked+label {
background: #31343f;
border-bottom: 1px solid transparent;
}

.tabs .tab-content {
background: #31343f;
padding: 10px;
}

.tabs .tab-content pre {
margin: 0;
overflow-x: auto;
}

.tabs .tab-content code {
display: block;
white-space: pre;
}

.tabs input[type="radio"]:nth-of-type(1):checked~.tab-content:nth-of-type(1),
.tabs input[type="radio"]:nth-of-type(2):checked~.tab-content:nth-of-type(2),
.tabs input[type="radio"]:nth-of-type(3):checked~.tab-content:nth-of-type(3),
.tabs input[type="radio"]:nth-of-type(4):checked~.tab-content:nth-of-type(4),
.tabs input[type="radio"]:nth-of-type(5):checked~.tab-content:nth-of-type(5),
.tabs input[type="radio"]:nth-of-type(6):checked~.tab-content:nth-of-type(6) {
display: block;
}

.tabs .tab-content {
display: none;
}

.code-container {
position: relative;
}

.copy-btn {
position: absolute;
top: 10px;
right: 10px;
padding: 5px 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
display: none;
}

.code-container:hover .copy-btn {
display: inline-block;
}

.copy-btn:hover {
background-color: #0056b3;
}
</style>

<div class="tabs">
{% assign codes = "python,javascript,cpp,rust,java,bash" | split: "," %}

{% for code_name in codes %}
{% if include[code_name] %}
<input type="radio" id="tab{{ include.id }}{{ forloop.index }}" name="tab" {% if forloop.first %}checked{% endif %}>
<label for="tab{{ include.id }}{{ forloop.index }}">{{ code_name }}</label>
{% endif %}
{% if include[code_name] %}
<input type="radio" id="tab{{ include.id }}{{ forloop.index }}" name="tab" {% if forloop.first %}checked{% endif %}>
<label for="tab{{ include.id }}{{ forloop.index }}">{{ code_name }}</label>
{% endif %}
{% endfor %}

{% for code_name in codes %}
{% if include[code_name] %}
<div class="tab-content">
<div class="code-container">
<button class="copy-btn"
onclick="navigator.clipboard.writeText(this.nextElementSibling.firstElementChild.innerText)">Copy</button>
<pre><code class="language-{{ code_name }}">{{ include[code_name] | escape }}</code></pre>
</div>
{% if include[code_name] %}
<div class="tab-content">
<div class="code-container">
<button class="copy-btn"
onclick="navigator.clipboard.writeText(this.nextElementSibling.firstElementChild.innerText)">Copy</button>
<pre><code class="language-{{ code_name }}">{{ include[code_name] | escape }}</code></pre>
</div>
{% endif %}
</div>
{% endif %}
{% endfor %}

<style scoped>
input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}

label {
display: inline-block;
padding: 10px;
cursor: pointer;
}

label:hover {
background: #31343f;
}

input[type="radio"]:checked+label {
background: #31343f;
border-bottom: 1px solid transparent;
}

.tab-content {
background: #31343f;
padding: 10px;
}

.tab-content pre {
margin: 0;
overflow-x: auto;
}

.tab-content code {
display: block;
white-space: pre;
}

input[type="radio"]:nth-of-type(1):checked~.tab-content:nth-of-type(1),
input[type="radio"]:nth-of-type(2):checked~.tab-content:nth-of-type(2),
input[type="radio"]:nth-of-type(3):checked~.tab-content:nth-of-type(3),
input[type="radio"]:nth-of-type(4):checked~.tab-content:nth-of-type(4),
input[type="radio"]:nth-of-type(5):checked~.tab-content:nth-of-type(5),
input[type="radio"]:nth-of-type(6):checked~.tab-content:nth-of-type(6) {
display: block;
}

.tab-content {
display: none;
}

.code-container {
position: relative;
}

.copy-btn {
position: absolute;
top: 10px;
right: 10px;
padding: 5px 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
display: none;
}

.code-container:hover .copy-btn {
display: inline-block;
}

.copy-btn:hover {
background-color: #0056b3;
}
</style>

</div>