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;
}
::-moz-selection {
color: #171614;
background: #9d4e54;
}
* {
box-sizing: border-box;
font-family: "Ubuntu";
@ -48,6 +43,10 @@ a:hover {
text-decoration-color: #9d4e54;
}
a::selection {
text-decoration-color: #171614;
}
code {
font-family: 'Ubuntu Mono Ligaturized';
word-break: break-all;
@ -74,7 +73,7 @@ menu li {
}
p {
text-align: justify;
text-align: inherit;
}
section {
@ -82,7 +81,19 @@ section {
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;
text-align: left;
}
@ -104,11 +115,13 @@ section {
}
.full {
flex-basis: 100%;
margin: 0;
text-align: center;
}
.intro {
text-align: justify;
}
.warn {
margin: 0.5em 0;
padding: 0.5em;
@ -134,6 +147,16 @@ section {
margin-bottom: auto;
}
#frens-links {
display: flex;
flex-direction: column;
align-items: center;
}
#frens-links a {
margin: 0.20em;
}
#pronouns {
text-align: center;
font-size: 0.8em;
@ -159,4 +182,4 @@ section {
*
* 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>.
*/
*/

View File

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

View File

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