diff --git a/www/wip_new_website/main.roc b/www/wip_new_website/main.roc index f0bf390b64b..aedbe3aaa58 100644 --- a/www/wip_new_website/main.roc +++ b/www/wip_new_website/main.roc @@ -2,7 +2,7 @@ app "roc-website" packages { pf: "../../examples/static-site-gen/platform/main.roc" } imports [ pf.Html.{ Node, html, head, body, header, footer, div, span, main, text, nav, a, link, meta, script }, - pf.Html.Attributes.{ attribute, content, name, id, href, rel, lang, class, title, charset, color, ariaLabel, ariaHidden, type, role }, + pf.Html.Attributes.{ attribute, content, name, id, href, rel, lang, class, title, charset, color, ariaLabel, ariaHidden, type }, InteractiveExample, ] provides [transformFileContent] to pf @@ -111,16 +111,12 @@ viewNavbar = \page -> nav [ariaLabel "primary"] [ a homeLinkAttrs [rocLogo, span [class "home-link-text"] [text "Roc"]], div [id "top-bar-links"] [ - span [class "inline-block", role "presentation"] [ - a [href "/wip/tutorial"] [text "tutorial"], - a [href "/wip/install"] [text "install"], - a [href "/wip/examples"] [text "examples"], - ], - span [class "inline-block", role "presentation"] [ - a [href "/wip/community"] [text "community"], - a [href "/wip/docs"] [text "docs"], - a [href "/wip/donate"] [text "donate"], - ], + a [href "/wip/tutorial"] [text "tutorial"], + a [href "/wip/install"] [text "install"], + a [href "/wip/examples"] [text "examples"], + a [href "/wip/community"] [text "community"], + a [href "/wip/docs"] [text "docs"], + a [href "/wip/donate"] [text "donate"], ], ], ] diff --git a/www/wip_new_website/static/site.css b/www/wip_new_website/static/site.css index 1647e2228f0..edd5e583044 100644 --- a/www/wip_new_website/static/site.css +++ b/www/wip_new_website/static/site.css @@ -71,9 +71,6 @@ footer { margin: 0 auto; } -.inline-block { - display: inline-block; -} hr { color: var(--primary-1); @@ -220,6 +217,10 @@ h2 { margin-top: 60px; /* On the homepage, these need to be spaced out more. */ } +#homepage-main #nav-home-link { + visibility: hidden; +} + h2 a { color: var(--heading-color); } @@ -257,13 +258,11 @@ h3 { padding: 4px; } -#homepage-main #nav-home-link { - visibility: hidden; -} - .home-link-text { padding: 8px; font-size: 24px; + position: relative; + top: -0.6rem; } .home-examples-title { @@ -520,6 +519,10 @@ li { top: -28px; } + #homepage-main #nav-home-link { + display: none; + } + #sponsor-logos { padding: 4px; } @@ -646,6 +649,26 @@ li { font-size: 2rem !important; } + #top-bar-links { + width: 100%; + display: grid; + grid-template-columns: 1fr 1fr 1fr; /* Three equal-width columns */ + grid-template-rows: auto auto; /* Two rows */ + } + + /* Left-align the first link in each row, right-align the last one, and center the middle one. */ + #top-bar-links > :nth-child(3n+1) { + text-align: left; + } + + #top-bar-links > :nth-child(3n+2) { + text-align: center; + } + + #top-bar-links > :nth-child(3n+3) { + text-align: right; + } + #top-bar-links a, #top-bar-links label { font-size: 1.2rem;