add user reviews and buttons

index.html

@@ -178,6 +178,55 @@
         </article>
     </div>
 
+    <div class="pixel-corners">
+        <article id="user-reviews" class="user-reviews">
+            <h1><span class="anchors"><a href="#user-reviews">~/user-reviews</a></span></h1>
+            <small>(note: some of these may or may not be related to me at all)</small>
+            <section class="quotes">
+                <p>god i fucking love men</p>
+                <small><i><a href="https://lethallava.land/@limineow" target="_blank">limineow</a></i></small>
+            </section>
+        </article>
+    </div>
+
+    <div class="pixel-corners">
+        <article id="buttons" class="buttons">
+            <h1><span class="anchors"><a href="#buttons">~/buttons</a></span></h1>
+            <small>a bunch of cool buttons, links and stuff to other people and randomness which i think are cool! :D</small>
+            <section class="buttons-area">
+                <section class="buttons-img">
+                    <a href="https://hhgreggcult.neocities.org" target="_blank"><img src="/assets/buttons/hhgreggcult.png" alt="hhgregg cult"></a>
+                    <a href="https://archlinux.org" target="_blank"><img src="/assets/buttons/poweredbyarch.png" alt="powered by arch btw"/></a>
+                    <img src="/assets/buttons/bestviewedwitheyes.gif" alt="best viewed with eyes"/>
+                    <img src="/assets/buttons/yoshilore.gif" alt="Yoshi Lore"/>
+                    <a href="https://hshop.erista.me" target="_blank"><img src="/assets/buttons/3ds.png" alt="Nintendo 3DS"/></a>
+                    <a href="https://mariocube.com" target="_blank"><img src="/assets/buttons/wii.png" alt="Nintendo Wii"/></a>
+                    <a href="https://www.mozilla.org/en-US/firefox/new" target="_blank"><img src="/assets/buttons/getfirefox.gif" alt="Get Firefox"/></a>
+                    <img src="/assets/buttons/bunnybrowser.gif" alt="Bunny Browser"/>
+                    <img src="/assets/buttons/sameshitdifferentasshole.gif" alt="same shit, different asshole (chrome and internet explorer/microsoft edge)"/>
+                    <img src="/assets/buttons/windows7.gif" alt="Windows 7"/>
+                    <a href="https://www.tucows.com" target="_blank"><img src="/assets/buttons/tucows.gif" alt="tucows"/></a>
+                    <a href="https://www.youtube.com/@ScottTheWoz" target="_blank"><img src="/assets/buttons/scotthere.gif" alt="hey all, scott here!"/></a>
+                    <img src="/assets/buttons/hehim.png" alt="he/him"/>
+                    <a href="https://homestarrunner.com/main" target="_blank"><img src="/assets/buttons/homestar.gif" alt="Homestar Runner dot com!"/></a>
+                    <img src="/assets/buttons/ravenow.gif" alt="Rave Now!"/>
+                    <img src="/assets/buttons/homernow.gif" alt="Homer Now!"/>
+                    <img src="/assets/buttons/nft.gif" alt="NFT: No Fucking Thanks"/>
+                    <img src="/assets/buttons/discordnoway.gif" alt="Discord? No Thanks!"/>
+                    <img src="/assets/buttons/oktopirate.gif" alt="it's morally ok to pirate from AAA"/>
+                    <a href="https://www.slsknet.org/news" target="_blank"><img src="/assets/buttons/soulseek.gif" alt="Soulseek"/></a>
+                    <a href="https://nextcloud.com" target="_blank"><img src="/assets/buttons/nextcloud.gif"/></a>
+                </section>
+
+                <small>my buttons, feel free to use on your site to link back to me :3c</small>
+                <section class="buttons-img">
+                    <a href="https://sneexy.pages.gay" target="_blank"><img src="/assets/buttons/sneexy.gif" alt="sneexy @ sneexy.pages.gay"/></a>
+                    <a href="https://sneexy.pages.gay" target="_blank"><img src="/assets/buttons/sneexy2.gif" alt="sneexy @ sneexy.pages.gay (alternate, shorter button)"/></a>
+                </section>
+            </section>
+        </article>
+    </div>
+
 </div>
 
 <footer>

style.css

@@ -388,14 +388,14 @@ footer > .dot {
     color: var(--bg-t);
 }
 
-.intro-box, .links, .about-me, .fun-facts {
+.intro-box, .links, .about-me, .fun-facts, .user-reviews, .buttons {
     position: relative;
     display: flex;
     padding: 30px;
     background-color: var(--bg);
 }
 
-.intro-text, .links, .about-me, .fun-facts {
+.intro-text, .links, .about-me, .fun-facts, .user-reviews, .buttons {
     flex-direction: column;
 }
 
@@ -553,6 +553,51 @@ footer > .dot {
 
 /* -- end of puke code -- */
 
+.quotes {
+    text-align: center;
+}
+
+.quotes > p::before {
+    content: "“";
+}
+
+.quotes > p::after {
+    content: "”";
+}
+
+.quotes > p::before, .quotes > p::after {
+    color: var(--header);
+    font-size: 28px;
+}
+
+.quotes > p {
+    font-size: 24px;
+}
+
+.quotes > small::before {
+    content: "●";
+    padding-right: 1em;
+    text-shadow: 0px 0px 8px var(--accent-1);
+    color: var(--fg);
+    font-size: 16px;
+    padding-left: 3em;
+}
+
+.quotes > small, .quotes > small > i > a {
+    text-shadow: 0px 0px 8px var(--header);
+    color: var(--fg);
+    font-size: 16px;
+}
+
+.buttons-area {
+    margin-top: 1em;
+    text-align: center;
+}
+
+.buttons-img > a, .buttons-img > img, .buttons-img > a > img {
+    margin: 2px 3px 5px 3px;
+}
+
 .yoshi {
     display: flex;
     margin-left: auto;
@@ -560,7 +605,7 @@ footer > .dot {
 }
 /* -- end of styling the rest of the elements -- */
 
-/* -- shirnk cards if screen is small -- */
+/* -- shrink cards if screen is small -- */
 @media screen and (max-width: 1000px) {
     .main {
         width: 100%;
@@ -594,6 +639,10 @@ footer > .dot {
         display: none;
     }
 
+    .quotes > small::before {
+        padding-left: unset;
+    }
+
     footer {
         flex-direction: column;
         text-align: center;