alyx
/
11tw.ink
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

reworked HTML & CSS

This commit is contained in:
Alyx 2026-04-07 09:26:12 +02:00
parent 8af4cee0c8
commit 02c683d24f
3 changed files with 100 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
assets/css/custom.css
View File

@ -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
assets/images/anilist.svg
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 357 B

58
index.html
View File

@ -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>