Skip to content

Tidy up HTML: remove unnecessary copies of side menu and use frameset properly #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
fpiesche wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Tidy up HTML: remove unnecessary copies of side menu and use frameset properly #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9beaa20
Tidy up HTML: remove unnecessary copies of side menu and make proper …
fpiesche Aug 1, 2025
46a7398
Rearrange OpenGraph properties for readability
fpiesche Aug 1, 2025
15d8fce
Rearrange OG headers on other pages too
fpiesche Aug 1, 2025
821ea91
Fix HTML issues and tidy up some more.
fpiesche Aug 2, 2025
40e8eeb
Add HTML and CSS linting workflow
fpiesche Aug 2, 2025
d5e2de2
Use a single `initPage` function and reinstate random selection color
fpiesche Aug 2, 2025
835befc
use single initCredits() function
fpiesche Aug 2, 2025
e889327
apply random selection colour to menu too
fpiesche Aug 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions .github/workflows/lint-html.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
name: reviewdog
on:
pull_request:

jobs:
stylelint:
name: CSS lint
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
- name: Install stylelint
run: npm install stylelint stylelint-config-recommended -D
- name: Lint CSS
uses: reviewdog/action-stylelint@dd2b435cc6a7c82705307a9dee740c9bbaa10411 # v1.30.2
with:
reporter: github-pr-review # Change reporter.
stylelint_input: '**/*.css'
- name: Lint HTML
uses: EPMatt/reviewdog-action-prettier@ea9650ff37c6cbb85d3d101ecd1c5215e7ba1b95 # latest main
with:
reporter: github-pr-review
1 change: 1 addition & 0 deletions .stylelintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{ "extends": ["stylelint-config-recommended"] }
60 changes: 29 additions & 31 deletions 404.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,33 @@
<!DOCTYPE html>
<html lang="en-US">
<html>
<body>
<title>.:| You are lost |:.</title>
<meta charset="utf-8">
<meta content="LibreQuake" property="og:title" />
<meta content="Free and open-source Quake" property="og:description" />
<head>
<title>.:| You are lost |:.</title>
<meta charset="utf-8">
<meta property="og:image" content="https://librequake.queer.sh/media/embed.png">
<meta content="#43B581" data-react-helmet="true" name="theme-color" />
<meta name="keywords" content="LibreQuake, quake, fps, open-source, open source, free, vanilla, 1990s, 90s, 1996">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="/style.css">
<script src="/script.js"></script>
<div id="header"><a href="https://github.com/MissLavender-LQ/LibreQuake" target="_parent"><img id="forkme" src="/media/forkme.png" alt="Banner that says 'Fork me on GitHub'." title="Banner that says 'Fork me on GitHub'."/></a></div>

<p><center><img src="/media/logo.png" alt="The banner for the website that says &#x22;LibreQuake&#x22; on behind a metal background." title="The banner for the website that says &#x22;LibreQuake&#x22; on behind a metal background."></center></p>
<p><center><img src="/media/flashingxmaslightborder.png" onmouseover="this.src=' /media/flashingxmaslightborder.gif '" onmouseout="this.src=' /media/flashingxmaslightborder.png '" alt="A GIF of Christmas fairy lights flashing on and off." title="A GIF of Christmas fairy lights flashing on and off."></center></p>

<hr>
<p>Oh dear!</p>
<p>Well, you know what this page means -- you're on a 404! Oh, the look on your face right now... priceless.</p>
<p>Click the button of shame to go back to the homepage: <a href="/" target="_parent">button of shame</a>!</p>
<meta property="og:title" content="LibreQuake">
<meta property="og:description" content="Free and open-source Quake">
<meta name="theme-color" content="#43B581" data-react-helmet="true">
<meta name="keywords" content="LibreQuake, quake, fps, open-source, open source, free, vanilla, 1990s, 90s, 1996">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="/style.css">
<script src="/script.js"></script>
</head>
<body onload="initPage()">
<div id="header"><a href="https://github.com/lavenderdotpet/LibreQuake" target="_parent"><img id="forkme" src="/media/forkme.png"
alt="Banner that says 'Fork me on GitHub'." title="Banner that says 'Fork me on GitHub'."></a></div>
<p class="centered"><img src="/media/logo.png" alt="The banner for the website that says &#x22;LibreQuake&#x22; on behind a metal background."
title="The banner for the website that says &#x22;LibreQuake&#x22; on behind a metal background."></p>
<p class="centered"><img src="/media/flashingxmaslightborder.png" onmouseover="this.src=' /media/flashingxmaslightborder.gif '"
onmouseout="this.src=' /media/flashingxmaslightborder.png '" alt="A GIF of Christmas fairy lights flashing on and off."
title="A GIF of Christmas fairy lights flashing on and off."></p>
<hr>
<p>Oh dear!</p>
<p>Well, you know what this page means -- you're on a 404! Oh, the look on your face right now... priceless.</p>
<p>Click the button of shame to go back to the homepage: <a href="/" target="_parent">button of shame</a>!</p>
<hr>

<p>LibreQuake is copyrighted 2019 - <script type="text/javascript">
var today = new Date()
var year = today.getFullYear()
document.write(year)
</script>, licensed under <a href="/copying.html" target="_parent">an open license</a>.</p>
<p><center><img src="/media/turtle.png" alt="A tiny little turtle!" title="A tiny little turtle!" onclick="playAudio('/media/squeak.mp3')">
<audio src="/media/squeak.mp3" id="audioElement"></audio></center></p>
<p></p>
</body>
</html>

<p>LibreQuake is copyrighted 2019 - <span class="currentYear"></span>, licensed under <a href="/copying.html" target="content">an open license</a>.</p>
<p class="centered"><img src="/media/turtle.png" alt="A tiny little turtle!" title="A tiny little turtle!" onclick="playAudio('/media/squeak.mp3')">
<audio src="/media/squeak.mp3" id="audioElement"></audio></p>
</body>
</html>
125 changes: 111 additions & 14 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,113 @@
<!DOCTYPE html>
<html lang="en-US">
<html>
<title>LibreQuake</title>
<meta charset="utf-8">
<meta content="LibreQuake" property="og:title" />
<meta content="Free and open-source Quake" property="og:description" />
<meta property="og:image" content="https://librequake.queer.sh/media/embed.png">
<meta content="#43B581" data-react-helmet="true" name="theme-color" />
<meta name="keywords" content="LibreQuake, quake, fps, open-source, open source, free, vanilla, 1990s, 90s, 1996">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<frameset cols="10%, 70%">
<frame src="side.html" />
<frame src="about2.html" />
</frameset>
</html>
<head>
<title>.:| About on LibreQuake |:.</title>
<meta charset="utf-8">
<meta property="og:image" content="https://librequake.queer.sh/media/embed.png">
<meta property="og:title" content="LibreQuake">
<meta property="og:description" content="Free and open-source Quake">
<meta name="theme-color" content="#43B581" data-react-helmet="true">
<meta name="keywords" content="LibreQuake, quake, fps, open-source, open source, free, vanilla, 1990s, 90s, 1996">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="style.css">
<script src="/script.js"></script>
</head>
<body onload="initPage()">
<div id="header"><a href="https://github.com/lavenderdotpet/LibreQuake" target="_parent"><img id="forkme" src="/media/forkme.png"
alt="Banner that says 'Fork me on GitHub'." title="Banner that says 'Fork me on GitHub'."></a></div>
<p class="centered"><img src="/media/logo.png" alt="The banner for the website that says &#x22;LibreQuake&#x22; on behind a metal background."
title="The banner for the website that says &#x22;LibreQuake&#x22; on behind a metal background."></p>
<hr>

<img class="float-right" src="media/librequake.png"
title="The LibreQuake mascot: The Restless, who is seen in bloody armor, a face mask that covers their face, and they have a large gun in their hands.." alt="The LibreQuake mascot: The Restless, who is seen in bloody armor, a face mask that covers their face, and they have a large gun in their hands."
width="321" height="334">

<h1 id="how-to-play">How to Play</h1>
<p>Since <em>LibreQuake</em> is only the game data, you will still need to download an engine. These are also often termed
“source ports” by the community. There are an overwhelming number of choices available, a lengthy list of which is available
on the <a href="https://quakewiki.org/wiki/Engines" target="_parent">Quake Wiki</a>.</p>
<p>One particularly recommended by the <em>LibreQuake</em> project is <a href="https://triptohell.info/moodles/qss" target="_parent">QuakeSpasmSpiked</a>.
This engine offers good support for single-player and the majority of mods created for both <em>Quake</em> and <em>LibreQuake</em>.
As of April 2020, there are no PAK packaged files, but the work in progress can be played by placing the
<span class="monospace">lq1</span> directory in the main directory of your engine, the same place as the original
<span class="monospace">id1</span> folder. Then start your engine with the command line option
<span class="monospace">+game lq1</span> just like any other mod. You can then start a new game or use the
<span class="monospace">map</span> command from the console to explore in progress maps.</p>

<h1 id="what-free-means">What “Free” Means</h1>
<p>When we speak of free content or software, we refer to the movement in which your freedom to use, copy, modify, and study a work
is not infringed. For example, you may freely use <em>LibreQuake</em> for any purpose you see fit, you may redistribute it
to anyone without needing to ask for permission, you may modify it (provided you keep the license intact, see
<a class="monospace" href="copying.html" target="content">COPYING</a>), and you may study it. You may read more
about free software at the <a href="http://www.gnu.org" target="_parent">GNU</a> and <a href="http://www.fsf.org"
target="_parent">Free Software Foundation</a> websites.</p>

<h1 id="contributing">Contributing to LibreQuake</h1>
<p>Contributions to <em>LibreQuake</em> are always welcome, however, there are a few guidelines that should be followed:</p>

<h2 id="intellectual-property">Intellectual property</h2>
<p>We know people hate legalese, but this is important. This applies to <strong>everything</strong> which is submitted.</p>
<p>You must be careful when basing on existing graphics or sounds. Most <em>Quake</em> projects are lax on reusing intellectual
property. There are many mods which contain modified <em>Quake</em> models, for example. However, due to the nature of this
project, we do not have the same liberty to rip as we please.</p>
<p>The general rules go as follows:</p>
<ol>
<li><p>You must have permission for everything you submit. If you make your own resources, do not base them on resources
from <em>Quake</em> or any other restricted work. If you take work from other places, please make sure that the work
is freely-licensed or that you obtain permission to include it in the <em>LibreQuake</em> project. They may not place
additional restrictions compared to the normal <em>LibreQuake</em> license.</p></li>
<li><p>Do not try to emulate <em>Quake</em> resources exactly. Where possible, put effort to make new versions look visibly
different from <em>Quake</em>. This is a tough call because our compatibility with <em>Quake</em> mods limits how far
we can deviate, but it is feasible.</p></li>
<li><p>Be especially careful of “free textures” (or “free sounds” or “free graphics”) sites. Although these would appear at
first to be okay to use, many are free for “non-commercial use only.” One of the things we want to be able to do is put
this in GNU/Linux distributions (which can be sold or developed commercially).</p></li>
</ol>

<h2 id="levels">Levels</h2>
<p>Not all levels for <em>LibreQuake</em> must be vanilla-compatible. Winquake/vanilla-compatible levels will have their own episode.</p>
<p>It is sensible to also heed the following guidelines:</p>
<ol>
<li><p>Make sure that skill levels are implemented, and that all multiplayer start points, both cooperative and deathmatch,
are present.</p></li>
<li><p>Try to make levels appropriately difficult for their position within the progression of the game. Also bear in mind that not
all players may be as skilled a player as you.</p></li>
<li><p>While unrestricted by limits, do not make excessively complicated scenes. It is desirable that <em>LibreQuake</em> levels
should be playable on low-powered hardware, such as phones and old computers.</p></li>
</ol>

<h2 id="submitting-your-work">Submitting your work</h2>
<p>The most common, and a fairly simple method, to submit your work is by posting it on the <a href="chat.html" target="_parent">LQ Discord</a>.</p>
<p>This allows a quick cycle of development and feedback.</p>
<p>An alternative to using the forum is to post your submission on the <a href="https://github.com/MissLav/LibreQuake/issues"
target="_parent">issue tracker</a>, which may also be peer-reviewed and provide a feedback cycle.</p>
<p>Unfortunately, the LibreQuake project cannot provide hosting space in the form of a webpage nor FTP, however, there are many free file
hosts to use when you need a location to upload files. Sites and services such as <a href="https://www.dropbox.com"
target="_parent">Dropbox</a> and <a href="https://mega.co.nz" target="_parent">Mega</a>, as well as others, are common and should
be simple to use.</p>

<p class="centered"><a href="screenshots.html" target="_parent"><img src="media/screenshot01.png"
title="Screenshot of the game showing the player looking at a radio, a few jars, and a TV set. They have a gun in their hand."
alt="Screenshot of the game showing the player looking at a radio, a few jars, and a TV set. They have a gun in their hand."
width="768" height="432"></a></p>

<h3 id="crediting-information">Crediting information</h3>
<p><em>LibreQuake</em> is made up of submissions from many people all over the globe. All of them, including <strong>you</strong>, deserve
credit! Please do not forget to provide your name and email when submitting resources.</p>

<h3 id="using-git">Using Git</h3>
<p>You can also commit on a clone of the <em>LibreQuake</em> repository, although this is a technical task and it is okay to let
other <em>LibreQuake</em> maintainers to do it instead: that is our normal mode of operation. However, pull requests are much
appreciated and you may submit them in any manner you wish, with GitHub's direct pull requests being the simplest, but by far
not the only means.</p>
<p><em>LibreQuake</em> uses the commit message style commonly seen in distributed version control systems, adopted by projects such
as Linux and Git. For an explanation of this style, see <a href="https://chris.beams.io/posts/git-commit" target="_parent">How
to Write a Git Commit Message</a>.</p>

<hr>
<p>LibreQuake is copyrighted 2019 - <span class="currentYear"></span>, licensed under <a href="copying.html" target="content">an open license</a>.</p>
<p class="centered"><img src="media/turtle.png" alt="A tiny little turtle!" title="A tiny little turtle!"
onclick="playAudio('media/squeak.mp3')"> <audio src="media/squeak.mp3" id="audioElement"></audio></p>
</body>
</html>
Loading