Skip to content

Commit

Permalink
edited index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@plyght
plyght committed Nov 25, 2024
1 parent 1174693 commit cd9fa20
Showing 1 changed file with 183 additions and 2 deletions.
185 changes: 183 additions & 2 deletions matcha/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🍵</text></svg>">
<title>Matcha - An Earthy Minimal Terminal Theme</title>
<style>
/* Previous styles remain the same until code-block */
@font-face {
font-family: 'JetBrains Mono';
font-display: swap;
Expand Down Expand Up @@ -214,6 +215,141 @@
opacity: 1;
}

.install-details {
margin: 1rem 0;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 8px;
overflow: hidden;
}

.install-details summary {
padding: 1rem;
cursor: pointer;
position: relative;
list-style: none;
display: flex;
align-items: center;
gap: 0.5rem;
transition: background-color 0.3s ease;
}

.install-details summary:hover {
background-color: rgba(255, 255, 255, 0.05);
}

.install-details summary::before {
content: "❯";
color: var(--accent-secondary);
margin-right: 0.5rem;
transition: transform 0.3s ease;
display: inline-block;
}

.install-details[open] summary::before {
transform: rotate(90deg);
}

.install-content {
padding: 0;
max-height: 0;
opacity: 0;
transition: all 0.3s ease-in-out;
background-color: rgba(0, 0, 0, 0.1);
border-top: 1px solid rgba(255, 255, 255, 0.1);
overflow: hidden;
}

.install-details[open] .install-content {
padding: 1rem;
max-height: 500px;
opacity: 1;
}

.install-step {
margin-bottom: 1rem;
padding-left: 1.5rem;
position: relative;
opacity: 0;
transform: translateY(-10px);
transition: all 0.3s ease;
transition-delay: calc(var(--step-index) * 100ms);
}

.install-details[open] .install-step {
opacity: 1;
transform: translateY(0);
}

.install-step::before {
content: ">";
color: var(--accent-secondary);
position: absolute;
left: 0;
}

/* Updated code block styles with copy button */
.code-block {
background-color: rgba(0, 0, 0, 0.3);
padding: 0.75rem 1rem;
border-radius: 4px;
margin: 0.5rem 0;
border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}

.code-content {
flex: 1;
overflow-x: auto;
white-space: nowrap;
}

.copy-button {
background: var(--accent-primary);
border: none;
color: var(--text-primary);
padding: 0.5rem;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 0.5rem;
font-family: inherit;
font-size: 0.8rem;
opacity: 0.8;
flex-shrink: 0;
}

.copy-button:hover {
opacity: 1;
background: var(--accent-secondary);
}

.copy-button.copied {
background: var(--highlight);
color: var(--bg-primary);
}

.copy-button.copied .copy-icon {
animation: checkmark 0.4s ease-in-out;
}

@keyframes checkmark {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}

@media (max-width: 600px) {
.features {
grid-template-columns: 1fr;
Expand All @@ -237,7 +373,6 @@ <h1>
<span role="img" aria-label="matcha tea">🍵</span>
</h1>


<section class="features">
<article class="feature">
<h2>Earthy Palette</h2>
Expand All @@ -253,7 +388,31 @@ <h2>Minimal Design</h2>
</article>
</section>

<p class="terminal-line">Infuse your terminal with matcha.</p>
<details class="install-details">
<summary>Infuse your terminal with matcha</summary>
<div class="install-content">
<div class="install-step" style="--step-index: 1">
<strong>1. Install for Ghostty on MacOS:</strong>
<div class="code-block">
<code class="code-content">curl -L https://peril.lol/matcha/matcha -o /Applications/Ghostty.app/Contents/Resources/ghostty/themes/matcha</code>
<button class="copy-button" data-code="curl -L https://peril.lol/matcha/matcha -o /Applications/Ghostty.app/Contents/Resources/ghostty/themes/matcha">
<span class="copy-icon">📋</span>
<span class="copy-text">Copy</span>
</button>
</div>
<div class="install-step" style="--step-index: 2">
<strong>2. Apply the theme:</strong>
<p>Edit your Ghostty config file (usually at <code>~/.config/ghostty/ghostty</code>) and add the line:</p>
<div class="code-block">
<code class="code-content">theme = matcha</code>
<button class="copy-button" data-code="theme = matcha">
<span class="copy-icon">📋</span>
<span class="copy-text">Copy</span>
</button>
</div>
</div>
</div>
</details>

<a href="https://peril.lol/matcha/matcha" class="cta" aria-label="Download Matcha Theme">
Download Theme
Expand Down Expand Up @@ -291,6 +450,28 @@ <h2>Minimal Design</h2>
}, 1000);
});
});

// Copy button functionality
const copyButtons = document.querySelectorAll('.copy-button');
copyButtons.forEach(button => {
button.addEventListener('click', async () => {
const code = button.dataset.code;
await navigator.clipboard.writeText(code);

button.classList.add('copied');
const icon = button.querySelector('.copy-icon');
const text = button.querySelector('.copy-text');

icon.textContent = '✓';
text.textContent = 'Copied!';

setTimeout(() => {
button.classList.remove('copied');
icon.textContent = '📋';
text.textContent = 'Copy';
}, 2000);
});
});
});
</script>
</body>
Expand Down

0 comments on commit cd9fa20

Please sign in to comment.