dalfuss
/
oc.dalfuss.link
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added previews for gallery, switched images around & changed text

This commit is contained in:
Sam Dalfuss 2025-04-14 09:20:06 +02:00
parent eea4ba3f3d
commit 26e19298a5
9 changed files with 156 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
Jax.html
View File

@ -37,28 +37,46 @@
<!-- /// main content///--> <!-- /// main content///-->
<div class="row"> <div class="row">
<!-- /// Character image /// -->
<div class="col-sm-5"> <div class="col-sm-5">
<!--image--> <!-- Main card -->
<div class="card bg-faded character-image character-image-jax image-credit-icon"> <div
<a href="./img/jax.png" class="character-image character-image-jax lightbox" data-caption="Art by @river_stubs@instagram.com" data-group="gallery"> class="card bg-dark text-white character-image character-image-jax image-credit-icon position-relative">
<!--Image credit--> <a href="./img/jax.png" class="character-image character-image-jax lightbox"
data-caption="Art by @river_stubs@instagram.com" data-group="gallery">
<span class="image-credit"> <span class="image-credit">
<i class="fa-solid fa-image"></i> <i class="fa-solid fa-image"></i>
</span> </span>
</a> </a>
<!-- Mini squares with background images -->
<div class="d-flex w-100 p-2">
<a href="./img/jax_yume.png" class="lightbox flex-fill mx-1 rounded bg-secondary mini-bg-box"
style="background-image: url('./img/jax_yume_thumb.png'); "
data-caption="Art by vgen.co/yumeshirokuro" data-group="gallery"></a>
<!--top-right decor--> <a href="./img/jax_bulge.png" class="lightbox flex-fill mx-1 rounded bg-secondary mini-bg-box"
style="background-image: url('./img/jax_bulge_thumb.png'); "
data-caption="Art by linktr.ee/lontongs_" data-group="gallery"></a>
<a href="./img/jax_daki.jpg" class="lightbox flex-fill mx-1 rounded bg-secondary mini-bg-box"
style="background-image: url('./img/jax_daki_thumb.png'); "
data-caption="Art by Ori Ottero (orifans.com)" data-group="gallery"></a>
</div>
<!-- Top-right and bottom-left decor -->
<div class="p-2 decor-tr"></div> <div class="p-2 decor-tr"></div>
<!--Bottom-left decor-->
<div class="p-2 decor-bl"></div> <div class="p-2 decor-bl"></div>
</div>
</div> </div>
</div>
<!-- /// End Character image /// --> <!-- /// End Character image /// -->
@ -76,7 +94,7 @@
<!--basic info--> <!--basic info-->
<div <div
class="d-flex flex-wrap align-items-center text-white py-1 px-2 mb-2 character-info character-info-jax-light"> class="d-flex flex-wrap align-items-center text-white py-1 px-2 mb-2 character-info character-info-jax-light">
Nonbinary (they/them) <!--Gender Identity and Pronouns--> Nonbinary (they/them) | Pansexual <!--Gender Identity, Pronouns and Sexuality-->
<i class="ml-auto fa-solid fa-comment"></i> <i class="ml-auto fa-solid fa-comment"></i>
</div> </div>
@ -117,11 +135,10 @@
<p>✨slut✨</p> <p>✨slut✨</p>
<p> <p>
Jax is my pansexual, nonbinary Sea Elf OC. They started out as my PC in our current Jax is my pansexual, nonbinary Sea Elf OC. They started out as my PC in our current
Dungeons and Dragons campaign and turned into my first actual OC pretty quickly. Dungeons and Dragons campaign and turned into my first actual OC and now <a
They love their Grandpa more than anyone in the world, they're afraid of heights and href="https://link.jaxoff.tv" target="_blank">VTube Avatar</a> pretty quickly.
a huge slut lol. There are two version of Jax. Pirate and Femboy. This page is about Femboy Jax.
</p> </p>
</div> </div>
</div> </div>
<!-- /// End About /// --> <!-- /// End About /// -->
@ -183,25 +200,30 @@
<hr class="my-2" style="border-width:3px;border-radius:5px;"> <hr class="my-2" style="border-width:3px;border-radius:5px;">
<p class="text-center" style="font-weight: bold;font-style: italic; font-size: 2em;">"I was not made to be subtle."</p> <p class="text-center"
style="font-weight: bold;font-style: italic; font-size: 2em;">"I was not
made to be subtle."</p>
<hr class="my-2" style="border-width:3px;border-radius:5px;"> <hr class="my-2" style="border-width:3px;border-radius:5px;">
<a href="https://www.youtube.com/watch?v=pa14VNsdSYM" target="_blank" class="link-song"> <a href="https://www.youtube.com/watch?v=pa14VNsdSYM" target="_blank"
class="link-song">
<i class="fa-solid fa-play"></i> <i class="fa-solid fa-play"></i>
Only Girl (In The World) - Rihanna Only Girl (In The World) - Rihanna
</a> </a>
<br class="mb-2"> <br class="mb-2">
<a href="https://www.youtube.com/watch?v=n3M4GrEEQTI" target="_blank" class="link-song"> <a href="https://www.youtube.com/watch?v=n3M4GrEEQTI" target="_blank"
class="link-song">
<i class="fa-solid fa-play"></i> <i class="fa-solid fa-play"></i>
Bubblegum Bitch - MARINA Bubblegum Bitch - MARINA
</a> </a>
<br class="mb-2"> <br class="mb-2">
<a href="https://www.youtube.com/watch?v=6p-lDYPR2P8" target="_blank" class="link-song"> <a href="https://www.youtube.com/watch?v=6p-lDYPR2P8" target="_blank"
class="link-song">
<i class="fa-solid fa-play"></i> <i class="fa-solid fa-play"></i>
Material Girl - Madonna Material Girl - Madonna
</a> </a>
@ -244,7 +266,7 @@
<p> <p>
<i class="fa-regular fa-circle"></i> <i class="fa-regular fa-circle"></i>
Being the person who gave Jax their first guitar, Jax absolutely adores their Grandpa. They own a bar in which they work as a bartender.
</p> </p>
</div> </div>
@ -265,17 +287,20 @@
<!--Colour 1--> <!--Colour 1-->
<div class="col m-1"> <div class="col m-1">
<div class="color light" style="background-color: #A8C5DB;">Skin<br>#A8C5DB</div> <div class="color light" style="background-color: #A8C5DB;">Skin<br>#A8C5DB
</div>
</div> </div>
<!--Colour 2--> <!--Colour 2-->
<div class="col m-1"> <div class="col m-1">
<div class="color light" style="background-color: #F5A9B8;">Dyed Hair<br>#F5A9B8</div> <div class="color light" style="background-color: #F5A9B8;">Dyed
Hair<br>#F5A9B8</div>
</div> </div>
<!--Colour 3--> <!--Colour 3-->
<div class="col m-1"> <div class="col m-1">
<div class="color" style="background-color: #12354B;">Natural Hair<br>#12354B</div> <div class="color" style="background-color: #12354B;">Natural
Hair<br>#12354B</div>
</div> </div>
</div> </div>
@ -288,7 +313,8 @@
<!--Colour 5--> <!--Colour 5-->
<div class="col m-1"> <div class="col m-1">
<div class="color" style="background-color: #12404B;">Freckles<br>#12404B</div> <div class="color" style="background-color: #12404B;">Freckles<br>#12404B
</div>
</div> </div>
<!--Colour 6 <!--Colour 6
@ -303,7 +329,8 @@
<div class="col m-1 color-download" style="background-color: #42769E;"> <div class="col m-1 color-download" style="background-color: #42769E;">
<a href="./assets/jax_swatch.ase" class="text-decoration-none text-reset"> <a href="./assets/jax_swatch.ase" class="text-decoration-none text-reset">
<b> <b>
<i class="fa-solid fa-link"></i> <i class="fa-solid fa-palette"></i> <br/> <i class="fa-solid fa-link"></i> <i class="fa-solid fa-palette"></i>
<br />
Download Colour Palette (.ase) Download Colour Palette (.ase)
</b> </b>
</a> </a>
@ -312,7 +339,8 @@
<div class="col m-1 color-download" style="background-color: #42769E;"> <div class="col m-1 color-download" style="background-color: #42769E;">
<a href="./assets/jax_swatch.aco" class="text-decoration-none text-reset"> <a href="./assets/jax_swatch.aco" class="text-decoration-none text-reset">
<b> <b>
<i class="fa-solid fa-link"></i> <i class="fa-solid fa-palette"></i> <br/> <i class="fa-solid fa-link"></i> <i class="fa-solid fa-palette"></i>
<br />
Download Colour Palette (.aco) Download Colour Palette (.aco)
</b> </b>
</a> </a>
@ -388,18 +416,10 @@
</div> </div>
<!--Images for Gallery--> <!--Images for Gallery-->
<a href="./img/jax_ori.png" class="lightbox img-invisible" data-caption="Art by Ori Ottero (orifans.com)" <a href="./img/jax_chibi1.png" class="lightbox img-invisible" data-caption="Art by vgen.co/yumeshirokuro" data-group="gallery"></a>
data-group="gallery"></a> <a href="./img/jax_chibi2.png" class="lightbox img-invisible" data-caption="Art by vgen.co/yumeshirokuro" data-group="gallery"></a>
<a href="./img/jax_yume.png" class="lightbox img-invisible" data-caption="Art by @yumeshirokuro.bsky.social" <a href="./img/jax_plush.png" class="lightbox img-invisible" data-caption="Art by Ori Ottero (orifans.com)" data-group="gallery"></a>
data-group="gallery"></a> <a href="./img/jax_yan.png" class="lightbox img-invisible" data-caption="Art by @yanorion@instagram.com" data-group="gallery"></a>
<a href="./img/jax_skhema.png" class="lightbox img-invisible" data-caption="Art by @_skhema@instagram.com"
data-group="gallery"></a>
<a href="./img/jax_plush.png" class="lightbox img-invisible" data-caption="Art by Ori Ottero (orifans.com)"
data-group="gallery"></a>
<a href="./img/jax_chibi1.png" class="lightbox img-invisible" data-caption="Art by @yumeshirokuro.bsky.social"
data-group="gallery"></a>
<a href="./img/jax_chibi2.png" class="lightbox img-invisible" data-caption="Art by @yumeshirokuro.bsky.social"
data-group="gallery"></a>
<script> <script>
const colors = document.querySelectorAll(".color"); const colors = document.querySelectorAll(".color");
@ -432,13 +452,11 @@
</script> </script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
crossorigin="anonymous">
</script> </script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous">
crossorigin="anonymous">
</script> </script>
<script src="./js/parvus.js"></script> <script src="./js/parvus.js"></script>

9
css/custom.css
View File

@ -160,7 +160,7 @@ small {
width: 60px; width: 60px;
position: absolute; position: absolute;
left: -20px; left: -20px;
bottom: 30px; bottom: 120px;
} }
.image-credit { .image-credit {
@ -286,3 +286,10 @@ small {
.test11 { .test11 {
display: block; display: block;
} }
.mini-bg-box {
height: 5em;
background-size: cover; /* Ensures the image covers the whole box */
background-position: center; /* Keeps the image centered */
background-repeat: no-repeat; /* Prevents tiling */
}

BIN
img/jax_bulge.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
img/jax_bulge_thumb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 247 KiB

BIN
img/jax_daki.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 107 KiB

BIN
img/jax_daki_thumb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 307 KiB

BIN
img/jax_ori.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 MiB

BIN
img/jax_yan.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 206 KiB

BIN
img/jax_yume_thumb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 888 KiB