diff options
| -rw-r--r-- | packages/bun-landing/index.css | 40 | ||||
| -rw-r--r-- | packages/bun-landing/page.tsx | 98 |
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(); |