mirror of
https://codeberg.org/Codeberg/pages-server.git
synced 2026-10-01 13:25:33 +00:00
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:
+14
-5
@@ -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 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>
|
||||
|
||||
Reference in New Issue
Block a user