aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGravatar Tropical <42101043+Tropix126@users.noreply.github.com> 2022-07-07 04:59:58 +0000
committerGravatar GitHub <noreply@github.com> 2022-07-07 04:59:58 +0000
commitc8d51cc05a26f2e4df8a0bf35d069daf97f075ce (patch)
tree65f60c5740562c82d12584d69f5b5001c9d14528
parentc99a9a6cb72da8cc0e27e65a5e0ae1c8637a1352 (diff)
downloadbun-c8d51cc05a26f2e4df8a0bf35d069daf97f075ce.tar.gz
bun-c8d51cc05a26f2e4df8a0bf35d069daf97f075ce.tar.zst
bun-c8d51cc05a26f2e4df8a0bf35d069daf97f075ce.zip
Improve link contrast, refactor tabbar
Diffstat
-rw-r--r--packages/bun-landing/index.css40
-rw-r--r--packages/bun-landing/page.tsx98
2 files changed, 67 insertions, 71 deletions
diff --git a/packages/bun-landing/index.css b/packages/bun-landing/index.css
index 3af3361b1..4a86f480b 100644
--- a/packages/bun-landing/index.css
+++ b/packages/bun-landing/index.css
@@ -299,36 +299,26 @@ header {
align-items: center;
width: min-content;
white-space: nowrap;
- list-style-type: none;
padding: 0;
}
.Tab {
width: min-content;
+ border: none;
+ background-color: transparent;
font-family: var(--monospace-font);
text-align: center;
- padding-bottom: 8px;
border-bottom: 1px solid #ccc;
cursor: pointer;
- padding: 0;
-}
-
-.TabButton {
- background: transparent;
- border: none;
- padding: 16px 16px;
+ padding: 16px;
color: inherit;
font-size: inherit;
- font-family: inherit;
- cursor: inherit;
}
-.TabButton[data-tab="react"]:hover,
-.Graphs--active-react .TabButton[data-tab="react"],
-.TabButton[data-tab="sqlite"]:hover,
-.Graphs--active-sqlite .TabButton[data-tab="sqlite"],
-.TabButton[data-tab="ffi"]:hover,
-.Graphs--active-ffi .TabButton[data-tab="ffi"] {
+.Tab:hover,
+.Graphs--active-react .Tab[data-tab="react"],
+.Graphs--active-sqlite .Tab[data-tab="sqlite"],
+.Graphs--active-ffi .Tab[data-tab="ffi"] {
border-bottom-color: aquamarine;
background-color: rgba(130, 216, 247, 0.1);
border-right-color: aquamarine;
@@ -565,16 +555,12 @@ header {
background-color: var(--background);
border-radius: 8px;
padding: 3px 8px;
- color: white;
+ color: black;
text-decoration: none !important;
display: inline-block;
font-family: var(--monospace-font) !important;
}
-.Tag:visited {
- color: white;
-}
-
.mono {
font-family: var(--monospace-font);
}
@@ -598,7 +584,6 @@ header {
.Tag--WebAPI {
--background: #29b6f6;
- color: white;
box-shadow: inset -1px -1px 3px rgb(231, 187, 73);
}
@@ -608,6 +593,7 @@ header {
.Tag--TypeScript {
--background: rgb(69, 119, 192);
+ color: white;
}
.Tag--React {
@@ -831,9 +817,6 @@ li {
gap: 2rem;
}
- .Tabs {
- }
-
.tagline,
.subtitle,
.BarGraph-heading,
@@ -874,11 +857,6 @@ li {
border-bottom-color: #333;
}
- .TabButton {
- padding-top: 16px;
- padding-bottom: 16px;
- }
-
#pitch-content {
max-width: 100%;
}
diff --git a/packages/bun-landing/page.tsx b/packages/bun-landing/page.tsx
index 9f160de35..6de5dd71b 100644
--- a/packages/bun-landing/page.tsx
+++ b/packages/bun-landing/page.tsx
@@ -211,7 +211,7 @@ const Group = ({ children, ...props }) => (
);
export default ({ inlineCSS }) => (
- <html>
+ <html lang="en">
<head>
<meta charSet="UTF-8" />
@@ -254,24 +254,26 @@ export default ({ inlineCSS }) => (
</a>
<nav className="Navigation">
- <li>
- <a className="NavText" href={DOCS}>
- Docs
- </a>
- </li>
- <li>
- <a className="NavText" href="https://bun.sh/discord">
- Discord
- </a>
- </li>
- <li>
- <a
- className="NavText"
- href="https://github.com/Jarred-Sumner/bun"
- >
- GitHub
- </a>
- </li>
+ <ul>
+ <li>
+ <a className="NavText" href={DOCS}>
+ Docs
+ </a>
+ </li>
+ <li>
+ <a className="NavText" href="https://bun.sh/discord">
+ Discord
+ </a>
+ </li>
+ <li>
+ <a
+ className="NavText"
+ href="https://github.com/Jarred-Sumner/bun"
+ >
+ GitHub
+ </a>
+ </li>
+ </ul>
</nav>
</header>
</div>
@@ -291,23 +293,39 @@ export default ({ inlineCSS }) => (
</div>
<div className="Graphs Graphs--active-react">
- <ul className="Tabs" role="tablist">
- <li className="Tab">
- <button data-tab="react" id="tab-react" aria-controls="react-tab-content" className="TabButton" role="tab" aria-selected tabIndex={0}>
- Bun.serve
- </button>
- </li>
- <li className="Tab">
- <button data-tab="sqlite" id="tab-sqlite" aria-controls="sqlite-tab-content" className="TabButton" role="tab" tabIndex={-1}>
- bun:sqlite
- </button>
- </li>
- <li className="Tab">
- <button data-tab="ffi" id="tab-ffi" aria-controls="ffi-tab-content" className="TabButton" role="tab" tabIndex={-1}>
- bun:ffi
- </button>
- </li>
- </ul>
+ <div className="Tabs" role="tablist">
+ <button
+ data-tab="react"
+ id="tab-react"
+ aria-controls="react-tab-content"
+ className="Tab"
+ role="tab"
+ aria-selected
+ tabIndex={0}
+ >
+ Bun.serve
+ </button>
+ <button
+ data-tab="sqlite"
+ id="tab-sqlite"
+ aria-controls="sqlite-tab-content"
+ className="Tab"
+ role="tab"
+ tabIndex={-1}
+ >
+ bun:sqlite
+ </button>
+ <button
+ data-tab="ffi"
+ id="tab-ffi"
+ aria-controls="ffi-tab-content"
+ className="Tab"
+ role="tab"
+ tabIndex={-1}
+ >
+ bun:ffi
+ </button>
+ </div>
<div id="active-tab" className="ActiveTab">
<div role="tabpanel" tabIndex={0} id="react-tab-content" aria-labelledby="tab-react" className="BarGraph BarGraph--react BarGraph--horizontal BarGraph--dark">
<h2 className="BarGraph-heading">
@@ -731,10 +749,10 @@ export default {
<script
dangerouslySetInnerHTML={{
__html: `
-[...document.querySelectorAll(".TabButton")].map(el => {
+[...document.querySelectorAll(".Tab")].map(el => {
el.addEventListener("click", function(e) {
var tab = e.srcElement.getAttribute("data-tab");
- [...document.querySelectorAll(".TabButton")].map(el => {
+ [...document.querySelectorAll(".Tab")].map(el => {
var active = el.getAttribute("data-tab") === tab;
el.setAttribute("tabindex", active ? 0 : -1);
el.setAttribute("aria-selected", active);
@@ -747,8 +765,8 @@ export default {
});
el.addEventListener("keydown", e => {
- var tabs = [...document.querySelectorAll(".TabButton")];
- var activeTabEl = document.querySelector(".TabButton[aria-selected='true']");
+ var tabs = [...document.querySelectorAll(".Tab")];
+ var activeTabEl = document.querySelector(".Tab[aria-selected='true']");
var activeTabIndex = tabs.indexOf(activeTabEl);
if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
e.preventDefault();
generated by cgit v1.2.3 (git 2.46.0) at 2025-10-11 06:11:25 +0000