$
diff --git a/package-lock.json b/package-lock.json
index 4eb24be..c85af3e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -812,7 +812,6 @@
"integrity": "sha512-zWW5KPngR/yvakJgGOmZ5vTBemDoSqF3AcV/LrO5u5wTWyEAVVh+IT39G4gtyAkh3CtTZs8aX/yRM82OfzHJRg==",
"dev": true,
"license": "MIT",
- "peer": true,
"dependencies": {
"undici-types": "~7.16.0"
}
@@ -911,7 +910,6 @@
"version": "4.0.3",
"dev": true,
"license": "MIT",
- "peer": true,
"engines": {
"node": ">=12"
},
diff --git a/src/docs.css b/src/docs.css
index 5f68921..57ffe74 100644
--- a/src/docs.css
+++ b/src/docs.css
@@ -24,16 +24,8 @@ body {
}
.container {
- max-width: 900px;
+ max-width: 700px;
margin: 0 auto;
- opacity: 0;
- animation: fadeIn 0.8s ease forwards;
-}
-
-@keyframes fadeIn {
- to {
- opacity: 1;
- }
}
.header {
@@ -71,19 +63,12 @@ h1 {
.command-box {
background-color: rgba(26, 26, 26, 0.8);
- border: 2px solid var(--green);
- border-radius: 8px;
+ border: 1px solid var(--green);
padding: 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
- box-shadow: 0 0 20px rgba(166, 227, 161, 0.1);
- transition: all 0.3s ease;
-}
-
-.command-box:hover {
- box-shadow: 0 0 30px rgba(166, 227, 161, 0.15);
}
.command-box code {
@@ -121,19 +106,6 @@ h1 {
.copy-btn.copied .check-icon {
display: block;
- animation: checkPop 0.3s ease;
-}
-
-@keyframes checkPop {
- 0% {
- transform: scale(0);
- }
- 50% {
- transform: scale(1.2);
- }
- 100% {
- transform: scale(1);
- }
}
.sections {
@@ -143,35 +115,6 @@ h1 {
}
.section {
- opacity: 0;
- animation: slideUp 0.6s ease forwards;
-}
-
-.section:nth-child(1) {
- animation-delay: 0.2s;
-}
-.section:nth-child(2) {
- animation-delay: 0.4s;
-}
-.section:nth-child(3) {
- animation-delay: 0.6s;
-}
-.section:nth-child(4) {
- animation-delay: 0.8s;
-}
-.section:nth-child(5) {
- animation-delay: 1s;
-}
-
-@keyframes slideUp {
- from {
- opacity: 0;
- transform: translateY(20px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
}
h2 {
@@ -179,14 +122,6 @@ h2 {
font-size: 1.5rem;
margin-bottom: 1.25rem;
font-weight: 600;
- display: flex;
- align-items: center;
- gap: 0.5rem;
-}
-
-h2::before {
- content: ">";
- color: var(--green);
}
p {
@@ -208,16 +143,7 @@ strong {
}
.breakdown-item {
- background-color: rgba(26, 26, 26, 0.5);
- border: 1px solid rgba(166, 227, 161, 0.2);
- border-radius: 8px;
- padding: 1.5rem;
- transition: all 0.3s ease;
-}
-
-.breakdown-item:hover {
- border-color: rgba(166, 227, 161, 0.4);
- background-color: rgba(26, 26, 26, 0.7);
+ padding: 1rem;
}
.breakdown-item h3 {
@@ -272,59 +198,23 @@ kbd {
}
.resource-card {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 1.25rem;
+ display: block;
+ padding: 0.85rem 1rem;
background-color: rgba(26, 26, 26, 0.5);
border: 1px solid rgba(166, 227, 161, 0.2);
- border-radius: 8px;
text-decoration: none;
color: var(--text);
- transition: all 0.3s ease;
- position: relative;
- overflow: hidden;
+ margin: 0.5rem 0;
+ transition: border-color 0.2s ease, background-color 0.2s ease;
}
.resource-card:hover {
- background-color: rgba(26, 26, 26, 0.7);
border-color: var(--green);
- transform: translateY(-2px);
- box-shadow: 0 4px 12px rgba(166, 227, 161, 0.1);
+ background-color: rgba(26, 26, 26, 0.7);
}
-.resource-content {
- display: flex;
- align-items: center;
- gap: 0.75rem;
-}
-
-.resource-content svg {
- color: var(--green);
-}
-
-.resource-content span {
- font-size: 0.95rem;
-}
-
-.external-icon,
-.arrow-icon {
- color: var(--subtext0);
- opacity: 0;
- transition: all 0.3s ease;
-}
-
-.resource-card:hover .external-icon,
-.resource-card:hover .arrow-icon {
- opacity: 1;
- color: var(--green);
-}
-
-.note {
- margin-top: 1rem;
- font-size: 0.8rem;
- text-align: center;
- color: rgba(166, 172, 200, 0.6);
+.resource-card span {
+ font-size: 0.9rem;
}
@media (max-width: 768px) {
diff --git a/src/main.ts b/src/main.ts
index 921d118..d248ad0 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,59 +1,5 @@
import './style.css';
-// Matrix rain effect
-const canvas = document.getElementById('matrix') as HTMLCanvasElement;
-const ctx = canvas.getContext('2d')!;
-
-canvas.width = window.innerWidth;
-canvas.height = window.innerHeight;
-
-const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$%^&*()_+-=[]{}|;:,.<>?/~`';
-const fontSize = 14;
-const columns = canvas.width / fontSize;
-const drops: number[] = Array(Math.floor(columns)).fill(1);
-
-let mouseX = canvas.width / 2;
-let mouseY = canvas.height / 2;
-
-function draw() {
- ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
- ctx.fillRect(0, 0, canvas.width, canvas.height);
-
- ctx.font = `${fontSize}px monospace`;
-
- for (let i = 0; i < drops.length; i++) {
- const x = i * fontSize;
- const y = drops[i] * fontSize;
- const dist = Math.sqrt((x - mouseX) ** 2 + (y - mouseY) ** 2);
-
- const text = chars[Math.floor(Math.random() * chars.length)];
-
- // Only show characters near cursor
- const alpha = Math.max(0, 1 - dist / 250);
-
- if (alpha > 0.1) {
- const color = dist < 120 ? '#a6e3a1' : dist < 200 ? '#89b4fa' : '#6c7086';
- ctx.fillStyle = color + Math.floor(alpha * 255).toString(16).padStart(2, '0');
- ctx.fillText(text, x, y);
- }
-
- if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) drops[i] = 0;
- drops[i]++;
- }
-}
-
-setInterval(draw, 33);
-
-window.addEventListener('mousemove', (e) => {
- mouseX = e.clientX;
- mouseY = e.clientY;
-});
-
-window.addEventListener('resize', () => {
- canvas.width = window.innerWidth;
- canvas.height = window.innerHeight;
-});
-
// Copy functionality
const commandBox = document.getElementById('commandBox') as HTMLDivElement;
const copyBtn = document.getElementById('copyBtn') as HTMLButtonElement;
diff --git a/src/style.css b/src/style.css
index 22e8e07..c001c30 100644
--- a/src/style.css
+++ b/src/style.css
@@ -33,34 +33,16 @@ body {
position: relative;
}
-#matrix {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 0;
-}
-
.container {
width: 100%;
- max-width: 800px;
+ max-width: 600px;
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
- gap: 2.5rem;
- opacity: 0;
- transform: translateY(30px);
- animation: fadeInUp 0.6s ease forwards;
-}
-
-@keyframes fadeInUp {
- to {
- opacity: 1;
- transform: translateY(0);
- }
+ gap: 3rem;
+ padding: 2rem;
}
.terminal-header {
@@ -95,30 +77,19 @@ body {
.command-box {
background-color: rgba(0, 0, 0, 0.85);
- backdrop-filter: blur(12px);
- border: 2px solid #a6e3a1;
- border-radius: 8px;
- padding: 1.5rem 4rem 1.5rem 1.75rem;
- font-size: 1.1rem;
+ border: 1px solid #a6e3a1;
+ padding: 1.5rem 2.5rem;
+ font-size: 1.4rem;
color: var(--text);
display: flex;
align-items: center;
gap: 0.75rem;
- transition: all 0.3s ease;
cursor: pointer;
user-select: none;
- box-shadow: 0 0 20px rgba(166, 227, 161, 0.15);
}
.command-box:hover {
- background-color: rgba(0, 0, 0, 0.9);
border-color: #a6e3a1;
- box-shadow: 0 0 30px rgba(166, 227, 161, 0.25);
- transform: translateY(-2px);
-}
-
-.command-box:active {
- transform: translateY(-2px) scale(0.98);
}
.dollar {
@@ -142,21 +113,15 @@ body {
border: none;
color: var(--subtext0);
cursor: pointer;
- padding: 0.5rem;
+ padding: 0.25rem 0.5rem;
display: flex;
align-items: center;
justify-content: center;
- transition: all 0.2s ease;
- border-radius: 4px;
+ transition: color 0.2s ease;
}
.copy-btn:hover {
color: var(--green);
- background-color: var(--surface1);
-}
-
-.copy-btn:active {
- transform: translateY(-50%) scale(0.9);
}
.copy-btn.copied {
@@ -170,13 +135,13 @@ body {
.tooltip {
position: absolute;
- top: -2.5rem;
+ top: -2rem;
right: 0;
background-color: var(--surface1);
color: var(--green);
- padding: 0.5rem 0.75rem;
+ padding: 0.35rem 0.6rem;
border-radius: 4px;
- font-size: 0.75rem;
+ font-size: 0.7rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
@@ -192,73 +157,31 @@ body {
padding: 1.5rem;
}
- .terminal-header {
- margin-bottom: 2rem;
- }
-
.command-box {
- font-size: 0.9rem;
- padding: 1.1rem 3rem 1.1rem 1.25rem;
- }
-
- .terminal-line {
- font-size: 0.85rem;
+ font-size: 1.1rem;
+ padding: 1.25rem 1.75rem;
}
.copy-btn svg {
- width: 18px;
- height: 18px;
+ width: 16px;
+ height: 16px;
}
}
.docs-link {
color: var(--subtext0);
text-decoration: none;
- font-size: 0.9rem;
+ font-size: 0.85rem;
opacity: 0;
- transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+ transition: opacity 0.4s ease;
position: relative;
padding: 0.5rem 1rem;
- border: 1px solid transparent;
- border-radius: 6px;
- transform: translateY(10px);
-}
-
-.docs-link::before {
- content: "";
- position: absolute;
- bottom: 0;
- left: 50%;
- width: 0;
- height: 1px;
- background: linear-gradient(90deg, transparent, var(--green), transparent);
- transition: all 0.4s ease;
- transform: translateX(-50%);
}
.docs-link:hover {
color: var(--green);
- border-color: rgba(166, 227, 161, 0.2);
- background-color: rgba(166, 227, 161, 0.05);
- transform: translateY(-2px);
-}
-
-.docs-link:hover::before {
- width: 100%;
}
.docs-link.show {
opacity: 1;
- transform: translateY(0);
- animation: pulse 2s ease-in-out 0.5s;
-}
-
-@keyframes pulse {
- 0%,
- 100% {
- box-shadow: 0 0 0 0 rgba(166, 227, 161, 0.4);
- }
- 50% {
- box-shadow: 0 0 0 8px rgba(166, 227, 161, 0);
- }
}