Display nav links in grid on mobile

roc-lang · Nov 16, 2023 · 2ffbc55 · 2ffbc55
1 parent 34774dc
commit 2ffbc55
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 18 deletions.
diff --git 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
@@ -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;