Skip to content

Commit 54c5973

Browse files
web3dev1337web3dev1337
authored
Merge pull request #16 from web3dev1337/feature/readme-refresh
Feature/readme refresh
2 parents 6bcca1a + 3d4977d commit 54c5973

2 files changed

Lines changed: 59 additions & 55 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,8 @@ Uses [pixy.js](https://github.com/mebiusbox/pixy.js) by [mebiusbox](https://gith
100100

101101
Everything else (editor, layers, compositing, gradient mapping, PBR generation, 3D preview, 52 custom GLSL shaders, sprite sheets, showcase, material forge) is original ShaderBrew code.
102102

103+
See the full **[Credits Page](https://web3dev1337.github.io/shaderbrew/credits.html)** for detailed attribution of all Shadertoy shaders, GitHub libraries, and runtime dependencies.
104+
103105
## License
104106

105107
MIT — see [LICENSE](LICENSE) for details.

‎src/ui/top-nav.js‎

Lines changed: 57 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -32,46 +32,49 @@ function initTopNav() {
3232

3333
const style = document.createElement("style");
3434
style.textContent = `
35-
:root { --top-nav-height: 36px; }
35+
:root { --top-nav-height: 44px; }
3636
body.has-top-nav { padding-top: var(--top-nav-height); }
3737
#top-nav {
3838
position: fixed; top: 0; left: 0; right: 0; height: var(--top-nav-height);
39-
display: flex; align-items: center; gap: 10px; padding: 0 12px;
40-
background: rgba(5, 5, 10, 0.98);
41-
border-bottom: 1px solid #1f1f2f;
42-
font-family: monospace; font-size: 11px; color: #bbb; z-index: 10000;
43-
backdrop-filter: blur(8px);
39+
display: flex; align-items: center; gap: 6px; padding: 0 16px;
40+
background: linear-gradient(180deg, rgba(12, 12, 20, 0.99) 0%, rgba(8, 8, 14, 0.99) 100%);
41+
border-bottom: 1px solid #2a2a3f;
42+
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
43+
font-size: 13px; color: #ccc; z-index: 10000;
44+
backdrop-filter: blur(12px);
4445
overflow-x: auto;
4546
scrollbar-width: none;
4647
}
4748
#top-nav::-webkit-scrollbar { display: none; }
4849
#top-nav .nav-title {
49-
color: #e0e0ff; font-weight: 700; margin-right: 6px;
50-
letter-spacing: 0.15em; font-size: 14px; white-space: nowrap;
50+
color: #e0e0ff; font-weight: 700; margin-right: 10px;
51+
letter-spacing: 0.12em; font-size: 15px; white-space: nowrap;
52+
font-family: monospace;
5153
}
52-
#top-nav .nav-group {
53-
display: flex; align-items: center; gap: 4px; padding-right: 10px; margin-right: 2px;
54-
border-right: 1px solid #1a1a2a;
55-
}
56-
#top-nav .nav-group:last-of-type { border-right: none; }
57-
#top-nav .nav-group-label {
58-
font-size: 9px; color: #555; text-transform: uppercase; letter-spacing: 0.1em;
54+
#top-nav .nav-sep {
55+
width: 1px; height: 20px; background: #2a2a40; margin: 0 4px; flex-shrink: 0;
5956
}
6057
#top-nav a {
61-
color: #888; text-decoration: none; padding: 3px 7px;
62-
border: 1px solid transparent; border-radius: 3px; transition: all 0.15s;
63-
white-space: nowrap;
58+
color: #b0b0c0; text-decoration: none; padding: 6px 12px;
59+
border-radius: 6px; transition: all 0.15s;
60+
white-space: nowrap; font-weight: 500;
61+
}
62+
#top-nav a:hover { color: #fff; background: rgba(255,255,255,0.07); }
63+
#top-nav a.active {
64+
color: #fff; background: rgba(233, 69, 96, 0.15);
65+
box-shadow: inset 0 0 0 1px rgba(233, 69, 96, 0.4);
6466
}
65-
#top-nav a:hover { color: #ddd; border-color: #333; background: rgba(255,255,255,0.03); }
66-
#top-nav a.primary { border-color: #e94560; color: #e0e0ff; background: rgba(233, 69, 96, 0.08); }
67-
#top-nav a.active { color: #fff; border-color: #e94560; background: rgba(233, 69, 96, 0.12); }
68-
#top-nav .nav-group.active-group .nav-group-label { color: #e94560; }
6967
#top-nav .nav-spacer { flex: 1; }
70-
#top-nav .nav-credit {
71-
color: #444; font-size: 9px; white-space: nowrap;
72-
text-decoration: none; transition: color 0.15s;
68+
#top-nav .nav-right a { color: #8888aa; font-size: 12px; padding: 5px 10px; }
69+
#top-nav .nav-right a:hover { color: #ddd; background: rgba(255,255,255,0.05); }
70+
#site-footer {
71+
border-top: 1px solid #1a1a2e; padding: 18px 24px; margin-top: 40px;
72+
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
73+
font-family: 'Segoe UI', system-ui, sans-serif; font-size: 12px; color: #999;
7374
}
74-
#top-nav .nav-credit:hover { color: #888; }
75+
#site-footer a { color: #aaa; text-decoration: none; transition: color .15s; }
76+
#site-footer a:hover { color: #e0e0ff; }
77+
#site-footer .footer-credit { color: #999; }
7578
`;
7679
document.head.appendChild(style);
7780

@@ -86,55 +89,54 @@ function initTopNav() {
8689
const raw = window.location.pathname.split("/").pop() || "index.html";
8790
const path = raw === "index.html" ? "showcase.html" : raw;
8891

89-
for (const group of NAV_GROUPS) {
90-
const groupEl = document.createElement("div");
91-
groupEl.className = "nav-group";
92-
93-
const label = document.createElement("div");
94-
label.className = "nav-group-label";
95-
label.textContent = group.label;
96-
groupEl.appendChild(label);
97-
98-
let groupActive = false;
92+
for (let gi = 0; gi < NAV_GROUPS.length; gi++) {
93+
const group = NAV_GROUPS[gi];
94+
if (gi > 0) {
95+
const sep = document.createElement("div");
96+
sep.className = "nav-sep";
97+
nav.appendChild(sep);
98+
}
9999
for (const item of group.items) {
100100
const link = document.createElement("a");
101101
link.href = item.href;
102102
link.textContent = item.label;
103-
if (item.primary) link.classList.add("primary");
104-
if (path === item.href) {
105-
link.classList.add("active");
106-
groupActive = true;
107-
}
108-
groupEl.appendChild(link);
103+
if (path === item.href) link.classList.add("active");
104+
nav.appendChild(link);
109105
}
110-
if (groupActive) groupEl.classList.add("active-group");
111-
112-
nav.appendChild(groupEl);
113106
}
114107

115108
const spacer = document.createElement("div");
116109
spacer.className = "nav-spacer";
117110
nav.appendChild(spacer);
118111

112+
const rightGroup = document.createElement("div");
113+
rightGroup.className = "nav-right";
114+
rightGroup.style.cssText = "display:flex;align-items:center;gap:2px";
115+
116+
const creditsLink = document.createElement("a");
117+
creditsLink.href = "credits.html";
118+
creditsLink.textContent = "Credits";
119+
if (path === "credits.html") creditsLink.classList.add("active");
120+
rightGroup.appendChild(creditsLink);
121+
119122
const ghLink = document.createElement("a");
120-
ghLink.className = "nav-credit";
121123
ghLink.href = "https://github.com/web3dev1337/shaderbrew";
122124
ghLink.target = "_blank";
123-
ghLink.style.cssText = "color:#666;font-size:10px;margin-right:8px";
124125
ghLink.textContent = "GitHub";
125-
nav.appendChild(ghLink);
126+
rightGroup.appendChild(ghLink);
126127

127-
const creditsLink = document.createElement("a");
128-
creditsLink.className = "nav-credit";
129-
creditsLink.href = "credits.html";
130-
creditsLink.textContent = "Credits";
131-
creditsLink.style.cssText = "color:#666;font-size:10px";
132-
if (path === "credits.html") creditsLink.style.color = "#aaa";
133-
nav.appendChild(creditsLink);
128+
nav.appendChild(rightGroup);
134129

135130
if (!isEditor) document.body.classList.add("has-top-nav");
136131
document.body.appendChild(nav);
137132

133+
if (!isEditor && path !== "credits.html") {
134+
const footer = document.createElement("div");
135+
footer.id = "site-footer";
136+
footer.innerHTML = `<span class="footer-credit">Shader library: <a href="https://github.com/mebiusbox/pixy.js" target="_blank">pixy.js</a> by <a href="https://github.com/mebiusbox" target="_blank">mebiusbox</a> (MIT) · Includes <a href="credits.html">Shadertoy community shaders</a></span><span><a href="credits.html">Credits</a> · <a href="https://github.com/web3dev1337/shaderbrew" target="_blank">GitHub</a></span>`;
137+
document.body.appendChild(footer);
138+
}
139+
138140
if (isEditor) {
139141
const toolbar = document.getElementById("toolbar");
140142
if (toolbar) toolbar.style.top = "var(--top-nav-height)";

0 commit comments

Comments
 (0)