changed elements to meet web standards

This commit is contained in:
Emma Tebibyte 2022-09-19 21:00:56 -04:00
parent 6098087345
commit 53deef1edd
3 changed files with 88 additions and 91 deletions

View File

@ -52,10 +52,36 @@ code {
word-break: break-all; word-break: break-all;
} }
h1.full, h2.full, h3.full, h4.full, h5.full {
text-align: center;
}
main {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 0;
padding: 1em;
border-radius: 20px;
background: #171614;
box-shadow: 1.5em 1.5em 3.5em #131211, -1.5em -1.5em 3.5em #1b1a17;
}
p.full { p.full {
text-align: center; text-align: center;
} }
section {
margin: 1em;
flex-basis: 45%;
flex-grow: 1;
}
section.full {
margin: 1em;
flex-basis: 100%;
}
.back h5 { .back h5 {
color: #9d4e54; color: #9d4e54;
text-align: left; text-align: left;
@ -73,48 +99,10 @@ p.full {
background: #9d4e54; background: #9d4e54;
} }
.content {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 0;
padding: 1em;
border-radius: 20px;
background: #171614;
box-shadow: 1.5em 1.5em 3.5em #131211, -1.5em -1.5em 3.5em #1b1a17;
}
.favicon { .favicon {
max-width: 1em; max-width: 1em;
} }
.header {
word-break: normal;
}
.header-full {
text-align: center;
}
.section {
margin: 1em;
flex-basis: 45%;
flex-grow: 1;
}
.section-full {
margin: 1em;
flex-basis: 100%;
}
.subtitle {
}
.subtitle-full {
text-align: center
}
.warn { .warn {
margin: 0.5em 0; margin: 0.5em 0;
padding: 0.5em; padding: 0.5em;

View File

@ -14,11 +14,11 @@
<div class="back"> <div class="back">
<h5 class="pill"><a href="../">Return to my page</a></h5> <h5 class="pill"><a href="../">Return to my page</a></h5>
</div> </div>
<div class="content"> <main>
<div class="section-full"> <section class="full">
<h2 class="header-full"> <h1 class="full">
A Guide to Bettering Firefox A Guide to Bettering Firefox
</h2> </h1>
<p> <p>
Web browsers are kind of awful. They do too much Web browsers are kind of awful. They do too much
(<a href="https://web.archive.org/web/20220609080931/https://homepage.cs.uri.edu/~thenry/resources/unix_art/ch01s06.html">why (<a href="https://web.archive.org/web/20220609080931/https://homepage.cs.uri.edu/~thenry/resources/unix_art/ch01s06.html">why
@ -58,13 +58,13 @@
browser from being used to open remote content that has a MIME browser from being used to open remote content that has a MIME
type other than <code>text/html</code>. type other than <code>text/html</code>.
</p> </p>
</div> </section>
<div class="section-full"> <section class="full">
<h1 class="header" id="about-config"> <h2 id="about-config">
<a href="#about-config"> <a href="#about-config">
Modifications to <code class="header">about:config</code> Modifications to <code class="header">about:config</code>
</a> </a>
</h1> </h2>
<h4>Read more about <code>about:config</code> <h4>Read more about <code>about:config</code>
<a href="https://support.mozilla.org/en-US/kb/about-config-editor-firefox"> <a href="https://support.mozilla.org/en-US/kb/about-config-editor-firefox">
here</a>. here</a>.
@ -79,16 +79,16 @@
values blank. values blank.
</p> </p>
<h2 id="performance"> <h3 id="performance">
<a href="#performance">Performance</a> <a href="#performance">Performance</a>
</h2> </h3>
<ul> <ul>
<li><code>gfx.webrender.all = true</code></li> <li><code>gfx.webrender.all = true</code></li>
</ul> </ul>
<h2 id="features"> <h3 id="features">
<a href="#features">Disable or Enable Features</a> <a href="#features">Disable or Enable Features</a>
</h2> </h3>
<ul> <ul>
<li><code>widget.use-xdg-desktop-portal = true</code></li> <li><code>widget.use-xdg-desktop-portal = true</code></li>
<p>Allows Firefox to use KDE Plasma filechooser on <p>Allows Firefox to use KDE Plasma filechooser on

View File

@ -16,9 +16,11 @@
<a href="/">Return Home</a> <a href="/">Return Home</a>
</h5> </h5>
</div> </div>
<div class="content"> <main>
<div class="section-full"> <section class="full">
<h2 class="header-full">Hi! I'm Emma Tebibyte.</h2> <h1 class="full">
Hi! I'm Emma Tebibyte.
</h1>
<p id="pronouns"> <p id="pronouns">
(<a href="https://pronoun.is/fae" title="my pronouns"> (<a href="https://pronoun.is/fae" title="my pronouns">
fae/faer fae/faer
@ -48,17 +50,17 @@
comfortable and friendly environment sustained in the community comfortable and friendly environment sustained in the community
itself. itself.
<div class="warn"> <div class="warn">
<img class="sym" src="../assets/img/warn.svg" /> <img class="sym" src="assets/img/warn.svg" />
<p> <p>
Some of the links on this page lead to sites with Some of the links on this page lead to sites with
nonfree JavaScript. nonfree JavaScript.
</p> </p>
</div> </div>
</div> </section>
<div class="section"> <section>
<h3 class="header" id="contact"> <h2 id="contact">
<a href="#contact">Contact</a> <a href="#contact">Contact</a>
</h3> </h2>
<p> <p>
If you'd like to contact me, the best ways to do so are as If you'd like to contact me, the best ways to do so are as
follows, in order of preference: follows, in order of preference:
@ -86,12 +88,15 @@
the state of current free software alternatives is not the state of current free software alternatives is not
satisfactory. satisfactory.
</p> </p>
</div> </section>
<div class="section"> <section>
<h3 class="header" id="ideas"><a href="#ideas">Things Someone <h2 id="ideas">
Should Make</a></h3> <a href="#ideas">Things Someone Should Make</a>
<h4 class="subtitle">Or: the software I (probably) won't or can't </h2>
make but which I think would be good to have</h4> <h4>
Or: the software I (probably) won't or can't
make but which I think would be good to have
</h4>
<p> <p>
<ul> <ul>
<li>A fork of <li>A fork of
@ -126,25 +131,29 @@
</ul> </ul>
</li> </li>
<li>An Android app that uses the method <li>
<a href="https://auroraoss.com/">Aurora Store</a> uses An Android app that uses the method
to download Google Play Store APK files for Android and <a href="https://auroraoss.com/">Aurora Store</a> uses
the patches that the unofficial Minecraft Bedrock to download Google Play Store APK files for Android and
launcher for GNU/Linux and the MacOS uses to remove the patches that the unofficial Minecraft Bedrock
signature verification to keep Minecraft for Android launcher for GNU/Linux and the MacOS uses to remove
up-to-date and running on systems without Google Play signature verification to keep Minecraft for Android
Services.</li> up-to-date and running on systems without Google Play
Services.
</li>
<li>An Android SoundCloud client which uses the existing <li>
components from the An Android SoundCloud client which uses the existing
<a href="https://newpipe.net/">NewPipe</a> app.</li> components from the
<a href="https://newpipe.net/">NewPipe</a> app.
</li>
</ul> </ul>
</p> </p>
</div> </section>
<div class="section"> <section>
<h3 class="header" id="links"> <h2 class="header" id="links">
<a href="#links">Links</a> <a href="#links">Links</a>
</h3> </h2>
<p> <p>
Some useful links you might like to click on: Some useful links you might like to click on:
<ul> <ul>
@ -173,11 +182,11 @@
</li> </li>
</ul> </ul>
</p> </p>
</div> </section>
<div class="section"> <section>
<h3 class="header" id="reviews"> <h2 class="header" id="reviews">
<a href="#reviews">Reviews</a> <a href="#reviews">Reviews</a>
</h3> </h2>
<h4 class="subtitle"> <h4 class="subtitle">
Idea stolen from <a href="https://trinity.moe#praise"> Idea stolen from <a href="https://trinity.moe#praise">
Trinity's page</a>. Trinity's page</a>.
@ -192,12 +201,12 @@
[2022-02-22] @Nyann</a>: Emma Tebibyte gives me the [2022-02-22] @Nyann</a>: Emma Tebibyte gives me the
"non-trustworthy-female" vibes "non-trustworthy-female" vibes
</p> </p>
</div> </section>
<div class="section-full"> <section class="full">
<h3 class="header-full" id="frens"> <h3 class="full" id="frens">
<a href="#frens">I have friends!</a> <a href="#frens">I have friends!</a>
</h3> </h3>
<h4 class="subtitle-full">Riveting content here, folks.</h4> <h4 class="full">Riveting content here, folks.</h4>
<p class="full"> <p class="full">
Here are some of their stickers: Here are some of their stickers:
</p> </p>
@ -253,13 +262,13 @@
The Nostomodern Review by classic5000 The Nostomodern Review by classic5000
</a> </a>
</p> </p>
</div> </section>
</div> <!-- content --> </main>
<footer> <footer>
<div class="section-full"> <section class="full">
<h5>This site is licensed under the <a <h5>This site is licensed under the <a
href="agpl-3.0.txt">AGPLv3</a> or later. Its content is covered href="agpl-3.0.txt">AGPLv3</a> or later. Its content is covered
under the <a href="legalcode.txt">CC BY-NC-SA</a> license.</h5> under the <a href="legalcode.txt">CC BY-NC-SA</a> license.</h5>
</div> </section>
</body> </body>
</html> </html>