updated interests page

(+ adding ao3 to links page)

interests.html

@@ -11,6 +11,124 @@
     <link rel="icon" type="image/x-icon" href="favicon.ico">
     <script src="script.js" defer></script>
     <title>xxos site ∫ interests</title>
+    <style>
+        #adofai {
+            -webkit-mask-image: url(imgs/interests/adofai.png);
+            mask-image: url(imgs/interests/adofai.png);
+        }
+        #adofai:hover {
+            background-image: linear-gradient(150deg, rgba(239,59,59,1) 0%, rgba(54,125,255,1) 100%);
+        }
+        #oneshot {
+            -webkit-mask-image: url(imgs/interests/oneshot.png);
+            mask-image: url(imgs/interests/oneshot.png);
+        }
+        #oneshot:hover {
+            background-image: linear-gradient(90deg, rgba(255,255,81,1) 0%, rgba(254,107,110,1) 100%);
+        }
+        #outerwilds {
+            -webkit-mask-image: url(imgs/interests/outerwilds.png);
+            mask-image: url(imgs/interests/outerwilds.png);
+        }
+        #outerwilds:hover {
+            background-image: linear-gradient(158deg, rgba(255,147,71,1) 0%, rgba(221,98,12,1) 100%); 
+        }
+        #rhythmdoctor {
+            -webkit-mask-image: url(imgs/interests/rhythmdoctor.png);
+            mask-image: url(imgs/interests/rhythmdoctor.png);
+        }
+        #rhythmdoctor:hover {
+            background-image: linear-gradient(180deg, rgba(24,255,40,1) 15%, rgba(140,149,168,1) 42%, rgba(255,13,64,1) 72%);
+        }
+        #tunic {
+            -webkit-mask-image: url(imgs/interests/tunic.png);
+            mask-image: url(imgs/interests/tunic.png);
+        }
+        #tunic:hover {
+            background-image: linear-gradient(54deg, rgba(254,173,76,1) 0%, rgba(254,195,76,1) 36%, rgba(171,236,254,1) 100%);
+        }
+        #kirby {
+            -webkit-mask-image: url(imgs/interests/kirby.png);
+            mask-image: url(imgs/interests/kirby.png);
+        }
+        #kirby:hover {
+            background-image: linear-gradient(120deg, rgba(234,151,147,1) 40%, rgba(246,208,0,1) 100%);
+        }
+        #pikmin {
+            -webkit-mask-image: url(imgs/interests/pikmin.png);
+            mask-image: url(imgs/interests/pikmin.png);
+        }
+        #pikmin:hover {
+            background-image: linear-gradient(30deg, rgba(6,188,1,1) 30%, rgba(187,74,243,1) 90%);
+        }
+        #pokemon {
+            -webkit-mask-image: url(imgs/interests/pokemon.png);
+            mask-image: url(imgs/interests/pokemon.png);
+        }
+        #pokemon:hover {
+            background-image: linear-gradient(90deg, rgba(254,200,3,1) 18%, rgba(55,94,169,1) 76%);
+        }
+        #ithkuil {
+            -webkit-mask-image: url(imgs/interests/ithkuil.png);
+            mask-image: url(imgs/interests/ithkuil.png);
+        }
+        #ithkuil:hover {
+            background-image: linear-gradient(0deg, rgba(255,0,0,1) 0%, rgba(51,184,139,1) 60%);
+        }
+        #snapdragonrose {
+            -webkit-mask-image: url(imgs/interests/snapdragonrose.png);
+            mask-image: url(imgs/interests/snapdragonrose.png);
+        }
+        #snapdragonrose:hover {
+            background-image: linear-gradient(225deg, rgba(255,0,110,1) 0%, rgba(255,187,216,1) 100%);
+        }
+        #tokipona {
+            -webkit-mask-image: url(imgs/interests/tokipona.png);
+            mask-image: url(imgs/interests/tokipona.png);
+        }
+        #tokipona:hover {
+            background-image: linear-gradient(270deg, rgba(255,255,99,1) 0%, rgba(0,0,154,1) 100%);
+        }
+        #prolangs {
+            -webkit-mask-image: url(imgs/interests/prolangs.png);
+            mask-image: url(imgs/interests/prolangs.png);
+        }
+        #prolangs:hover {
+            background-image: linear-gradient(90deg, rgba(255,242,0,1) 0%, rgba(81,176,34,1) 50%, rgba(63,72,204,1) 100%);
+        }
+        #kaybop {
+            -webkit-mask-image: url(imgs/interests/kaybop.png);
+            mask-image: url(imgs/interests/kaybop.png);
+        }
+        #kaybop:hover {
+            background-image: linear-gradient(161deg, rgba(68,59,49,1) 0%, rgba(92,122,178,1) 93%); 
+        }
+        #uwulang {
+            -webkit-mask-image: url(imgs/interests/uwu.png);
+            mask-image: url(imgs/interests/uwu.png);
+        }
+        #uwulang:hover {
+            background-image: linear-gradient(155deg, rgba(92,205,250,1) 40%, rgba(214,228,255,1) 50%, rgba(243,169,183,1) 60%);
+        }
+        #geohashing {
+            -webkit-mask-image: url(imgs/interests/geohashing.png);
+            mask-image: url(imgs/interests/geohashing.png);
+        }
+        #geohashing:hover {
+            background-image: linear-gradient(90deg, rgb(90, 216, 255) 0%, rgb(133, 196, 106) 55%);
+        }
+        #maths {
+            -webkit-mask-image: url(imgs/interests/maths.png);
+            mask-image: url(imgs/interests/maths.png);
+        }
+        #physics {
+            -webkit-mask-image: url(imgs/interests/physics.png);
+            mask-image: url(imgs/interests/physics.png);
+        }
+        #maths:hover, #physics:hover {
+            background-attachment: fixed;
+        }
+    </style>
 </head>
 <body>
     <div id="mobileNav" class="gBox" onclick="openMenu()">Ξ</div>
@@ -35,25 +153,44 @@ <h1 id="logoText">XXOs</h1>
             <option value="gradient">𝑔𝓇𝒶𝒹𝒾𝑒𝓃𝓉</option>
         </select>
     </header>
-    <p>This page will have more stuff and fancier effects on it eventually. For now:</p>
-    <h3>Videogames</h3>
-    <ul>
-        <li><a href="http://www.oneshot-game.com/">OneShot</a></li>
-        <li><a href="https://www.mobiusdigitalgames.com/outer-wilds.html">Outer Wilds</a></li>
-        <li><a href="https://tunicgame.com/">Tunic</a></li>
-        <li>Pokémon, Pikmin, Kirby (to a lesser extent)</li>
-    </ul>
-    <h3>Other</h3>
-    <ul>
-        <li>Conlanging & Conlangs<ul>
-            <li><a href="https://ithkuil.net/">Ithkuil</a></li>
-            <li><a href="https://tokipona.org/">Toki Pona</a> (kind of? I've been meaning to learn it for a while)</li>
-            <li>etc</li>
-            <li>also making conlangs</li>
-        </ul></li>
-        <li><a href="https://geohashing.site/">Geohashing</a></li>
-        <li>Physics (i'm literally doing a physics degree)</li>
-        <li>Maths</li>
-    </ul>
+    <div class="gBox linkBox" style="max-width: 0; margin-bottom: 1.5em"> <!-- unsure why but i need to have the max-width property here -->
+        <h1 style="margin-bottom: 0px;">Interests</h1>
+    </div>
+    <h2 style="text-align: center">Videogames</h2>
+    <div class="interestContainer">
+        <div class="gBox"><a id="adofai" class="maskedImg" href="https://store.steampowered.com/app/977950/A_Dance_of_Fire_and_Ice/" target="_blank">A Dance of Fire and Ice</a></div>
+        <div class="gBox"><a id="oneshot" class="maskedImg" href="http://www.oneshot-game.com/" target="_blank">OneShot</a></div>
+        <div class="gBox"><a id="outerwilds" class="maskedImg" href="https://www.mobiusdigitalgames.com/outer-wilds.html" target="_blank">Outer Wilds</a></div>
+        <div class="gBox"><a id="rhythmdoctor" class="maskedImg" href="https://rhythmdr.com/" target="_blank">Rhythm Doctor</a></div>
+        <div class="gBox"><a id="tunic" class="maskedImg" href="https://tunicgame.com/" target="_blank">Tunic</a></div>
+    </div>
+    <p style="text-align: center;">also these, but to a lesser extent:</p>
+    <div class="interestContainer">
+        <div class="gBox"><a id="kirby" class="maskedImg" href="https://en.wikipedia.org/wiki/Kirby_(series)" target="_blank">Kirby</a></div>
+        <div class="gBox"><a id="pikmin" class="maskedImg" href="https://en.wikipedia.org/wiki/Pikmin" target="_blank">Pikmin</a></div>
+        <div class="gBox"><a id="pokemon" class="maskedImg" href="https://en.wikipedia.org/wiki/Pok%C3%A9mon" target="_blank">Pokémon</a></div>
+    </div>
+    <hr/>
+    <h2 style="text-align: center; padding-top: 0.5em;">Conlangs</h2>
+    <div class="interestContainer">
+        <div class="gBox"><a id="ithkuil" class="maskedImg" href="https://ithkuil.net/" target="_blank">Ithkuil</a></div>
+        <div class="gBox"><a id="tokipona" class="maskedImg" href="https://tokipona.org/" target="_blank">toki pona</a></div>
+        <div class="gBox"><a id="prolangs" class="maskedImg" href="https://www.reddit.com/r/prolangs/" target="_blank">Prolangs (webcomic)</a></div>
+    </div>
+    <p style="text-align: center;">and also:</p>
+    <div class="interestContainer">
+        <div class="gBox"><a id="kaybop" class="maskedImg" href="https://crazyninjageeks.wordpress.com/2015/11/28/introduction-to-kayfdanfsantaptvlirtsangbesputvombngagtvlimpkayfsnafkayfgaf-boptvegpdaffshofbompvlimpgafvlimpgaf/" target="_blank">kay(f)bop(t)</a></div>
+        <div class="gBox"><a id="snapdragonrose" class="maskedImg" href="https://www.tumblr.com/abalidoth/700669343403556864/snapdragon-rose" target="_blank">Snapdragon Rose</a></div>
+        <div class="gBox"><a id="uwulang" class="maskedImg" href="https://docs.google.com/document/d/1ZV1U0S8qC6yJEi6grFO_Vq5A15lRVCLYeq_udWsC-9Y/edit" target="_blank">UwU</a></div>
+    </div>
+    <hr/>
+    <h2 style="text-align: center; padding-top: 0.5em;">Other</h2>
+    <div class="interestContainer">
+        <div class="gBox"><a id="geohashing" class="maskedImg" href="https://geohashing.site/geohashing/Main_Page" target="_blank">Geohashing</a></div>
+        <div class="gBox"><a id="maths" class="maskedImg" href="https://en.wikipedia.org/wiki/Mathematics" target="_blank">Maths</a></div>
+        <div class="gBox"><a id="physics" class="maskedImg" href="https://en.wikipedia.org/wiki/Physics" target="_blank">Physics <small>(i'm literally doing a physics degree)</small></a></div>
+    </div>
+    <hr/>
+    <p style="text-align: center;">(and some more things but i need to stop working on this for now)</p>
 </body>
 </html>

links.html

@@ -55,6 +55,9 @@ <h1 style="margin-bottom: 0px;">Links</h1>
         <div class="gBox linkBox">
             <a href="https://www.youtube.com/channel/UCQhK7joYZMacNiSpWEtnHLQ" target="_blank" class="sLink youtube">YouTube (@_XXOs)</a>
         </div>
+        <div class="gBox linkBox">
+            <a href="https://archiveofourown.org/users/XXOs" target="_blank" class="sLink ao3">AO3 (XXOs)</a>
+        </div>
     </div>
 </body>
 </html>

style.css

@@ -167,6 +167,41 @@ a.sLink:hover {
 .sLink.mediawiki:hover {
     background-color: #a11f63;
 }
+.sLink.ao3 {
+    color: #970000;
+}
+.sLink.ao3:hover {
+    background-color: #970000;
+}
+
+.interestContainer {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+    margin-bottom: calc(1.5em - 10px);
+}
+.interestContainer div {
+    margin: 10px;
+    width: 200px;
+    padding: 0;
+}
+.maskedImg {
+    display: inline-block;
+    width: 200px;
+    height: 130px;
+    background-color: var(--headers);
+    color: transparent;
+}
+.maskedImg:hover {
+    background-image: var(--gradient);
+}
+
+hr {
+    height: 5px;
+    background: var(--text);
+    border: none;
+    width: 150px;
+}
 
 #line {
     position: fixed;