Added boilerplate for tor-buttons.

index.html

@@ -38,7 +38,7 @@
         </div>
 
         <a name="services"></a>
-        <h1>services</h1>
+        <h1 class="centered">services</h1>
         <div class="services-list">
             <div class="service">
                 <h2>Gitea</h2>
@@ -46,7 +46,10 @@
                     Gitea is an alternative to Github, Gitlab, etc.
                     We host our own instance, but feel free to use it as well (if you're brave enough).
                 </p>
-                <a href="https://git.qwik.space">get codin'</a>
+                <div class="buttons">
+                    <a href="https://git.qwik.space">get codin'</a>
+                    <a href="LINK HERE LMAO" class="onion">tor</a>
+                </div>
             </div>
 
             <div class="service">
@@ -100,7 +103,7 @@
         </div>
 
         <a name="contact"></a>
-        <h1>contact</h1>
+        <h1 class="centered">contact</h1>
         <div class="contact-box">
             <p>
                 If you have any questions, feedback, ideas, or anything else, feel free to contact us.
@@ -133,7 +136,7 @@
         </div>
 
         <a name="resources"></a>
-        <h1>resources</h1>
+        <h1 class="centered">resources</h1>
         <img src="./resources/design-res-promo.svg" alt="A promotional image of qwik's graphical material." class="image">
         <p>
             We provide qwik's resources <a href="./graphical-profile.html">here</a>. 

styles/graphical-profile.css

@@ -13,6 +13,11 @@ header {
 
 header > h1 {
     font-size: 4rem;
+    text-align: center;
+    
+    margin: 0;
+    padding: 0;
+    width: 100%;
 }
 
 header > i {

styles/main.css

@@ -135,10 +135,14 @@ h1, h2 {
     color: var(--primary);
 
     font-size: 2.5rem;
-    text-align: center;
 
-    width: 100%;
-    margin-top: 1rem;
+    width: min(27.200ch, 100%);
+    padding: 0 5%;
+    margin: 2rem 0 1rem 0;
+}
+
+h1.centered, h2 {
+    text-align: center;
 }
 
 h2 {
@@ -200,7 +204,15 @@ ul {
     text-align: left;
 }
 
-.service > a {
+.buttons {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    
+    margin-top: auto;
+}
+
+.buttons > a {
     color: var(--primary);
     background-color: transparent;
     
@@ -208,24 +220,32 @@ ul {
     border-radius: 999rem;
     /* box-shadow: 0 -5rem 20rem transparent; */
     
-    margin-top: auto;
-    margin-bottom: .5rem;
+    margin: .5rem;
     padding: .5rem 1.5rem;
     display: block;
 
-    font-size: 1rem;
+    font-size: .85rem;
     text-decoration: none transparent;
     text-align: center;
 
     transition: color .3s, background-color .3s, box-shadow .3s;
 }
 
-.service > a:hover, .service > a:focus {
+.buttons > a:hover, .buttons > a:focus {
     color: var(--surface);
     background-color: var(--primary);
     /* box-shadow: 0 .25rem 2rem var(--primary); */
 }
 
+.buttons > a.onion {
+    color: var(--purple);
+    border-color: var(--purple);
+}
+
+.buttons > a.onion:hover, .buttons > a.onion:focus {
+    color: var(--text);
+    background-color: var(--purple);
+}