improvements to accessibility and positioning of elements

This commit is contained in:
Emma Tebibyte 2022-11-03 18:57:05 -04:00
parent 2d0e8f5498
commit eee84095d9
3 changed files with 142 additions and 124 deletions

View File

@ -15,11 +15,6 @@
background: #9d4e54; background: #9d4e54;
} }
::-moz-selection {
color: #171614;
background: #9d4e54;
}
* { * {
box-sizing: border-box; box-sizing: border-box;
font-family: "Ubuntu"; font-family: "Ubuntu";
@ -48,6 +43,10 @@ a:hover {
text-decoration-color: #9d4e54; text-decoration-color: #9d4e54;
} }
a::selection {
text-decoration-color: #171614;
}
code { code {
font-family: 'Ubuntu Mono Ligaturized'; font-family: 'Ubuntu Mono Ligaturized';
word-break: break-all; word-break: break-all;
@ -74,7 +73,7 @@ menu li {
} }
p { p {
text-align: justify; text-align: inherit;
} }
section { section {
@ -82,7 +81,19 @@ section {
flex-grow: 1; flex-grow: 1;
} }
.back h5 { section.full, .intro {
align-items: center;
display: flex;
flex-basis: 100%;
flex-direction: column;
justify-items: center;
}
small {
margin: 1em;
}
.back {
color: #9d4e54; color: #9d4e54;
text-align: left; text-align: left;
} }
@ -104,11 +115,13 @@ section {
} }
.full { .full {
flex-basis: 100%;
margin: 0;
text-align: center; text-align: center;
} }
.intro {
text-align: justify;
}
.warn { .warn {
margin: 0.5em 0; margin: 0.5em 0;
padding: 0.5em; padding: 0.5em;
@ -134,6 +147,16 @@ section {
margin-bottom: auto; margin-bottom: auto;
} }
#frens-links {
display: flex;
flex-direction: column;
align-items: center;
}
#frens-links a {
margin: 0.20em;
}
#pronouns { #pronouns {
text-align: center; text-align: center;
font-size: 0.8em; font-size: 0.8em;
@ -159,4 +182,4 @@ section {
* *
* You should have received a copy of the GNU General Public License along with * You should have received a copy of the GNU General Public License along with
* This css. If not, see <https://www.gnu.org/licenses/agpl-3.0.en.html>. * This css. If not, see <https://www.gnu.org/licenses/agpl-3.0.en.html>.
*/ */

View File

@ -15,8 +15,8 @@
<h5 class="pill"><a href="../">Return to my page</a></h5> <h5 class="pill"><a href="../">Return to my page</a></h5>
</div> </div>
<main> <main>
<section class="full"> <section class="intro">
<h1 class="full"> <h1>
A Guide to Bettering Firefox A Guide to Bettering Firefox
</h1> </h1>
<p> <p>
@ -49,10 +49,7 @@
browser, which can do what I want from Firefox, I will stick browser, which can do what I want from Firefox, I will stick
either with it or a fork of it like either with it or a fork of it like
<a href="https://librewolf.net/"> <a href="https://librewolf.net/">
LibreWolf</a>. LibreWolf</a>. If you don't want to use Firefox, then at least
</p>
<p>
If you don't want to use Firefox, then at least
<a href="https://www.unixsheikh.com/articles/choose-your-browser-carefully.html"> <a href="https://www.unixsheikh.com/articles/choose-your-browser-carefully.html">
choose your browser carefully</a>. choose your browser carefully</a>.
</p> </p>
@ -940,4 +937,4 @@
</div> </div>
</footer> </footer>
</body> </body>
</html> </html>

View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en-US">
<head> <head>
<title>Emma Tebibyte @ Tebibyte Media</title> <title>Emma Tebibyte @ Tebibyte Media</title>
<link rel="stylesheet" href="assets/style.css"> <link rel="stylesheet" href="assets/style.css">
@ -11,13 +11,11 @@
<meta content="interest-cohort=()" http-equiv="Permissions-Policy" /> <!-- FUCK GOOGLE --> <meta content="interest-cohort=()" http-equiv="Permissions-Policy" /> <!-- FUCK GOOGLE -->
</head> </head>
<body> <body>
<div class="back"> <small class="back">
<h5 class="pill"> <a href="/">Return Home</a>
<a href="/">Return Home</a> </small>
</h5>
</div>
<main> <main>
<section class="full"> <section class="intro">
<hgroup> <hgroup>
<h1> <h1>
Hi! I'm Emma Tebibyte. Hi! I'm Emma Tebibyte.
@ -29,46 +27,42 @@
</p> </p>
</hgroup> </hgroup>
<p> <p>
I founded Tebibyte Media in 2020. Initially, its only goal was I am the founder of Tebibyte Media, the central organizing node
to further the adoption of of a <a href="/network">Network</a> of different free software
<a href="https://www.gnu.org/philosophy/free-sw.html#fs-definition"> and open-access groups. You can read more about us on
free software</a>, attempting to spread its use to the <a href="/about">the main about page</a>.
communities I was in that didn't have a technology focus. Since
then, <a href="https://tebibyte.media/network">it has grown
substantially</a> and into something entirely new: a network of
support for anyone who is creating something and values free
software and open access principles. I'm very proud of all of
the wonderful <a href=/about#staff>staff</a> who help me out
with this project; they are the sole reason Tebibyte Media is
capable of sustaining its Network.
</p> </p>
<p> <p>
The Network itself is also due a lot of credit. Through Tebibyte In my spare time (which I find is quickly becoming more and more
Media, I have met and interacted with so many interesting and and more rare) I am a free software and open access advocate.
helpful people. Part of our goals with the Network is to foster Providing avenues for small projects to flourish and promoting
a community for all of the members; this goal has been the copyleft are values I hold to be the most important work to do;
easiest part of this journey thus far. This is no doubt due not that is why I established Tebibyte Media.
only to the fantastic job my staff does but also to the </p>
comfortable and friendly environment sustained in the community
itself.
</section> </section>
<menu class="full webring" id="cornring"> <section class="full">
<li> <h2>Webrings</h2>
<a href="https://cornring.netlify.app/emmatebibyte/previous"> <p>
<<</a> The main Tebibyte Media page is a member of Yesterweb, but
</li> my page is only a member of these rings:
</p>
<menu id="cornring">
<li>
<a href="https://cornring.netlify.app/emmatebibyte/previous">
<<</a>
</li>
<li> <li>
<a href="https://cornring.netlify.app/">Cornring</a> <a href="https://cornring.netlify.app/">Cornring</a>
</li> </li>
<li> <li>
<a href="https://cornring.netlify.app/emmatebibyte/next"> <a href="https://cornring.netlify.app/emmatebibyte/next">
>> >>
</a> </a>
</li> </li>
</menu> </menu>
</section>
<section> <section>
<h2 class="full" id="contact"> <h2 class="full" id="contact">
<a href="#contact">Contact</a> <a href="#contact">Contact</a>
@ -101,13 +95,15 @@
</p> </p>
</section> </section>
<section> <section>
<h2 class="full" id="ideas"> <hgroup class="full">
<a href="#ideas">Things Someone Should Make</a> <h2 id="ideas">
</h2> <a href="#ideas">Things Someone Should Make</a>
<h4 class="full"> </h2>
Or: the software I (probably) won't or can't <p>
make but which I think would be good to have Or: the software I (probably) won't or can't
</h4> make but which I think would be good to have
</p>
</hgroup>
<p> <p>
<ul> <ul>
<li>A fork of <li>A fork of
@ -146,11 +142,11 @@
An Android app that uses the method An Android app that uses the method
<a href="https://auroraoss.com/">Aurora Store</a> uses <a href="https://auroraoss.com/">Aurora Store</a> uses
to download Google Play Store APK files for Android and to download Google Play Store APK files for Android and
the patches that the unofficial Minecraft Bedrock the patches that <a href="">the unofficial Minecraft
launcher for GNU/Linux and the MacOS uses to remove Bedrock launcher for GNU/Linux and the MacOS</a>
signature verification to keep Minecraft for Android uses to remove signature verification to keep
up-to-date and running on systems without Google Play Minecraft for Android up-to-date and running on
Services. systems without Google Play Services.
</li> </li>
<li> <li>
@ -170,7 +166,7 @@
<ul> <ul>
<li> <li>
<a href="https://git.tebibyte.media/emma/site/"> <a href="https://git.tebibyte.media/emma/site/">
I wanted to put something funny here The link to the source for this web page
</a> </a>
</li> </li>
@ -195,13 +191,15 @@
</p> </p>
</section> </section>
<section> <section>
<h2 class="full" id="reviews"> <hgroup class="full">
<a href="#reviews">Reviews</a> <h2 id="reviews">
</h2> <a href="#reviews">Reviews</a>
<h4 class="full"> </h2>
Idea stolen from <a href="https://trinity.moe#praise"> <p>
Trinity's page</a>. Idea stolen from <a href="https://trinity.moe#praise">
</h4> Trinity's page</a>.
</p>
</hgroup>
<p> <p>
<a href="https://desuarchive.org/g/thread/82485208/#q82485390"> <a href="https://desuarchive.org/g/thread/82485208/#q82485390">
[2021-07-10T18:36:38] Anonymous</a>: this emmatebibyte [2021-07-10T18:36:38] Anonymous</a>: this emmatebibyte
@ -214,11 +212,15 @@
</p> </p>
</section> </section>
<section class="full"> <section class="full">
<h3 class="full" id="frens"> <hgroup>
<a href="#frens">I have friends!</a> <h3 id="frens">
</h3> <a href="#frens">I have friends!</a>
<h4 class="full">Riveting content here, folks.</h4> </h3>
<p class="full"> <p>
Riveting content here, folks.
</p>
</hgroup>
<p>
Here are some of their stickers: Here are some of their stickers:
</p> </p>
<div id="stickers"> <div id="stickers">
@ -235,51 +237,47 @@
<img src="assets/img/versarytown.png" /> <img src="assets/img/versarytown.png" />
</a> </a>
</div> </div>
<p class="full"> <p>
And here some of their links: And here some of their links:
</p> </p>
<p class="full"> <div id="frens-links">
<a href="/~mars"> <a href="/~mars">
<img class="favicon" src="/favicon.ico" /> <img class="favicon" src="/favicon.ico" />
My girlfriend, Marcie My girlfriend, Marcie
</a> </a>
<br> <a href="https://donotresearch.net/">
<a href="https://donotresearch.net/"> <img class="favicon" src="https://donotresearch.net/favicon-32x32.png" />
<img class="favicon" src="https://donotresearch.net/favicon-32x32.png" /> Do Not Research
Do Not Research </a>
</a> <a href="https://metaspinoza.wordpress.com/">
<br> <img src="https://metaspinoza.wordpress.com/favicon.ico" />
<a href="https://metaspinoza.wordpress.com/"> Ulysse Malcoeur
<img src="https://metaspinoza.wordpress.com/favicon.ico" /> </a>
Ulysse Malcoeur <a href="https://embeddedscript.net/">
</a> <img class="favicon" src="https://embeddedscript.net/favicon.ico" />
<br> New Media artist Richard Williams
<a href="https://embeddedscript.net/"> <a href="https://nihilistcommunism.wordpress.com/">
<img class="favicon" src="https://embeddedscript.net/favicon.ico" /> <img class="favicon" src="https://nihilistcommunism.wordpress.com/favicon.ico" />
New Media artist Richard Williams Nihilist Communism
<br> </a>
<a href="https://nihilistcommunism.wordpress.com/"> <a href="https://ortusjournal.org/">
<img class="favicon" src="https://nihilistcommunism.wordpress.com/favicon.ico" /> <img class="favicon" src="https://ortusjournal.org/favicon.ico" />
Nihilist Communism Ortus Journal
</a> </a>
<br> <a href="https://thenostomodernreview.substack.com/">
<a href="https://ortusjournal.org/"> <img class="favicon" src="https://thenostomodernreview.substack.com/favicon.ico" />
<img class="favicon" src="https://ortusjournal.org/favicon.ico" /> The Nostomodern Review by classic5000
Ortus Journal </a>
</a> </div>
<br>
<a href="https://thenostomodernreview.substack.com/">
<img class="favicon" src="https://thenostomodernreview.substack.com/favicon.ico" />
The Nostomodern Review by classic5000
</a>
</p>
</section> </section>
</main> </main>
<footer> <footer>
<section class="full"> <section class="full">
<h5>This site is licensed under the <a <small>
href="agpl-3.0.txt">AGPLv3</a> or later. Its content is covered This site is licensed under the
under the <a href="legalcode.txt">CC BY-NC-SA</a> license.</h5> <a href="agpl-3.0.txt">AGPLv3</a> or later and its content under the
<a href="legalcode.txt">CC BY-NC-SA</a> license.
</small>
</section> </section>
</body> </body>
</html> </html>