rework #11
|
|
@ -9,11 +9,12 @@
|
|||
|
||||
}
|
||||
|
||||
display-imagebody,html{
|
||||
-ms-scroll-chaining:none;
|
||||
overscroll-behavior:none;
|
||||
margin:0;
|
||||
padding:0;
|
||||
display-imagebody,
|
||||
html {
|
||||
-ms-scroll-chaining: none;
|
||||
overscroll-behavior: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: var(--dark-bg);
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
|
|
@ -35,34 +36,26 @@ display-imagebody,html{
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
.background-canvas {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.page-item {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.display-image{
|
||||
width:192px;
|
||||
height:192px;
|
||||
display:block;
|
||||
/*border-radius:50%;*/
|
||||
-o-object-fit:cover;
|
||||
object-fit:cover
|
||||
.display-image {
|
||||
width: 15em;
|
||||
height: auto;
|
||||
display: block;
|
||||
border-radius: 0%;
|
||||
-o-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*/
|
||||
table-layout: fixed; /*Optional*/
|
||||
border-spacing: 10px; /*Optional*/
|
||||
width: 100%;
|
||||
/*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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
Before Width: | Height: | Size: 357 B |
58
index.html
58
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>
|
||||
<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" />
|
||||
AuDHD, Queer, Nonbinary Elftwink VTuber :3
|
||||
</p>
|
||||
|
||||
<a id="merch">
|
||||
<h1 class="separator" title="Super cooler neuer Merch!!!">
|
||||
Merch!!!
|
||||
</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 daki" href="https://11tw.ink/daki" data-id="261685" data-type="page_item">
|
||||
<svg class="link-each-image">
|
||||
<use href="#eggplant"></use>
|
||||
<use href="#svg-eggplant"></use>
|
||||
</svg>
|
||||
|
||||
<span class="item-title text-center">[18+] JAXOFF DAKIMAKURA OMG</span>
|
||||
</a>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue