From 0c22491ed8298c393ae32c50272d72790f607884 Mon Sep 17 00:00:00 2001
From: Artyom Bologov <git@aartaka.me>
Date: Sun, 23 Aug 2026 15:11:52 +0200
Subject: [PATCH] Improve no-JS version of the landing to make it useable
 (#553)

Before this change, one could not even use links when on mobile with disabled JS. They (me) were stuck with a useless non-interactive dropdown.

This PR enables the Intro/Docs links for those without JS, and removes them for those with JS on smaller screens. In other words, the logic is fully preserved, but with no-JS friendliness!

Reviewed-on: https://codeberg.org/Codeberg/pages-server/pulls/553
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
---
 index.html | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index cdfa744..d63477c 100644
--- a/index.html
+++ b/index.html
@@ -73,10 +73,12 @@
     <!-- Navbar brand -->
     <a href="https://codeberg.page" class="navbar-brand" title="Codeberg Design">
       <img src="https://design.codeberg.org/logo-kit/icon_inverted.svg" alt="Codeberg">
-      Pages
+      <!-- Do not display when on narrower screen-->
+      <span class="d-none d-md-inline">Pages</span>
     </a>
     <!-- Navbar nav -->
-    <ul class="navbar-nav d-none d-md-flex"> <!-- d-none = display: none, d-md-flex = display: flex on medium screens and up (width > 768px) -->
+    <ul class="navbar-nav"> <!-- Display with no-JS or on wider screens,
+                                 do not display on JS + narrow screen (see the script at the bottom) -->
       <li class="nav-item active">
         <a href="" class="nav-link">Intro</a>
       </li>
@@ -156,7 +158,7 @@
                 Select <b>Forgejo</b> from the drop down list of webhook types.
               </p>
               <p>
-                Set the <b>Target URL</b> to the URL of your website. If you don’t have a custom domain, that’s <code class="code">https://USERNAME.codeberg.page/REPOSITORY</code>, replacing <code class="code">USERNAME</code> with your user or organization name and <code class="code">REPOSITORY</code> with the name of your repository.
+                Set the <b>Target URL</b> to the URL of your website. If you don’t have a custom domain, that’s <code class="code">https://<wbr>USERNAME.codeberg.page/<wbr>REPOSITORY</code>, replacing <code class="code">USERNAME</code> with your user or organization name and <code class="code">REPOSITORY</code> with the name of your repository.
                 (If your repository is called <code class="code">pages</code>, omit it.)
                 If you have a custom domain, remember to <a href="#dns-configuration">configure it with the instructions below</a>.
               </p>
@@ -173,7 +175,7 @@
                 Upload your files and you’re&nbsp;done!
               </h4>
               <p>
-                Push your static content, HTML, style, fonts, images or anything else. They will be accessible at <code class="code">https://USERNAME.codeberg.page[/REPOSITORY]</code>.
+                Push your static content, HTML, style, fonts, images or anything else. They will be accessible at <code class="code">https://<wbr>USERNAME.codeberg.page<wbr>[/REPOSITORY]</code>.
               </p>
               <!--<div class="codeberg-divider">or</div>
               <p>
@@ -204,7 +206,7 @@
           Add the record to the subdomain <code class=>_git-pages-repository</code> with the Git HTTPS clone URL of your repository:
         </p>
         <p>
-          <code class="code">TXT https://codeberg.org/<i>user</i>/<i>repo</i>.git</code>
+          <code class="code">TXT https://codeberg.org/<wbr><i>user</i>/<wbr><i>repo</i>.git</code>
         </p>
       </div>
     </div>
@@ -213,5 +215,12 @@
 </div>
 <!-- Page wrapper end -->
 
+<!-- Script to enable flexible display for navbar links when JS is on -->
+<script type="text/javascript">
+  // d-none d-md-flex
+  const navbar = document.querySelector('.navbar-nav')
+  navbar.classList.add('d-none', 'd-md-flex')
+</script>
+
 </body>
 </html>