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>
This commit is contained in:
Artyom Bologov
2026-08-23 15:11:52 +02:00
committed by Gusted
parent 7d318e49cd
commit 0c22491ed8
+14 -5
View File
@@ -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>