mirrors/bun.sh
1
0
Fork 0
mirror of https://github.com/oven-sh/bun synced 2026-02-09 10:28:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve link contrast, refactor tabbar

Browse Source
This commit is contained in:
Tropical
2022-07-07 04:59:58 +00:00
committed by GitHub
parent c99a9a6cb7
commit c8d51cc05a
2 changed files with 67 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
packages/bun-landing/index.css
View File

@@ -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%;
}

98
packages/bun-landing/page.tsx
View File

@@ -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();