reworked HTML & CSS

assets/css/custom.css

@@ -1,19 +1,20 @@
 :root {
-  --primary-pink: #F5A9B8;
+    --primary-pink: #F5A9B8;
-  --primary-blue: #5BCFFA;
+    --primary-blue: #5BCFFA;
-  --white: #FFFFFF;
+    --white: #FFFFFF;
-  --dark-bg: #161618;
+    --dark-bg: #161618;
-  --gray-blue: #A8C5DB;
+    --gray-blue: #A8C5DB;
-  --dark-blue: #12354B;
+    --dark-blue: #12354B;
-  --dark-teal: #12404B;
+    --dark-teal: #12404B;
 
 }
 
-display-imagebody,html{
+display-imagebody,
-    -ms-scroll-chaining:none;
+html {
-    overscroll-behavior:none;
+    -ms-scroll-chaining: none;
-    margin:0;
+    overscroll-behavior: none;
-    padding:0;
+    margin: 0;
+    padding: 0;
     background-color: var(--dark-bg);
     background-size: cover;
     background-attachment: fixed;
@@ -25,16 +26,6 @@ display-imagebody,html{
         "wdth" 100;
 }
 
-.background-canvas {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: -1;
-  pointer-events: none;
-}
-
 .background-canvas {
     position: fixed;
     top: 0;
@@ -49,20 +40,22 @@ display-imagebody,html{
     border-radius: 8px;
 }
 
-.display-image{
+.display-image {
-    width:192px;
+    width: 15em;
-    height:192px;
+    height: auto;
-    display:block;
+    display: block;
-    /*border-radius:50%;*/
+    border-radius: 0%;
-    -o-object-fit:cover;
+    -o-object-fit: cover;
-    object-fit:cover
+    object-fit: cover
 }
 
 .link-each-image {
-    width: 3em;
+    max-width: 3em;
+    max-height: 3em;
+    width: auto;
+    height: auto;
     -o-object-fit: cover;
     object-fit: cover;
-
 }
 
 .main-container {
@@ -84,21 +77,40 @@ display-imagebody,html{
     max-width: 800px;
 }
 
+.pronouns-desc {
+    font-size: 1em;
+    font-weight: bold;
+    color: #f2f5f4;
+    text-align: center;
+    margin: 10px auto;
+    margin-top: 10px;
+    width: 100%;
+    max-width: 800px;
+}
+
 h1 {
     font-size: 2.5em;
     font-weight: bold;
 }
 
 .flag {
-    width: 1em;
+    width: 1.5em;
+    height: auto;
     border-radius: 0.10em;
 }
 
+.lang-flag {
+    width: auto;
+    max-width: 2em;
+    height: 1em;
+}
+
 .separator {
     font-weight: unset;
 }
 
-.separator, .source {
+.separator,
+.source {
     color: #f2f5f4;
     text-align: center;
     margin: 25px auto;
@@ -128,10 +140,14 @@ hr {
 
 .row {
     display: table;
-    width: 100%; /*Optional*/
+    width: 100%;
-    table-layout: fixed; /*Optional*/
+    /*Optional*/
-    border-spacing: 10px; /*Optional*/
+    table-layout: fixed;
+    /*Optional*/
+    border-spacing: 10px;
+    /*Optional*/
 }
+
 .column {
     display: table-cell;
     text-align: center;
@@ -146,3 +162,16 @@ hr {
 svg {
     fill: currentColor;
 }
+
+
+@media (max-width:768px) {
+    .display-image {
+        width: 15em;
+    }
+}
+
+@media (max-width:480px) {
+    .display-image {
+        width: 10em;
+    }
+}

assets/images/anilist.svg

@@ -1 +0,0 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>AniList</title><path d="M6.361 2.943L0 21.056h4.942l1.077-3.133H11.4l1.052 3.133H22.9c.71 0 1.1-.392 1.1-1.101V17.53c0-.71-.39-1.101-1.1-1.101h-6.483V4.045c0-.71-.392-1.102-1.101-1.102h-2.422c-.71 0-1.101.392-1.101 1.102v1.064l-.758-2.166zm2.324 5.948l1.688 5.018H7.144z"/></svg>

index.html

@@ -26,7 +26,7 @@
 
     <!-- Twitter Card -->
     <meta name="twitter:card" content="summary">
-    <meta name="twitter:title" content="JaxOff 🌸💦 Art Credits">
+    <meta name="twitter:title" content="JaxOff 🌸💦 Social Media Links">
     <meta name="twitter:description" content="Twitch, Discord, Bluesky & more! :3">
     <meta name="twitter:image" content="https://11tw.ink/assets/images/avatar.webp">
 
@@ -41,25 +41,25 @@
             <img class="display-image m-auto" data-src="assets/images/avatar.webp" src="assets/images/avatar.webp" />
             <h1 class="page-text-color page-text-font mt-16 text-center">JaxOff 🌸💦</h1>
             <p class="description">
-                Elftwink VTuber :3 <br>
+                AuDHD, Queer, Nonbinary Elftwink VTuber :3
-                <img class="flag" src="./assets/images/pansexual.svg" /> <img class="flag" src="./assets/images/enby.svg" /> <img class="flag" src="./assets/images/trans.svg" /> <img class="flag" src="./assets/images/prog.svg" />
             </p>
 
             <a id="merch">
                 <h1 class="separator" title="Super cooler neuer Merch!!!">
                     Merch!!!
                 </h1>
-                <div class="page-item-wrap relative">
-                    <div class="page-item flex-both-center absolute"></div>
-                    <a target="_blank" class="page-item-each py-10 flex-both-center daki" href="https://11tw.ink/daki" data-id="261685" data-type="page_item">
-                        <svg class="link-each-image">
-                            <use href="#eggplant"></use>
-                        </svg>
-
-                        <span class="item-title text-center">[18+] JAXOFF DAKIMAKURA OMG</span>
-                    </a>
-                </div>
             </a>
+            <div class="page-item-wrap relative">
+
+                <a target="_blank" class="page-item-each py-10 flex-both-center daki" href="https://11tw.ink/daki" data-id="261685" data-type="page_item">
+                    <svg class="link-each-image">
+                        <use href="#svg-eggplant"></use>
+                    </svg>
+
+                    <span class="item-title text-center">[18+] JAXOFF DAKIMAKURA OMG</span>
+                </a>
+            </div>
+
 
 
             <a id="socials">
@@ -68,7 +68,6 @@
                 </h1>
             </a>
             <div class="page-item-wrap relative">
-                <div class="page-item flex-both-center absolute"></div>
                 <a target="_blank" class="page-item-each py-10 flex-both-center twitch" href="https://jaxoff.tv">
                     <svg class="link-each-image">
                         <use href="#svg-twitch"></use>
@@ -79,7 +78,6 @@
             </div>
 
             <div class="page-item-wrap relative">
-                <div class="page-item flex-both-center absolute"></div>
                 <a target="_blank" class="page-item-each py-10 flex-both-center discord" href="https://11tw.ink/discord">
                     <svg class="link-each-image">
                         <use href="#svg-discord"></use>
@@ -90,7 +88,6 @@
             </div>
 
             <div class="page-item-wrap relative">
-                <div class="page-item flex-both-center absolute"></div>
                 <a target="_blank" class="page-item-each py-10 flex-both-center mastodon" href="https://11tw.ink/fedi">
                     <svg class="link-each-image">
                         <use href="#svg-mastodon"></use>
@@ -101,7 +98,7 @@
             </div>
 
             <div class="page-item-wrap relative">
-                <div class="page-item flex-both-center absolute"></div>
+
                 <a target="_blank" class="page-item-each py-10 flex-both-center bluesky" href="https://11tw.ink/bsky">
                     <svg class="link-each-image">
                         <use href="#svg-bsky"></use>
@@ -112,7 +109,6 @@
             </div>
 
             <div class="page-item-wrap relative">
-                <div class="page-item flex-both-center absolute"></div>
                 <a target="_blank" class="page-item-each py-10 flex-both-center anilist" href="https://11tw.ink/anilist">
                     <svg class="link-each-image">
                         <use href="#svg-anilist"></use>
@@ -121,9 +117,7 @@
                     <span class="item-title text-center">Anilist</span>
                 </a>
             </div>
-
             <div class="page-item-wrap relative">
-                <div class="page-item flex-both-center absolute"></div>
                 <a target="_blank" class="page-item-each py-10 flex-both-center instagram" href="https://11tw.ink/insta">
                     <svg class="link-each-image">
                         <use href="#svg-instagram"></use>
@@ -134,18 +128,16 @@
             </div>
 
             <div class="page-item-wrap relative">
-                <div class="page-item flex-both-center absolute"></div>
                 <a target="_blank" class="page-item-each py-10 flex-both-center youtube" href="https://11tw.ink/youtube">
                     <svg class="link-each-image">
                         <use href="#svg-youtube"></use>
                     </svg>
 
-                    <span class=" item-title text-center">YouTube</span>
+                    <span class="item-title text-center">YouTube</span>
                 </a>
             </div>
 
             <div class="page-item-wrap relative">
-                <div class="page-item flex-both-center absolute"></div>
                 <a target="_blank" class="page-item-each py-10 flex-both-center tiktok" href="https://11tw.ink/tiktok">
                     <svg class="link-each-image">
                         <use href="#svg-tiktok"></use>
@@ -156,7 +148,6 @@
             </div>
 
             <div class="page-item-wrap relative">
-                <div class="page-item flex-both-center absolute"></div>
                 <a target="_blank" class="page-item-each py-10 flex-both-center throne" href="https://11tw.ink/wishlist">
                     <svg class="link-each-image">
                         <use href="#svg-throne"></use>
@@ -167,7 +158,6 @@
             </div>
 
             <div class="page-item-wrap relative">
-                <div class="page-item flex-both-center absolute"></div>
                 <a target="_blank" class="page-item-each py-10 flex-both-center spotify" href="https://11tw.ink/playlist">
                     <svg class="link-each-image">
                         <use href="#svg-spotify">
@@ -185,7 +175,6 @@
             </a>
 
             <div class="page-item-wrap relative">
-                <div class="page-item flex-both-center absolute"></div>
                 <a target="_blank" class="page-item-each py-10 flex-both-center references" href="https://11tw.ink/ref">
                     <svg class="link-each-image">
                         <use href="#svg-paintbrush"></use>
@@ -196,7 +185,6 @@
             </div>
 
             <div class="page-item-wrap relative">
-                <div class="page-item flex-both-center absolute"></div>
                 <a class="page-item-each py-10 flex-both-center credit" href="https://credit.11tw.ink">
                     <svg class="link-each-image">
                         <use href="#svg-images"></use>
@@ -207,7 +195,6 @@
             </div>
 
             <div class="page-item-wrap relative">
-                <div class="page-item flex-both-center absolute"></div>
                 <a class="page-item-each py-10 flex-both-center colours" href="https://c.11tw.ink">
                     <svg class="link-each-image">
                         <use href="#svg-palette"></use>
@@ -245,13 +232,11 @@
             </a>
 
             <div class="page-item-wrap relative">
-                <div class="page-item flex-both-center absolute"></div>
                 <a target="_blank" class="page-item-each py-10 flex-both-center ConYes" href="https://www.nonki-con.de/">
                     <span class="item-title text-center">NonkiCon // Speyer // 16.-17.05.2026</span>
                 </a>
             </div>
             <div class="page-item-wrap relative">
-                <div class="page-item flex-both-center absolute"></div>
                 <a target="_blank" class="page-item-each py-10 flex-both-center ConYes" href="https://www.dokomi.de">
                     <span class="item-title text-center">DOKOMI // Düsseldorf // 29.-31.05.2026</span>
                 </a>
@@ -264,13 +249,11 @@
             </a>
 
             <div class="page-item-wrap relative">
-                <div class="page-item flex-both-center absolute"></div>
                 <a target="_blank" class="page-item-each py-10 flex-both-center ConProb" href="https://gulas.ch">
                     <span class="item-title text-center">Gulaschprogrammiernacht // Karlsruhe // 04.-07.06.2026</span>
                 </a>
             </div>
             <div class="page-item-wrap relative">
-                <div class="page-item flex-both-center absolute"></div>
                 <a target="_blank" class="page-item-each py-10 flex-both-center ConYes" href="https://www.wiemaikai.de/">
                     <span class="item-title text-center">Wie.MAI.KAI // Flörsheim am Main // 13.-14.06.2026</span>
                 </a>
@@ -283,13 +266,11 @@
             </a>
 
             <div class="page-item-wrap relative">
-                <div class="page-item flex-both-center absolute"></div>
                 <a target="_blank" class="page-item-each py-10 flex-both-center ConYes" href="https://shiroco.de/">
                     <span class="item-title text-center">ShiroCo // Chemnitz // 11.-12.07.2026</span>
                 </a>
             </div>
             <div class="page-item-wrap relative">
-                <div class="page-item flex-both-center absolute"></div>
                 <a target="_blank" class="page-item-each py-10 flex-both-center ConYes" href="https://animagic.de/">
                     <span class="item-title text-center">AnimagiC // Mannheim // 31.07.-02.08.2026</span>
                 </a>
@@ -302,7 +283,6 @@
             </a>
 
             <div class="page-item-wrap relative">
-                <div class="page-item flex-both-center absolute"></div>
                 <a target="_blank" class="page-item-each py-10 flex-both-center ConProb" href="https://www.main-matsuri.com/">
                     <span class="item-title text-center">Main Matsuri // Offenbach // 14.-16.08.2026</span>
                 </a>
@@ -315,7 +295,6 @@
             </a>
 
             <div class="page-item-wrap relative">
-                <div class="page-item flex-both-center absolute"></div>
                 <a target="_blank" class="page-item-each py-10 flex-both-center ConProb" href="https://www.connichi.de/">
                     <span class="item-title text-center">Connichi // Wiesbaden // 4.-6.09.2026</span>
                 </a>
@@ -333,13 +312,12 @@
     </footer>
 
 
-
     <!-- SVG Dump -->
     <svg style="display: none;">
 
         <!-- Eggplant -->
 
-        <symbol id="eggplant" viewBox="0 0 128 128">
+        <symbol id="svg-eggplant" viewBox="0 0 128 128">
             <path d="M20.03 25.81L9.22 32.96S7.67 36 9.77 46.29s11.58 30.65 30.67 49.97c16.47 16.66 35.7 24.78 52.61 25.65s25.04-10.06 25.04-10.06L20.03 25.81z" fill="#8e2f97"></path>
             <path d="M29.28 20.58l-9.25 15.96s5.82 21.19 15.63 34.38c10.64 14.3 22.81 26.72 41.88 36.41c16.27 8.27 31.49 11.41 31.49 11.41s9.93-3.97 13.89-14.98c3.77-10.48-1.22-21.97-8.37-27.55s-21.46-9.03-34.5-15.96c-13.83-7.35-24.08-15.94-33.14-25.7c-5.67-6.1-6.98-8.7-7.17-9.8c-.09-.52-.42-.96-.92-1.12l-9.54-3.05z" fill="#a057a1"></path>
             <path d="M22.71 38.01l-.81 5.74s1.47 1.95 3.23 1.8c1.76-.15 4.47-4.68 5.15-7.77c1-4.52.46-7.04.46-7.04s3.52 1.84 8.8 1.07c5.28-.77 7.96-3.75 8.65-5.28c.69-1.53.54-3.22-.23-3.6c-.77-.38-4.52 1.3-4.52 1.3l-11.94-.46l-11.33 3.29l2.54 10.95z" fill="#bdcf46"></path>
@@ -419,6 +397,24 @@
             <path d="M576 320v2.7c-.4 36.5-33.6 61.3-70.1 61.3H408c-26.5 0-48 21.5-48 48 0 3.4.4 6.7 1 9.9 2.1 10.2 6.5 20 10.8 29.9 6.1 13.8 12.1 27.5 12.1 42 0 31.8-21.6 60.7-53.4 62-3.5.1-7 .2-10.6.2-141.4 0-256-114.6-256-256S178.6 64 320 64s256 114.6 256 256m-384 32c0-17.7-14.3-32-32-32s-32 14.3-32 32 14.3 32 32 32 32-14.3 32-32m0-96c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32m160-96c0-17.7-14.3-32-32-32s-32 14.3-32 32 14.3 32 32 32 32-14.3 32-32m96 96c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32" />
         </symbol>
 
+        <!-- British Flag -->
+        <symbol id="flag-uk" viewBox="0 0 60 30">
+            <clipPath id="s">
+                <path d="M0,0 v30 h60 v-30 z" />
+            </clipPath>
+            <clipPath id="t">
+                <path d="M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z" />
+            </clipPath>
+            <g clip-path="url(#s)">
+                <path d="M0,0 v30 h60 v-30 z" fill="#012169" />
+                <path d="M0,0 L60,30 M60,0 L0,30" stroke="#fff" stroke-width="6" />
+                <path d="M0,0 L60,30 M60,0 L0,30" clip-path="url(#t)" stroke="#C8102E" stroke-width="4" />
+                <path d="M30,0 v30 M0,15 h60" stroke="#fff" stroke-width="10" />
+                <path d="M30,0 v30 M0,15 h60" stroke="#C8102E" stroke-width="6" />
+            </g>
+        </symbol>
+
+
     </svg>