Skip to content

Commit 35da8a9

Browse files
TMHSDigitalTMHSDigital
committed
feat: visual polish - logo, accent glow, light/dark mode, animations, rich footer
Made-with: Cursor
1 parent 69c7d34 commit 35da8a9

File tree

1 file changed

+140
-13
lines changed

1 file changed

+140
-13
lines changed

‎docs/index.html‎

Lines changed: 140 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@
1010
<meta property="og:type" content="website" />
1111
<meta property="og:image" content="assets/logo.png" />
1212
<link rel="icon" href="assets/logo.png" />
13+
<script>
14+
(function(){var t=localStorage.getItem('theme');if(t==='light')document.documentElement.setAttribute('data-theme','light');else if(t==='dark')document.documentElement.setAttribute('data-theme','dark');})();
15+
</script>
1316
<style>
1417
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/inter-regular.woff2') format('woff2'); }
1518
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/inter-medium.woff2') format('woff2'); }
@@ -27,30 +30,64 @@
2730
--border: #30363d;
2831
--text: #e6edf3;
2932
--text-dim: #8b949e;
33+
--nav-bg: rgba(13,17,23,0.85);
3034
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
3135
--font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
3236
--hero-from: #0d1117;
3337
--hero-to: #1a1230;
3438
}
3539

40+
/* LIGHT THEME (OS preference, no explicit data-theme) */
41+
@media (prefers-color-scheme: light) {
42+
html:not([data-theme="dark"]) {
43+
--bg: #f6f8fa; --bg2: #ffffff; --bg3: #f0f2f5;
44+
--border: #d0d7de; --text: #1f2328; --text-dim: #656d76;
45+
--nav-bg: rgba(255,255,255,0.88);
46+
--hero-from: #f0f2f5; --hero-to: #f6f8fa;
47+
}
48+
html:not([data-theme="dark"]) a { color: var(--accent); }
49+
html:not([data-theme="dark"]) a:hover { color: var(--accent-light); }
50+
html:not([data-theme="dark"]) .hero h1 { background: linear-gradient(135deg, var(--text), var(--accent)); -webkit-background-clip: text; background-clip: text; }
51+
html:not([data-theme="dark"]) .data-table tr:hover td { background: rgba(0,0,0,0.03); }
52+
html:not([data-theme="dark"]) .search-input { background: var(--bg3); }
53+
html:not([data-theme="dark"]) .install-steps code { background: var(--bg3); }
54+
}
55+
/* LIGHT THEME (explicit toggle) */
56+
[data-theme="light"] {
57+
--bg: #f6f8fa; --bg2: #ffffff; --bg3: #f0f2f5;
58+
--border: #d0d7de; --text: #1f2328; --text-dim: #656d76;
59+
--nav-bg: rgba(255,255,255,0.88);
60+
--hero-from: #f0f2f5; --hero-to: #f6f8fa;
61+
}
62+
[data-theme="light"] a { color: var(--accent); }
63+
[data-theme="light"] a:hover { color: var(--accent-light); }
64+
[data-theme="light"] .hero h1 { background: linear-gradient(135deg, var(--text), var(--accent)); -webkit-background-clip: text; background-clip: text; }
65+
[data-theme="light"] .data-table tr:hover td { background: rgba(0,0,0,0.03); }
66+
[data-theme="light"] .search-input { background: var(--bg3); }
67+
[data-theme="light"] .install-steps code { background: var(--bg3); }
68+
3669
html { scroll-behavior: smooth; }
3770
body { font-family: var(--font-sans); background: var(--bg); color: var(--text); line-height: 1.6; min-height: 100vh; }
3871
a { color: var(--accent-light); text-decoration: none; transition: color 0.2s; }
3972
a:hover { color: #fff; }
4073

4174
/* NAV */
42-
.nav { position: sticky; top: 0; z-index: 100; background: rgba(13,17,23,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); padding: 0 1.5rem; }
75+
.nav { position: sticky; top: 0; z-index: 100; background: var(--nav-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); padding: 0 1.5rem; }
4376
.nav-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 56px; }
4477
.nav-brand { font-weight: 700; font-size: 1rem; color: var(--text); white-space: nowrap; }
45-
.nav-links { display: flex; gap: 1.5rem; list-style: none; }
78+
.nav-links { display: flex; gap: 1.5rem; list-style: none; align-items: center; }
4679
.nav-links a { color: var(--text-dim); font-size: 0.875rem; font-weight: 500; transition: color 0.2s; }
4780
.nav-links a:hover, .nav-links a.active { color: var(--accent-light); }
4881
.nav-toggle { display: none; background: none; border: none; color: var(--text); cursor: pointer; padding: 0.5rem; }
4982
.nav-toggle svg { width: 24px; height: 24px; }
83+
.theme-toggle { background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--text-dim); cursor: pointer; padding: 0.25rem 0.5rem; font-size: 0.8125rem; transition: color 0.2s, border-color 0.2s; display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-sans); }
84+
.theme-toggle:hover { color: var(--accent-light); border-color: var(--accent); }
85+
.theme-toggle svg { width: 14px; height: 14px; }
5086

5187
/* HERO */
52-
.hero { text-align: center; padding: 5rem 1.5rem 4.5rem; background: linear-gradient(180deg, var(--hero-from) 0%, var(--hero-to) 70%, var(--bg) 100%); position: relative; }
88+
.hero { text-align: center; padding: 4rem 1.5rem 4.5rem; background: linear-gradient(180deg, var(--hero-from) 0%, var(--hero-to) 70%, var(--bg) 100%); position: relative; }
5389
.hero-inner { max-width: 720px; margin: 0 auto; }
90+
.hero-logo { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-bottom: 1.25rem; box-shadow: 0 4px 24px rgba(0,0,0,0.3); border: 2px solid var(--border); }
5491
.hero h1 { font-size: 2.75rem; font-weight: 700; margin-bottom: 1rem; background: linear-gradient(135deg, var(--text), var(--accent-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
5592
.hero p { font-size: 1.125rem; color: var(--text-dim); margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto; }
5693
.stats { display: flex; justify-content: center; gap: 2.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
@@ -66,7 +103,7 @@
66103
.content-area { max-width: 1040px; margin: 0 auto; padding: 2rem 1.5rem 0; }
67104

68105
/* SECTIONS */
69-
.section { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 1.75rem 2rem; margin-bottom: 1.25rem; }
106+
.section { background: var(--bg2); border: 1px solid var(--border); border-top: 2px solid var(--accent); border-radius: 12px; padding: 1.75rem 2rem; margin-bottom: 1.25rem; box-shadow: 0 -2px 20px color-mix(in srgb, var(--accent) 8%, transparent); }
70107
.section-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; padding-bottom: 0.625rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
71108
.section-header h2 { font-size: 1.25rem; font-weight: 700; margin: 0; }
72109
.count { font-size: 0.8125rem; font-weight: 500; color: var(--text-dim); background: var(--bg3); padding: 0.15rem 0.6rem; border-radius: 12px; }
@@ -92,7 +129,10 @@
92129
details.cat-group[open] > summary::before { transform: rotate(90deg); }
93130
details.cat-group > summary:hover { background: var(--bg3); }
94131
details.cat-group > summary .cat-count { font-weight: 400; color: var(--text-dim); font-size: 0.75rem; margin-left: auto; }
95-
details.cat-group > .cat-body { padding: 0.25rem 0 0.5rem; }
132+
details.cat-group > .cat-body { overflow: hidden; }
133+
134+
/* EXPAND ANIMATION */
135+
.cat-body-anim { transition: max-height 0.25s ease, opacity 0.2s ease; overflow: hidden; }
96136

97137
/* TABLE */
98138
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
@@ -122,12 +162,22 @@
122162
.back-to-top svg { width: 20px; height: 20px; }
123163

124164
/* FOOTER */
125-
footer { text-align: center; padding: 2.5rem 1.5rem; color: var(--text-dim); font-size: 0.8125rem; margin-top: 1rem; }
165+
footer { text-align: center; padding: 2rem 1.5rem 2.5rem; color: var(--text-dim); font-size: 0.8125rem; margin-top: 1rem; }
126166
footer a { color: var(--accent-light); }
167+
.footer-inner { max-width: 1040px; margin: 0 auto; }
168+
.footer-links { display: flex; justify-content: center; gap: 1.25rem; margin-bottom: 1rem; flex-wrap: wrap; }
169+
.footer-links a { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text-dim); transition: color 0.2s; }
170+
.footer-links a:hover { color: var(--accent-light); }
171+
.footer-links svg { width: 16px; height: 16px; }
172+
.footer-divider { width: 60px; height: 2px; background: var(--accent); margin: 0 auto 1rem; border-radius: 1px; opacity: 0.4; }
173+
.footer-meta { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.75rem; }
174+
.footer-meta span { opacity: 0.7; }
175+
.footer-directory { margin-top: 0.75rem; font-size: 0.6875rem; opacity: 0.5; }
127176

128177
/* RESPONSIVE */
129178
@media (max-width: 768px) {
130179
.hero h1 { font-size: 2rem; }
180+
.hero-logo { width: 64px; height: 64px; }
131181
.stats { gap: 1.25rem; }
132182
.stat-val { font-size: 1.5rem; }
133183
.nav-links { gap: 0.75rem; }
@@ -136,7 +186,7 @@
136186
}
137187
@media (max-width: 640px) {
138188
.nav-toggle { display: block; }
139-
.nav-links { display: none; position: absolute; top: 56px; left: 0; right: 0; flex-direction: column; background: rgba(13,17,23,0.97); border-bottom: 1px solid var(--border); padding: 1rem 1.5rem; gap: 0.75rem; }
189+
.nav-links { display: none; position: absolute; top: 56px; left: 0; right: 0; flex-direction: column; background: var(--nav-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); padding: 1rem 1.5rem; gap: 0.75rem; }
140190
.nav-links.open { display: flex; }
141191
.hero { padding: 3rem 1rem 2.5rem; }
142192
.hero h1 { font-size: 1.5rem; }
@@ -172,13 +222,19 @@
172222
<li><a href="#mcp-tools">MCP Tools</a></li>
173223
<li><a href="#install">Install</a></li>
174224
<li><a href="https://github.com/TMHSDigital/Monday-Cursor-Plugin">GitHub</a></li>
225+
<li>
226+
<button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
227+
<svg id="themeIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
228+
</button>
229+
</li>
175230
</ul>
176231
</div>
177232
</nav>
178233

179234
<!-- Hero -->
180235
<section class="hero">
181236
<div class="hero-inner">
237+
<img class="hero-logo" src="assets/logo.png" alt="Monday Developer Tools logo" />
182238
<h1>Monday Developer Tools</h1>
183239
<p>21 skills, 8 rules for Monday.com workflows in Cursor -- boards, items, sprints, docs, dashboards, and the full GraphQL API.</p>
184240
<div class="stats">
@@ -796,11 +852,30 @@ <h2>Installation</h2>
796852

797853
<!-- Footer -->
798854
<footer>
799-
<p>
800-
Built by <a href="https://github.com/TMHSDigital">TMHSDigital</a>
801-
&middot; CC-BY-NC-ND-4.0
802-
&middot; v0.1.0
803-
</p>
855+
<div class="footer-inner">
856+
<div class="footer-links">
857+
<a href="https://github.com/TMHSDigital/Monday-Cursor-Plugin">
858+
<svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
859+
GitHub
860+
</a>
861+
862+
<a href="https://tmhsdigital.github.io/Developer-Tools-Directory/">
863+
<svg viewBox="0 0 16 16" fill="currentColor"><path d="M1.5 1.75V13.5h13.05l.001-11.75H1.5zM0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v11.5A1.75 1.75 0 0114.25 15H1.75A1.75 1.75 0 010 13.25V1.75zM9.22 3.72a.75.75 0 000 1.06L10.69 6.25H6.75a.75.75 0 000 1.5h3.94l-1.47 1.47a.75.75 0 101.06 1.06l2.75-2.75a.75.75 0 000-1.06L10.28 3.72a.75.75 0 00-1.06 0z"/></svg>
864+
All Tools
865+
</a>
866+
</div>
867+
<div class="footer-divider"></div>
868+
<div class="footer-meta">
869+
<span>v0.1.0</span>
870+
<span>&middot;</span>
871+
<span>CC-BY-NC-ND-4.0</span>
872+
<span>&middot;</span>
873+
<span>Built 2026-04-08</span>
874+
</div>
875+
<div class="footer-directory">
876+
Part of <a href="https://tmhsdigital.github.io/Developer-Tools-Directory/">TMHSDigital Developer Tools</a>
877+
</div>
878+
</div>
804879
</footer>
805880

806881
<!-- Toast -->
@@ -824,6 +899,37 @@ <h2>Installation</h2>
824899
};
825900
})();
826901

902+
/* Theme toggle (dark / light / auto) */
903+
(function () {
904+
var btn = document.getElementById('themeToggle');
905+
var icon = document.getElementById('themeIcon');
906+
var sunSvg = '<circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>';
907+
var moonSvg = '<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>';
908+
var autoSvg = '<circle cx="12" cy="12" r="10"/><path d="M12 2a10 10 0 0 1 0 20V2z"/>';
909+
var states = ['dark', 'light', 'auto'];
910+
function getState() { return localStorage.getItem('theme') || 'auto'; }
911+
function apply(state) {
912+
if (state === 'light') { document.documentElement.setAttribute('data-theme', 'light'); }
913+
else if (state === 'dark') { document.documentElement.setAttribute('data-theme', 'dark'); }
914+
else { document.documentElement.removeAttribute('data-theme'); }
915+
if (state === 'auto') localStorage.removeItem('theme');
916+
else localStorage.setItem('theme', state);
917+
updateIcon(state);
918+
}
919+
function updateIcon(state) {
920+
if (state === 'light') icon.innerHTML = sunSvg;
921+
else if (state === 'dark') icon.innerHTML = moonSvg;
922+
else icon.innerHTML = autoSvg;
923+
btn.title = 'Theme: ' + state;
924+
}
925+
btn.addEventListener('click', function () {
926+
var cur = getState();
927+
var next = states[(states.indexOf(cur) + 1) % states.length];
928+
apply(next);
929+
});
930+
updateIcon(getState());
931+
})();
932+
827933
/* Animated stat counters */
828934
(function () {
829935
var prefersReduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
@@ -913,7 +1019,7 @@ <h2>Installation</h2>
9131019
});
9141020
})();
9151021

916-
/* Section collapse/expand toggles (Skills, Rules) */
1022+
/* Section collapse/expand toggles */
9171023
(function () {
9181024
document.querySelectorAll('.toggle-section').forEach(function (btn) {
9191025
var targetId = btn.getAttribute('data-target');
@@ -925,6 +1031,27 @@ <h2>Installation</h2>
9251031
});
9261032
})();
9271033

1034+
/* Smooth expand/collapse animation */
1035+
(function () {
1036+
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
1037+
document.querySelectorAll('details.cat-group').forEach(function (det) {
1038+
var body = det.querySelector('.cat-body');
1039+
if (!body) return;
1040+
det.addEventListener('toggle', function () {
1041+
if (det.open) {
1042+
body.style.maxHeight = '0';
1043+
body.style.opacity = '0';
1044+
body.classList.add('cat-body-anim');
1045+
requestAnimationFrame(function () {
1046+
body.style.maxHeight = body.scrollHeight + 'px';
1047+
body.style.opacity = '1';
1048+
});
1049+
setTimeout(function () { body.style.maxHeight = 'none'; body.classList.remove('cat-body-anim'); }, 260);
1050+
}
1051+
});
1052+
});
1053+
})();
1054+
9281055
/* Scroll spy */
9291056
(function () {
9301057
var links = document.querySelectorAll('.nav-links a[href^="#"]');

0 commit comments

Comments
 (0)