waifu/dnd-chars
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor code structure for improved readability and maintainability

Browse source
This commit is contained in:
waifu 2025-09-06 00:04:38 -03:00
parent e1bfb87360
commit df71903d8a
3 changed files with 139 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
images/ulud.jpg
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 49 KiB

65
index.html
View file

@ -2,17 +2,14 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ulud & Arcaena</title> <title>Ulud & Arcaena</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Georgia&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<header> <header>
<h1>Ulud & Arcaena</h1> <h1>Ulud & Arcaena</h1>
<nav>
<a href="#ulud">Ulud</a>
<a href="#arcaena">Arcaena</a>
<a href="#gallery">Gallery</a>
</nav>
</header> </header>
<main> <main>
@ -25,13 +22,12 @@
</p> </p>
</section> </section>
<!-- Ulud Section --> <!-- Ulud -->
<section id="ulud" class="character"> <section id="ulud" class="character">
<img src="images/ulud.jpg" alt="Ulud portrait"> <div class="char-text">
<div class="bio">
<h2>Ulud — The Wandering Soul</h2> <h2>Ulud — The Wandering Soul</h2>
<p> <p>
Drop Ulud’s backstory here. Who is he? Where has he been? What drives him? Write Ulud’s backstory here. Describe his class, struggles, and vibe.
</p> </p>
<ul> <ul>
<li><strong>Race:</strong> ???</li> <li><strong>Race:</strong> ???</li>
@ -39,37 +35,48 @@
<li><strong>Alignment:</strong> ???</li> <li><strong>Alignment:</strong> ???</li>
</ul> </ul>
</div> </div>
</section> <div class="char-img">
<img src="images/ulud.jpg" alt="Ulud portrait">
<!-- Arcaena Section -->
<section id="arcaena" class="character alt">
<img src="images/arcaena.jpeg" alt="Arcaena portrait">
<div class="bio">
<h2>Arcaena — The Silent Flame</h2>
<p>
Drop Arcaena’s backstory here. Her elven grace, her path, her hidden heart.
</p>
<ul>
<li><strong>Race:</strong> Elf</li>
<li><strong>Class:</strong> ???</li>
<li><strong>Alignment:</strong> ???</li>
</ul>
</div> </div>
</section> </section>
<!-- Gallery Section --> <!-- Arcaena -->
<section id="arcaena" class="character alt">
<div class="char-text">
<h2>Arcaena — The Silent Flame</h2>
<p>
Arcaena is a short 1.5m tall elf with a slender build.
Her vibe is empty, mysterious, and a bit eerie.
She reads books out of habit, not passion.
Usually just wanders into situations, and then asks herself "Why am I in this mess?"
Incredibly intelligent and useful, but non talkative, never eager and just plain weird.
</p>
<ul>
<li><strong>Race:</strong> Elf</li>
<li><strong>Class:</strong> Wizard</li>
<li><strong>Alignment:</strong> Chaotic neutral.</li>
</ul>
</div>
<div class="char-img">
<img src="images/arcaena.jpeg" alt="Arcaena portrait">
</div>
</section>
<!-- Gallery -->
<section id="gallery" class="gallery"> <section id="gallery" class="gallery">
<h2>Gallery</h2> <h2>Gallery</h2>
<div class="grid"> <div class="grid">
<img src="images/art1.png" alt="Campaign art 1"> <img src="images/art1.png">
<img src="images/art2.png" alt="Campaign art 2"> <img src="images/art2.png">
<img src="images/art3.png" alt="Campaign art 3"> <img src="images/art3.png">
</div> </div>
</section> </section>
</main> </main>
<footer> <footer>
<p>Made with ♥</p> <p>© 2025 by <a href="https://creativecommons.org">Waifu</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"></p>
</footer> </footer>
</body> </body>
</html> </html>

93
style.css
View file

@ -1,3 +1,4 @@
/* Global */
body { body {
font-family: 'Georgia', serif; font-family: 'Georgia', serif;
margin: 0; margin: 0;
@ -6,6 +7,11 @@ body {
line-height: 1.6; line-height: 1.6;
} }
h1, h2 {
font-family: 'Cinzel', serif;
margin: 0.5em 0;
}
header { header {
background: #222; background: #222;
padding: 1em; padding: 1em;
@ -17,7 +23,7 @@ header {
nav a { nav a {
color: #ffcc66; color: #ffcc66;
margin: 0 1em; margin: 0 0.8em;
text-decoration: none; text-decoration: none;
} }
@ -31,40 +37,66 @@ nav a:hover {
background: #111; background: #111;
} }
/* Character Sections */
.character { .character {
display: flex; display: flex;
align-items: flex-start; flex-wrap: wrap;
padding: 3em 2em; justify-content: center;
align-items: center;
padding: 3em 1em;
gap: 2em;
border-bottom: 1px solid #333; border-bottom: 1px solid #333;
} }
.character img { .char-text {
width: 250px; flex: 1 1 300px;
margin-right: 2em; max-width: 500px;
}
.char-img img {
width: 100%;
max-width: 300px;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.7); box-shadow: 0 0 12px rgba(0,0,0,0.7);
} }
.character.alt { /* 🌿 Ulud — Turtle Druid */
flex-direction: row-reverse; #ulud {
background: #1a1a1a; background: linear-gradient(135deg, #030504, #0c2216);
} }
.character.alt img { #ulud h2 {
margin-right: 0; color: #4de68a;
margin-left: 2em;
} }
#ulud ul li strong {
color: #39c16d;
}
/* 🌌 Arcaena — Wizard Elf */
#arcaena {
background: linear-gradient(135deg, #030303, #1a233f);
}
#arcaena h2 {
color: #6da7ff;
}
#arcaena ul li strong {
color: #3e72d9;
}
/* Gallery */
.gallery { .gallery {
padding: 3em 2em; padding: 3em 1em;
text-align: center; text-align: center;
} }
.gallery .grid { .gallery .grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1em; gap: 1em;
margin-top: 1.5em; margin-top: 2em;
} }
.gallery img { .gallery img {
@ -73,6 +105,7 @@ nav a:hover {
box-shadow: 0 0 10px rgba(0,0,0,0.7); box-shadow: 0 0 10px rgba(0,0,0,0.7);
} }
/* Footer */
footer { footer {
text-align: center; text-align: center;
padding: 1em; padding: 1em;
@ -80,30 +113,20 @@ footer {
font-size: 0.9em; font-size: 0.9em;
} }
/* 📱 RESPONSIVE TWEAKS */ /* Responsive Tweaks */
@media (max-width: 768px) { @media (max-width: 768px) {
nav a {
display: inline-block;
margin: 0.5em;
}
.character { .character {
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
} }
.character img { .char-img img {
margin: 0 0 1.5em 0; max-width: 250px;
width: 70%;
max-width: 300px;
}
.character.alt {
flex-direction: column;
}
.character.alt img {
margin: 0 0 1.5em 0;
}
nav a {
display: inline-block;
margin: 0.5em;
} }
} }
@ -113,7 +136,7 @@ footer {
} }
h1 { h1 {
font-size: 1.5em; font-size: 1.6em;
} }
h2 { h2 {