alphabetized TiB.css

MDN
> Using more than one <h1> is allowed by the HTML specification, but is not
> considered a best practice. Using only one <h1> is beneficial for screen
> reader users.

assets/TiB.css

@@ -23,28 +23,31 @@
 }
 
 *:focus {
-	outline: 2px solid hsl(0, 80%, 40%);
+    outline: 2px solid hsl(0, 80%, 40%);
 }
 
 a {
     color: #df1b1b;
     text-decoration: none;
-    
     font-weight: bold;
 }
 
+a:active {
+    color: hsl(0, 80%, 40%);
+}
+
 a:hover {
     color: hsl(0, 80%, 40%);
     text-decoration: underline;
 }
 
-a:active {
-    color: hsl(0, 80%, 40%);
-}
-
-main, footer, header, nav {
-    max-width: 80em;
-    margin: 0 auto;
+blockquote {
+    background: hsl(0, 20%, 7%);
+    border: solid;
+    border-color: hsl(0, 80%, 40%);
+    border-radius: 1em;
+    margin: 1em 0;
+    padding: 0 1em;
 }
 
 body {
@@ -58,6 +61,10 @@ header {
     margin: auto;
 }
 
+i {
+    color: inherit;
+}
+
 li {
     margin: 1em 0;
 }
@@ -66,6 +73,12 @@ li ul, li ol {
     margin: 0.25em 0;
 }
 
+main {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+
 nav {
     display: flex;
     flex-direction: row-reverse;
@@ -102,38 +115,27 @@ p {
     text-align: justify;
 }
 
+section {
+    flex-basis: 100%;
+}
+
 ul {
     list-style-type: disc;
 }
 
+footer, header, nav {
+    max-width: 80em;
+    margin: 0 auto;
+}
+
 .column {
     flex-basis: 48%;
     flex-grow: 1;
     margin: 0.5em;
 }
 
-main {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-}
-
-#slogan {
-    font-size: 1.17em;
-    font-weight: bold;
-}
-
-#donate > * {
-    margin-right: 0.5em;
-}
-
-#donate a {
-	display: inline-block;
-    line-height: 0;
-}
-
-#donate a:hover {
-	text-decoration: none;
+.icon {
+    max-width: 1em;
 }
 
 .footer {
@@ -154,8 +156,10 @@ main {
     text-align: right;
 }
 
-section {
-    flex-basis: 100%;
+.r-list {
+    text-align: right;
+    list-style-type: none;
+    padding: 0;
 }
 
 #home nav .home > a {
@@ -182,6 +186,11 @@ section {
     min-width: 128px;
 }
 
+#slogan {
+    font-size: 1.17em;
+    font-weight: bold;
+}
+
 /*
  * TiB.css is free software: you can redistribute and/or modify it under the
  * terms of the GNU Affero General Public License as published by the Free

index.html

@@ -40,7 +40,7 @@
         <main>
             <section>
                 <p id="slogan">For the dreamers, from the doers.</p>
-                <p>
+                <!-- <p>
                 Tebibyte Media works to promote free software and open-access
                 projects and networks in order to provide support and publicity
                 to <a href="/network#members">Network members</a>. Those members
@@ -48,18 +48,98 @@
                 management, access to <a href=/network#benefits>our
                 services</a>, and any future benefits that come as a result of
                 the expanding nature of the project.
+                </p> -->
+                <p>
+                Tebibyte Media is the culmination of what free software and
+                open-access philosophy is all about; preserving and promoting
+                the essential freedom to share:
+                </p>
+                <blockquote>
+                    <p>
+                    Signing a typical software license agreement means betraying
+                    your neighbor: “I promise to deprive my neighbor of this
+                    program so that I can have a copy for myself.” People who
+                    make such choices feel internal psychological pressure to
+                    justify them, by downgrading the importance of helping one’s
+                    neighbors—thus public spirit suffers. This is psychosocial
+                    harm associated with the material harm of discouraging use
+                    of the program.
+                    </p>
+                </blockquote>
+                – <a href="https://stallman.org/">Richard Stallman</a>,
+                <a href="https://www.gnu.org/philosophy/shouldbefree.en.html#damaging-social-cohesion"><i>Why Software Should be Free</i>, "Damaging Social
+                Cohesion"</a>, para. 2–3
+                </p>
+                <p>
+                Our <a href="/network">Network</a> is designed to facilitate and
+                spread that spirit of sharing, cooperation, and solidarity by
+                providing to members firm foundations of support. If your
+                project or community is young and you and your team are not sure
+                how to build a userbase, maintain your own services, or if you
+                need a way to get yourself and your work out there, you should
+                consider <a href="/network#application">applying</a>!
+                </p>
+                <p>
+                Even if you've been around the block, we're always accepting new
+                members who share our values, and experienced Network members
+                are also extremely important to us.
                 </p>
             </section>
-            <section id="donate">
-                <a href="https://opencollective.com/tebibytemedia">
-                <img alt="open collective" src="https://opencollective.com/static/images/opencollective-icon.svg" />
-                </a>
+            <div class="column">
+                <section id="donate">
+                    <h2 id="donate">
+                        <a href="#donate">Donate</a>
+                    </h2>
+                    <p>
+                    Tebibyte Media's infrastructure is maintained by a few
+                    individuals who work on it in their spare time. As a result,
+                    funding is tight, so any donations are highly appreciated.
+                    Donations are accepted through
+                    <a href="https://liberapay.com/tebibytemedia/donate">
+                    <img class="icon" src=https://liberapay.com/assets/liberapay/icon-v2_white-on-yellow.svg />
+                    Liberapay
+                    </a> and
+                    <a href="https://opencollective.com/tebibytemedia">
+                    <img class="icon" src="https://opencollective.com/static/images/opencollective-icon.svg" />
+                    Open Collective</a>.
+                    </p>
+                </section>
+            </div>
+            <div class="column">
+                <section id="donate">
+                    <h2 class="h-right" id="reading">
+                        <a href="#reading">Tebibyte Media Reading List</a>
+                    </h2>
+                    <h3 class="h-right" id="technical">
+                        <a href="#technical">Technical</a>
+                    </h3>
+                    <p>
+                    Works listed here are relevant to the technical side of
+                    freely licensed projects.
+                    <ul class="r-list">
+                        <li>
+                            <a href="http://www.catb.org/~esr/writings/cathedral-bazaar/cathedral-bazaar/">
+                            [XHTML]</a> <i>The Cathedral and the Bazaar</i> by
+                            <a href="http://www.catb.org/~esr">Eric Raymond</a>
+                        </li>
 
-                <a href="https://liberapay.com/tebibytemedia/donate">
-                <img alt="Donate using Liberapay" src="https://liberapay.com/assets/widgets/donate.svg" />
-                </a>
-            </section>
-        </main> <!-- content -->
+                        <li>
+                            <a href="https://www.gnu.org/philosophy/fsfs/rms-essays.pdf">
+                            [PDF]</a> <i>Free Software, Free Society</i> by
+                            <a href="https://stallman.org/">Richard Stallman</a>
+                        </li>
+
+                        <li>
+                            <a href="https://un.curl.dev/">[HTML]</a>
+                            <i>Uncurled</i> by
+                            <a href="https://daniel.haxx.se/">Daniel Stenberg
+                            </a>
+                        </li>
+                    </ul>
+                    </p>
+                </section>
+            </div>
+        </main>
         <footer>
             <div class="footer">
                 <p>